portifolio-evandrodevbr/app/servicos/page.tsx

import type { Metadata } from "next";
import {
  compactHero,
  heroWithMediaGrid,
} from "@/app/cases/_components/hero-styles";
import {
  getMosaicPosters,
  PosterMosaic,
} from "@/app/cases/_components/PosterMosaic";
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 } from "@/lib/seo";
import {
  buttonLabels,
  clientCasesForListing,
  serviceHubLinks,
  serviceOffers,
  siteUrl,
} from "@/lib/site-content";
import { SERVICES_SUBJECT } from "@/lib/whatsapp";
import { ServiceOfferCards } from "./_components/ServiceOfferCards";

const pageUrl = `${siteUrl}/servicos`;
const pageTitle = "Sites, sistemas e aplicativos sob medida";
const pageDescription =
  "Sites, sistemas web e aplicativos sob medida para apresentar seu negócio e organizar a operação. Garuva e Joinville (SC), remoto em todo o Brasil.";

/** Páginas que as três ofertas já abrem; os demais serviços ficam na lista "Outros serviços". */
const offerHrefs = new Set(serviceOffers.map(({ href }) => href));
const otherServices = serviceHubLinks.filter(
  ({ href }) => !offerHrefs.has(href),
);

const hubFaq = [
  {
    question: "Quanto custa e quanto tempo leva?",
    answer:
      "Depende das funcionalidades, conteúdo e integrações. O valor e o prazo são definidos depois de entender os requisitos, antes de iniciar o desenvolvimento.",
  },
  {
    question: "Preciso estar em Joinville ou em Garuva?",
    answer:
      "Não. O atendimento é remoto, com conversas, demonstrações e revisões on-line para projetos em todo o Brasil.",
  },
  {
    question: "E se eu já tiver um site ou sistema?",
    answer:
      "Avalio a base atual para propor melhorias, correções ou integrações. Recomeçar do zero não é uma condição para trabalhar comigo.",
  },
];

export const metadata: Metadata = {
  title: pageTitle,
  description: pageDescription,
  ...buildPageSocialMetadata({
    url: pageUrl,
    title: pageTitle,
    description: pageDescription,
    type: "website",
  }),
};

export default function ServicesIndexPage() {
  // três pôsteres dos clientes na coluna ao lado do título, que ficaria vazia; a SEV fica de fora (ela vai por último)
  // e nenhum cliente se repete mais abaixo, onde as ofertas citam os cases só por link
  const posters = getMosaicPosters(clientCasesForListing.map(({ id }) => id));
  const hasMosaic = posters.length > 0;
  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 ${pageTop} ${
          hasMosaic ? "" : compactHero
        }`}
      >
        <div
          className={`ds-section-shell ${hasMosaic ? heroWithMediaGrid : ""}`}
        >
          <div>
            <Breadcrumb
              items={[
                { label: "Início", href: "/" },
                { label: "Serviços", href: "/servicos" },
              ]}
            />
            <h1 className="ds-section-title max-w-[22ch] text-balance">
              Sites, sistemas e aplicativos sob medida.
            </h1>
            <p className="ds-copy max-w-[62ch]">
              Apresente seu negócio, organize a operação ou conecte ferramentas
              que hoje dão trabalho. Desenvolvo a solução a partir do que você
              precisa resolver, não de uma lista de tecnologias.
            </p>
            <div className="mt-sp-6 flex flex-wrap items-center gap-sp-4">
              <WhatsAppLink
                className={primaryButton}
                service={SERVICES_SUBJECT}
                placement="service_hub_hero"
              >
                {buttonLabels.contact}
              </WhatsAppLink>
              <HoverPrefetchLink
                href="/cases"
                className={`${secondaryButtonDark} focus-visible:outline-2 focus-visible:outline-offset-4`}
              >
                {buttonLabels.allCases}
              </HoverPrefetchLink>
            </div>
            <p className="ds-copy max-w-[62ch]">
              Sou Evandro, desenvolvedor de software, e a conversa é comigo.
            </p>
            <p className="mt-sp-2 text-[15px] leading-6 text-white/70">
              Garuva e Joinville (SC) · atendimento remoto em todo o Brasil
            </p>
          </div>
          <PosterMosaic posters={posters} />
        </div>
      </section>

      <section className="ds-section" aria-labelledby="ofertas-title">
        <div className="ds-section-shell">
          <h2
            id="ofertas-title"
            className="ds-section-title max-w-[26ch] text-balance"
          >
            Três jeitos de começar.
          </h2>
          <p className="ds-copy max-w-[64ch]">
            Não precisa chegar com um projeto técnico pronto. Escolha o que mais
            se parece com o seu caso; começamos pela sua rotina e pelo que
            precisa mudar.
          </p>
          <ServiceOfferCards offers={serviceOffers} />
        </div>
      </section>

      <section className="ds-section" aria-labelledby="servicos-title">
        <div className="ds-section-shell">
          <h2 id="servicos-title" className="ds-section-title">
            Outros serviços
          </h2>
          <p className="ds-copy max-w-[64ch]">
            Consultoria em Next.js, aplicativos desktop, integração de
            equipamentos e diagnóstico de arquitetura. Cada página explica o que
            posso fazer por você.
          </p>
          <ul className="mt-sp-8 divide-y divide-[var(--border)] border-y border-[var(--border)]">
            {otherServices.map((service) => (
              <li
                key={service.href}
                className="grid items-start gap-sp-3 py-sp-5 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-sp-8"
              >
                <HoverPrefetchLink
                  href={service.href}
                  className="inline-flex min-h-11 items-center font-semibold underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
                >
                  {service.label}
                </HoverPrefetchLink>
                <p className="ds-copy !mt-0">{service.description}</p>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <h2 className="ds-section-title max-w-[26ch] text-balance">
            Como saímos da conversa para a entrega.
          </h2>
          <ol className="ds-list max-w-[68ch] list-decimal space-y-sp-4">
            <li>
              <strong>Entender o problema.</strong> Conversamos sobre o negócio,
              quem vai usar e o que já existe.
            </li>
            <li>
              <strong>Combinar o escopo.</strong> Definimos prioridades,
              plataformas, responsabilidades, orçamento e prazo na proposta.
            </li>
            <li>
              <strong>Construir e revisar.</strong> Você acompanha as etapas.
              Validamos a entrega e combinamos publicação, suporte e evolução.
            </li>
          </ol>
        </div>
      </section>

      <Faq items={hubFaq} title="Antes de contratar" />

      <section className="ds-section ds-section-dark">
        <div className="ds-section-shell">
          <h2 className="ds-section-title max-w-[24ch]">
            Conte o que você quer resolver.
          </h2>
          <p className="ds-copy max-w-[62ch]">
            Pode ser uma ideia nova, uma rotina manual ou um sistema que precisa
            melhorar. Me conte pelo WhatsApp; não precisa preencher um
            formulário para começar.
          </p>
          <WhatsAppLink
            className={`${primaryButton} mt-sp-6`}
            service={SERVICES_SUBJECT}
            placement="service_hub_footer"
          >
            {buttonLabels.contact}
          </WhatsAppLink>
        </div>
      </section>
    </main>
  );
}