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

export const metadata: Metadata = {
  title: `Cases de Engenharia de Software, Next.js e IoT | ${siteName}`,
  description:
    "Cases selecionados em engenharia de software, Next.js, IoT, integracoes e software para contextos criticos. Portfolio tecnico com foco em clareza, performance e execucao.",
  alternates: {
    canonical: `${siteUrl}/cases`,
  },
  openGraph: {
    title: `Cases de Engenharia de Software, Next.js e IoT | ${siteName}`,
    description:
      "Cases selecionados em engenharia de software, Next.js, IoT, integracoes e software para contextos criticos.",
    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:
          "Colecao de cases em Next.js, IoT, integracoes e software para operacoes criticas.",
      },
      {
        "@type": "ItemList",
        itemListElement: caseStudies.map((caseStudy, index) => ({
          "@type": "ListItem",
          position: index + 1,
          name: caseStudy.title,
          url: caseStudy.demoUrl ?? caseStudy.githubUrl ?? `${siteUrl}/cases`,
        })),
      },
    ],
  };

  return (
    <main>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <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, integracoes e produtos conectados.
            </h1>
            <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
              Esta pagina organiza projetos com leitura mais indexavel e comercial, conectando stack,
              contexto tecnico e tipo de problema resolvido.
            </p>
          </div>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <div className="ds-grid-2">
            {caseStudies.map((caseStudy) => (
              <article key={caseStudy.id} className="ds-card">
                <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) => (
                    <MagneticButton key={item} as="li" className="ds-tag" strength={0.15}>
                      {item}
                    </MagneticButton>
                  ))}
                </ul>
                <div className="mt-sp-6 flex flex-wrap gap-sp-3">
                  {caseStudy.demoUrl ? (
                    <MagneticButton as="a" href={caseStudy.demoUrl} className="ds-link ds-link-accent" target="_blank" rel="noreferrer" strength={0.25}>
                      Abrir projeto
                    </MagneticButton>
                  ) : null}
                  {caseStudy.githubUrl ? (
                    <MagneticButton as="a" href={caseStudy.githubUrl} className="ds-link ds-link-muted" target="_blank" rel="noreferrer" strength={0.2}>
                      Ver codigo
                    </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 servicos
            </MagneticButton>
            <MagneticButton as="a" href="/#contact" className="ds-link ds-link-muted" strength={0.2}>
              Ir para contato
            </MagneticButton>
          </div>
        </div>
      </section>
    </main>
  );
}