import type { Metadata } from "next";
import Link from "next/link";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { EVENT } from "@/lib/event";

export const metadata: Metadata = {
  title: `Privacy Policy · ${EVENT.nameEn} ${EVENT.year} Ujjain`,
  description: `Privacy policy for ${EVENT.nameEn} ${EVENT.year} visitor registration — Aadhaar, OTP, data use, retention, and your rights under Indian law.`,
};

export default function PrivacyPage() {
  return (
    <main className="min-h-screen">
      <SiteHeader solid />
      <article className="mx-auto max-w-3xl px-5 py-12">
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--gold)]">
          Legal · Last updated July 2026
        </p>
        <h1 className="font-display mt-2 text-4xl font-semibold md:text-5xl">
          Privacy policy
        </h1>
        <p className="mt-4 text-[var(--muted)]">
          This policy explains how the {EVENT.nameEn} {EVENT.year} (Ujjain)
          visitor registration website (“Service”) collects, uses, stores, and
          protects personal data when you register for a Kumbh Pass for the
          sacred gathering on the {EVENT.river} ({EVENT.dateRangeEn}). It is
          written for devotees and general visitors using the website channel.
        </p>

        <nav className="mt-8 rounded-2xl border border-[var(--line)] bg-[var(--bg-elevated)] p-5 text-sm">
          <p className="font-semibold text-[var(--ink)]">On this page</p>
          <ul className="mt-3 grid gap-2 text-[var(--muted)] sm:grid-cols-2">
            <li>
              <a href="#controller" className="hover:text-[var(--gold)]">
                Who we are
              </a>
            </li>
            <li>
              <a href="#data-we-collect" className="hover:text-[var(--gold)]">
                Data we collect
              </a>
            </li>
            <li>
              <a href="#aadhaar" className="hover:text-[var(--gold)]">
                Aadhaar handling
              </a>
            </li>
            <li>
              <a href="#purpose" className="hover:text-[var(--gold)]">
                Purpose & legal basis
              </a>
            </li>
            <li>
              <a href="#sharing" className="hover:text-[var(--gold)]">
                Sharing & messaging
              </a>
            </li>
            <li>
              <a href="#retention" className="hover:text-[var(--gold)]">
                Retention & security
              </a>
            </li>
            <li>
              <a href="#rights" className="hover:text-[var(--gold)]">
                Your rights
              </a>
            </li>
            <li>
              <a href="#contact" className="hover:text-[var(--gold)]">
                Contact
              </a>
            </li>
          </ul>
        </nav>

        <section id="controller" className="scroll-mt-28 mt-12">
          <h2 className="font-display text-2xl font-semibold">1. Who we are</h2>
          <p className="mt-3 text-[var(--muted)]">
            The Service is operated for {EVENT.nameEn} {EVENT.year} visitor
            facilitation in Ujjain, Madhya Pradesh ({EVENT.locationEn}). For the
            purpose of this policy, the data controller is the organising
            authority responsible for Simhastha visitor registration systems (or
            its authorised technology partner acting on instructions).
          </p>
        </section>

        <section id="data-we-collect" className="scroll-mt-28 mt-10">
          <h2 className="font-display text-2xl font-semibold">
            2. Data we collect
          </h2>
          <p className="mt-3 text-[var(--muted)]">
            When you register online we may process:
          </p>
          <ul className="mt-4 list-disc space-y-2 pl-5 text-[var(--muted)]">
            <li>
              <strong className="text-[var(--ink)]">Identity:</strong> name,
              age, gender (from you or authorised eKYC where enabled).
            </li>
            <li>
              <strong className="text-[var(--ink)]">Aadhaar-related:</strong>{" "}
              Aadhaar number for validation (stored as a secure hash and last-4
              mask — see below).
            </li>
            <li>
              <strong className="text-[var(--ink)]">Contact:</strong> mobile
              number (OTP-verified) and emergency contact number.
            </li>
            <li>
              <strong className="text-[var(--ink)]">Visit details:</strong> state
              / country of travel, arrival date, transport mode, stay type.
            </li>
            <li>
              <strong className="text-[var(--ink)]">Pass records:</strong> pass
              number, status, QR payload, registration time, channel (
              <code className="text-[var(--gold)]">website</code>).
            </li>
            <li>
              <strong className="text-[var(--ink)]">Technical logs:</strong> IP
              address, user-agent, OTP attempt outcomes, and audit events for
              security.
            </li>
          </ul>
          <p className="mt-4 text-[var(--muted)]">
            We do not ask for payment card data on this registration flow.
            Registration for the pass is free.
          </p>
        </section>

        <section id="aadhaar" className="scroll-mt-28 mt-10">
          <h2 className="font-display text-2xl font-semibold">
            3. Aadhaar handling
          </h2>
          <p className="mt-3 text-[var(--muted)]">
            Aadhaar is used only to verify unique identity and prevent duplicate
            Kumbh Passes. On this Service:
          </p>
          <ul className="mt-4 list-disc space-y-2 pl-5 text-[var(--muted)]">
            <li>
              Format and Verhoeff checksum validation are applied before OTP.
            </li>
            <li>
              Full Aadhaar is not stored in plaintext; a salted hash and last-4
              digits are retained for uniqueness and support display.
            </li>
            <li>
              Aadhaar is not published on the public pass page or QR beyond what
              is required for authorised verification workflows.
            </li>
            <li>
              Where UIDAI eKYC is integrated (when legally authorised), only
              permitted demographic fields (such as name, gender, date of birth)
              may be fetched with your consent for that session.
            </li>
            <li>
              Processing aims to comply with the Aadhaar (Targeted Delivery of
              Financial and Other Subsidies, Benefits and Services) Act, 2016,
              related regulations, and UIDAI circulars on display and storage.
            </li>
          </ul>
        </section>

        <section id="purpose" className="scroll-mt-28 mt-10">
          <h2 className="font-display text-2xl font-semibold">
            4. Purpose & legal basis
          </h2>
          <p className="mt-3 text-[var(--muted)]">
            We process personal data to:
          </p>
          <ul className="mt-4 list-disc space-y-2 pl-5 text-[var(--muted)]">
            <li>Create and issue your Kumbh Pass and QR code.</li>
            <li>Verify mobile ownership via OTP.</li>
            <li>Prevent duplicate or fraudulent registrations.</li>
            <li>
              Send transactional SMS / WhatsApp confirmations about your pass.
            </li>
            <li>Support crowd, safety, and audit requirements of the event.</li>
            <li>Improve Service reliability and investigate abuse.</li>
          </ul>
          <p className="mt-4 text-[var(--muted)]">
            Processing is based on your consent at registration, performance of
            the registration service you request, and legitimate / lawful
            purposes connected with public event facilitation under applicable
            Indian law, including the Digital Personal Data Protection Act, 2023
            (DPDP Act) as it applies.
          </p>
        </section>

        <section id="sharing" className="scroll-mt-28 mt-10">
          <h2 className="font-display text-2xl font-semibold">
            5. Sharing & messaging
          </h2>
          <p className="mt-3 text-[var(--muted)]">
            We do not sell personal data. We may share limited data with:
          </p>
          <ul className="mt-4 list-disc space-y-2 pl-5 text-[var(--muted)]">
            <li>
              Government-approved SMS and WhatsApp Business providers — only to
              deliver your pass confirmation.
            </li>
            <li>
              Hosting / database processors under contract (including
              government-approved cloud) bound to confidentiality and security
              instructions.
            </li>
            <li>
              Law enforcement or competent authorities when required by law.
            </li>
            <li>
              Human support / helpline teams if you request correction help or
              eKYC mismatch escalation.
            </li>
          </ul>
          <p className="mt-4 text-[var(--muted)]">
            The same registration backend may be used by the mobile app and voice
            helpline channels; your record is tagged with the channel used (
            website, mobile app, or voice agent).
          </p>
        </section>

        <section id="retention" className="scroll-mt-28 mt-10">
          <h2 className="font-display text-2xl font-semibold">
            6. Retention & security
          </h2>
          <ul className="mt-4 list-disc space-y-2 pl-5 text-[var(--muted)]">
            <li>
              Pass and visitor records are retained for the duration of the
              Kumbh period and for a reasonable archival period required for
              audit, dispute, or statutory purposes, then deleted or anonymised
              where feasible.
            </li>
            <li>
              OTP codes are short-lived (minutes) and stored only as hashed
              values with attempt limits.
            </li>
            <li>
              Transmission uses HTTPS. Access is restricted by role-based
              controls; security events are logged.
            </li>
            <li>
              No system is perfectly secure; please protect your phone and do
              not share OTPs with anyone.
            </li>
          </ul>
        </section>

        <section id="rights" className="scroll-mt-28 mt-10">
          <h2 className="font-display text-2xl font-semibold">7. Your rights</h2>
          <p className="mt-3 text-[var(--muted)]">
            Subject to applicable law, you may request:
          </p>
          <ul className="mt-4 list-disc space-y-2 pl-5 text-[var(--muted)]">
            <li>Access to the personal data we hold about your registration.</li>
            <li>Correction of inaccurate details (where policy allows).</li>
            <li>
              Information about processing; withdrawal of consent for future
              optional communications (transactional pass messages may still be
              required).
            </li>
            <li>
              Grievance redressal through the contact channel below.
            </li>
          </ul>
          <p className="mt-4 text-[var(--muted)]">
            Some requests may require identity verification (for example OTP to
            the registered mobile) before we can act.
          </p>
        </section>

        <section id="children" className="scroll-mt-28 mt-10">
          <h2 className="font-display text-2xl font-semibold">
            8. Children & guardians
          </h2>
          <p className="mt-3 text-[var(--muted)]">
            Where a minor is registered, a parent or guardian should complete the
            process and provide accurate emergency contact information. Do not
            submit another person’s Aadhaar without lawful authority.
          </p>
        </section>

        <section id="cookies" className="scroll-mt-28 mt-10">
          <h2 className="font-display text-2xl font-semibold">
            9. Cookies & local storage
          </h2>
          <p className="mt-3 text-[var(--muted)]">
            We use essential session mechanisms to keep your OTP-verified session
            while you finish registration. Draft fields may be kept temporarily
            in browser session storage after OTP (never store full Aadhaar in
            localStorage). We do not use advertising cookies on this registration
            flow.
          </p>
        </section>

        <section id="changes" className="scroll-mt-28 mt-10">
          <h2 className="font-display text-2xl font-semibold">10. Changes</h2>
          <p className="mt-3 text-[var(--muted)]">
            We may update this policy as regulations or the Service change. The
            “Last updated” date at the top will be revised. Continued use of the
            Service after changes means you acknowledge the updated policy.
          </p>
        </section>

        <section id="contact" className="scroll-mt-28 mt-10">
          <h2 className="font-display text-2xl font-semibold">
            11. Contact / grievance
          </h2>
          <p className="mt-3 text-[var(--muted)]">
            For privacy questions, correction requests, or grievances related to
            this website registration:
          </p>
          <div className="mt-4 rounded-2xl border border-[var(--line)] bg-[var(--bg-elevated)] p-5 text-[var(--muted)]">
            <p>
              <strong className="text-[var(--ink)]">Helpline (placeholder):</strong>{" "}
              1800-XXX-XXXX
            </p>
            <p className="mt-2">
              <strong className="text-[var(--ink)]">Email (placeholder):</strong>{" "}
              privacy@mahakalkumbh.ujjain.gov.in
            </p>
            <p className="mt-2 text-sm">
              Replace these placeholders with the official grievance officer
              details before public launch.
            </p>
          </div>
        </section>

        <div className="mt-12 flex flex-wrap gap-3">
          <Link href="/register" className="btn btn-primary">
            Continue to registration
          </Link>
          <Link href="/ujjain" className="btn btn-secondary">
            Explore Ujjain
          </Link>
        </div>
      </article>
      <SiteFooter />
    </main>
  );
}