/**
 * Shared layout for legal pages (Privacy, Terms). Server component — renders a
 * header, a sticky table of contents and numbered sections. Brand-strict.
 *
 * @param {Object} props
 * @param {string} props.title
 * @param {string} props.updated      Human date, e.g. "17 June 2026".
 * @param {string} [props.intro]
 * @param {{id:string, heading:string, blocks:(string|string[])[]}[]} props.sections
 *   A block that is a string renders as a paragraph; an array renders as a bullet list.
 */
export default function LegalLayout({ title, updated, intro, sections }) {
  return (
    <section className="relative bg-background pb-16 pt-24 text-foreground md:pb-24 md:pt-32">
      {/* Decorative glow kept in its own clipped layer so it doesn't break the sticky TOC */}
      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        <span className="absolute left-1/2 top-0 h-72 w-[44rem] -translate-x-1/2 rounded-full bg-primary/[0.05] blur-[150px]" />
      </div>
      <div className="container relative">
        {/* Header */}
        <div className="max-w-3xl">
          <span className="font-heading text-sm font-semibold uppercase tracking-wider text-primary">Legal</span>
          <h1 className="mt-3 font-heading text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">{title}</h1>
          <p className="mt-4 text-sm text-muted-foreground">Last updated {updated}</p>
          {intro && <p className="mt-5 text-base leading-relaxed text-muted-foreground sm:text-lg">{intro}</p>}
        </div>

        <div className="mt-12 grid gap-12 lg:grid-cols-[16rem_1fr] lg:gap-16">
          {/* Table of contents */}
          <aside className="lg:sticky lg:top-24 lg:self-start">
            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">On this page</p>
            <ul className="mt-4 border-l border-border">
              {sections.map((s, i) => (
                <li key={s.id}>
                  <a href={`#${s.id}`} className="-ml-px block border-l border-transparent py-1.5 pl-4 text-sm text-muted-foreground transition-colors hover:border-primary hover:text-primary">
                    {i + 1}. {s.heading}
                  </a>
                </li>
              ))}
            </ul>
          </aside>

          {/* Content */}
          <div className="min-w-0">
            {sections.map((s, i) => (
              <section key={s.id} id={s.id} className="scroll-mt-28 [&:not(:first-child)]:mt-12">
                <h2 className="font-heading text-xl font-semibold tracking-tight sm:text-2xl">
                  <span className="text-primary">{i + 1}.</span> {s.heading}
                </h2>
                <div className="mt-4 space-y-4 text-[15px] leading-relaxed text-muted-foreground">
                  {s.blocks.map((b, j) =>
                    Array.isArray(b) ? (
                      <ul key={j} className="space-y-2.5">
                        {b.map((li, k) => (
                          <li key={k} className="flex gap-3">
                            <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                            <span>{li}</span>
                          </li>
                        ))}
                      </ul>
                    ) : (
                      <p key={j}>{b}</p>
                    )
                  )}
                </div>
              </section>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}