import Link from "next/link";
import { ArrowLeft, Shield, Cookie, BadgeCheck } from "lucide-react";
import type { Metadata } from "next";

const LAST_UPDATED = "February 15, 2026";

export const metadata: Metadata = {
  title: "Privacy Policy | LLMHosts",
  description:
    "LLMHosts Privacy Policy - data collection, GDPR, CCPA, security measures, and your privacy rights.",
  alternates: {
    canonical: "https://llmhosts.com/legal/privacy",
  },
};

const tocItems = [
  { id: "overview", label: "Overview" },
  { id: "data-we-collect", label: "Data We Collect" },
  { id: "data-we-dont-collect", label: "Data We Don't Collect" },
  { id: "inference", label: "How Inference Works" },
  { id: "cookies", label: "Cookies" },
  { id: "third-parties", label: "Third Parties" },
  { id: "retention", label: "Data Retention" },
  { id: "your-rights", label: "Your Rights" },
  { id: "gdpr", label: "GDPR (EU)" },
  { id: "ccpa", label: "CCPA (California)" },
  { id: "children", label: "Children" },
  { id: "security", label: "Security Measures" },
  { id: "contact", label: "Contact" },
];

const trustBadges = [
  { icon: Cookie, label: "No tracking cookies" },
  { icon: BadgeCheck, label: "GDPR compliant" },
  { icon: Shield, label: "Data never sold" },
];

