import type { Metadata } from "next";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { SiteFrame } from "@/app/components/SiteFrame/SiteFrame";
import { JsonLd } from "@/app/lib/structured-data";
import { CaseStudyCard } from "@/app/components/CaseStudyCard/CaseStudyCard";
import { AnimatedHeader } from "@/app/components/Motion/AnimatedHeader";
import { AnimatedSection } from "@/app/components/Motion/AnimatedSection";
import { getAllCaseStudies } from "@/app/lib/data/case-studies";
import styles from "./case-studies.module.css";

export const metadata: Metadata = {
  title: "Case Studies",
  description:
    "How Meliorate designs and ships production systems — the constraints that shaped each build, the decisions we defend, and what went live.",
  alternates: { canonical: "/case-studies" },
  openGraph: {
    title: "Meliorate Case Studies",
    description:
      "Production systems, written up as engineering: the constraints, the decisions, and what shipped.",
    url: "/case-studies",
  },
};

export default function CaseStudiesPage() {
  const studies = getAllCaseStudies();

  return (
    <SiteFrame>
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          itemListElement: [
            { "@type": "ListItem", position: 1, name: "Home", item: "https://meliorate.pro" },
            {
              "@type": "ListItem",
              position: 2,
              name: "Case Studies",
              item: "https://meliorate.pro/case-studies",
            },
          ],
        }}
      />
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "ItemList",
          name: "Meliorate Case Studies",
          itemListElement: studies.map((study, index) => ({
            "@type": "ListItem",
            position: index + 1,
            name: `${study.client} — ${study.headline}`,
            url: `https://meliorate.pro/case-studies/${study.slug}`,
          })),
        }}
      />

      <section className={styles.pageSection}>
        <div className={styles.container}>
          <AnimatedHeader className={styles.hero}>
            <span className={styles.eyebrow}>Case Studies</span>
            <h1 className={styles.title}>Systems We Shipped</h1>
            <p className={styles.description}>
              Written up as engineering rather than marketing: the constraint that shaped each
              build, the decisions we would defend in review, and what actually went live. Where a
              number appears, it comes from the repository.
            </p>
          </AnimatedHeader>

          <div className={styles.grid}>
            {studies.map((study) => (
              <CaseStudyCard key={study.slug} study={study} />
            ))}
          </div>

          <AnimatedSection className={styles.ctaBand}>
            <div>
              <p className={styles.ctaEyebrow}>Working on something similar</p>
              <h2>Have a constraint that rules out the easy design?</h2>
              <p>
                Those are the projects we do best. Tell us what the system has to guarantee, and
                we will tell you what it costs to guarantee it.
              </p>
            </div>
            <Link href="/contact" className={styles.primaryButton}>
              Start a Conversation <ArrowRight size={17} />
            </Link>
          </AnimatedSection>
        </div>
      </section>
    </SiteFrame>
  );
}