// Shared chrome — Nav + Footer + tiny helpers used across pages.
// Loaded as Babel JSX, attaches components to window.

const { useState, useEffect } = React;

function Nav({ active }) {
  const items = [
  { id: 'case-studies', label: 'Product Case Studies', href: 'index.html' },
  { id: 'letterpress', label: 'Analog Design Work', href: 'analog.html' },
  { id: 'about', label: 'About', href: 'about.html' },
  { id: 'contact', label: 'Contact', href: 'contact.html' }];

  const [open, setOpen] = useState(false);
  const [theme, setTheme] = useState(() => document.documentElement.getAttribute('data-theme') || 'light');

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem('rn-theme', theme); } catch (e) {}
  }, [theme]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open]);

  const toggleTheme = () => setTheme((t) => t === 'dark' ? 'light' : 'dark');

  return (
    <nav className="nav">
      <a className="nav-brand" href="index.html">
        <span>Rose Newton</span>
      </a>
      <ul className="nav-links">
        {items.map((i) =>
        <li key={i.id}><a href={i.href} className={active === i.id ? 'active' : ''}>{i.label}</a></li>
        )}
      </ul>
      <div className="nav-right">
        <button
          type="button"
          className="nav-theme"
          aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
          onClick={toggleTheme}>
          {theme === 'dark' ? (
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <circle cx="12" cy="12" r="4"></circle>
              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
            </svg>
          ) : (
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
          )}
        </button>
        <button
          type="button"
          className={'nav-burger' + (open ? ' is-open' : '')}
          aria-label={open ? 'Close menu' : 'Open menu'}
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}>
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className={'nav-drawer' + (open ? ' is-open' : '')} onClick={() => setOpen(false)}>
        <ul onClick={(e) => e.stopPropagation()}>
          {items.map((i) =>
          <li key={i.id}>
            <a href={i.href} className={active === i.id ? 'active' : ''} onClick={() => setOpen(false)}>{i.label}</a>
          </li>
          )}
        </ul>
      </div>
    </nav>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div>
          <div className="footer-brand">Rose Newton</div>
          <p>Product design strategist & manager. Based in Austin, TX.</p>
        </div>
        <div className="footer-col">
          <div className="footer-col-h">Work</div>
          <ul>
            <li><a href="index.html">Product Case Studies</a></li>
            <li><a href="analog.html">Analog Design Work</a></li>
            <li><a href="about.html">About</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <div className="footer-col-h">Contact</div>
          <ul>
            <li><a href="mailto:rose@rosenewton.com">rose@rosenewton.com</a></li>
            <li><a href="https://www.linkedin.com/in/rosenewton/" target="_blank" rel="noopener">LinkedIn</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2026 Rose Newton</span>
        <span></span>
      </div>
    </footer>);

}

function StickyDots({ count = 9 }) {
  const dots = [
  { l: '4%', t: '18%', c: '#ff64c8' },
  { l: '12%', t: '62%', c: '#dd5b00' },
  { l: '3%', t: '82%', c: '#1aae39' },
  { l: '22%', t: '14%', c: '#7b3ff2' },
  { r: '8%', t: '14%', c: '#f5d75e' },
  { r: '14%', t: '70%', c: '#2a9d99' },
  { r: '4%', t: '40%', c: '#7b3ff2' },
  { r: '24%', t: '24%', c: '#ff64c8' },
  { l: '50%', t: '88%', c: '#dd5b00' }];

  return <>{dots.slice(0, count).map((d, i) =>
    <span key={i} className="dot" style={{ left: d.l, right: d.r, top: d.t, background: d.c }} />
    )}</>;
}

Object.assign(window, { Nav, Footer, StickyDots });