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: "Privacy Policy",
  description:
    "Learn how Nearle collects, uses, and protects your personal information. Our privacy policy covers customers, merchants, and delivery partners on the Nearle platform.",
  openGraph: {
    title: "Privacy Policy | Nearle",
    description:
      "Nearle's privacy policy — how we handle your data across our hyperlocal commerce platform.",
    url: "https://nearle.in/privacy",
  },
};

const SECTIONS = [
  { id: "information-we-collect", label: "Information We Collect" },
  { id: "why-we-collect", label: "Why We Collect It" },
  { id: "how-we-use", label: "How We Use It" },
  { id: "sharing", label: "Sharing Information" },
  { id: "security", label: "Security" },
  { id: "cookies", label: "Cookies" },
  { id: "your-rights", label: "Your Rights" },
  { id: "contact", label: "Contact Us" },
];

const KEY_POINTS = [
  {
    icon: "lock",
    title: "We Don't Sell Your Data",
    desc: "Your personal information is never sold to third-party advertisers or data brokers. Ever.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
  },
  {
    icon: "visibility_off",
    title: "Minimal Data Collection",
    desc: "We only collect information that's genuinely needed to make Nearle work for you.",
    tone: "bg-secondary/8 text-secondary",
  },
  {
    icon: "manage_accounts",
    title: "You Stay in Control",
    desc: "Access, update, or delete your data anytime from your Nearle account settings.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
  },
];

