import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import HeroBackground from "@/app/components/cinematic/HeroBackground";
import MagneticButton from "@/app/components/cinematic/MagneticButton";
import WhatsAppLink from "@/app/components/WhatsAppLink";
import { safeJsonLd } from "@/lib/jsonld";
import { buildBreadcrumbList, buildServiceJsonLd } from "@/lib/seo";
import {
  getRelatedCases,
  getServicePage,
  servicePages,
  siteName,
  siteUrl,
} from "@/lib/site-content";

interface ServicePageProps {
  params: Promise<{
    slug: string;
  }>;
}

export function generateStaticParams() {
  return servicePages.map((service) => ({ slug: service.slug }));
}

export async function generateMetadata({
  params,
}: ServicePageProps): Promise<Metadata> {
  const { slug } = await params;
  const service = getServicePage(slug);

  if (!service) {
    return {
      title: `Serviço não encontrado`,
    };
  }

  const url = `${siteUrl}/servicos/${service.slug}`;

  return {
    title: service.seoTitle,
    description: service.metaDescription,
    alternates: {
      canonical: url,
    },
    openGraph: {
      title: service.seoTitle,
      description: service.metaDescription,
      url,
      siteName,
      type: "article",
    },
    twitter: {
      card: "summary_large_image",
      title: service.seoTitle,
      description: service.metaDescription,
    },
  };
}

