import type { ReactNode } from "react";
import { Link } from "@tanstack/react-router";
import { motion } from "motion/react";
import Navbar from "./Navbar";
import Footer from "./Footer";
import RollerReveal from "./RollerReveal";

export type LegalSection = {
  heading: string;
  body?: string;
  bullets?: ReactNode[];
};

export default function LegalLayout({
  eyebrow,
  title,
  intro,
  sections,
}: {
  eyebrow: string;
  title: string;
  intro: string;
  sections: LegalSection[];
}) {
  return (
    <div className="bg-plaster text-ink relative min-h-screen w-full overflow-x-clip">
      <div aria-hidden="true" className="grain-overlay" />
      <div aria-hidden="true" className="plaster-tooth fixed inset-0 z-[54]" />
      <Navbar forceLight />

      <main>
        <header className="border-ink/10 border-b bg-[linear-gradient(180deg,#252220_0%,#1c1a17_100%)] px-4 pt-40 pb-24 sm:px-6 lg:px-8">
          <div className="mx-auto max-w-3xl">
            <p className="text-brand text-xs font-bold tracking-[0.3em] uppercase">{eyebrow}</p>
            <RollerReveal
              as="div"
              className="mt-4 text-4xl leading-[1.05] font-black tracking-tighter text-white sm:text-6xl"
            >
              <h1>{title}</h1>
            </RollerReveal>
            <p className="mt-6 max-w-xl text-sm leading-relaxed font-light text-gray-400">
              {intro}
            </p>
          </div>
        </header>

        <div className="mx-auto max-w-3xl px-4 py-20 sm:px-6 lg:px-8">
          <ol className="space-y-12">
            {sections.map((section, i) => (
              <motion.li
                key={section.heading}
                initial={{ opacity: 0, y: 24 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-80px" }}
                transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
                className="border-ink/10 border-t pt-8 first:border-t-0 first:pt-0"
              >
                <h2 className="flex gap-4 text-xl font-black tracking-tight sm:text-2xl">
                  <span className="text-brand tabular-nums">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <span>{section.heading}</span>
                </h2>
                {section.body && (
                  <p className="text-ink-soft mt-4 max-w-[70ch] leading-relaxed font-light">
                    {section.body}
                  </p>
                )}
                {section.bullets && (
                  <ul className="text-ink-soft mt-4 max-w-[70ch] space-y-3 leading-relaxed font-light">
                    {section.bullets.map((b, bi) => (
                      <li key={bi} className="flex gap-3">
                        <span className="bg-brand mt-2.5 h-1.5 w-1.5 shrink-0 rounded-full" />
                        <span>{b}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </motion.li>
            ))}
          </ol>

          <div className="mt-16 flex flex-wrap gap-4">
            <Link
              to="/"
              className="border-ink/15 hover:border-ink/40 rounded-full border px-6 py-3 text-sm font-semibold transition-colors"
            >
              Back to home
            </Link>
            <Link
              to="/contact"
              className="bg-brand rounded-full px-6 py-3 text-sm font-semibold text-white transition-transform duration-300 hover:scale-105 active:scale-95"
            >
              Contact us
            </Link>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  );
}