/* Layout primitives: TopBar, Footer, Newsletter */

function TopBar({ page, navigate }) {
  const links = [
  { id: 'home', label: 'Home' },
  { id: 'in-focus', label: 'In Focus' },
  { id: 'beyond', label: 'Beyond The Scope' },
  { id: 'infographics', label: 'Infographics' },
  { id: 'about', label: 'About' }];

  return (
    <header className="topbar">
      <div className="topbar-inner">
        <div className="brand" onClick={() => navigate('home')}>
          <div className="brand-mark"></div>
          <div>
            <div className="brand-name" style={{ textAlign: "center", letterSpacing: "0px" }}>Under the Microscope</div>
            <div className="brand-sub" style={{ textAlign: "center" }}>· EST. 2017</div>
          </div>
        </div>
        <nav className="nav">
          {links.map((l) =>
          <a key={l.id}
          className={page === l.id ? 'active' : ''}
          onClick={(e) => {e.preventDefault();navigate(l.id);}}
          href={`#${l.id}`}>{l.label}</a>
          )}
        </nav>
        <button className="cta-sub" onClick={() => navigate('home', { scrollTo: 'newsletter' })}>
          Subscribe
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </button>
      </div>
    </header>);

}

function Newsletter({ id }) {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  return (
    <div id={id} className="newsletter">
      <div>
        <h2>Get one good thing about science, every Friday.</h2>
        <p>A short letter from the lab — one paper worth your time, one chart worth a stare, one question I'm still chewing on. No fluff, no autoplay videos, unsubscribe in one click.</p>
        <p className="nl-fineprint">Joined by 2,400+ curious readers</p>
      </div>
      <form className="nl-form" onSubmit={(e) => {e.preventDefault();if (email) setDone(true);}}>
        <input type="email" required placeholder="you@university.edu" value={email}
        onChange={(e) => setEmail(e.target.value)} disabled={done} />
        <button type="submit">{done ? 'Welcome ✓' : 'Subscribe'}</button>
      </form>
    </div>);

}

function Footer({ navigate }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">Under the Microscope</div>
            <p style={{ color: 'oklch(82% 0.01 85)', maxWidth: '36ch', margin: '0 0 18px', fontSize: 14.5 }}>
              A working scientist's notebook on regen-med, science policy, and the weird beautiful business of figuring things out.
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              {['Twitter', 'LinkedIn', 'RSS', 'Email'].map((s) =>
              <a key={s} className="tag" style={{ color: 'oklch(82% 0.01 85)', borderColor: 'oklch(35% 0.02 260)', background: 'transparent' }}>{s}</a>
              )}
            </div>
          </div>
          <div>
            <h5>Read</h5>
            <ul>
              <li onClick={() => navigate('in-focus')}>In Focus</li>
              <li onClick={() => navigate('beyond')}>Beyond The Scope</li>
              <li onClick={() => navigate('infographics')}>Infographics</li>
              <li onClick={() => navigate('home', { scrollTo: 'notebook' })}>Lab Notebook</li>
            </ul>
          </div>
          <div>
            <h5>About</h5>
            <ul>
              <li onClick={() => navigate('about')}>About Nathan</li>
              <li onClick={() => navigate('about', { scrollTo: 'press' })}>Press</li>
              <li onClick={() => navigate('about', { scrollTo: 'contact' })}>Contact</li>
              <li>Resume / CV</li>
            </ul>
          </div>
          <div>
            <h5>Subscribe</h5>
            <ul>
              <li onClick={() => navigate('home', { scrollTo: 'newsletter' })}>Newsletter</li>
              <li>Twitter / X</li>
              <li>RSS feed</li>
              <li>YouTube (soon)</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© Nathan Holwell · 2026</span>
          <span>Made with curiosity, not Webflow.</span>
        </div>
      </div>
    </footer>);

}

window.TopBar = TopBar;
window.Newsletter = Newsletter;
window.Footer = Footer;