// spacegen-shared.jsx — chrome + theme shared across all SpaceGen marketing pages.
// Exposes: buildSpaceGenTheme, SGFrameChrome, SGFooter on window.

function buildSpaceGenTheme(tweaks) {
  const accent = tweaks.accent || '#1d3fff';
  return {
    paper: tweaks.paper || '#f3efe8',
    panel: '#fbf8f2',
    fg: '#14110f',
    fgInv: '#fbf8f2',
    muted: '#7a736a',
    line: '#d8d0c2',
    lineSoft: '#e8e1d2',
    accent,
    accentInk: '#fff',
    fontDisplay: `'${tweaks.displayFont || 'Fraunces'}', Georgia, serif`,
    fontBody: "'Inter', system-ui, sans-serif",
    fontMono: "'JetBrains Mono', ui-monospace, monospace",
    italicHeadlines: tweaks.italicHeadlines !== false,
    radius: tweaks.radius ?? 16,
  };
}

// Header — sticky, blurred, with active-page highlight.
// Pages link to each other via standard <a href="..."> so nav works in-preview.
function SGFrameChrome({ t, activePage }) {
  const links = [
    { id: 'how',     label: 'HOW IT WORKS', href: 'how-it-works.html' },
    { id: 'examples',label: 'EXAMPLES',     href: 'index.html' },
    { id: 'pricing', label: 'PRICING',      href: 'pricing.html' },
    { id: 'signin',  label: 'SIGN IN',      href: 'sign-in.html' },
  ];
  return (
    <header style={{
      borderBottom: `1px solid ${t.line}`, background: `${t.paper}e6`,
      padding: '14px 32px', display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', position: 'sticky', top: 0, zIndex: 30,
      backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
    }}>
      <a href="index.html" style={{
        display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'inherit',
      }}>
        <img src="assets/spacegen-logo.png" alt="SpaceGen" style={{ height: 26, width: 'auto', display: 'block' }} />
        <div style={{
          fontFamily: t.fontMono, fontSize: 10, color: t.muted, letterSpacing: 1.5,
          padding: '3px 8px', border: `1px solid ${t.line}`, borderRadius: 999, marginLeft: 6,
        }}>EDITORIAL</div>
      </a>
      <nav style={{ display: 'flex', gap: 28, fontFamily: t.fontMono, fontSize: 11, letterSpacing: 1.5, alignItems: 'center' }}>
        {links.map((l) => {
          const active = activePage === l.id;
          return (
            <a key={l.id} href={l.href} style={{
              color: active ? t.fg : t.muted,
              textDecoration: 'none',
              fontWeight: active ? 600 : 400,
              borderBottom: active ? `1px solid ${t.fg}` : '1px solid transparent',
              paddingBottom: 2,
            }}>{l.label}</a>
          );
        })}
        <a href="app.html" style={{
          marginLeft: 12,
          padding: '10px 18px',
          background: t.accent, color: t.accentInk,
          textDecoration: 'none',
          fontFamily: t.fontMono, fontSize: 11, letterSpacing: 1.5, fontWeight: 700,
          borderRadius: t.radius / 2,
        }}>OPEN APP →</a>
      </nav>
    </header>
  );
}

// Footer — closing CTA + meta row. Hide CTA when ctaHidden=true (e.g. on sign-in).
function SGFooter({ t, ctaHidden }) {
  return (
    <footer style={{
      background: t.fg, color: t.paper, padding: ctaHidden ? '40px 48px' : '80px 48px 48px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {!ctaHidden && (
          <>
            <div style={{
              fontFamily: t.fontMono, fontSize: 11, letterSpacing: 2, color: t.accent, marginBottom: 18,
            }}>
              THIS IS THE EASY PART
            </div>
            <h2 style={{
              fontFamily: t.fontDisplay, fontSize: 'clamp(56px, 8vw, 112px)',
              fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 0.92, maxWidth: 1100,
            }}>
              Stop describing the room.<br/>
              <span style={{ fontStyle: t.italicHeadlines ? 'italic' : 'normal', fontWeight: 400 }}>
                Show it.
              </span>
            </h2>
            <div style={{ display: 'flex', gap: 14, marginTop: 40, flexWrap: 'wrap' }}>
              <a href="sign-in.html" style={{
                padding: '20px 28px', borderRadius: t.radius, background: t.accent, color: t.accentInk,
                border: 'none', fontFamily: t.fontMono, fontSize: 12, letterSpacing: 1.5, fontWeight: 700,
                cursor: 'pointer', textDecoration: 'none', display: 'inline-block',
              }}>START FREE TRIAL →</a>
              <a href="pricing.html" style={{
                padding: '20px 28px', borderRadius: t.radius, background: 'transparent', color: t.paper,
                border: `1px solid #3a3633`, fontFamily: t.fontMono, fontSize: 12, letterSpacing: 1.5,
                fontWeight: 600, cursor: 'pointer', textDecoration: 'none', display: 'inline-block',
              }}>SEE PRICING</a>
            </div>
          </>
        )}
        <div style={{
          marginTop: ctaHidden ? 0 : 80, paddingTop: ctaHidden ? 0 : 32,
          borderTop: ctaHidden ? 'none' : `1px solid #3a3633`,
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
          fontFamily: t.fontMono, fontSize: 10, letterSpacing: 1.5, color: '#8a857c',
        }}>
          <div>© SPACE-GENERATION 2026 · ROOM TO RENDER</div>
          <div>BUILT FOR CRE TEAMS</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { buildSpaceGenTheme, SGFrameChrome, SGFooter });