/* Nexus Signals — shared site chrome: Logo, Header (multi-page nav),
   ThemeSwitcher, Footer, SectionHead. Used by every page. */
const NSX = window.NexusSignalsDesignSystem_a2976e;

function Logo({ size = 34, base = '' }) {
  return (
    <a href={base + 'index.html'} style={{ display: 'inline-flex', alignItems: 'center', gap: '11px', textDecoration: 'none' }}>
      <img src={base + 'assets/logo-clean-256.png'} alt="Nexus Signals" width={size} height={size} style={{ display: 'block', filter: 'drop-shadow(0 2px 10px rgba(77,131,255,0.35))' }} />
      <span className="logo-word" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '18px', letterSpacing: '-0.01em', color: 'var(--text-primary)' }}>
        Nexus <span style={{ color: 'var(--ns-soft)' }}>Signals</span>
      </span>
    </a>
  );
}

function ThemeSwitcher() {
  const [theme, setTheme] = React.useState(window.NS_currentTheme || 'obsidian');
  const [open, setOpen] = React.useState(false);
  const themes = window.NS_THEMES;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <div style={{ display: 'flex', gap: '6px', padding: '5px', background: 'var(--ns-cream-04)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)' }}>
        {Object.keys(themes).map((k) => (
          <button key={k} onClick={() => { window.NS_applyTheme(k); setTheme(k); }} title={themes[k].label} aria-label={'Theme: ' + themes[k].label}
            style={{ width: '20px', height: '20px', borderRadius: '50%', cursor: 'pointer', background: themes[k].swatch,
              border: theme === k ? '2px solid var(--ns-trust)' : '2px solid transparent',
              boxShadow: theme === k ? '0 0 0 2px var(--ns-soft-32)' : 'none', transition: 'all 140ms', padding: 0 }} />
        ))}
      </div>
    </div>
  );
}

function TypeSwitcher() {
  const [t, setT] = React.useState(window.NS_currentType || 'signal');
  const sets = window.NS_TYPESETS || {};
  return (
    <select value={t} onChange={(e) => { window.NS_applyType(e.target.value); setT(e.target.value); }}
      title="Typography" aria-label="Typography"
      style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--text-secondary)', background: 'var(--ns-cream-04)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', padding: '7px 12px', cursor: 'pointer', outline: 'none', appearance: 'none', WebkitAppearance: 'none' }}>
      {Object.keys(sets).map((k) => <option key={k} value={k} style={{ color: '#111' }}>{'Aa  ' + sets[k].label}</option>)}
    </select>
  );
}

