import type { ReactNode } from 'react';
import { AlertIcon } from '@/components/ui/icons';
import { Container } from '@/components/ui/Section';
import { Heading, Kicker } from '@/components/ui/Heading';

export interface LegalSection {
  id: string;
  title: string;
  body: ReactNode;
}

/**
 * Layout for legal placeholder documents. The draft banner is deliberately loud: these texts are
 * templates and must be reviewed by a lawyer before launch.
 */
export function LegalDocument({ title, updated, intro, sections }: { title: string; updated: string; intro: ReactNode; sections: LegalSection[] }) {
  return (
    <Container className="max-w-4xl py-14 sm:py-20">
      <div
        role="note"
        aria-label="Draft notice"
        className="mb-10 flex items-start gap-4 rounded-card border-2 border-amber bg-amber/10 p-5 shadow-glow-amber sm:p-6"
      >
        <AlertIcon className="mt-0.5 size-7 shrink-0 text-amber" />
        <div className="flex flex-col gap-1">
          <p className="font-display text-lg font-bold text-amber">Draft — pending lawyer review</p>
          <p className="text-sm leading-relaxed text-fg">
            This is a placeholder template, not a final legal document. Text in [square brackets] still needs to be completed and the
            whole document reviewed by qualified counsel before PintRush launches.
          </p>
        </div>
      </div>

      <header className="flex flex-col gap-4 border-b border-line/70 pb-8">
        <Kicker>Legal</Kicker>
        <Heading as="h1" size="display">
          {title}
        </Heading>
        <p className="text-sm text-subtle">Last updated: {updated} (draft)</p>
        <div className="text-lg leading-relaxed text-muted">{intro}</div>
      </header>

      <div className="mt-10 grid gap-10 lg:grid-cols-[14rem_1fr] lg:gap-14">
        <nav aria-label="Sections" className="lg:sticky lg:top-28 lg:self-start">
          <p className="mb-3 text-xs font-bold tracking-[0.18em] text-subtle uppercase">Contents</p>
          <ol className="flex flex-col text-sm">
            {sections.map((section, index) => (
              <li key={section.id}>
                <a href={`#${section.id}`} className="flex min-h-10 items-center gap-2 text-muted transition-colors hover:text-fg">
                  <span className="num text-subtle">{index + 1}.</span> {section.title}
                </a>
              </li>
            ))}
          </ol>
        </nav>
        <div className="flex flex-col gap-10">
          {sections.map((section, index) => (
            <section key={section.id} id={section.id} aria-labelledby={`${section.id}-title`} className="scroll-mt-28">
              <h2 id={`${section.id}-title`} className="mb-3 font-display text-xl font-bold">
                <span className="num mr-2 text-subtle">{index + 1}.</span>
                {section.title}
              </h2>
              <div className="flex flex-col gap-3 leading-relaxed text-muted [&_li]:ml-5 [&_li]:list-disc [&_strong]:text-fg [&_ul]:flex [&_ul]:flex-col [&_ul]:gap-2">
                {section.body}
              </div>
            </section>
          ))}
        </div>
      </div>
    </Container>
  );
}