import { createFileRoute } from "@tanstack/react-router";
import { SiteLayout } from "@/components/SiteLayout";

export const Route = createFileRoute("/politica-de-cookies")({
  head: () => ({
    meta: [
      { title: "Política de Cookies — InvestPlus" },
      { name: "description", content: "Saiba como a InvestPlus utiliza cookies para melhorar sua experiência." },
    ],
  }),
  component: Page,
});

function Page() {
  return (
    <SiteLayout>
      <section className="hero-bg py-16">
        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <h1 className="text-4xl font-bold text-white sm:text-5xl">Política de Cookies</h1>
        </div>
      </section>
      <section className="py-16">
        <div className="mx-auto max-w-3xl space-y-8 px-4 text-foreground/80 sm:px-6">
          <Block t="O que são cookies" p="Cookies são pequenos arquivos armazenados no seu dispositivo que permitem reconhecer o navegador, lembrar preferências e medir a forma como o site é utilizado." />
          <Block t="Categorias utilizadas" p="Utilizamos cookies funcionais (essenciais ao funcionamento da plataforma), de preferências, estatísticos (anônimos) e de marketing, que dependem do seu consentimento prévio." />
          <Block t="Gerenciamento do consentimento" p="Você pode aceitar, recusar ou ajustar suas preferências de cookies a qualquer momento através do banner de consentimento exibido na plataforma." />
          <Block t="Cookies de terceiros" p="Algumas funcionalidades podem depender de cookies de terceiros (analytics, redes sociais). Essas tecnologias seguem suas próprias políticas de privacidade." />
          <Block t="Atualizações" p="Esta política pode ser atualizada periodicamente. A versão mais recente estará sempre disponível neste endereço." />
        </div>
      </section>
    </SiteLayout>
  );
}

function Block({ t, p }: { t: string; p: string }) {
  return (
    <div>
      <h2 className="font-display text-xl font-semibold text-foreground">{t}</h2>
      <p className="mt-2 leading-relaxed">{p}</p>
    </div>
  );
}