import { createFileRoute, Link } from "@tanstack/react-router";

export const Route = createFileRoute("/legal/cookies")({
  head: () => ({
    meta: [
      { title: "Cookie Policy — VotersAlert" },
      {
        name: "description",
        content:
          "How VotersAlert uses cookies and similar technologies on its website and platform.",
      },
    ],
  }),
  component: CookiesPage,
});

function CookiesPage() {
  return (
    <div className="min-h-dvh bg-background text-foreground">
      <header className="border-b">
        <div className="mx-auto max-w-4xl px-6 py-6 flex items-center justify-between">
          <Link to="/home" className="font-semibold">
            ← VotersAlert
          </Link>
          <span className="text-xs text-muted-foreground">Last updated: June 2026</span>
        </div>
      </header>
      <main className="mx-auto max-w-3xl px-6 py-12 prose prose-sm">
        <h1 className="text-3xl font-bold tracking-tight">Cookie Policy</h1>
        <p className="mt-4 text-muted-foreground">
          This Cookie Policy explains how VotersAlert ("we", "us") uses cookies and similar tracking
          technologies when you visit our marketing site or use the VotersAlert platform.
        </p>

        <h2 className="mt-10 text-xl font-semibold">1. What are cookies?</h2>
        <p className="mt-2 text-muted-foreground">
          Cookies are small text files stored on your device that help websites remember information
          about your visit, such as your preferred language and sign-in state.
        </p>

        <h2 className="mt-8 text-xl font-semibold">2. Types of cookies we use</h2>
        <ul className="mt-2 list-disc pl-6 space-y-2 text-muted-foreground">
          <li>
            <strong>Strictly necessary</strong> — required for sign-in, security and core platform
            features.
          </li>
          <li>
            <strong>Preferences</strong> — remember your language, theme and dashboard layout.
          </li>
          <li>
            <strong>Analytics</strong> — help us understand which pages and campaigns perform best.
          </li>
          <li>
            <strong>Marketing</strong> — measure attribution from ads we run on Meta, Google and
            TikTok.
          </li>
        </ul>

        <h2 className="mt-8 text-xl font-semibold">3. Managing cookies</h2>
        <p className="mt-2 text-muted-foreground">
          You can control cookies through your browser settings. Disabling strictly necessary
          cookies will prevent you from signing in to the VotersAlert platform.
        </p>

        <h2 className="mt-8 text-xl font-semibold">4. Contact</h2>
        <p className="mt-2 text-muted-foreground">
          Questions? Email{" "}
          <a className="text-primary underline" href="mailto:privacy@votersalert.ng">
            privacy@votersalert.ng
          </a>
          .
        </p>
      </main>
    </div>
  );
}