/* Nav.jsx — fixed translucent nav, anchor links, mobile menu, dark-mode toggle */
const { useState: useStateNav, useEffect: useEffectNav } = React;

function Nav() {
  const [scrolled, setScrolled] = useStateNav(false);
  const [open, setOpen] = useStateNav(false);
  const [theme, setTheme] = useStateNav(
    (typeof document !== 'undefined' && document.documentElement.dataset.theme) || 'light'
  );

  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // apply + persist theme; re-render the toggle's lucide glyph
  useEffectNav(() => {
    document.documentElement.dataset.theme = theme;
    try { localStorage.setItem('tt-theme', theme); } catch (e) {}
    if (window.lucide) window.lucide.createIcons({ attrs: { 'stroke-width': 2 } });
  }, [theme]);

  const dark = theme === 'dark';
  const toggle = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'));
  const whiteLogo = !scrolled || dark;          // dark theme keeps the reversed logo
  const onHero = !scrolled;                       // transparent nav over the navy hero

  const links = [
    ['How It Works', '#how'], ['Features', '#features'], ['Who It\u2019s For', '#audience'],
    ['Certification', '#certification'], ['For Pros', '#company'],
  ];

  const themeBtn = () => (
    <button onClick={toggle} aria-label="Toggle dark mode" title={dark ? 'Switch to light' : 'Switch to dark'} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 38, height: 38, borderRadius: 999, cursor: 'pointer',
      background: onHero ? 'rgba(255,255,255,0.10)' : 'transparent',
      border: `1px solid ${onHero ? 'rgba(255,255,255,0.22)' : 'var(--line)'}`,
      color: onHero ? '#fff' : 'var(--fg-1)',
    }}>
      <Icon name={dark ? 'sun' : 'moon'} size={18} />
    </button>
  );

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'var(--nav-bg)' : 'transparent',
      backdropFilter: scrolled ? 'blur(10px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'background .25s ease, border-color .25s ease',
    }}>
      <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 70 }}>
        <a href="#hero" style={{ display: 'flex', alignItems: 'center' }}>
          <img src={whiteLogo ? 'assets/taxtrail-logo-white.svg' : 'assets/taxtrail-logo.svg'}
               alt="TaxTrail" style={{ height: 32, transition: 'opacity .2s' }} />
        </a>

        <nav className="nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          {links.map(([label, href]) => (
            <a key={href} href={href} className="nav-link" style={{
              font: '500 14px/1 var(--font-sans)',
              color: onHero ? 'rgba(255,255,255,0.85)' : 'var(--fg-2)',
              textDecoration: 'none', position: 'relative', paddingBottom: 4,
            }}>{label}</a>
          ))}
          {themeBtn()}
          <Button href="#contact" variant={scrolled ? 'primary' : 'secondaryDark'}
                  style={{ padding: '10px 18px', fontSize: 14 }}>Start Your Return</Button>
        </nav>

        <div className="nav-burger" style={{ display: 'none', alignItems: 'center', gap: 10 }}>
          {themeBtn()}
          <button onClick={() => setOpen(o => !o)} aria-label="Menu" style={{
            background: 'none', border: 'none', cursor: 'pointer',
            color: onHero ? '#fff' : 'var(--fg-1)', display: 'inline-flex',
          }}>
            <Icon name={open ? 'x' : 'menu'} size={26} />
          </button>
        </div>
      </Container>

      {open && (
        <div className="nav-mobile" style={{
          background: 'var(--nav-bg-solid)', backdropFilter: 'blur(10px)',
          borderBottom: '1px solid var(--line)', padding: '8px 0 16px',
        }}>
          <Container style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {links.map(([label, href]) => (
              <a key={href} href={href} onClick={() => setOpen(false)} style={{
                font: '500 16px/1 var(--font-sans)', color: 'var(--fg-1)',
                textDecoration: 'none', padding: '14px 4px', borderBottom: '1px solid var(--line)',
              }}>{label}</a>
            ))}
            <Button href="#contact" onClick={() => setOpen(false)} style={{ marginTop: 14, justifyContent: 'center' }}>Start Your Return</Button>
          </Container>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;