import Link from "next/link";

interface TocItem {
  id: string;
  label: string;
}

interface LegalLayoutProps {
  badge: string;
  title: string;
  subtitle: string;
  lastUpdated: string;
  toc: TocItem[];
  children: React.ReactNode;
}

export default function LegalLayout({ badge, title, subtitle, lastUpdated, toc, children }: LegalLayoutProps) {
  return (
    <>
      {/* Hero */}
      <section className="relative pt-36 pb-16 overflow-hidden" style={{ background: "var(--bg1)" }}>
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[500px] h-[300px] bg-[#28c76f]/5 blur-[100px] rounded-full pointer-events-none" />
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative">
          <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">
            {badge}
          </span>
          <h1 className="text-4xl sm:text-5xl font-extrabold mb-4" style={{ color: "var(--fg1)" }}>
            {title}
          </h1>
          <p className="text-base max-w-xl mx-auto mb-4" style={{ color: "var(--fg2)" }}>{subtitle}</p>
          <p className="text-xs" style={{ color: "var(--fg3)" }}>Last updated: {lastUpdated}</p>
        </div>
      </section>

      {/* Content */}
      <section className="py-16" style={{ background: "var(--bg2)" }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row gap-10">

            {/* Sidebar TOC */}
            <aside className="lg:w-64 flex-shrink-0">
              <div className="lg:sticky lg:top-28 glass-card rounded-2xl p-6">
                <p className="text-xs font-semibold uppercase tracking-wider mb-4" style={{ color: "var(--fg3)" }}>
                  On This Page
                </p>
                <nav className="space-y-1">
                  {toc.map((item) => (
                    <a
                      key={item.id}
                      href={`#${item.id}`}
                      className="block py-1.5 px-3 rounded-lg text-sm transition-colors hover:text-[#28c76f]"
                      style={{ color: "var(--fg2)" }}
                    >
                      {item.label}
                    </a>
                  ))}
                </nav>
                <div className="mt-6 pt-5" style={{ borderTop: "1px solid var(--border)" }}>
                  <p className="text-xs mb-3" style={{ color: "var(--fg3)" }}>Questions? Reach out:</p>
                  <a href="mailto:support@paid2marketing.com" className="text-xs font-medium text-[#28c76f] hover:text-[#22b965] transition-colors break-all">
                    support@paid2marketing.com
                  </a>
                </div>
              </div>
            </aside>

            {/* Main content */}
            <main className="flex-1 min-w-0">
              <div className="glass-card rounded-2xl p-8 sm:p-12 legal-content">
                {children}
              </div>

              {/* Footer nav */}
              <div className="flex flex-wrap gap-4 mt-8 text-sm" style={{ color: "var(--fg3)" }}>
                {[
                  { href: "/terms", label: "Terms & Conditions" },
                  { href: "/privacy", label: "Privacy Policy" },
                  { href: "/cookies", label: "Cookie Policy" },
                  { href: "/refund", label: "Refund Policy" },
                ].map((l) => (
                  <Link key={l.href} href={l.href} className="hover:text-[#28c76f] transition-colors">
                    {l.label}
                  </Link>
                ))}
              </div>
            </main>
          </div>
        </div>
      </section>
    </>
  );
}