import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Cookie Policy",
  description:
    "Learn about the cookies Nearle uses to keep the platform running, personalise your experience, and improve our services. Manage your cookie preferences here.",
  openGraph: {
    title: "Cookie Policy | Nearle",
    description:
      "Nearle's cookie policy — what cookies we use, why we use them, and how to manage your preferences.",
    url: "https://nearle.in/cookies",
  },
};

const SECTIONS = [
  { id: "what-are-cookies", label: "What Are Cookies?" },
  { id: "essential", label: "Essential Cookies" },
  { id: "performance", label: "Performance Cookies" },
  { id: "analytics", label: "Analytics Cookies" },
  { id: "preference", label: "Preference Cookies" },
  { id: "marketing", label: "Marketing Cookies" },
  { id: "managing", label: "Managing Cookies" },
  { id: "updates", label: "Updates to This Policy" },
];

const COOKIE_TYPES = [
  {
    id: "essential",
    icon: "lock",
    title: "Essential Cookies",
    description: "These cookies are required for Nearle to function at all. They handle login sessions, shopping cart state, and security tokens. Without them, the app doesn't work.",
    required: true,
    examples: [
      { name: "nearle_session", purpose: "Keeps you logged in during your browsing session", duration: "Session" },
      { name: "nearle_csrf", purpose: "Protects against cross-site request forgery attacks", duration: "Session" },
      { name: "nearle_auth", purpose: "Authenticates your account securely across pages", duration: "30 days" },
      { name: "cart_id", purpose: "Preserves your shopping cart between visits", duration: "7 days" },
    ],
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
    badge: "Always Active",
    badgeColor: "bg-[#6330D6]/10 text-[#6330D6]",
  },
  {
    id: "performance",
    icon: "speed",
    title: "Performance Cookies",
    description: "These help us understand how fast pages load, where errors occur, and which parts of the platform customers use most. The data is used only to improve Nearle — not to track individuals.",
    required: false,
    examples: [
      { name: "perf_timing", purpose: "Records page load times to detect slowness", duration: "1 day" },
      { name: "error_log", purpose: "Captures app errors to help our engineering team fix bugs", duration: "Session" },
    ],
    tone: "bg-secondary/8 text-secondary",
    badge: "Optional",
    badgeColor: "bg-secondary/10 text-secondary",
  },
  {
    id: "analytics",
    icon: "analytics",
    title: "Analytics Cookies",
    description: "Analytics cookies help us understand aggregate usage patterns — how many people browse the grocery section, which searches are most common, and how customers discover local stores. All data is anonymised.",
    required: false,
    examples: [
      { name: "nearle_analytics", purpose: "Tracks page views and in-app navigation patterns", duration: "12 months" },
      { name: "utm_params", purpose: "Identifies which marketing channel brought you to Nearle", duration: "30 days" },
    ],
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
    badge: "Optional",
    badgeColor: "bg-[#6330D6]/10 text-[#6330D6]",
  },
  {
    id: "preference",
    icon: "tune",
    title: "Preference Cookies",
    description: "Preference cookies remember your choices — your saved delivery address, your preferred neighbourhood, your language setting, and which stores you've marked as favourites.",
    required: false,
    examples: [
      { name: "nearle_location", purpose: "Stores your selected neighbourhood and delivery zone", duration: "6 months" },
      { name: "nearle_prefs", purpose: "Remembers your app display and notification preferences", duration: "12 months" },
      { name: "saved_addresses", purpose: "Keeps your delivery addresses for quick reorder", duration: "12 months" },
    ],
    tone: "bg-secondary/8 text-secondary",
    badge: "Optional",
    badgeColor: "bg-secondary/10 text-secondary",
  },
  {
    id: "marketing",
    icon: "campaign",
    title: "Marketing Cookies",
    description: "Nearle does not use cross-site advertising cookies or sell your data to ad networks. We may use cookies to show you relevant promotions and offers within Nearle itself — based on your neighbourhood and past orders, not third-party tracking.",
    required: false,
    examples: [
      { name: "offer_seen", purpose: "Tracks which promotions you've already seen to avoid repetition", duration: "7 days" },
      { name: "refer_code", purpose: "Attributes referral discounts to the correct campaign", duration: "30 days" },
    ],
    tone: "bg-rose-500/8 text-rose-600",
    badge: "Opt-In Only",
    badgeColor: "bg-rose-500/10 text-rose-600",
  },
];

