// shared.jsx — NavBar, Footer, Section dividers, used by all 3 concepts.

const NavBar = ({ variant = 'warm', activeAnchor = null }) => {
  const isInk = variant === 'ink';
  const bg = variant === 'cool' ? 'rgba(244,247,249,0.9)' : variant === 'ink' ? 'rgba(28,51,67,0.9)' : 'rgba(250,245,234,0.92)';
  const color = isInk ? 'var(--gold-bright)' : 'var(--ink-navy)';
  const border = isInk ? 'rgba(231,196,108,0.18)' : 'var(--border-warm)';
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navLink = (anchor, label, onClick) => {
    const isActive = activeAnchor === anchor.replace('#', '');
    return (
      <a
        key={anchor + label}
        href={anchor}
        className={`lp-navbar-link${isActive ? ' is-active' : ''}`}
        style={{ color: 'inherit', textDecoration: 'none' }}
        onClick={onClick}
      >
        {label}
      </a>
    );
  };
  // Order matches the actual scroll order down the page:
  // Features (FiveQuestions) → How it works (RealWeekWalkthrough) → Levels.
  const sectionLinks = [
    ['#features', 'Features'],
    ['#how-it-works', 'How it works'],
    ['#levels', 'Levels'],
    ['/login', 'Try the agent'],
  ];
  const menuBg = variant === 'cool' ? '#fff' : variant === 'ink' ? '#1c3343' : 'var(--surface-page-warm)';
  return (
    <header className="lp-navbar" style={{
      background: bg,
      borderBottom: `1px solid ${border}`,
      color,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        {/* Brand mark — single SVG source of truth (matches the
            browser-tab favicon). Replaces the previous CSS-italic-T
            treatment so the wordmark visually ties to the favicon
            + welcome animation + every other surface using
            transcriptagent-mark.svg. */}
        <img src="/static/img/branding/transcriptagent-mark.svg"
             alt="TranscriptAgent"
             width="28" height="28"
             style={{ display: 'block', borderRadius: 7 }} />
        <span style={{ fontWeight: 600, letterSpacing: '-0.005em', fontSize: 15 }}>
          Transcript<span style={{ color: isInk ? 'rgba(231,196,108,0.6)' : 'var(--brand-bronze)' }}>Agent</span>
        </span>
      </div>
      <nav className="lp-navbar-desktop-nav" style={{ color: isInk ? 'rgba(231,196,108,0.75)' : 'var(--ink-slate)' }}>
        {sectionLinks.map(([a, l]) => navLink(a, l))}
      </nav>
      <div className="lp-navbar-desktop-cta">
        <a href="/login" style={{ color: 'inherit', fontSize: 13.5, textDecoration: 'none', opacity: 0.8 }}>Sign in</a>
        <a href="/login" className="btn btn--primary" style={{ padding: '8px 16px', fontSize: 13, textDecoration: 'none' }}>Try it free</a>
      </div>
      {/* Mobile: keep the primary CTA visible + a hamburger that reveals the
          section links and Sign in (the desktop nav/cta are hidden ≤860px). */}
      <div className="lp-navbar-mobile-actions">
        <a href="/login" className="btn btn--primary" style={{ padding: '8px 14px', fontSize: 13, textDecoration: 'none' }}>Try it free</a>
        <button
          type="button"
          className={`lp-navbar-burger${menuOpen ? ' is-open' : ''}`}
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((o) => !o)}
          style={{ color }}
        >
          <span /><span /><span />
        </button>
      </div>
      {menuOpen && (
        <div className="lp-navbar-mobile-menu" style={{ background: menuBg, borderBottom: `1px solid ${border}` }}>
          {sectionLinks.map(([a, l]) => navLink(a, l, () => setMenuOpen(false)))}
          <a href="/login" className="lp-navbar-link" style={{ color: 'inherit', textDecoration: 'none' }} onClick={() => setMenuOpen(false)}>Sign in</a>
        </div>
      )}
    </header>
  );
};

const SectionDivider = ({ tone = 'warm' }) => (
  <div style={{
    height: 1,
    background: tone === 'cool' ? 'var(--border-pale)' : tone === 'ink' ? 'rgba(231,196,108,0.18)' : 'var(--border-warm)',
  }} />
);

const Footer = ({ variant = 'warm' }) => {
  const isInk = variant === 'ink';
  return (
    <footer style={{
      padding: '40px 80px 36px',
      background: isInk ? '#0e2620' : variant === 'cool' ? '#fff' : 'var(--surface-page-warm)',
      color: isInk ? 'rgba(231,196,108,0.55)' : 'var(--ink-muted)',
      borderTop: `1px solid ${isInk ? 'rgba(231,196,108,0.12)' : 'var(--border-warm)'}`,
      display: 'flex',
      flexDirection: 'column',
      gap: 20,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="/static/img/branding/transcriptagent-mark.svg"
               alt="TranscriptAgent"
               width="26" height="26"
               style={{ display: 'block', borderRadius: 6 }} />
          <span style={{ fontWeight: 600, letterSpacing: '-0.005em', fontSize: 14, color: isInk ? 'var(--gold-bright)' : 'var(--ink-navy)' }}>
            TranscriptAgent
          </span>
        </div>
        <div style={{ display: 'flex', gap: 24, fontSize: 12.5 }}>
          <a style={{ color: 'inherit', textDecoration: 'none' }}>Levels</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }}>Status</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }}>Contact</a>
        </div>
      </div>
      <div style={{ fontSize: 11, lineHeight: 1.6, maxWidth: 700 }}>
        Built on OpenAI · FRED · Yahoo Finance market data. TranscriptAgent organizes market commentary and research narratives drawn from public video sources.
        It is not investment advice and does not provide buy/sell recommendations.
      </div>
    </footer>
  );
};

Object.assign(window, { NavBar, Footer, SectionDivider });