export default function PrivacyPage() {
  return (
    <div className="min-h-screen" style={{ background: "#080809" }}>
      <div className="mx-auto max-w-5xl px-4 py-12 sm:px-6 lg:px-8">
        {/* Back link */}
        <Link
          href="/"
          className="mb-8 inline-flex items-center gap-2 text-sm text-gray-400 hover:text-violet-400 transition-colors"
        >
          <ArrowLeft size={16} />
          Back to LLMHosts
        </Link>

        {/* Header */}
        <header className="mb-10">
          <h1
            className="text-3xl font-bold text-white sm:text-4xl"
            style={{ letterSpacing: "-0.03em" }}
          >
            Privacy Policy
          </h1>
          <p className="mt-2 text-sm text-gray-400">
            Last updated: {LAST_UPDATED}
          </p>

          {/* Trust badges */}
          <div className="mt-6 flex flex-wrap gap-3">
            {trustBadges.map(({ icon: Icon, label }) => (
              <span
                key={label}
                className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-medium text-gray-300"
              >
                <Icon size={12} className="text-violet-400" />
                {label}
              </span>
            ))}
          </div>
        </header>

        <div className="flex flex-col gap-10 lg:flex-row lg:gap-12">
          {/* Sticky TOC */}
          <nav
            className="glass rounded-xl p-5 lg:w-52 lg:shrink-0 lg:sticky lg:top-8 lg:self-start"
            aria-label="Table of contents"
          >
            <h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-gray-400">
              On this page
            </h2>
            <ul className="space-y-2">
              {tocItems.map((item) => (
                <li key={item.id}>
                  <a
                    href={`#${item.id}`}
                    className="block text-sm text-gray-400 hover:text-violet-400 transition-colors"
                  >
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>

          {/* Content */}
          <article className="min-w-0 flex-1 space-y-10 text-gray-300">
            <section id="overview">
              <h2 className="text-xl font-semibold text-white">Overview</h2>
              <p className="mt-3 leading-relaxed">
                LLMHosts (&quot;we,&quot; &quot;us,&quot; or &quot;our&quot;) is
                committed to protecting your privacy. This policy describes what
                data we collect, how we use it, and your rights regarding your
                personal information. We comply with GDPR, CCPA, and other
                applicable privacy laws.
              </p>
              <p className="mt-4 leading-relaxed">
                <strong className="text-gray-100">Important:</strong> The
                LLMHosts CLI has no telemetry and no data collection whatsoever.
                It runs entirely on your hardware. Only the optional SaaS
                dashboard (when you sign in) collects account and usage data as
                described below.
              </p>
            </section>

            <section id="data-we-collect">
              <h2 className="text-xl font-semibold text-white">
                Data We Collect
              </h2>
              <p className="mt-3 leading-relaxed">
                When you use the SaaS dashboard or paid services, we collect:
              </p>
              <ul className="mt-4 list-disc space-y-2 pl-6 text-gray-300">
                <li>
                  <strong className="text-gray-100">Email and name:</strong>{" "}
                  Required for account registration and communication
                </li>
                <li>
                  <strong className="text-gray-100">Usage metrics:</strong> When
                  you opt in to telemetry—aggregate usage patterns, cost
                  analytics, and feature adoption to improve our services
                </li>
                <li>
                  <strong className="text-gray-100">
                    Payment information:
                  </strong>{" "}
                  Processed by Stripe. We do not store your card details; Stripe
                  handles all payment data
                </li>
                <li>
                  <strong className="text-gray-100">Account metadata:</strong>{" "}
                  Plan tier, billing status, and preferences you configure
                </li>
              </ul>
            </section>

            <section id="data-we-dont-collect">
              <h2 className="text-xl font-semibold text-white">
                Data We Don&apos;t Collect
              </h2>
              <p className="mt-3 leading-relaxed">
                We do <strong className="text-gray-100">not</strong> collect:
              </p>
              <ul className="mt-4 list-disc space-y-2 pl-6 text-gray-300">
                <li>Prompt content or model outputs</li>
                <li>
                  PII detected in transit (our PII detector prevents routing
                  sensitive data to external nodes)
                </li>
                <li>Your inference traffic when using the local CLI only</li>
                <li>Chat history, API keys, or model weights</li>
              </ul>
            </section>

            <section id="inference">
              <h2 className="text-xl font-semibold text-white">
                How Inference Works
              </h2>
              <p className="mt-3 leading-relaxed">
                Understanding where your data goes:
              </p>
              <ul className="mt-4 list-disc space-y-2 pl-6 text-gray-300">
                <li>
                  <strong className="text-gray-100">Local inference:</strong>{" "}
                  Stays entirely on your machine. We never see it.
                </li>
                <li>
                  <strong className="text-gray-100">
                    Tunnel (llmhosts tunnel):
                  </strong>{" "}
                  Traffic is encrypted (TLS/WireGuard). We provide the
                  infrastructure; we do not log or inspect your inference
                  traffic.
                </li>
                <li>
                  <strong className="text-gray-100">Hive Mode:</strong> Shared
                  compute routing respects privacy tiers. PII detection blocks
                  sensitive data from leaving your trusted network. You configure
                  what data may be routed to external participants.
                </li>
              </ul>
            </section>

            <section id="cookies">
              <h2 className="text-xl font-semibold text-white">Cookies</h2>
              <p className="mt-3 leading-relaxed">
                We use session cookies only—required for NextAuth authentication
                when you sign in to the dashboard. We do not use tracking
                cookies, advertising cookies, or third-party analytics that
                track you across sites.
              </p>
            </section>

            <section id="third-parties">
              <h2 className="text-xl font-semibold text-white">
                Third Parties
              </h2>
              <p className="mt-3 leading-relaxed">
                We share data only as necessary with:
              </p>
              <ul className="mt-4 list-disc space-y-2 pl-6 text-gray-300">
                <li>
                  <strong className="text-gray-100">Stripe:</strong> Payment
                  processing. Stripe&apos;s privacy policy applies to payment
                  data.
                </li>
                <li>
                  <strong className="text-gray-100">
                    Tailscale / Cloudflare:
                  </strong>{" "}
                  Tunneling infrastructure when you use llmhosts tunnel. They
                  process network traffic; we do not receive prompt or inference
                  content from them.
                </li>
              </ul>
              <p className="mt-4 leading-relaxed">
                We do not sell your personal data. We do not share it for
                advertising purposes.
              </p>
            </section>

            <section id="retention">
              <h2 className="text-xl font-semibold text-white">
                Data Retention
              </h2>
              <p className="mt-3 leading-relaxed">
                Account data is retained until you delete your account. Usage
                metrics (when opted in) are retained for 90 days, then
                aggregated or anonymized. Payment records may be retained longer
                for legal and tax compliance.
              </p>
            </section>

            <section id="your-rights">
              <h2 className="text-xl font-semibold text-white">Your Rights</h2>
              <p className="mt-3 leading-relaxed">You have the right to:</p>
              <ul className="mt-4 list-disc space-y-2 pl-6 text-gray-300">
                <li>
                  <strong className="text-gray-100">Access:</strong> Request a
                  copy of your personal data
                </li>
                <li>
                  <strong className="text-gray-100">Delete:</strong> Request
                  deletion of your account and associated data
                </li>
                <li>
                  <strong className="text-gray-100">Export:</strong> Receive
                  your data in a portable format
                </li>
                <li>
                  <strong className="text-gray-100">Opt out:</strong> Disable
                  telemetry at any time; use the CLI only with zero data
                  collection
                </li>
              </ul>
              <p className="mt-4 leading-relaxed">
                To exercise these rights,{" "}
                <Link
                  href="/contact"
                  className="text-violet-400 hover:text-violet-300 underline"
                >
                  contact us
                </Link>
                . We will respond within 30 days.
              </p>
            </section>

            <section id="gdpr">
              <h2 className="text-xl font-semibold text-white">
                GDPR (European Union)
              </h2>
              <p className="mt-3 leading-relaxed">
                If you are in the European Economic Area, we process your data
                on the basis of contract performance (providing our services),
                consent (where you opt in), and legitimate interests (service
                improvement, security).
              </p>
              <p className="mt-4 leading-relaxed">
                You have the right to access, rectify, erase, restrict
                processing, data portability, object, and withdraw consent. You
                may lodge a complaint with your supervisory authority.
              </p>
            </section>

            <section id="ccpa">
              <h2 className="text-xl font-semibold text-white">
                CCPA (California)
              </h2>
              <p className="mt-3 leading-relaxed">
                California residents have the right to know what personal
                information we collect, delete their data, opt out of sale (we
                do not sell personal information), and non-discrimination for
                exercising these rights.
              </p>
            </section>

            <section id="children">
              <h2 className="text-xl font-semibold text-white">Children</h2>
              <p className="mt-3 leading-relaxed">
                Our services are not intended for users under 13 years of age.
                We do not knowingly collect personal information from children.
                If you believe we have collected data from a child under 13,
                please contact us and we will delete it promptly.
              </p>
            </section>

            <section id="security">
              <h2 className="text-xl font-semibold text-white">
                Security Measures
              </h2>
              <p className="mt-3 leading-relaxed">
                We implement industry-standard security practices:
              </p>
              <ul className="mt-4 list-disc space-y-2 pl-6 text-gray-300">
                <li>Encryption at rest for stored data</li>
                <li>TLS encryption for all data in transit</li>
                <li>WireGuard for mesh networking in Hive Mode</li>
                <li>
                  Secure authentication (NextAuth) with industry best practices
                </li>
                <li>Regular security reviews and dependency updates</li>
              </ul>
              <p className="mt-4 leading-relaxed">
                No system is perfectly secure. We strive to minimize risk and
                will notify affected users in the event of a data breach where
                required by law.
              </p>
            </section>

            <section id="contact">
              <h2 className="text-xl font-semibold text-white">Contact</h2>
              <p className="mt-3 leading-relaxed">
                For privacy-related questions or to exercise your rights, use our contact form.
              </p>
              <p className="mt-4">
                <Link
                  href="/contact"
                  className="text-violet-400 hover:text-violet-300 underline"
                >
                  Contact us
                </Link>
              </p>
            </section>
          </article>
        </div>

        {/* Footer links */}
        <footer className="mt-16 border-t border-white/[0.06] pt-8">
          <div className="flex flex-wrap gap-6 text-sm text-gray-400">
            <Link
              href="/legal/terms"
              className="hover:text-violet-400 transition-colors"
            >
              Terms of Service
            </Link>
            <Link href="/" className="hover:text-violet-400 transition-colors">
              Back to LLMHosts
            </Link>
          </div>
        </footer>
      </div>
    </div>
  );
}
