import type { ReactNode } from "react";
import Link from "next/link";
import { Mail, MapPin, Phone } from "lucide-react";

export type LegalSection = { id: string; label: string };

/* Shared layout for legal pages: navy hero, sticky TOC, numbered sections. */
export default function LegalPage({
  pill,
  title,
  intro,
  updated,
  sections,
  children,
  other,
}: {
  pill: string;
  title: string;
  intro: string;
  updated: string;
  sections: LegalSection[];
  children: ReactNode;
  other: { href: string; label: string; text: string };
}) {
  return (
    <>
      <section className="bg-navy py-16 text-white max-md:py-12">
        <div className="mx-container max-w-3xl">
          <span className="inline-flex items-center gap-2.5 rounded-full border border-white/20 px-3.5 py-1.5 font-mono text-[10.5px] font-medium tracking-[0.12em] text-herosub">
            <span className="size-[7px] rounded-full bg-accent" aria-hidden="true" />
            {pill}
          </span>
          <h1 className="mt-3.5 font-display text-[clamp(32px,3.6vw,46px)] font-bold leading-[1.08]">
            {title}
          </h1>
          <p className="mt-4 max-w-[560px] text-[16px] leading-relaxed text-herosub">
            {intro}
          </p>
          <p className="mt-3 font-mono text-[11px] tracking-[0.14em] text-faint">
            LAST UPDATED: {updated.toUpperCase()}
          </p>
        </div>
      </section>

      <section className="py-14 max-md:py-10">
        <div className="mx-container grid max-w-5xl items-start gap-10 lg:grid-cols-[220px_minmax(0,1fr)]">
          <nav
            aria-label="On this page"
            className="hidden rounded-2xl border border-line bg-white p-5 lg:sticky lg:top-24 lg:block"
          >
            <p className="font-mono text-[11px] font-medium tracking-[0.18em] text-muted">
              ON THIS PAGE
            </p>
            <ol className="mt-3 space-y-2">
              {sections.map((s, i) => (
                <li key={s.id}>
                  <a
                    href={`#${s.id}`}
                    className="text-[13px] font-medium leading-snug text-body hover:text-brand"
                  >
                    <span className="mr-1.5 font-mono text-muted">{String(i + 1).padStart(2, "0")}</span>
                    {s.label}
                  </a>
                </li>
              ))}
            </ol>
          </nav>
          <div className="article-body min-w-0">{children}</div>
        </div>
      </section>

      <section className="pb-14 max-md:pb-10">
        <div className="mx-container max-w-5xl">
          <div className="rounded-2xl border border-line bg-white p-7 max-sm:p-6">
            <p className="text-[13.5px] font-semibold text-ink">Questions about this policy?</p>
            <ul className="mt-3 space-y-2.5 text-[13.5px] text-body">
              <li>
                <a href="tel:+919818993537" className="flex items-center gap-2.5 hover:text-ink">
                  <Phone size={15} className="shrink-0 text-brand" aria-hidden="true" />
                  +91-9818993537
                </a>
              </li>
              <li>
                <a href="mailto:akg@acgil.net" className="flex items-center gap-2.5 hover:text-ink">
                  <Mail size={15} className="shrink-0 text-brand" aria-hidden="true" />
                  akg@acgil.net
                </a>
              </li>
              <li className="flex items-start gap-2.5">
                <MapPin size={15} className="mt-0.5 shrink-0 text-brand" aria-hidden="true" />
                H-107, Sector-63, Noida – 201301, Uttar Pradesh, India
              </li>
            </ul>
          </div>
          <div className="mt-5 rounded-2xl bg-navy p-7 max-sm:p-6">
            <p className="font-display text-[18px] font-bold text-white">{other.label}</p>
            <p className="mt-1.5 text-[13.5px] leading-relaxed text-herosub">{other.text}</p>
            <Link
              href={other.href}
              className="mt-4 inline-flex min-h-[44px] items-center rounded-lg bg-white px-5 text-sm font-semibold text-navy hover:bg-brand-tint"
            >
              {other.label}
              <span aria-hidden="true" className="ml-1.5">→</span>
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}
