import type { Metadata } from "next";
import Link from "next/link";
import { CaseCover } from "@/app/cases/_components/CaseCover";
import { getCaseMedia } from "@/app/cases/_components/case-media";
import { Breadcrumb } from "@/app/components/Breadcrumb";
import {
  pageTop,
  primaryButton,
  secondaryButtonDark,
  textLink,
} from "@/app/components/button-styles";
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";

const pageUrl = `${siteUrl}/servicos`;
const pageTitle = "Sites, Sistemas e Aplicativos sob Medida para Empresas";
const pageDescription =
  "Sites, sistemas web e aplicativos sob medida para sua empresa apresentar o negócio e organizar a operação. Evandro, desenvolvedor em Garuva-SC, atende Joinville, região e todo o Brasil de forma remota.";

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() {
  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}`}>
        <div className="ds-section-shell">
          <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="Sites, sistemas e aplicativos"
              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 em Garuva, Santa Catarina. Atendimento
            remoto para todo o Brasil, com conversa direta comigo.
          </p>
        </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>
                  <Link
                    href={intent.href}
                    className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
                  >
                    {intent.linkLabel}
                  </Link>
                </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"
              >
                {getCaseMedia(caseStudy.id, "desktop") ? (
                  <Link
                    href={`/cases/${caseStudy.id}`}
                    aria-hidden="true"
                    tabIndex={-1}
                    className="mb-sp-5 block"
                  >
                    <CaseCover
                      id={caseStudy.id}
                      title={caseStudy.title}
                      demoUrl={caseStudy.demoUrl}
                      sizes="(min-width: 1024px) 560px, 100vw"
                    />
                  </Link>
                ) : null}
                <p className="ds-kicker">{caseStudy.title}</p>
                <h3 className="ds-card-title">{caseStudy.headline}</h3>
                <p className="ds-copy">{caseStudy.summary}</p>
                <Link
                  href={`/cases/${caseStudy.id}`}
                  className={`${textLink} mt-sp-4 focus-visible:outline-2 focus-visible:outline-offset-4`}
                >
                  Ver o case {caseStudy.title}
                </Link>
              </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-sm">
              <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 perto de 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"
              >
                <Link
                  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}
                </Link>
                <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="Sites, sistemas e aplicativos"
            placement="service_hub_footer"
          >
            Conversar com Evandro no WhatsApp
          </WhatsAppLink>
        </div>
      </section>
    </main>
  );
}