/* AKMBD Website — Nav (variant-aware: quiet | editorial | bold)
   Sticky; transparent over the dark hero, gains a blurred light ground on scroll.
   Variants change height, scale, the structural rule, and whether a soft CTA shows. */

function Nav({ onNav, current, onHome, dir = 'quiet' }) {
  const scrolled = useScrolled(60);
  const [menuOpen, setMenuOpen] = useState(false);
  const solid = scrolled || current !== 'home';

  const links = [
    { id:'work', label:'Work' },
    { id:'services', label:'Services' },
    { id:'studio', label:'Studio' },
    { id:'contact', label:'Contact' },
  ];

  const cfg = {
    quiet:     { h:74, ws:38, fs:12,   gap:38, track:'0.18em', rule:false, cta:false, center:false },
    editorial: { h:78, ws:38, fs:12,   gap:34, track:'0.16em', rule:true,  cta:true,  center:true  },
    bold:      { h:90, ws:46, fs:13.5, gap:30, track:'0.14em', rule:false, cta:true,  center:false },
  }[dir];

  const linkColor = solid ? 'var(--ink-2)' : 'rgba(255,255,255,.86)';
  const activeColor = solid ? 'var(--accent)' : '#fff';

  const LinkBtn = ({ l }) => {
    const active = current === l.id;
    const [h, setH] = useState(false);
    return (
      <button onClick={()=>onNav(l.id)} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
        style={{ background:'none', border:'none', cursor:'pointer', padding:'6px 0', position:'relative',
          fontFamily:'var(--font-display)', fontSize:cfg.fs, letterSpacing:cfg.track, textTransform:'uppercase',
          color: active ? activeColor : (h ? activeColor : linkColor), transition:'color .2s' }}>
        {l.label}
        <span style={{ position:'absolute', left:0, bottom:0, height:1.5, width:(active||h)?'100%':'0%',
          background:activeColor, transition:'width .26s cubic-bezier(.22,1,.36,1)' }}></span>
      </button>
    );
  };

  return (
    <React.Fragment>
    <header style={{ position:'fixed', top:0, left:0, right:0, zIndex:50,
      transition:'all .4s cubic-bezier(.22,1,.36,1)',
      background: solid ? 'rgba(248,248,250,.82)' : 'transparent',
      backdropFilter: solid ? 'saturate(150%) blur(16px)' : 'none',
      WebkitBackdropFilter: solid ? 'saturate(150%) blur(16px)' : 'none',
      borderBottom: solid ? '1px solid var(--line-1)' : (cfg.rule ? '1px solid rgba(255,255,255,.18)' : '1px solid transparent') }}>
      <div style={{ maxWidth:1320, margin:'0 auto', padding:'0 clamp(20px,5vw,48px)', height:cfg.h,
        display:'flex', alignItems:'center', justifyContent:'space-between', gap:24 }}>
        <Wordmark reversed={!solid} size={cfg.ws} onClick={onHome} />

        <nav className="akm-desktop-nav"
          style={{ display:'flex', alignItems:'center', gap:cfg.gap,
            position: cfg.center ? 'absolute':'static', left: cfg.center?'50%':'auto', transform: cfg.center?'translateX(-50%)':'none' }}>
          {links.map(l => <LinkBtn key={l.id} l={l} />)}
        </nav>

        <div className="akm-desktop-nav" style={{ display:'flex', alignItems:'center', gap:20 }}>
          {cfg.cta ? (
            <button onClick={()=>onNav('contact')}
              style={{ background: dir==='bold' ? (solid?'var(--accent)':'#fff') : 'none',
                color: dir==='bold' ? (solid?'#fff':'var(--akm-indigo-900)') : (solid?'var(--accent)':'#fff'),
                border: dir==='bold' ? 'none' : `1px solid ${solid?'var(--accent)':'rgba(255,255,255,.5)'}`,
                cursor:'pointer', padding: dir==='bold'?'12px 22px':'10px 20px', borderRadius:2,
                fontFamily:'var(--font-display)', fontSize:11.5, letterSpacing:'0.16em', textTransform:'uppercase',
                transition:'all .24s' }}>
              Get in touch
            </button>
          ) : null}
        </div>

        <button className="akm-mobile-toggle" onClick={()=>setMenuOpen(true)} aria-label="Open menu"
          style={{ display:'none', background:'none', border:'none', cursor:'pointer', color: solid?'var(--ink-1)':'#fff' }}>
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
            <line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/>
          </svg>
        </button>
      </div>
    </header>

      {menuOpen && (
        <div style={{ position:'fixed', inset:0,
          background:'var(--akm-indigo-900)', zIndex:60, overflowY:'auto',
          display:'flex', flexDirection:'column', padding:'clamp(28px,7vw,44px)' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <Wordmark reversed size={30} />
            <button onClick={()=>setMenuOpen(false)} aria-label="Close menu" style={{ background:'none', border:'none', cursor:'pointer', color:'#fff' }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg>
            </button>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:4, margin:'auto 0' }}>
            {links.map((l,i) => (
              <button key={l.id} onClick={()=>{ onNav(l.id); setMenuOpen(false); }}
                style={{ background:'none', border:'none', textAlign:'left', cursor:'pointer', color:'#fff',
                  fontFamily:'var(--font-display)', fontSize:'clamp(30px,9vw,46px)', letterSpacing:'0.03em',
                  textTransform:'uppercase', padding:'10px 0', display:'flex', alignItems:'baseline', gap:16 }}>
                <span style={{ fontSize:13, color:'var(--akm-indigo-300)', letterSpacing:'0.1em' }}>0{i+1}</span>
                {l.label}
              </button>
            ))}
          </div>
          <div style={{ borderTop:'1px solid var(--line-on-dark)', paddingTop:22, color:'rgba(255,255,255,.55)',
            fontFamily:'var(--font-body)', fontSize:13, letterSpacing:'0.02em' }}>
            Southern California
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

window.Nav = Nav;