// Nav.jsx — understated, transparent over the hero; never competes with the scene.
// One link only: "Your Voice Is Heard" → Section 3.
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const ink = scrolled ? 'var(--tides-dark)' : 'var(--on-dark)';

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 80,
      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      padding: scrolled ? '16px clamp(20px,5vw,56px)' : '26px clamp(20px,5vw,56px)',
      transition: 'padding 700ms var(--ease-settle), background 700ms var(--ease-settle), box-shadow 700ms var(--ease-settle)',
      background: scrolled ? 'rgba(245,240,234,0.86)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px) saturate(1.05)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px) saturate(1.05)' : 'none',
      boxShadow: scrolled ? '0 1px 0 var(--stone-line)' : 'none',
    }}>
      <a href="#top" aria-label="Fiorella Salazar — home"
        onClick={(e)=>{e.preventDefault(); window.scrollTo({top:0,behavior:'smooth'});}}
        style={{ display:'flex', alignItems:'center', textDecoration:'none', lineHeight:0 }}>
        <img src="assets/wordmark.png" alt="Fiorella Salazar"
          style={{
            height: scrolled ? 'clamp(15px,1.9vw,18px)' : 'clamp(17px,2.1vw,21px)',
            width:'auto', display:'block',
            transition:'height 700ms var(--ease-settle), filter 700ms var(--ease-settle)',
            filter: scrolled ? 'none' : 'drop-shadow(0 1px 14px rgba(40,26,15,0.45))',
          }} />
      </a>

      <a href="#your-voice-is-heard"
        style={{
          fontFamily: 'var(--sans-body)', fontWeight: 400,
          fontSize: '11.5px', letterSpacing: '0.22em', textTransform: 'uppercase',
          color: ink, textDecoration: 'none', whiteSpace: 'nowrap',
          transition: 'color 700ms var(--ease-settle), opacity 400ms ease',
          opacity: 0.92,
          textShadow: scrolled ? 'none' : '0 1px 16px rgba(40,26,15,0.34)',
          paddingBottom: 2, borderBottom: '1px solid transparent',
        }}
        onMouseEnter={(e)=>{ e.currentTarget.style.opacity='1'; e.currentTarget.style.borderBottomColor='var(--fiorella-sand)'; }}
        onMouseLeave={(e)=>{ e.currentTarget.style.opacity='0.92'; e.currentTarget.style.borderBottomColor='transparent'; }}>
        Your Voice Is Heard
      </a>
    </nav>
  );
}
window.Nav = Nav;