export default function CookiePolicyPage() {
  return (
    <PremiumPageShell>
      {/* ─── Hero Bar ─── */}
      <section className="w-full bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA] border-b border-[#6330D6]/10 py-12 md:py-16 px-6 md:px-12 lg:px-16 xl:px-20">
        <div className="max-w-[1600px] mx-auto">
          <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div>
              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-5 w-fit">
                Legal
              </span>
              <h1 className="font-display text-4xl sm:text-5xl lg:text-[52px] font-black text-[#16001D] leading-tight tracking-tight">
                Cookie Policy
              </h1>
              <p className="text-sm md:text-base text-[#5E5866] mt-4 max-w-2xl leading-relaxed font-semibold">
                Nearle uses cookies to keep the platform working reliably, remember your preferences, and understand how we can make the experience better. We don&apos;t use cookies to track you across the internet or sell your data.
              </p>
            </div>
            <div className="shrink-0 text-right">
              <span className="text-xs text-[#5E5866] font-semibold">Effective Date</span>
              <div className="text-sm font-black text-[#16001D] mt-0.5">1 January 2025</div>
              <div className="text-xs text-[#5E5866] mt-2 font-semibold">Last Updated</div>
              <div className="text-sm font-black text-[#16001D] mt-0.5">1 June 2026</div>
            </div>
          </div>

          {/* Quick overview chips */}
          <div className="flex flex-wrap gap-3 mt-8">
            {[
              { label: "1 Required Cookie Type", icon: "lock" },
              { label: "4 Optional Cookie Types", icon: "tune" },
              { label: "No Advertising Cookies", icon: "block" },
              { label: "No Cross-Site Tracking", icon: "shield" },
            ].map((chip) => (
              <div key={chip.label} className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-[#6330D6]/12 shadow-sm text-xs font-black text-[#16001D]">
                <MaterialIcon icon={chip.icon} size={14} className="text-[#6330D6]" />
                {chip.label}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Content with Sidebar ─── */}
      <section className="py-10 md:py-14 bg-white">
        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-10 lg:gap-16 items-start">

            {/* Sidebar TOC */}
            <nav className="lg:sticky lg:top-24 hidden lg:block" aria-label="Page sections">
              <p className="text-[10px] font-black uppercase tracking-widest text-[#5E5866] mb-4">On This Page</p>
              <ul className="space-y-1">
                {SECTIONS.map((section) => (
                  <li key={section.id}>
                    <a
                      href={`#${section.id}`}
                      className="block text-sm font-semibold text-[#5E5866] hover:text-[#6330D6] py-1.5 px-3 rounded-xl hover:bg-[#6330D6]/5 transition-all duration-200"
                    >
                      {section.label}
                    </a>
                  </li>
                ))}
              </ul>

              <div className="mt-8 p-4 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
                <p className="text-xs font-black text-[#16001D] mb-2">Questions about cookies?</p>
                <Link
                  href="/contact"
                  className="inline-flex items-center gap-1.5 text-xs font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
                >
                  <span>Contact us</span>
                  <MaterialIcon icon="arrow_forward" size={14} />
                </Link>
              </div>
            </nav>

            {/* Main Content */}
            <div className="space-y-12 max-w-none">

              {/* What Are Cookies */}
              <CookieSection id="what-are-cookies" title="What Are Cookies?">
                <p>Cookies are small text files stored on your device when you visit a website or use an app. They let the platform remember information between visits — like whether you&apos;re logged in, what&apos;s in your cart, and which neighbourhood you&apos;ve selected.</p>
                <p>On Nearle, we use cookies in the web app and similar technologies (like local storage) in the mobile apps. The principle is the same: store only what&apos;s needed to give you a smooth, personalised experience.</p>

                <div className="flex gap-3 p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/10 mt-4">
                  <MaterialIcon icon="info" size={18} className="text-[#6330D6] shrink-0 mt-0.5" />
                  <p className="text-sm text-[#5E5866] leading-relaxed">
                    Nearle does not use third-party advertising networks. We don&apos;t place tracking pixels from Google Ads, Meta, or any other ad platform on our pages.
                  </p>
                </div>
              </CookieSection>

              {/* Cookie Types */}
              {COOKIE_TYPES.map((cookieType) => (
                <CookieSection key={cookieType.id} id={cookieType.id} title="">
                  <div className="flex items-start gap-4 mb-5">
                    <div className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${cookieType.tone}`}>
                      <MaterialIcon icon={cookieType.icon} size={24} />
                    </div>
                    <div>
                      <div className="flex items-center gap-3 flex-wrap">
                        <h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] leading-tight tracking-tight">
                          {cookieType.title}
                        </h2>
                        <span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wide ${cookieType.badgeColor}`}>
                          {cookieType.badge}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div className="h-px bg-[#6330D6]/10 mb-5" />

                  <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-5">
                    {cookieType.description}
                  </p>

                  <div className="overflow-hidden rounded-2xl border border-[#6330D6]/10">
                    <table className="w-full text-sm">
                      <thead className="bg-[#FAF7FD]">
                        <tr>
                          <th className="px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest text-[#5E5866]">Cookie Name</th>
                          <th className="px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest text-[#5E5866]">Purpose</th>
                          <th className="px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest text-[#5E5866] whitespace-nowrap">Duration</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-[#6330D6]/8 bg-white">
                        {cookieType.examples.map((example) => (
                          <tr key={example.name}>
                            <td className="px-4 py-3 font-mono text-xs font-bold text-[#6330D6] whitespace-nowrap">{example.name}</td>
                            <td className="px-4 py-3 text-xs text-[#5E5866] leading-relaxed">{example.purpose}</td>
                            <td className="px-4 py-3 text-xs font-semibold text-[#5E5866] whitespace-nowrap">{example.duration}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </CookieSection>
              ))}

              {/* Managing Cookies */}
              <CookieSection id="managing" title="Managing Your Cookie Preferences">
                <p>You have control over most cookies Nearle uses. Here&apos;s how to manage them:</p>

                <h3 className="text-base md:text-lg font-black text-[#16001D] mt-5 mb-2">Through Your Browser</h3>
                <p>Every major browser lets you view, delete, and block cookies. Here&apos;s where to find those settings:</p>
                <ul className="space-y-1.5 mt-3">
                  {["Chrome: Settings → Privacy and Security → Cookies",
                    "Safari: Settings → Safari → Privacy & Security",
                    "Firefox: Settings → Privacy & Security",
                    "Edge: Settings → Privacy, Search and Services → Cookies"
                  ].map((item, i) => (
                    <li key={i} className="flex gap-2.5 text-sm text-[#5E5866]">
                      <div className="w-1.5 h-1.5 rounded-full bg-[#6330D6] mt-2 shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>

                <h3 className="text-base md:text-lg font-black text-[#16001D] mt-5 mb-2">Through Your Nearle Account</h3>
                <p>You can manage optional cookies from your Nearle account settings. Essential cookies cannot be disabled — they are required for the platform to work.</p>

                <div className="flex gap-3 p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/10 mt-4">
                  <MaterialIcon icon="warning" size={18} className="text-[#6330D6] shrink-0 mt-0.5" />
                  <p className="text-sm text-[#5E5866] leading-relaxed">
                    Disabling all cookies may cause some features to stop working — like staying logged in or remembering your delivery address. We recommend keeping essential and preference cookies enabled for the best experience.
                  </p>
                </div>
              </CookieSection>

              {/* Updates */}
              <CookieSection id="updates" title="Updates to This Policy">
                <p>When we make significant changes to how we use cookies, we will update this page and notify you through the Nearle app. The &quot;Last Updated&quot; date at the top of this page reflects the most recent revision.</p>
                <p>For questions about our cookie practices, contact us at:</p>
                <div className="mt-5 p-6 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
                  <div className="space-y-2 text-sm text-[#5E5866]">
                    <div className="flex gap-2">
                      <MaterialIcon icon="mail" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
                      <a href="mailto:privacy@nearle.in" className="text-[#6330D6] font-black hover:underline">privacy@nearle.in</a>
                    </div>
                    <div className="flex gap-2">
                      <MaterialIcon icon="location_on" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
                      <span>424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002</span>
                    </div>
                  </div>
                </div>
              </CookieSection>

            </div>
          </div>
        </div>
      </section>

      {/* ─── Bottom nav ─── */}
      <section className="py-8 bg-[#FAF7FD] border-t border-[#6330D6]/10">
        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
          <div className="flex flex-wrap gap-4 justify-center">
            {[
              { label: "Privacy Policy", href: "/privacy", icon: "lock" },
              { label: "Terms of Service", href: "/terms", icon: "gavel" },
              { label: "Contact Us", href: "/contact", icon: "mail" },
            ].map((link) => (
              <Link
                key={link.label}
                href={link.href}
                className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#6330D6]/15 bg-white text-sm font-black text-[#16001D] hover:border-[#6330D6]/30 hover:bg-[#6330D6]/5 transition-all duration-200"
              >
                <MaterialIcon icon={link.icon} size={16} className="text-[#6330D6]" />
                {link.label}
              </Link>
            ))}
          </div>
        </div>
      </section>
    </PremiumPageShell>
  );
}

function CookieSection({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
  return (
    <div id={id} className="scroll-mt-28">
      {title && (
        <h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mb-5 pb-4 border-b border-[#6330D6]/10 leading-tight tracking-tight">
          {title}
        </h2>
      )}
      <div className="space-y-4 text-sm md:text-base text-[#5E5866] leading-relaxed">
        {children}
      </div>
    </div>
  );
}