export default async function ServicePage({ params }: ServicePageProps) {
  const { slug } = await params;
  const service = getServicePage(slug);

  if (!service) {
    notFound();
  }

  const relatedCases = getRelatedCases(service.relatedCaseIds);
  const pageUrl = `${siteUrl}/servicos/${service.slug}`;

  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      buildServiceJsonLd(service),
      buildBreadcrumbList(pageUrl, [
        ["Início", siteUrl],
        ["Serviços", `${siteUrl}/servicos`],
        [service.navLabel, 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 className="ds-link ds-link-muted" href="/servicos">
                    Serviços
                  </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/${service.slug}`}
                  >
                    {service.navLabel}
                  </Link>
                </li>
              </ol>
            </nav>
            <p className="ds-eyebrow">{service.eyebrow}</p>
            <h1 className="ds-section-title max-w-[14ch] text-balance text-white">
              {service.headline}
            </h1>
            <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
              {service.answer}
            </p>
            <div className="mt-sp-8 flex flex-wrap gap-sp-3">
              <WhatsAppLink
                service={service.navLabel}
                placement="service_detail_hero"
                className="ds-link ds-link-accent min-h-12"
              >
                {service.ctaLabel} no WhatsApp
              </WhatsAppLink>
              <MagneticButton
                as="a"
                href="/cases"
                className="ds-link ds-link-muted"
                strength={0.2}
              >
                Ver casos relacionados
              </MagneticButton>
            </div>
            <p className="mt-sp-4 text-sm leading-6 text-white/70">
              Fale diretamente com Evandro. Abre uma conversa, sem precisar
              preencher um formulário. Atendimento remoto a partir de Garuva,
              SC.
            </p>
          </div>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <div className="ds-grid-2">
            <article className="ds-card">
              <h2 className="ds-card-title !mt-0">Para quem faz sentido</h2>
              <ul className="ds-list">
                {service.audience.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            </article>

            <article className="ds-card">
              <h2 className="ds-card-title !mt-0">O que podemos entregar</h2>
              <ul className="ds-list">
                {service.outcomes.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            </article>
          </div>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <div className="ds-grid-2">
            <article className="min-w-0">
              <div className="ds-kicker">Da conversa à entrega</div>
              <h2 className="ds-card-title">Como trabalhamos</h2>
              <ol className="mt-sp-5 list-decimal space-y-sp-4 pl-sp-5 text-sm leading-8 text-[var(--ink-80)]">
                {service.process.map((step) => (
                  <li key={step} className="pl-sp-2">
                    {step}
                  </li>
                ))}
              </ol>
            </article>

            <article className="min-w-0">
              <div className="ds-kicker">Possibilidades de uso</div>
              <h2 className="ds-card-title">Imagine na sua rotina</h2>
              <p className="ds-copy">
                Exemplos ilustrativos para ajudar a explicar o serviço, não
                projetos já entregues. O seu escopo será definido na conversa.
              </p>
              <ul className="ds-list">
                {service.examples.map((example) => (
                  <li key={example}>{example}</li>
                ))}
              </ul>
            </article>
          </div>
        </div>
        <div className="ds-section-shell mt-sp-8">
          <details className="border border-[var(--border)] bg-white/70 p-sp-5 md:p-sp-6">
            <summary className="cursor-pointer py-sp-2 text-base font-semibold leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--ink)]">
              Detalhes técnicos e tecnologias
            </summary>
            <div className="max-w-[80ch]">
              <ul className="ds-list">
                {service.technicalDetails.map((detail) => (
                  <li key={detail}>{detail}</li>
                ))}
              </ul>
              <p className="ds-copy">
                Tecnologias consideradas neste serviço. A seleção depende do
                problema e do ambiente; não é uma lista obrigatória para todo
                projeto.
              </p>
              <ul className="ds-tags" aria-label="Tecnologias do serviço">
                {service.stack.map((item) => (
                  <li key={item} className="ds-tag !whitespace-normal">
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </details>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <div className="ds-section-header">
            <div className="ds-section-meta">
              <p className="ds-eyebrow">Casos relacionados</p>
              <h2 className="ds-section-title">
                Projetos para conhecer meu trabalho
              </h2>
              <p className="ds-section-description">
                Referências de problemas e soluções relacionados. Cada projeto
                usa as tecnologias indicadas no próprio case; não representa
                todas as plataformas ou tecnologias oferecidas neste serviço.
              </p>
            </div>
          </div>

          <div className="ds-grid-2">
            {relatedCases.map((caseStudy) => (
              <article key={caseStudy.id} className="ds-card">
                <div className="ds-kicker">{caseStudy.title}</div>
                <h3 className="ds-card-title">{caseStudy.subtitle}</h3>
                <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 !whitespace-normal">
                      {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: {caseStudy.title}
                  </Link>
                  {caseStudy.demoUrl ? (
                    <a
                      href={caseStudy.demoUrl}
                      className="ds-link ds-link-accent"
                      target="_blank"
                      rel="noreferrer"
                    >
                      Abrir projeto: {caseStudy.title}
                    </a>
                  ) : null}
                  {caseStudy.githubUrl ? (
                    <a
                      href={caseStudy.githubUrl}
                      className="ds-link ds-link-muted"
                      target="_blank"
                      rel="noreferrer"
                    >
                      Ver código: {caseStudy.title}
                    </a>
                  ) : null}
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="ds-section ds-section-dark pb-sp-6">
        <div className="ds-section-shell">
          <div className="ds-card border-white/10 bg-[rgba(255,255,255,0.03)]">
            <div className="ds-kicker">Próximo passo</div>
            <h2 className="ds-card-title text-white">
              Conte o que você precisa resolver.
            </h2>
            <p className="ds-copy !text-[rgba(255,255,255,0.76)]">
              Pode ser uma ideia, uma tarefa que toma tempo ou um sistema que
              precisa melhorar. Não é preciso chegar com uma solução técnica.
              Atendo a partir de Garuva, no Norte de Santa Catarina, e
              remotamente.
            </p>
            <div className="mt-sp-6 flex flex-wrap gap-sp-3">
              <WhatsAppLink
                service={service.navLabel}
                placement="service_detail_footer"
                className="ds-link ds-link-accent min-h-12"
              >
                {service.ctaLabel} no WhatsApp
              </WhatsAppLink>
              <MagneticButton
                as="a"
                href="/servicos"
                className="ds-link ds-link-muted"
                strength={0.2}
              >
                Ver todos os serviços
              </MagneticButton>
            </div>
          </div>
        </div>
      </section>

      {service.faq && service.faq.length > 0 ? (
        <section className="ds-section">
          <div className="ds-section-shell">
            <div className="ds-section-header">
              <div className="ds-section-meta">
                <p className="ds-eyebrow">Dúvidas comuns</p>
                <h2 className="ds-section-title">Perguntas frequentes</h2>
                <p className="ds-section-description">
                  Respostas diretas às perguntas que costumam aparecer antes de
                  cada projeto começar.
                </p>
              </div>
            </div>

            <div className="ds-grid-2">
              {service.faq.map((item) => (
                <article key={item.question} className="ds-card">
                  <h3 className="ds-card-title">{item.question}</h3>
                  <p className="ds-copy">{item.answer}</p>
                </article>
              ))}
            </div>
          </div>
        </section>
      ) : null}
    </main>
  );
}