// Top navigation
const { useState: useStateNav, useEffect: useEffectNav } = React;

function Nav(){
  const [scrolled,setScrolled] = useStateNav(false);
  const [open,setOpen] = useStateNav(false);
  const { Menu, X } = window.LucideReact || {};

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

  const links = [
    {h:'#hakkimizda',l:'Hakkımızda'},
    {h:'#subeler',l:'Şubeler'},
    {h:'#hizmetler',l:'Hizmetler'},
    {h:'#iletisim',l:'İletişim'},
  ];

  return (
    <header className={"fixed top-0 left-0 right-0 z-50 transition-all "+(scrolled?'nav-scrolled':'')}
            style={{transition:'background .4s, border-color .4s'}}>
      <div className="container-x" style={{display:'flex',alignItems:'center',justifyContent:'space-between',height:scrolled?68:84,transition:'height .4s'}}>
        <a href="#" style={{display:'flex',alignItems:'center',gap:12,textDecoration:'none'}}>
          <div style={{
            width:34,height:34,borderRadius:8,
            background:'linear-gradient(135deg,#f3e0ad,#a8843c)',
            display:'flex',alignItems:'center',justifyContent:'center',
            color:'#1a1304',fontFamily:"'Cormorant Garamond',serif",fontWeight:600,fontSize:20,
            boxShadow:'0 1px 0 rgba(255,255,255,0.45) inset, 0 6px 16px -6px rgba(212,177,106,0.5)',
          }}>B</div>
          <div style={{display:'flex',flexDirection:'column',lineHeight:1}}>
            <span className="font-serif" style={{fontSize:22,letterSpacing:'-0.01em',color:'#fff'}}>Bpnfx</span>
            <span style={{fontSize:9.5,letterSpacing:'0.28em',color:'var(--gold-2)',marginTop:3,textTransform:'uppercase'}}>by BPN</span>
          </div>
        </a>

        <nav className="hidden md:flex" style={{gap:36}}>
          {links.map(x=>(
            <a key={x.h} href={x.h} style={{
              color:'var(--text-dim)',fontSize:13.5,textDecoration:'none',letterSpacing:'0.01em',
              transition:'color .3s'
            }} onMouseEnter={e=>e.target.style.color='#fff'} onMouseLeave={e=>e.target.style.color='var(--text-dim)'}>{x.l}</a>
          ))}
        </nav>

        <div className="hidden md:flex" style={{alignItems:'center',gap:14}}>
          <a href="tel:+902128307639" style={{color:'var(--text-dim)',fontSize:13,textDecoration:'none',fontFamily:"'JetBrains Mono',monospace"}}>+90 212 830 76 39</a>
          <a href="https://wa.me/905386462599?text=Merhaba%2C%20randevu%20almak%20istiyorum." target="_blank" rel="noopener noreferrer" className="btn btn-gold btn-sm">Randevu Al</a>
        </div>

        <button className="md:hidden" onClick={()=>setOpen(!open)} style={{background:'transparent',border:'none',color:'#fff',padding:8,cursor:'pointer'}}>
          {open ? (X && <X size={22}/>) : (Menu && <Menu size={22}/>)}
        </button>
      </div>

      {open && (
        <div className="md:hidden glass-strong" style={{padding:'18px 24px 24px'}}>
          {links.map(x=>(
            <a key={x.h} href={x.h} onClick={()=>setOpen(false)}
              style={{display:'block',padding:'14px 0',color:'#fff',textDecoration:'none',borderBottom:'1px solid var(--line)',fontSize:16}}>{x.l}</a>
          ))}
          <a href="https://wa.me/905386462599?text=Merhaba%2C%20randevu%20almak%20istiyorum." target="_blank" rel="noopener noreferrer" onClick={()=>setOpen(false)} className="btn btn-gold" style={{marginTop:18,width:'100%',justifyContent:'center'}}>Randevu Al</a>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;