portifolio-evandrodevbr/app/servicos/[slug]/page.tsx

import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { getCaseMedia } from "@/app/cases/_components/case-media";
import {
  compactHero,
  heroWithMediaGrid,
} from "@/app/cases/_components/hero-styles";
import { Breadcrumb } from "@/app/components/Breadcrumb";
import {
  pageTop,
  primaryButton,
  secondaryButtonDark,
} from "@/app/components/button-styles";
import { Faq } from "@/app/components/Faq";
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
import WhatsAppLink from "@/app/components/WhatsAppLink";
import { safeJsonLd } from "@/lib/jsonld";
import {
  buildBreadcrumbList,
  buildPageSocialMetadata,
  buildServiceJsonLd,
} from "@/lib/seo";
import {
  buttonLabels,
  caseStudies,
  getRelatedCases,
  getServicePage,
  servicePages,
  siteUrl,
} from "@/lib/site-content";
import { ServiceDiagram } from "../_components/ServiceDiagram";
import { ServiceHeroCover } from "../_components/ServiceHeroCover";
import { ServiceOffer } from "../_components/ServiceOffer";
import { ServiceRelatedCases } from "../_components/ServiceRelatedCases";

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.metaTitle,
    description: service.metaDescription,
    ...buildPageSocialMetadata({
      url,
      title: service.metaTitle,
      description: service.metaDescription,
      type: "article",
    }),
  };
}

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

  if (!service) {
    notFound();
  }

  const relatedCases = getRelatedCases(service.relatedCaseIds);
  // capa do topo: o case escolhido para o serviço, se tiver captura gravada do aparelho pedido; senão, o esquema de fluxo
  const heroDevice = service.heroCase?.device ?? "desktop";
  const heroCase = caseStudies.find(
    ({ id }) =>
      id === service.heroCase?.id && Boolean(getCaseMedia(id, heroDevice)),
  );
  const diagram = heroCase ? undefined : service.diagram;
  const hasHeroSide = Boolean(heroCase || diagram);
  // o case da capa é citado pela legenda dela, e não ganha cartão em "Onde já apliquei isso"
  const hasCaseCards = relatedCases.some(({ id }) => id !== heroCase?.id);
  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 ${pageTop} ${
          hasHeroSide ? "" : compactHero
        }`}
      >
        <div
          className={`ds-section-shell ${hasHeroSide ? heroWithMediaGrid : ""}`}
        >
          <div className="max-w-[860px]">
            <Breadcrumb
              items={[
                { label: "Início", href: "/" },
                { label: "Serviços", href: "/servicos" },
                { label: service.navLabel, href: `/servicos/${service.slug}` },
              ]}
            />
            <p className="ds-eyebrow">{service.eyebrow}</p>
            <h1 className="ds-section-title max-w-[22ch] 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={primaryButton}
              >
                {buttonLabels.contact}
              </WhatsAppLink>
              {hasCaseCards ? (
                <a href="#casos-relacionados" className={secondaryButtonDark}>
                  Ver projetos parecidos
                </a>
              ) : null}
            </div>
            <p className="mt-sp-4 text-[15px] leading-6 text-white/70">
              O botão abre uma conversa no WhatsApp, sem formulário. Garuva e
              Joinville (SC) · atendimento remoto em todo o Brasil.
            </p>
          </div>
          {diagram ? (
            <ServiceDiagram kind={diagram} />
          ) : (
            <ServiceHeroCover
              caseStudy={heroCase}
              device={heroDevice}
              relevance={
                heroCase ? service.caseRelevance[heroCase.id] : undefined
              }
            />
          )}
        </div>
      </section>

      <ServiceRelatedCases
        cases={relatedCases}
        relevance={service.caseRelevance}
        experienceNote={service.experienceNote}
        heroCaseId={heroCase?.id}
      />

      <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 space-y-sp-2">
                {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 space-y-sp-2">
                {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-[15px] 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">
                Situações comuns em que este serviço ajuda. A sua será combinada
                na conversa.
              </p>
              <ul className="ds-list space-y-sp-2">
                {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 space-y-sp-2">
                {service.technicalDetails.map((detail) => (
                  <li key={detail}>{detail}</li>
                ))}
              </ul>
              <p className="ds-copy">
                Tecnologias que costumo usar neste serviço. A escolha depende do
                problema e do ambiente.
              </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>

      <ServiceOffer service={service} />

      <Faq items={service.faq} />

      <section className="ds-section ds-section-dark">
        <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 em Garuva e Joinville (SC) e remotamente, em todo o Brasil.
            </p>
            <div className="mt-sp-6 flex flex-wrap gap-sp-3">
              <WhatsAppLink
                service={service.navLabel}
                placement="service_detail_footer"
                className={primaryButton}
              >
                {buttonLabels.contact}
              </WhatsAppLink>
              <HoverPrefetchLink
                href="/servicos"
                className={secondaryButtonDark}
              >
                {buttonLabels.allServices}
              </HoverPrefetchLink>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}