import type { Metadata } from "next";
import { coverSizes } from "@/app/cases/_components/CaseCover";
import { CaseCoverLink } from "@/app/cases/_components/CaseCoverLink";
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,
  textLink,
} from "@/app/components/button-styles";
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
import WhatsAppLink from "@/app/components/WhatsAppLink";
import { safeJsonLd } from "@/lib/jsonld";
import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
import { clientCases, serviceHubLinks, siteUrl } from "@/lib/site-content";
import { SERVICES_SUBJECT } from "@/lib/whatsapp";

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.";

const businessIntents = [
  {
    title: "Quero um site para meu negócio",
    description:
      "Apresente seus serviços, produtos e diferenciais em um endereço próprio, com leitura no celular e um caminho claro para o cliente entrar em contato.",
    href: "/servicos/criacao-de-sites",
    linkLabel: "Conhecer a criação de sites",
    service: "Sites profissionais",
    ctaLabel: "Conversar sobre meu site",
  },
  {
    title: "Preciso organizar minha operação",
    description:
      "Um sistema web para acompanhar pedidos, atendimentos ou informações hoje espalhadas em planilhas. Também posso conectar ferramentas e melhorar o software que você já usa.",
    href: "/servicos/engenharia-de-software",
    linkLabel: "Conhecer o desenvolvimento de sistemas",
    service: "Sistemas web",
    ctaLabel: "Conversar sobre meu sistema",
  },
  {
    title: "Quero desenvolver um aplicativo",
    description:
      "Leve um fluxo de trabalho para o celular ou computador. Avaliamos quem vai usar, os recursos necessários e a plataforma antes de definir o desenvolvimento e a distribuição.",
    href: "/servicos/engenharia-de-software",
    linkLabel: "Entender o escopo de um app mobile",
    service: "Aplicativos mobile e desktop",
    ctaLabel: "Conversar sobre meu aplicativo",
  },
];

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
  const posters = getMosaicPosters(clientCases.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"
              >
                Falar com Evandro no WhatsApp
              </WhatsAppLink>
              <a
                href="#projetos"
                className={`${secondaryButtonDark} focus-visible:outline-2 focus-visible:outline-offset-4`}
              >
                Ver projetos realizados
              </a>
            </div>
            <p className="ds-copy max-w-[62ch]">
              Sou Evandro, desenvolvedor de software, e a conversa é direta
              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="necessidade-title">
        <div className="ds-section-shell grid items-start gap-sp-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-sp-16">
          <div>
            <h2 id="necessidade-title" className="ds-section-title">
              O que você precisa fazer?
            </h2>
            <p className="ds-copy">
              Não precisa chegar com um projeto técnico pronto. Começamos pela
              sua rotina e pelo que precisa mudar.
            </p>
          </div>
          <div className="divide-y divide-[var(--border)]">
            {businessIntents.map((intent) => (
              <article
                key={intent.service}
                className="py-sp-6 first:pt-0 last:pb-0"
              >
                <h3 className="ds-card-title">{intent.title}</h3>
                <p className="ds-copy">{intent.description}</p>
                <div className="mt-sp-4 flex flex-wrap items-center gap-x-sp-6 gap-y-sp-2">
                  <WhatsAppLink
                    className={primaryButton}
                    service={intent.service}
                    placement="service_hub_intent"
                  >
                    {intent.ctaLabel}
                  </WhatsAppLink>
                  <HoverPrefetchLink
                    href={intent.href}
                    className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
                  >
                    {intent.linkLabel}
                  </HoverPrefetchLink>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section
        id="projetos"
        className="ds-section"
        aria-labelledby="projetos-title"
      >
        <div className="ds-section-shell">
          <h2 id="projetos-title" className="ds-section-title">
            Veja o trabalho antes de conversar.
          </h2>
          <p className="ds-copy max-w-[64ch]">
            Projetos feitos para empresas. Abra o case para ver o que foi feito
            e como o site ficou.
          </p>
          <div className="mt-sp-8 grid gap-sp-8 md:grid-cols-2">
            {clientCases.map((caseStudy) => (
              <article
                key={caseStudy.id}
                className="border-t border-[var(--border)] pt-sp-6"
              >
                <CaseCoverLink
                  id={caseStudy.id}
                  title={caseStudy.title}
                  demoUrl={caseStudy.demoUrl}
                  sizes={coverSizes.column}
                />
                <p className="ds-kicker">{caseStudy.title}</p>
                <h3 className="ds-card-title">{caseStudy.headline}</h3>
                <p className="ds-copy">{caseStudy.summary}</p>
                <HoverPrefetchLink
                  href={`/cases/${caseStudy.id}`}
                  className={`${textLink} mt-sp-4 focus-visible:outline-2 focus-visible:outline-offset-4`}
                >
                  Ver o case {caseStudy.title}
                </HoverPrefetchLink>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell grid gap-sp-10 lg:grid-cols-2 lg:gap-sp-16">
          <div>
            <h2 className="ds-section-title">
              Como saímos da conversa para a entrega.
            </h2>
            <ol className="ds-list space-y-sp-4 list-decimal">
              <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>
          <div>
            <h2 className="ds-card-title">Antes de contratar</h2>
            <dl className="mt-sp-5 space-y-sp-6 text-[15px]">
              <div>
                <dt className="font-semibold">
                  Quanto custa e quanto tempo leva?
                </dt>
                <dd className="ds-copy !mt-sp-2">
                  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.
                </dd>
              </div>
              <div>
                <dt className="font-semibold">
                  Preciso estar em Joinville ou em Garuva?
                </dt>
                <dd className="ds-copy !mt-sp-2">
                  Não. O atendimento é remoto, com conversas, demonstrações e
                  revisões on-line para projetos em todo o Brasil.
                </dd>
              </div>
              <div>
                <dt className="font-semibold">
                  E se eu já tiver um site ou sistema?
                </dt>
                <dd className="ds-copy !mt-sp-2">
                  Avalio a base atual para propor melhorias, correções ou
                  integrações. Recomeçar do zero não é uma condição para
                  trabalhar comigo.
                </dd>
              </div>
            </dl>
          </div>
        </div>
      </section>

      <section className="ds-section" aria-labelledby="servicos-title">
        <div className="ds-section-shell">
          <h2 id="servicos-title" className="ds-section-title">
            Quer aprofundar o escopo técnico?
          </h2>
          <p className="ds-copy max-w-[64ch]">
            Consulte as áreas de atuação, incluindo desktop, integrações,
            consultoria e IoT. 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)]">
            {serviceHubLinks.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 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"
          >
            Conversar com Evandro no WhatsApp
          </WhatsAppLink>
        </div>
      </section>
    </main>
  );
}