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 { caseStudies, siteName, siteUrl } from "@/lib/site-content";

export const metadata: Metadata = {
  title: "Cases de Engenharia de Software, Next.js e IoT",
  description:
    "Cases selecionados em engenharia de software, Next.js, IoT, integrações e software para contextos críticos. Portfolio técnico com foco em clareza, performance e execução.",
  alternates: {
    canonical: `${siteUrl}/cases`,
  },
  openGraph: {
    title: "Cases de Engenharia de Software, Next.js e IoT",
    description:
      "Cases selecionados em engenharia de software, Next.js, IoT, integrações e software para contextos críticos.",
    url: `${siteUrl}/cases`,
    siteName,
    type: "website",
  },
};

export default function CasesPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "CollectionPage",
        "@id": `${siteUrl}/cases#page`,
        name: "Cases de engenharia de software",
        url: `${siteUrl}/cases`,
        description:
          "Coleção de cases em Next.js, IoT, integrações e software para operações críticas.",
      },
      {
        "@type": "ItemList",
        itemListElement: caseStudies.map((caseStudy, index) => ({
          "@type": "ListItem",
          position: index + 1,
          name: caseStudy.title,
          url: `${siteUrl}/cases/${caseStudy.id}`,
        })),
      },
      {
        "@type": "BreadcrumbList",
        itemListElement: [
          { "@type": "ListItem", position: 1, name: "Início", item: siteUrl },
          {
            "@type": "ListItem",
            position: 2,
            name: "Cases",
            item: `${siteUrl}/cases`,
          },
        ],
      },
    ],
  };

  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]">
            <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)]">
              Esta página organiza projetos com leitura mais indexável e
              comercial, conectando stack, contexto técnico e tipo de problema
              resolvido.
            </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="/servicos"
              className="ds-link ds-link-accent"
              strength={0.25}
            >
              Ver serviços
            </MagneticButton>
            <MagneticButton
              as="a"
              href="/#contact"
              className="ds-link ds-link-muted"
              strength={0.2}
            >
              Ir para contato
            </MagneticButton>
          </div>
        </div>
      </section>
    </main>
  );
}