function Header({ base = '', active = '' }) {
  const { Button } = NSX;
  const { IconMenu, IconX } = window;
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    ['How it works', '#how-it-works', 'how'],
    ['Live board', '#live-board', 'board'],
    ['Signals', '#telegram', 'telegram'],
    ['Pricing', '#pricing', 'pricing'],
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 200,
      borderBottom: `1px solid ${scrolled ? 'var(--border-default)' : 'transparent'}`,
      background: scrolled ? 'color-mix(in srgb, var(--ns-midnight) 78%, transparent)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      transition: 'background 240ms, border-color 240ms',
    }}>
      <div className="ns-container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '72px', gap: '16px' }}>
        <Logo base={base} />
        <nav className="nav-links">
          {links.map((l) => (
            <a key={l[0]} href={l[1]} style={{
              fontFamily: 'var(--font-body)', fontSize: '14px', fontWeight: 500,
              color: active === l[2] ? 'var(--text-primary)' : 'var(--text-muted)', textDecoration: 'none', transition: 'color 140ms', position: 'relative',
            }} onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-primary)'}
               onMouseLeave={(e) => e.currentTarget.style.color = active === l[2] ? 'var(--text-primary)' : 'var(--text-muted)'}>{l[0]}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div className="hide-md" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}><TypeSwitcher /><ThemeSwitcher /></div>
          <Button variant="primary" size="sm" onClick={() => window.goWhop()}>Get access</Button>
          <button className="menu-btn" aria-label="Menu" onClick={() => setMobileOpen(!mobileOpen)}
            style={{ display: 'none', background: 'var(--ns-cream-04)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', width: '40px', height: '40px', color: 'var(--text-primary)', cursor: 'pointer', alignItems: 'center', justifyContent: 'center' }}>
            {mobileOpen ? <IconX size={20} /> : <IconMenu size={20} />}
          </button>
        </div>
      </div>
      {mobileOpen && (
        <div className="mobile-menu" style={{ borderTop: '1px solid var(--border-default)', background: 'color-mix(in srgb, var(--ns-midnight) 92%, transparent)', backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)' }}>
          <div className="ns-container" style={{ padding: '16px 0 22px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
            {links.map((l) => (
              <a key={l[0]} href={l[1]} onClick={() => setMobileOpen(false)} style={{ fontFamily: 'var(--font-body)', fontSize: '16px', fontWeight: 500, color: 'var(--text-secondary)', textDecoration: 'none', padding: '12px 4px', borderBottom: '1px solid var(--border-subtle)' }}>{l[0]}</a>
            ))}
            <div style={{ marginTop: '14px', display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}><TypeSwitcher /><ThemeSwitcher /></div>
          </div>
        </div>
      )}
    </header>
  );
}

function SectionHead({ eyebrow, title, sub, align = 'left', titleStyle = {} }) {
  const { Eyebrow } = NSX;
  return (
    <div data-anim="reveal" style={{ maxWidth: align === 'center' ? '680px' : '760px', margin: align === 'center' ? '0 auto' : 0, textAlign: align }}>
      {eyebrow && <Eyebrow style={align === 'center' ? { justifyContent: 'center' } : {}}>{eyebrow}</Eyebrow>}
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-h2)', letterSpacing: '-0.025em', lineHeight: 1.08, color: 'var(--text-primary)', margin: '16px 0 0', ...titleStyle }}>{title}</h2>
      {sub && <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', lineHeight: 1.6, color: 'var(--text-secondary)', margin: '16px 0 0' }}>{sub}</p>}
    </div>
  );
}

function Footer({ base = '' }) {
  const { IconDiscord, IconTelegram } = window;
  const cols = [
    ['Product', [['How it works', base + 'how-it-works.html'], ['Live board', base + 'how-it-works.html#live-board'], ['Pricing', base + 'pricing.html'], ['Telegram tracking', base + 'telegram.html']]],
    ['Community', [['Discord', '#'], ['Research recap', '#'], ['Changelog', '#'], ['Status', '#']]],
    ['Company', [['About', '#'], ['Contact', '#'], ['Terms', '#'], ['Privacy', '#']]],
  ];
  return (
    <footer style={{ borderTop: '1px solid var(--border-subtle)', background: 'var(--bg-deep)', position: 'relative', zIndex: 1 }}>
      <div className="ns-container" style={{ paddingTop: '60px', paddingBottom: '40px' }}>
        <div className="footer-grid">
          <div style={{ maxWidth: '320px' }}>
            <Logo size={32} base={base} />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '14px', lineHeight: 1.6, color: 'var(--text-muted)', margin: '18px 0 0' }}>
              Research-first prediction-market intelligence. We track smart-money wallets and log every signal before the outcome.
            </p>
            <div style={{ display: 'flex', gap: '10px', marginTop: '20px' }}>
              {[['Discord', <IconDiscord size={18} />], ['Telegram', <IconTelegram size={18} />]].map((s) => (
                <a key={s[0]} href="#" aria-label={s[0]} style={{ display: 'inline-flex', width: '40px', height: '40px', alignItems: 'center', justifyContent: 'center', borderRadius: 'var(--radius-sm)', background: 'var(--ns-cream-04)', border: '1px solid var(--border-default)', color: 'var(--text-muted)', transition: 'all 140ms' }}
                  onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--ns-soft)'; e.currentTarget.style.borderColor = 'var(--border-strong)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--text-muted)'; e.currentTarget.style.borderColor = 'var(--border-default)'; }}>{s[1]}</a>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c[0]}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ns-soft)', marginBottom: '16px' }}>{c[0]}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '12px' }}>
                {c[1].map((l) => (
                  <li key={l[0]}><a href={l[1]} style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-muted)', textDecoration: 'none' }} onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}>{l[0]}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom" style={{ marginTop: '52px', paddingTop: '24px', borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '16px', flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--text-muted)', letterSpacing: '0.04em' }}>© 2026 Nexus Signals</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--ns-soft)', letterSpacing: '0.04em' }}>Research and education only. Not financial advice.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Logo, ThemeSwitcher, Header, SectionHead, Footer });