import Link from "next/link";
import { ArrowUpRight, BookOpenCheck, CheckCircle2, FileText, LockKeyhole, ShieldCheck } from "lucide-react";

import { siteConfig } from "@/config/site.config";
import { legalPages, type LegalSlug } from "@/data/legal.data";
import { getPageCopy } from "@/data/pages.data";
import type { Dictionary } from "@/lib/i18n";
import type { Locale } from "@/lib/locales";
import { localizedPath } from "@/lib/routes";

const icons = {
  privacy: LockKeyhole,
  terms: FileText,
  security: ShieldCheck,
};

const labels = {
  en: { contents: "On this page", updated: "Last updated", contact: "Questions about this page?", action: "Contact our team" },
  hi: { contents: "इस पेज पर", updated: "अंतिम अपडेट", contact: "इस पेज के बारे में प्रश्न हैं?", action: "हमारी टीम से संपर्क करें" },
  gu: { contents: "આ પેજ પર", updated: "છેલ્લું અપડેટ", contact: "આ પેજ વિશે પ્રશ્ન છે?", action: "અમારી ટીમનો સંપર્ક કરો" },
} satisfies Record<Locale, Record<string, string>>;

export default function LegalPage({
  dictionary,
  locale,
  slug,
}: {
  dictionary: Dictionary;
  locale: Locale;
  slug: LegalSlug;
}) {
  const content = legalPages[slug];
  const page = getPageCopy(dictionary, slug);
  const copy = labels[locale];
  const Icon = icons[slug];

  return (
    <>
      <section className="relative overflow-hidden border-b border-[#e9edf6] bg-gradient-to-br from-[#f8f9ff] via-white to-[#eef8ff] px-6 py-16 sm:py-20">
        <div className="pointer-events-none absolute -left-20 top-0 h-60 w-60 rounded-full bg-[#e4e7ff] blur-3xl" />
        <div className="pointer-events-none absolute right-0 top-8 h-72 w-72 rounded-full bg-[#e1f7ff] blur-3xl" />
        <div className="relative mx-auto max-w-[1160px]">
          <span className="inline-flex items-center gap-2 rounded-full border border-[#dce1ff] bg-white/85 px-3 py-2 text-[11px] font-extrabold uppercase tracking-[0.16em] text-[#5a66dd] shadow-sm"><Icon size={15} />{content.badge}</span>
          <h1 className="mt-5 max-w-[760px] text-4xl font-extrabold tracking-[-0.06em] text-[#111b43] sm:text-6xl">{page.title}</h1>
          <p className="mt-5 max-w-[760px] text-[16px] leading-8 text-[#68758f]">{page.description}</p>
          <p className="mt-5 flex items-center gap-2 text-[12px] font-bold text-[#7d88a0]"><BookOpenCheck size={15} className="text-[#6370e9]" />{copy.updated}: June 1, 2026</p>
        </div>
      </section>
      <section className="mx-auto grid max-w-[1160px] gap-10 px-6 py-12 lg:grid-cols-[250px_1fr] lg:py-16">
        <aside>
          <div className="sticky top-24 rounded-2xl border border-[#e5e9f4] bg-white p-4 shadow-[0_10px_26px_rgba(42,57,102,0.06)]">
            <h2 className="text-[12px] font-extrabold uppercase tracking-[0.14em] text-[#69758d]">{copy.contents}</h2>
            <nav className="mt-3 space-y-1">
              {content.sections.map((section) => <Link key={section.id} href={`#${section.id}`} className="block rounded-lg px-2 py-2 text-[12px] font-bold text-[#69758d] transition hover:bg-[#f5f7ff] hover:text-[#5865dd]">{section.title}</Link>)}
            </nav>
          </div>
        </aside>
        <article className="min-w-0">
          {content.sections.map((section, index) => (
            <section key={section.id} id={section.id} className="scroll-mt-24 border-b border-[#edf0f6] py-7 first:pt-0">
              <p className="text-[11px] font-extrabold uppercase tracking-[0.16em] text-[#7b86ef]">0{index + 1}</p>
              <h2 className="mt-2 text-2xl font-extrabold tracking-[-0.04em] text-[#1d294e]">{section.title}</h2>
              {section.paragraphs.map((paragraph) => <p key={paragraph} className="mt-3 text-[14px] leading-7 text-[#68758f]">{paragraph}</p>)}
              {section.bullets ? <div className="mt-4 grid gap-2">{section.bullets.map((item) => <p key={item} className="flex gap-2 text-[13px] leading-6 text-[#5f6d87]"><CheckCircle2 size={16} className="mt-1 shrink-0 text-[#6370e9]" />{item}</p>)}</div> : null}
            </section>
          ))}
          <div className="mt-10 rounded-[24px] bg-gradient-to-r from-[#5867eb] to-[#7655e8] p-6 text-white shadow-[0_16px_35px_rgba(91,87,231,0.2)]">
            <h2 className="text-xl font-extrabold">{copy.contact}</h2>
            <p className="mt-2 text-[13px] leading-6 text-[#e6e8ff]">{siteConfig.email}</p>
            <Link href={localizedPath(locale, "/contact")} className="mt-4 inline-flex items-center gap-2 rounded-lg bg-white px-4 py-3 text-[12px] font-extrabold text-[#5964dc]">{copy.action}<ArrowUpRight size={15} /></Link>
          </div>
        </article>
      </section>
    </>
  );
}