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

export const metadata: Metadata = {
  title: "Cookie Policy — DriveHub",
  description:
    "DriveHub's cookie policy. Learn about how we use cookies and similar technologies.",
  robots: { index: true, follow: true },
};

const LAST_UPDATED = "June 2026";

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="mb-8">
      <h2 className="text-lg font-black text-gray-900 mb-3">{title}</h2>
      <div className="text-gray-600 leading-relaxed space-y-3">{children}</div>
    </section>
  );
}

export default function CookiesPage() {
  return (
    <div className="min-h-screen bg-[#f6f8fc]">
      {/* Hero */}
      <div className="bg-gradient-to-br from-[#0f172a] via-[#172554] to-[#0f766e] py-14">
        <div className="max-w-3xl mx-auto px-4 text-center">
          <div className="w-14 h-14 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center mx-auto mb-4">
            <Cookie className="w-7 h-7 text-cyan-300" />
          </div>
          <h1 className="text-3xl md:text-4xl font-black text-white mb-2">
            Cookie Policy
          </h1>
          <p className="text-blue-200 text-sm">Last updated: {LAST_UPDATED}</p>
        </div>
      </div>

      {/* Content */}
      <div className="max-w-3xl mx-auto px-4 py-12">
        <div className="bg-white rounded-[28px] shadow-sm border border-gray-100 p-8 md:p-10">
          <Section title="1. What Are Cookies?">
            <p>
              Cookies are small text files stored on your device when you visit a
              website. They help websites remember your preferences and provide a
              better browsing experience.
            </p>
          </Section>

          <Section title="2. How DriveHub Uses Cookies">
            <p>
              DriveHub uses a combination of cookies and browser local storage for
              the following purposes:
            </p>

            {/* Table */}
            <div className="overflow-x-auto -mx-2">
              <table className="w-full text-sm border-collapse mt-2">
                <thead>
                  <tr className="bg-gray-50 text-left">
                    <th className="px-3 py-2.5 border border-gray-200 font-bold text-gray-700 rounded-tl-xl">
                      Type
                    </th>
                    <th className="px-3 py-2.5 border border-gray-200 font-bold text-gray-700">
                      Purpose
                    </th>
                    <th className="px-3 py-2.5 border border-gray-200 font-bold text-gray-700 rounded-tr-xl">
                      Storage
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    [
                      "Wishlist",
                      "Saves cars you have added to your saved list",
                      "Local Storage",
                    ],
                    [
                      "Compare List",
                      "Remembers cars you have added to compare",
                      "Local Storage",
                    ],
                    [
                      "Recently Viewed",
                      "Shows your recently viewed cars on the homepage",
                      "Local Storage",
                    ],
                    [
                      "Preferences",
                      "Stores view mode (grid/list) and filter preferences",
                      "Local Storage",
                    ],
                    [
                      "Analytics",
                      "Anonymous usage statistics to improve the platform",
                      "Session Cookie",
                    ],
                  ].map(([type, purpose, storage]) => (
                    <tr key={type} className="hover:bg-gray-50/60">
                      <td className="px-3 py-2.5 border border-gray-200 font-semibold text-gray-700">
                        {type}
                      </td>
                      <td className="px-3 py-2.5 border border-gray-200 text-gray-500">
                        {purpose}
                      </td>
                      <td className="px-3 py-2.5 border border-gray-200 text-gray-500">
                        {storage}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Section>

          <Section title="3. Essential vs. Non-Essential Cookies">
            <p>
              The cookies and local storage items above are <strong>essential</strong>{" "}
              to core features of DriveHub (wishlist, compare, recently viewed). They
              are not used for advertising or cross-site tracking.
            </p>
            <p>
              We do not use third-party advertising cookies or sell your browsing
              behaviour to ad networks.
            </p>
          </Section>

          <Section title="4. Managing Cookies">
            <p>
              You can clear cookies and local storage at any time through your
              browser settings. Note that clearing these will reset your wishlist,
              compare list, and recently viewed cars.
            </p>
            <p>Common browser controls:</p>
            <ul className="list-disc pl-5 space-y-1.5 text-sm">
              <li>
                <strong>Chrome:</strong> Settings → Privacy and Security → Clear
                browsing data
              </li>
              <li>
                <strong>Firefox:</strong> Settings → Privacy &amp; Security →
                Cookies and Site Data
              </li>
              <li>
                <strong>Safari:</strong> Preferences → Privacy → Manage Website
                Data
              </li>
              <li>
                <strong>Edge:</strong> Settings → Privacy, search, and services →
                Clear browsing data
              </li>
            </ul>
          </Section>

          <Section title="5. Updates to This Policy">
            <p>
              We may update this Cookie Policy as our use of cookies evolves or as
              regulations change. The latest version will always be available on this
              page.
            </p>
          </Section>

          <Section title="6. Contact">
            <p>
              For questions about our use of cookies, contact us at{" "}
              <a
                href="mailto:privacy@drivehub.in"
                className="text-blue-600 hover:underline"
              >
                privacy@drivehub.in
              </a>
              .
            </p>
          </Section>
        </div>

        <div className="mt-8 text-center">
          <Link
            href="/"
            className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-blue-600 transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to DriveHub
          </Link>
        </div>

        <div className="mt-6 flex flex-wrap justify-center gap-4 text-xs text-gray-400">
          <Link href="/privacy" className="hover:text-blue-600 transition-colors">
            Privacy Policy
          </Link>
          <Link href="/terms" className="hover:text-blue-600 transition-colors">
            Terms of Service
          </Link>
          <Link href="/disclaimer" className="hover:text-blue-600 transition-colors">
            Disclaimer
          </Link>
        </div>
      </div>
    </div>
  );
}