import type { Metadata } from "next";
import {
  compactHero,
  heroWithMediaGrid,
} from "@/app/cases/_components/hero-styles";
import { Breadcrumb } from "@/app/components/Breadcrumb";
import { pageTop } from "@/app/components/button-styles";
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
import { PagePiece } from "@/app/components/PagePiece";
import { safeJsonLd } from "@/lib/jsonld";
import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
import { siteUrl } from "@/lib/site-content";

const pageUrl = `${siteUrl}/privacidade`;
const pageTitle = "Privacidade e consentimento";
const pageDescription =
  "Como o portfólio trata dados de contato, consentimento de analytics, links externos e solicitações de privacidade.";

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

export default function PrivacyPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      buildBreadcrumbList(pageUrl, [
        ["Início", siteUrl],
        ["Privacidade", pageUrl],
      ] as const),
    ],
  };

  return (
    <main>
      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>

      <section
        className={`ds-section ds-section-dark ${pageTop} ${compactHero}`}
      >
        <div className={`ds-section-shell ${heroWithMediaGrid}`}>
          <div className="min-w-0">
            <Breadcrumb
              items={[
                { label: "Início", href: "/" },
                { label: "Privacidade", href: "/privacidade" },
              ]}
            />
            <h1 className="ds-section-title text-white">
              Privacidade e consentimento
            </h1>
            <p className="ds-copy max-w-[70ch] !text-[rgba(255,255,255,.78)]">
              Esta página explica, de forma objetiva, como funcionam o contato e
              as escolhas de analytics neste portfólio.
            </p>
          </div>
          <PagePiece image="/3d/estado-dados.webp" />
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell">
          <div className="ds-grid-2 items-start">
            <article className="ds-card">
              <p className="ds-kicker">Responsável e contato</p>
              <h2 className="ds-card-title">Evandro Fonseca Junior</h2>
              <p className="ds-copy">
                O responsável pelo site é Evandro Fonseca Junior. Para contato
                ou solicitações relacionadas a esta página, escreva para{" "}
                <a
                  className="py-1 font-medium underline underline-offset-4"
                  href="mailto:evandrofonsecajunior@gmail.com"
                >
                  evandrofonsecajunior@gmail.com
                </a>
                .
              </p>
            </article>

            <article className="ds-card">
              <p className="ds-kicker">Formulário de contato</p>
              <h2 className="ds-card-title">Mensagem pelo WhatsApp</h2>
              <p className="ds-copy">
                Os dados digitados no formulário são transformados em uma
                mensagem e abrem o WhatsApp. O site não guarda esse formulário
                em nenhum servidor próprio.
              </p>
            </article>

            <article className="ds-card">
              <p className="ds-kicker">Analytics</p>
              <h2 className="ds-card-title">Escolha antes da medição</h2>
              <p className="ds-copy">
                Antes de <code>granted</code>, nenhuma tag do Google é
                carregada. A escolha fica no <code>localStorage</code> sob a
                chave <code>evandro.analytics-consent.v1</code>, com os valores{" "}
                <code>granted</code> ou <code>denied</code>.
              </p>
              <p className="ds-copy mt-sp-4">
                Cookies de publicidade e personalização permanecem negados. Ao
                conceder analytics, o Google pode criar cookies{" "}
                <code>_ga*</code>. Ao revogar, o consentimento é atualizado para
                negado, o carregador da tag é removido e os cookies de analytics
                acessíveis são expirados.
              </p>
              <p className="ds-copy mt-sp-4">
                A tag compartilhada conecta Google Analytics e Google Ads. O
                modo de consentimento do Google pode enviar sinais técnicos sem
                cookies de publicidade após o aceite de analytics, com redação
                dos dados de anúncios ativada. Não enviamos eventos de venda nem
                o conteúdo do formulário para esses serviços.
              </p>
              <p className="ds-copy mt-sp-4">
                Após o aceite de analytics, medimos o acionamento do WhatsApp
                para entender quais serviços e botões geram interesse. Esse
                evento registra o serviço, a posição do botão e o caminho da
                página, sem nome, e-mail, mensagem ou parâmetros da URL. O
                acionamento não confirma envio de mensagem nem contratação. O
                contato pelo WhatsApp funciona mesmo sem aceitar analytics.
              </p>
            </article>

            <article className="ds-card">
              <p className="ds-kicker">Preferências e links</p>
              <h2 className="ds-card-title">Você pode mudar a escolha</h2>
              <p className="ds-copy">
                Para alterar a preferência, use o controle existente{" "}
                <strong>“Preferências de analytics”</strong> para acessar suas
                preferências de privacidade. Links externos para LinkedIn,
                Instagram, demonstrações e WhatsApp seguem as políticas próprias
                de cada serviço.
              </p>
              <p className="ds-copy mt-sp-4">
                Solicitações relacionadas aos seus direitos devem ser
                encaminhadas ao e-mail publicado acima.
              </p>
              <HoverPrefetchLink
                className="ds-link ds-link-muted mt-sp-5 self-start"
                href="/"
              >
                Voltar ao início
              </HoverPrefetchLink>
            </article>
          </div>

          <div className="mt-sp-8 border-t border-[var(--border)] pt-sp-5">
            <p className="ds-kicker">Vigência</p>
            <p className="ds-copy mt-sp-2">
              Esta versão está vigente desde{" "}
              <time dateTime="2026-09-13">13 de setembro de 2026</time>.
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}