// LegalPage — shared shell for /privacy.html and /terms.html
// Reuses TopBar + Nav + Footer from the main marketing page (OptionD).
// Body is just a centered prose column. Replace the children with real
// legal copy generated by Termly / Iubenda / your lawyer.

function LegalPage({ title, lastUpdated, children }) {
  return (
    <div style={{
      width: '100%',
      background: C.paper, color: C.ink,
      fontFamily: F.ui, fontSize: 16, lineHeight: 1.5,
      minHeight: '100vh',
      display: 'flex', flexDirection: 'column',
    }}>
      <LP_Nav />
      <main style={{ flex: 1 }}>
        <LP_Header title={title} lastUpdated={lastUpdated} />
        <LP_Prose>{children}</LP_Prose>
      </main>
      <LP_Footer />
    </div>
  );
}

// ─────────── NAV (matches OD_Nav) ───────────
function LP_Nav() {
  const items = [
    ['Product', '/#product'],
    ['How it works', '/#how'],
    ['About', '/#about'],
    ['Pricing', '/#pricing'],
  ];
  return (
    <div style={{
      padding: '22px 0',
      borderBottom: `1px solid ${C.rule}`,
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 56px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="/" style={{ textDecoration: 'none' }}><Lockup size={28} /></a>
        <nav style={{ display: 'flex', gap: 32 }}>
          {items.map(([label, href]) => (
            <a key={label} href={href} style={{
              fontFamily: F.ui, fontSize: 14, fontWeight: 450, color: C.ink, textDecoration: 'none',
            }}>{label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <PillButton href="/#cta" small onClick={(e) => {
            e.preventDefault();
            window.dispatchEvent(new CustomEvent('open-waitlist-modal'));
          }}>Get early access</PillButton>
        </div>
      </div>
    </div>
  );
}

// ─────────── PAGE TITLE ───────────
function LP_Header({ title, lastUpdated }) {
  return (
    <div style={{
      padding: '80px 0 48px',
      borderBottom: `1px solid ${C.rule}`,
    }}>
      <div style={{ maxWidth: 760, margin: '0 auto', padding: '0 32px' }}>
        <MonoLabel>Legal</MonoLabel>
        <h1 style={{
          fontFamily: F.display, fontWeight: 400, fontSize: 64,
          letterSpacing: '-0.03em', margin: '14px 0 18px', lineHeight: 1.05,
        }}>{title}</h1>
        {lastUpdated && (
          <div style={{
            fontFamily: F.mono, fontSize: 11, letterSpacing: '0.1em',
            textTransform: 'uppercase', color: C.muted,
          }}>
            Last updated · {lastUpdated}
          </div>
        )}
      </div>
    </div>
  );
}

// ─────────── PROSE COLUMN ───────────
// Tight legal-doc typography. Heading hierarchy: h2 (section), h3 (subsection).
function LP_Prose({ children }) {
  return (
    <div style={{ padding: '56px 0 96px' }}>
      <div style={{
        maxWidth: 760, margin: '0 auto', padding: '0 32px',
        fontFamily: F.ui, fontSize: 16, lineHeight: 1.65, color: C.ink2,
      }}>
        <style>{`
          .lp-prose h2 {
            font-family: ${F.display};
            font-weight: 400;
            font-size: 30px;
            letter-spacing: -0.02em;
            line-height: 1.2;
            color: ${C.ink};
            margin: 56px 0 16px;
          }
          .lp-prose h2:first-child { margin-top: 0; }
          .lp-prose h3 {
            font-family: ${F.ui};
            font-weight: 500;
            font-size: 17px;
            letter-spacing: -0.005em;
            color: ${C.ink};
            margin: 32px 0 10px;
          }
          .lp-prose p {
            margin: 0 0 18px;
          }
          .lp-prose ul, .lp-prose ol {
            margin: 0 0 18px;
            padding-left: 22px;
          }
          .lp-prose li {
            margin: 0 0 8px;
          }
          .lp-prose a {
            color: ${C.ink};
            text-decoration: underline;
            text-underline-offset: 3px;
            text-decoration-thickness: 1px;
          }
          .lp-prose a:hover {
            text-decoration-thickness: 2px;
          }
          .lp-prose strong {
            color: ${C.ink};
            font-weight: 500;
          }
          .lp-prose hr {
            border: none;
            border-top: 1px solid ${C.rule};
            margin: 48px 0;
          }
          .lp-prose .lp-callout {
            background: ${C.paper2};
            border: 1px solid ${C.rule};
            border-radius: 12px;
            padding: 18px 22px;
            margin: 24px 0;
            font-size: 14.5px;
          }
        `}</style>
        <div className="lp-prose">{children}</div>
      </div>
    </div>
  );
}

// ─────────── FOOTER (matches OD_Footer, w/ Privacy + Terms added) ───────────
function LP_Footer() {
  return (
    <div style={{
      borderTop: `1px solid ${C.rule}`,
      padding: '40px 0 48px',
      background: C.paper2,
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 56px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 48,
      }}>
        <div>
          <a href="/" style={{ textDecoration: 'none' }}><Lockup size={22} /></a>
          <div style={{
            marginTop: 16, fontFamily: F.mono, fontSize: 11, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: C.muted, lineHeight: 1.7,
          }}>
            hello@estimado.com<br/>
            Made in Florida 🇺🇸
          </div>
        </div>
        <div style={{ display: 'flex', gap: 56, fontFamily: F.ui, fontSize: 13.5 }}>
          {[
            ['Product', [['Takeoff engine', '/#product'], ['Remodeling engine', '/#product'], ['Follow-ups', '/#product'], ['PDF delivery', '/#product']]],
            ['Company', [['About', '/#about'], ['Careers', '#'], ['Press', '#'], ['Contact', 'mailto:hello@estimado.com']]],
            ['Legal',   [['Privacy Notice', '/privacy'], ['Terms & Conditions', '/terms']]],
          ].map(([title, items], i) => (
            <div key={i}>
              <div style={{ fontFamily: F.mono, fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.muted, marginBottom: 14 }}>{title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {items.map(([label, href]) => (
                  <a key={label} href={href} style={{ color: C.ink, textDecoration: 'none' }}>{label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom bar — copyright + social */}
      <div style={{
        maxWidth: 1280, margin: '32px auto 0', padding: '20px 56px 0',
        borderTop: `1px solid ${C.rule}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
        fontFamily: F.mono, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
        color: C.muted,
      }}>
        <span>© 2026 Estimado AI · All rights reserved</span>
        <SocialLinks size={16} gap={16} />
      </div>
    </div>
  );
}

Object.assign(window, { LegalPage });