// 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 navLink = (anchor, label) => {
    const isActive = activeAnchor === anchor.replace('#', '');
    return (
      <a
        href={anchor}
        className={`lp-navbar-link${isActive ? ' is-active' : ''}`}
        style={{ color: 'inherit', textDecoration: 'none' }}
      >
        {label}
      </a>
    );
  };
  return (
    <header style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '18px 80px',
      background: bg,
      borderBottom: `1px solid ${border}`,
      color,
      backdropFilter: 'blur(8px)',
      WebkitBackdropFilter: 'blur(8px)',
      position: 'sticky',
      top: 0,
      zIndex: 50,
    }}>
      <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 style={{ display: 'flex', gap: 28, fontSize: 13.5, color: isInk ? 'rgba(231,196,108,0.75)' : 'var(--ink-slate)' }}>
        {/* Order matches the actual scroll order down the page:
            Features (FiveQuestions) → How it works (RealWeekWalkthrough) → Levels. */}
        {navLink('#features', 'Features')}
        {navLink('#how-it-works', 'How it works')}
        {navLink('#levels', 'Levels')}
        <a href="/login" className="lp-navbar-link" style={{ color: 'inherit', textDecoration: 'none' }}>Try the agent</a>
      </nav>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <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>
    </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 });