// HausNav — sticky header
const HausNav = ({ onStartProject }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);

  const navBg = scrolled ? 'rgba(255,250,243,0.95)' : 'transparent';
  const navBorder = scrolled ? '1px solid rgba(232,217,197,0.6)' : '1px solid transparent';

  return (
    <nav style={{
      position:'fixed', top:0, left:0, right:0, zIndex:200,
      background: navBg, backdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: navBorder,
      transition: 'all 350ms cubic-bezier(0.25,0.46,0.45,0.94)',
    }}>
      <div style={{maxWidth:1280, margin:'0 auto', padding:'0 clamp(20px,5vw,48px)', height:68, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        {/* Wordmark */}
        <div style={{cursor:'pointer', userSelect:'none', lineHeight:1}}>
          <div style={{fontFamily:"'Fonphoria',serif", fontWeight:700, fontSize:21, letterSpacing:'-0.02em', color:'#1f1f1f', lineHeight:1}}>HAUS</div>
          <div style={{fontFamily:"'Railey',cursive", fontWeight:400, fontSize:17, color:'#899e7b', marginTop:-1, lineHeight:1}}>& play</div>
        </div>

        {/* Desktop links */}
        <div className="desk-nav" style={{display:'flex', gap:36, alignItems:'center'}}>
          {[['Spaces','#work'],['About','#about'],['Contact','#contact']].map(([label, href]) => (
            <a key={label} href={href} style={{fontFamily:"'Montserrat',sans-serif", fontSize:12, fontWeight:500, letterSpacing:'0.05em', color:'#1f1f1f', textDecoration:'none', opacity:0.65, transition:'opacity 150ms'}}
              onMouseEnter={e=>e.target.style.opacity=1} onMouseLeave={e=>e.target.style.opacity=0.65}>{label}</a>
          ))}
          <button onClick={onStartProject} style={{fontFamily:"'Montserrat',sans-serif", fontSize:12, fontWeight:600, letterSpacing:'0.05em', background:'#5a7a4a', color:'#fff', border:'none', borderRadius:9999, padding:'11px 22px', cursor:'pointer', transition:'background 200ms', whiteSpace:'nowrap'}}
            onMouseEnter={e=>e.currentTarget.style.background='#496840'}
            onMouseLeave={e=>e.currentTarget.style.background='#5a7a4a'}>Start your project</button>
        </div>

        {/* Mobile hamburger */}
        <button className="mob-menu-btn" aria-label={mobileOpen ? 'Close menu' : 'Open menu'} onClick={()=>setMobileOpen(o=>!o)} style={{display:'none', background:'none', border:'none', cursor:'pointer', padding:4, flexDirection:'column', gap:5}}>
          {[0,1,2].map(i=>(
            <span key={i} style={{display:'block', width:22, height:1.5, background:'#1f1f1f', borderRadius:9999, transition:'all 250ms',
              transform: mobileOpen ? (i===0?'rotate(45deg) translate(4px,4.5px)':i===2?'rotate(-45deg) translate(4px,-4.5px)':'scale(0)') : 'none',
              opacity: mobileOpen && i===1 ? 0 : 1
            }}/>
          ))}
        </button>
      </div>

      {/* Mobile menu */}
      <div style={{maxHeight: mobileOpen ? 220 : 0, overflow:'hidden', transition:'max-height 350ms cubic-bezier(0.25,0.46,0.45,0.94)', background:'rgba(255,250,243,0.97)', backdropFilter:'blur(16px)'}}>
        <div style={{padding:'16px clamp(20px,5vw,48px) 24px', display:'flex', flexDirection:'column', gap:2}}>
          {[['Spaces','#work'],['About','#about'],['Contact','#contact']].map(([label, href]) => (
            <a key={label} href={href} onClick={()=>setMobileOpen(false)} style={{fontFamily:"'Montserrat',sans-serif", fontSize:14, fontWeight:500, color:'#1f1f1f', textDecoration:'none', padding:'10px 0', borderBottom:'1px solid rgba(232,217,197,0.5)'}}>{label}</a>
          ))}
          <button onClick={()=>{setMobileOpen(false); onStartProject();}} style={{marginTop:12, fontFamily:"'Montserrat',sans-serif", fontSize:13, fontWeight:600, letterSpacing:'0.05em', background:'#5a7a4a', color:'#fff', border:'none', borderRadius:9999, padding:'13px 24px', cursor:'pointer', alignSelf:'flex-start'}}>Start your project</button>
        </div>
      </div>

      <style>{`
        @media(max-width:680px){.desk-nav{display:none!important;}.mob-menu-btn{display:flex!important;}}
        .desk-nav a:focus-visible{outline:2px solid #899e7b;outline-offset:4px;border-radius:3px;opacity:1;}
        .desk-nav button:focus-visible{outline:2px solid #899e7b;outline-offset:3px;}
        .mob-menu-btn:focus-visible{outline:2px solid #899e7b;outline-offset:3px;border-radius:6px;}
      `}</style>
    </nav>
  );
};
Object.assign(window, { HausNav });
