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

const pageUrl = `${siteUrl}/servicos`;
const pageTitle = "Sites, Sistemas Web e Aplicativos Mobile e Desktop";
const pageDescription =
  "Desenvolvimento de sites, sistemas web, aplicativos mobile e desktop para Windows e Linux. Integrações, melhorias e consultoria para o seu negócio.";

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

export default function ServicesIndexPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "CollectionPage",
        "@id": `${pageUrl}#page`,
        name: pageTitle,
        url: pageUrl,
        description: pageDescription,
      },
      {
        "@type": "ItemList",
        itemListElement: serviceHubLinks.map((service, index) => ({
          "@type": "ListItem",
          position: index + 1,
          url: `${siteUrl}${service.href}`,
          name: service.label,
        })),
      },
      buildBreadcrumbList(pageUrl, [
        ["Início", siteUrl],
        ["Serviços", 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="/servicos"
                  >
                    Serviços
                  </Link>
                </li>
              </ol>
            </nav>
            <p className="ds-eyebrow">Serviços de desenvolvimento</p>
            <h1 className="ds-section-title max-w-[18ch] text-balance text-white">
              Da presença na internet ao sistema que move seu negócio.
            </h1>
            <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
              Sites e sistemas web, aplicativos mobile e aplicativos desktop
              para Windows e Linux. Também integro ferramentas e melhoro
              software que já está em uso. Começamos pelo que você precisa
              resolver, não pela tecnologia.
            </p>
          </div>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <div className="max-w-[72ch]">
            <h2 className="ds-card-title !mt-0">O que você precisa fazer?</h2>
            <p className="ds-copy">
              Conheça as possibilidades abaixo. Cada serviço explica para quem
              faz sentido, exemplos de uso, escopo e etapas de trabalho. Os
              detalhes técnicos ficam disponíveis para aprofundar a conversa.
            </p>
          </div>
          <div className="mt-sp-8 divide-y divide-[var(--border)] border-y border-[var(--border)]">
            {serviceHubLinks.map((service, index) => (
              <article
                key={service.href}
                className="grid gap-sp-4 py-sp-6 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] md:gap-sp-8"
              >
                <div className="min-w-0">
                  <p className="ds-kicker" aria-hidden="true">
                    {String(index + 1).padStart(2, "0")}
                  </p>
                  <h3 className="ds-card-title">
                    <Link
                      href={service.href}
                      className="underline decoration-[var(--slash)] decoration-2 underline-offset-4 hover:decoration-[var(--ink)]"
                    >
                      {service.label}
                    </Link>
                  </h3>
                </div>
                <p className="ds-copy !mt-0">{service.description}</p>
              </article>
            ))}
          </div>
          <div className="mt-sp-8 max-w-[72ch]">
            <h2 className="ds-card-title">
              Ainda não sabe qual caminho seguir?
            </h2>
            <p className="ds-copy">
              Conte como funciona sua rotina e o que gostaria de mudar.
              Definimos juntos a primeira entrega, as plataformas atendidas e os
              limites do projeto antes de fechar a proposta.
            </p>
            <Link className="ds-link ds-link-accent mt-sp-5" href="/#contact">
              Conversar sobre minha ideia
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}