import type { Metadata } from "next";
import Link from "next/link";
import HeroBackground from "@/app/components/cinematic/HeroBackground";
import MagneticButton from "@/app/components/cinematic/MagneticButton";
import { safeJsonLd } from "@/lib/jsonld";
import { buildBreadcrumbList } from "@/lib/seo";
import { caseStudies, intentCtas, siteName, siteUrl } from "@/lib/site-content";

const pageUrl = `${siteUrl}/cases`;
const pageTitle = "Cases de Engenharia de Software, Next.js e IoT";
const pageDescription =
  "Seis projetos mostram aplicações de engenharia de software em web, desktop, IoT, integrações e experiências orientadas a dados.";

export const metadata: Metadata = {
  title: pageTitle,
  description: pageDescription,
  alternates: {
    canonical: pageUrl,
  },
  openGraph: {
    locale: "pt_BR",
    title: pageTitle,
    description: pageDescription,
    url: pageUrl,
    siteName,
    type: "website",
  },
};

export default function CasesPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "CollectionPage",
        "@id": `${pageUrl}#page`,
        name: pageTitle,
        url: pageUrl,
        description: pageDescription,
      },
      {
        "@type": "ItemList",
        itemListElement: caseStudies.map((caseStudy, index) => ({
          "@type": "ListItem",
          position: index + 1,
          name: caseStudy.title,
          url: `${pageUrl}/${caseStudy.id}`,
        })),
      },
      buildBreadcrumbList(pageUrl, [
        ["Início", siteUrl],
        ["Cases", pageUrl],
      ] as const),
    ],
  };

  return (
    <main>
      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>

      <section className="ds-section ds-section-dark relative min-h-[340px] overflow-hidden">
        <HeroBackground />
        <div className="ds-section-shell relative z-10">
          <div className="max-w-[860px]">
            <nav aria-label="Breadcrumb" className="mb-sp-6">
              <ol className="flex flex-wrap items-center gap-sp-2 text-sm">
                <li>
                  <Link className="ds-link ds-link-muted" href="/">
                    Início
                  </Link>
                </li>
                <li className="flex items-center gap-sp-2">
                  <span aria-hidden="true">/</span>
                  <Link
                    aria-current="page"
                    className="ds-link ds-link-muted"
                    href="/cases"
                  >
                    Cases
                  </Link>
                </li>
              </ol>
            </nav>
            <p className="ds-eyebrow">Selected work</p>
            <h1 className="ds-section-title max-w-[14ch] text-balance text-white">
              Cases em software, Next.js, integrações e produtos conectados.
            </h1>
            <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
              {pageDescription}
            </p>
          </div>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <div className="ds-grid-2 items-start">
            {caseStudies.map((caseStudy) => (
              <article key={caseStudy.id} className="ds-card !h-auto">
                <div className="ds-kicker">{caseStudy.title}</div>
                <h2 className="ds-card-title">{caseStudy.subtitle}</h2>
                <p className="ds-copy">{caseStudy.summary}</p>
                <p className="mt-sp-4 text-[13px] leading-7 text-[var(--meta)]">
                  {caseStudy.impact}
                </p>
                <ul className="ds-tags mt-sp-6">
                  {caseStudy.stack.map((item) => (
                    <li key={item} className="ds-tag">
                      {item}
                    </li>
                  ))}
                </ul>
                <div className="mt-sp-6 flex flex-wrap gap-sp-3">
                  <Link
                    href={`/cases/${caseStudy.id}`}
                    className="ds-link ds-link-accent"
                  >
                    Ler case
                  </Link>
                  {caseStudy.demoUrl ? (
                    <MagneticButton
                      as="a"
                      href={caseStudy.demoUrl}
                      className="ds-link ds-link-muted"
                      target="_blank"
                      rel="noreferrer"
                      strength={0.25}
                    >
                      Abrir projeto
                    </MagneticButton>
                  ) : null}
                </div>
              </article>
            ))}
          </div>

          <div className="mt-sp-10 flex flex-wrap gap-sp-3">
            <MagneticButton
              as="a"
              href={intentCtas.project.href}
              className="ds-link ds-link-accent"
              strength={0.25}
            >
              {intentCtas.project.label}
            </MagneticButton>
            <MagneticButton
              as="a"
              href={intentCtas.consulting.href}
              className="ds-link ds-link-muted"
              strength={0.2}
            >
              {intentCtas.consulting.label}
            </MagneticButton>
          </div>
        </div>
      </section>
    </main>
  );
}