import Link from "next/link";
import { AppShell } from "@/components/shell/app-shell";
import { SiteFooter } from "./site-footer";
import { cn } from "@/lib/utils";

/** Long-form page shell: eyebrow, title, lead, sectioned prose, footer. */
export function ProsePage({ eyebrow, title, lead, updated, children, toc }: { eyebrow: string; title: string; lead: string; updated?: string; children: React.ReactNode; toc?: { id: string; label: string }[] }) {
  return (
    <AppShell>
      <article className="mx-auto max-w-3xl">
        <header className="mb-10">
          <div className="eyebrow mb-2">{eyebrow}</div>
          <h1 className="text-4xl font-semibold tracking-[-0.03em] sm:text-5xl">{title}</h1>
          <p className="mt-4 text-lg leading-relaxed text-fg-2">{lead}</p>
          {updated ? <p className="mt-3 text-[12px] text-fg-4">Last updated {updated}</p> : null}
        </header>
        {toc?.length ? (
          <nav aria-label="On this page" className="mb-10 rounded-lg border border-line p-4">
            <div className="eyebrow mb-2">On this page</div>
            <ol className="grid gap-1.5 text-sm sm:grid-cols-2">
              {toc.map((t, i) => (
                <li key={t.id}>
                  <Link href={`#${t.id}`} className="inline-flex items-baseline gap-2 text-fg-2 hover:text-fg">
                    <span className="font-mono text-[11px] text-fg-4">{String(i + 1).padStart(2, "0")}</span> {t.label}
                  </Link>
                </li>
              ))}
            </ol>
          </nav>
        ) : null}
        <div className="prose-spinza space-y-10">{children}</div>
        <SiteFooter className="mt-20" />
      </article>
    </AppShell>
  );
}

export function Section({ id, title, children, className }: { id: string; title: string; children: React.ReactNode; className?: string }) {
  return (
    <section id={id} aria-labelledby={`${id}-h`} className={cn("scroll-mt-24", className)}>
      <h2 id={`${id}-h`} className="text-2xl font-semibold tracking-tight">
        {title}
      </h2>
      <div className="mt-3 space-y-3 text-[15px] leading-relaxed text-fg-2">{children}</div>
    </section>
  );
}

export function Callout({ children, tone = "accent" }: { children: React.ReactNode; tone?: "accent" | "neutral" }) {
  return <div className={cn("rounded-md border p-4 text-[15px] leading-relaxed", tone === "accent" ? "border-accent/30 bg-accent-soft text-fg" : "border-line bg-surface text-fg-2")}>{children}</div>;
}

export function Bullets({ items }: { items: React.ReactNode[] }) {
  return (
    <ul className="space-y-2">
      {items.map((it, i) => (
        <li key={i} className="flex gap-3">
          <span className="mt-[9px] h-1.5 w-1.5 shrink-0 rounded-full bg-accent" aria-hidden />
          <span>{it}</span>
        </li>
      ))}
    </ul>
  );
}