export default function PrivacyPolicyPage() {
  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">
                Privacy Policy
              </h1>
              <p className="text-sm md:text-base text-[#5E5866] mt-4 max-w-2xl leading-relaxed font-semibold">
                Nearle is committed to protecting your privacy. This policy explains how we collect, use, and safeguard information across our hyperlocal commerce platform — for customers, merchants, and delivery partners.
              </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>

          {/* Key points */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-10">
            {KEY_POINTS.map((point) => (
              <div key={point.title} className="flex gap-3 p-4 rounded-2xl bg-white border border-[#6330D6]/8 shadow-sm">
                <div className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 ${point.tone}`}>
                  <MaterialIcon icon={point.icon} size={20} />
                </div>
                <div>
                  <h4 className="text-sm font-black text-[#16001D]">{point.title}</h4>
                  <p className="text-xs text-[#5E5866] mt-1 leading-relaxed">{point.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Content with Sidebar TOC ─── */}
      <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">Have a privacy question?</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="prose-nearle max-w-none space-y-12">

              <PolicySection id="information-we-collect" title="Information We Collect">
                <p>When you use Nearle — whether you&apos;re a customer ordering groceries from a neighbourhood store, a merchant managing your digital catalogue, or a delivery partner on your route — we collect information that helps us deliver the service.</p>

                <PolicySubheading>For Customers</PolicySubheading>
                <PolicyList items={[
                  "Name, phone number, and email address when you create a Nearle account",
                  "Delivery address and neighbourhood location to match you with nearby stores",
                  "Order history, item preferences, and past interactions on the platform",
                  "Payment details (processed securely — Nearle does not store card numbers)",
                  "Device type, app version, and approximate location during active sessions",
                ]} />

                <PolicySubheading>For Merchants</PolicySubheading>
                <PolicyList items={[
                  "Business name, address, phone number, and GSTIN",
                  "Bank account details for weekly order payouts",
                  "Product catalogue content, pricing, and stock updates",
                  "Order fulfilment data and customer satisfaction scores",
                  "Dashboard usage data to improve merchant tools",
                ]} />

                <PolicySubheading>For Delivery Partners</PolicySubheading>
                <PolicyList items={[
                  "Full name, phone number, Aadhaar, and PAN details for identity verification",
                  "Bank account for weekly earnings settlement",
                  "Real-time GPS location during active delivery shifts for routing and safety",
                  "Delivery completion records and performance metrics",
                ]} />
              </PolicySection>

              <PolicySection id="why-we-collect" title="Why We Collect It">
                <p>We collect the minimum information needed to make Nearle work reliably and safely for everyone in the neighbourhood.</p>
                <PolicyList items={[
                  "To create and secure your account on the Nearle platform",
                  "To match customers with the nearest verified neighbourhood stores",
                  "To process orders, payments, and merchant payouts accurately",
                  "To dispatch and route delivery partners efficiently",
                  "To send order confirmations, delivery updates, and service alerts",
                  "To detect fraud and prevent misuse of the platform",
                  "To improve our product experience based on actual usage patterns",
                  "To comply with Indian legal and regulatory obligations",
                ]} />
              </PolicySection>

              <PolicySection id="how-we-use" title="How We Use Your Information">
                <p>Your information stays within the Nearle platform to serve you. Here&apos;s exactly how:</p>

                <PolicySubheading>Order Fulfilment</PolicySubheading>
                <p>When a customer places an order, we share their delivery address and contact number with the merchant store and the assigned delivery partner — only for that specific delivery. Once the order is complete, access is revoked.</p>

                <PolicySubheading>Customer Discovery</PolicySubheading>
                <p>We use your neighbourhood location to surface stores, products, and offers that are genuinely nearby — not stores 20km away. We don&apos;t build advertising profiles or sell your browsing behaviour.</p>

                <PolicySubheading>Merchant Analytics</PolicySubheading>
                <p>Merchants see aggregated data about their own customers — sales trends, popular items, delivery times. They do not see individual customer profiles, phone numbers, or personal details.</p>

                <PolicySubheading>Delivery Partner Routing</PolicySubheading>
                <p>We use real-time GPS location data during active delivery shifts to assign orders and optimise routes. Location tracking stops the moment a delivery partner goes offline.</p>

                <PolicySubheading>Platform Improvement</PolicySubheading>
                <p>We analyse usage patterns in aggregate to make Nearle faster, cleaner, and more reliable. No individual is profiled for this purpose.</p>
              </PolicySection>

              <PolicySection id="sharing" title="Sharing Your Information">
                <p>We do not sell, rent, or trade your personal information to anyone outside Nearle. Here are the limited cases where information is shared:</p>

                <PolicyList items={[
                  "With merchants: only the delivery address and contact number needed to prepare and hand over your order",
                  "With delivery partners: only the pickup location, drop-off address, and a masked contact number for that specific delivery",
                  "With payment processors: to securely complete transactions — they are bound by PCI DSS standards",
                  "With government authorities: only when legally required by Indian law or a court order",
                  "With fraud prevention systems: to detect and prevent fake accounts and chargebacks",
                ]} />

                <PolicyNote>
                  Third-party services integrated into Nearle (such as mapping providers and SMS gateways) operate under strict data processing agreements. They cannot use your data for their own purposes.
                </PolicyNote>
              </PolicySection>

              <PolicySection id="security" title="How We Keep Your Data Secure">
                <p>Nearle takes security seriously — because neighbourhood trust is our entire business model.</p>
                <PolicyList items={[
                  "All data is transmitted over encrypted HTTPS connections",
                  "Passwords are hashed and never stored in plain text",
                  "Payment information is handled by PCI DSS-compliant payment gateways",
                  "Access to production systems is restricted to authorised Nearle engineers with multi-factor authentication",
                  "We conduct regular security audits and vulnerability assessments",
                  "Data is backed up and stored in geographically redundant, encrypted storage",
                ]} />
                <p>If you ever suspect unauthorised access to your Nearle account, contact our support team immediately at <a href="mailto:security@nearle.in" className="text-[#6330D6] font-black hover:underline">security@nearle.in</a>.</p>
              </PolicySection>

              <PolicySection id="cookies" title="Cookies and Tracking">
                <p>Nearle uses cookies and similar technologies to keep the platform running smoothly. Our full <Link href="/cookies" className="text-[#6330D6] font-black hover:underline">Cookie Policy</Link> explains each type in detail. In short:</p>
                <PolicyList items={[
                  "Essential cookies: required for login, cart, and core app functions — cannot be disabled",
                  "Performance cookies: help us understand how pages are used and where errors occur",
                  "Preference cookies: remember your settings, neighbourhood, and saved addresses",
                  "Analytics cookies: aggregate, anonymised data on platform usage — no individual profiles",
                ]} />
                <p>We do not use advertising cookies or cross-site tracking. You can manage cookie preferences from your browser settings or your Nearle account.</p>
              </PolicySection>

              <PolicySection id="your-rights" title="Your Privacy Rights">
                <p>Under the Information Technology Act, 2000 and emerging Indian data protection law, you have the following rights:</p>
                <PolicyList items={[
                  "Right to access: request a copy of the personal data Nearle holds about you",
                  "Right to correction: update or correct inaccurate information in your profile",
                  "Right to deletion: request removal of your account and associated personal data",
                  "Right to portability: receive your data in a machine-readable format where applicable",
                  "Right to withdraw consent: for optional data uses, you can withdraw consent at any time",
                  "Right to raise a grievance: contact our Grievance Officer (details below) for any privacy concern",
                ]} />
                <p>To exercise any of these rights, email us at <a href="mailto:privacy@nearle.in" className="text-[#6330D6] font-black hover:underline">privacy@nearle.in</a> from your registered email address. We respond within 30 days.</p>
              </PolicySection>

              <PolicySection id="contact" title="Contact and Grievance Officer">
                <p>If you have any questions, concerns, or complaints about this Privacy Policy or how Nearle handles your data, please contact:</p>
                <div className="mt-5 p-6 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
                  <h4 className="text-base font-black text-[#16001D] mb-3">Nearle Privacy Team</h4>
                  <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>
                  <p className="text-xs text-[#5E5866] mt-4">We will acknowledge your request within 48 hours and resolve it within 30 days.</p>
                </div>

                <p className="mt-6 text-sm text-[#5E5866]">
                  We may update this Privacy Policy from time to time. When we do, we will notify you via the Nearle app and update the &ldquo;Last Updated&rdquo; date above. Continued use of Nearle after changes constitutes your acceptance of the revised policy.
                </p>
              </PolicySection>

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

      {/* ─── Bottom nav to other policies ─── */}
      <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: "Terms of Service", href: "/terms", icon: "gavel" },
              { label: "Cookie Policy", href: "/cookies", icon: "cookie" },
              { 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 PolicySection({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
  return (
    <div id={id} className="scroll-mt-28">
      <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>
  );
}

function PolicySubheading({ children }: { children: React.ReactNode }) {
  return (
    <h3 className="text-base md:text-lg font-black text-[#16001D] mt-5 mb-2">
      {children}
    </h3>
  );
}

function PolicyList({ items }: { items: string[] }) {
  return (
    <ul className="space-y-2 mt-3">
      {items.map((item, i) => (
        <li key={i} className="flex gap-2.5">
          <div className="w-1.5 h-1.5 rounded-full bg-[#6330D6] mt-2 shrink-0" />
          <span>{item}</span>
        </li>
      ))}
    </ul>
  );
}

function PolicyNote({ children }: { children: React.ReactNode }) {
  return (
    <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">{children}</p>
    </div>
  );
}
