// Navigation + Marquee
const { useEffect: useEffectN, useState: useStateN } = React;

function Nav({ theme, onTheme }) {
  const [scrolled, setScrolled] = useStateN(false);
  useEffectN(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className={`nav ${scrolled ? 'nav-scrolled' : ''}`}>
      <div className="nav-inner container">
        <a href="/" className="nav-logo" aria-label="Gutsy">
          <img src="assets/gutsy-mark.png" alt="" className="logo-mark-img" />
          <img src="assets/gutsy-wordmark.svg" alt="Gutsy" className="logo-word-img" />
        </a>
        <div className="nav-links">
          <a href="/#story" className="cap">Story</a>
          <a href="/#science" className="cap">Science</a>
          <a href="/#protocol" className="cap">Protocol</a>
          <a href="/#features" className="cap">App</a>
          <a href="/#pricing" className="cap">Pricing</a>
        </div>
        <div className="nav-actions">
          <button className="theme-toggle" onClick={() => onTheme(theme === 'dark' ? 'light' : 'dark')} aria-label="theme">
            {theme === 'dark' ? '☾' : '☀'}
          </button>
          <a href="https://apps.apple.com/us/app/gutsy-ai-ibs-trigger-finder/id6758587496" target="_blank" rel="noopener noreferrer" className="nav-cta cap">
            Begin <span className="arr">→</span>
          </a>
        </div>
      </div>
      <style>{`
        .nav {
          position: fixed; top: 0; left: 0; right: 0; z-index: 100;
          padding: 24px 0;
          transition: all 0.5s cubic-bezier(0.2,0.8,0.2,1);
        }
        .nav-scrolled {
          padding: 14px 0;
          backdrop-filter: blur(20px);
          background: color-mix(in oklab, var(--bg) 70%, transparent);
          border-bottom: 1px solid var(--line);
        }
        .nav-inner {
          display: flex; align-items: center; justify-content: space-between;
        }
        .nav-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
        .logo-mark-img { width: 26px; height: 26px; object-fit: contain; display: block; }
        .logo-word-img { height: 22px; width: auto; display: block; }
        [data-theme="dark"] .logo-mark-img,
        [data-theme="dark"] .logo-word-img { filter: invert(1) brightness(1.4) sepia(0.2) hue-rotate(70deg) saturate(0.6); }
        .nav-links { display: flex; gap: 40px; }
        .nav-links a { color: var(--ink-2); text-decoration: none; transition: color 0.3s; }
        .nav-links a:hover { color: var(--accent); }
        [data-theme="dark"] .nav-links a:hover { color: var(--accent-glow); }
        .nav-actions { display: flex; align-items: center; gap: 16px; }
        .theme-toggle {
          width: 36px; height: 36px; border-radius: 50%;
          border: 1px solid var(--line); background: transparent;
          color: var(--ink); cursor: pointer; font-size: 14px;
          transition: all 0.3s;
        }
        .theme-toggle:hover { border-color: var(--ink); transform: rotate(180deg); }
        .nav-cta {
          padding: 12px 18px;
          border: 1px solid var(--ink);
          color: var(--ink);
          text-decoration: none;
          background: transparent;
          transition: all 0.4s;
          display: inline-flex; align-items: center; gap: 8px;
        }
        .nav-cta:hover { background: var(--ink); color: var(--bg); }
        @media (max-width: 900px) {
          .nav-links { display: none; }
        }
      `}</style>
    </nav>
  );
}

function Marquee({ items }) {
  const set = items.flatMap((x, i) => [<span key={`a${i}`}>{x}</span>]);
  return (
    <div className="marquee">
      <div className="marquee-track">
        {set}{set}{set}
      </div>
    </div>
  );
}

window.Nav = Nav;
window.Marquee = Marquee;