/* Nav.jsx — fixed top navigation, transparent over hero → solid on scroll */
function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.scrollY - 78;
  window.scrollTo({ top, behavior: 'smooth' });
}

function Nav() {
  const [solid, setSolid] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['Pourquoi nous', 'pourquoi'],
    ['Ce qui ne change pas', 'autonomie'],
    ['Le parcours', 'parcours'],
    ['Ils nous ont rejoints', 'cabinets'],
  ];

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'background .5s cubic-bezier(.22,.61,.36,1), border-color .5s, backdrop-filter .5s',
      background: solid ? 'rgba(18,18,18,.86)' : 'transparent',
      backdropFilter: solid ? 'blur(10px)' : 'none',
      borderBottom: `1px solid ${solid ? 'rgba(255,255,255,.08)' : 'transparent'}`,
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px', height: 78,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{ cursor: 'pointer', display:'flex' }}>
          <img src="assets/logos/LOGO_PATRIMMOFI_MA_HRZ_CREME_RVB.svg" alt="Patrimmofi Mergers & Acquisitions" style={{ height:'clamp(42px, 3.5vw, 50px)', width:'auto' }} />
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 38 }} className="pf-nav-links">
          {links.map(([label, id]) => (
            <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); scrollToId(id); }} style={navLink}>{label}</a>
          ))}
          <button onClick={() => scrollToId('contact')} style={{
            fontFamily: 'var(--font-sans)', fontSize: 'var(--small-size)', fontWeight: 500, letterSpacing: '.02em',
            color: '#161616', background: '#F2EEE8', border: 'none', borderRadius: 3,
            padding: '11px 22px', cursor: 'pointer', transition: 'background .3s, color .3s',
          }} onMouseEnter={e=>{e.currentTarget.style.background='#FFFFFF';}}
             onMouseLeave={e=>{e.currentTarget.style.background='#F2EEE8';}}>
            Parlons de votre cabinet
          </button>
        </nav>
        <button className="pf-burger" onClick={() => setOpen(o=>!o)} aria-label="Menu" aria-expanded={open} aria-controls="menu-mobile" style={{
          display:'none', background:'none', border:'none', cursor:'pointer', flexDirection:'column', gap:5, padding:6 }}>
          <span style={burgerBar}/><span style={burgerBar}/><span style={burgerBar}/>
        </button>
      </div>
      {open && (
        <div id="menu-mobile" style={{ background:'rgba(18,18,18,.96)', borderTop:'1px solid rgba(255,255,255,.08)', padding:'14px 40px 22px' }} className="pf-mobile-menu">
          {links.map(([label,id]) => (
            <a key={id} href={`#${id}`} onClick={(e)=>{ e.preventDefault(); setOpen(false); scrollToId(id); }} style={{ ...navLink, display:'block', padding:'12px 0', fontSize:'var(--body-size)' }}>{label}</a>
          ))}
          <a href="#contact" onClick={(e)=>{ e.preventDefault(); setOpen(false); scrollToId('contact'); }} style={{ ...navLink, display:'block', padding:'14px 0 4px', fontSize:'var(--body-size)', color:'#F2EEE8' }}>Parlons de votre cabinet →</a>
        </div>
      )}
    </header>
  );
}

const navLink = {
  fontFamily: 'var(--font-sans)', fontSize: 'var(--small-size)', fontWeight: 400, letterSpacing: '.01em',
  color: 'rgba(242,238,232,.82)', cursor: 'pointer', transition: 'color .25s', textDecoration: 'none',
};
const burgerBar = { width: 22, height: 1.5, background: '#F2EEE8', display: 'block' };

Object.assign(window, { Nav, scrollToId });