// Apricus — sticky top navigation (hi-fi) + menu mobile plein écran éditorial
function Nav({ onBook }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [lang, setLang] = React.useState('FR');
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  // Bloque le scroll body quand menu ouvert + class sur body
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    if (menuOpen) document.body.classList.add('apr-menu-open');
    else document.body.classList.remove('apr-menu-open');
    return () => {
      document.body.style.overflow = '';
      document.body.classList.remove('apr-menu-open');
    };
  }, [menuOpen]);

  const links = [
    ['Séjours', '#prochain'],
    ['Ateliers', '#ateliers'],
    ['Ménopause', '#menopause'],
    ['Mon histoire', '#histoire'],
    ['Équipe', '#equipe'],
    ['Contact', '#contact'],
  ];

  const toggleLang = () => {
    const nx = lang === 'FR' ? 'EN' : 'FR';
    setLang(nx);
    if (window.__apricusSetLang) window.__apricusSetLang(nx);
  };

  return (
    <React.Fragment>
      {/* HEADER */}
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: scrolled ? 'rgba(251,244,230,0.86)' : 'transparent',
        backdropFilter: scrolled ? 'saturate(1.2) blur(10px)' : 'none',
        borderBottom: scrolled ? '1px solid var(--apr-line)' : '1px solid transparent',
        transition: 'all .3s var(--ease-out)',
      }}>
        <div style={{
          maxWidth: 1200, margin: '0 auto', padding: '0 40px', height: 78,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24
        }}>
          {/* Logo */}
          <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none', flex: 'none' }}>
            <img src="assets/apricus-lemon.png" alt="" style={{ height: 34 }} />
            <span style={{
              fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 28,
              color: 'var(--apr-ink)', letterSpacing: '0.5px', textTransform: 'uppercase'
            }}>Apricus</span>
          </a>

          {/* Liens desktop */}
          <nav className="apr-nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
            {links.map(([l, href]) => <NavLink key={l} label={l} href={href} />)}
          </nav>

          {/* Lang desktop */}
          <div className="apr-nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 18, flex: 'none' }}>
            <button onClick={toggleLang}
              style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 700,
                letterSpacing: '0.06em', color: 'var(--apr-ink-soft)'
              }}>
              <span style={{ color: lang === 'FR' ? 'var(--apr-ink)' : 'var(--apr-ink-faint)' }}>FR</span>
              <span style={{ opacity: 0.4 }}> · </span>
              <span style={{ color: lang === 'EN' ? 'var(--apr-ink)' : 'var(--apr-ink-faint)' }}>EN</span>
            </button>
          </div>

          {/* Burger mobile */}
          <button
            className="apr-nav-burger"
            aria-label={menuOpen ? "Fermer le menu" : "Ouvrir le menu"}
            onClick={() => setMenuOpen(!menuOpen)}
          >
            {menuOpen ? (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <line x1="6" y1="6" x2="18" y2="18" />
                <line x1="18" y1="6" x2="6" y2="18" />
              </svg>
            ) : (
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <line x1="4" y1="8" x2="20" y2="8" />
                <line x1="4" y1="16" x2="20" y2="16" />
              </svg>
            )}
          </button>
        </div>
      </header>

      {/* MENU MOBILE PLEIN ÉCRAN */}
      <div className={'apr-mobile-menu' + (menuOpen ? ' open' : '')} role="dialog" aria-label="Menu principal">
        <span className="apr-mobile-menu-sun" aria-hidden="true"></span>

        <button
          className="apr-mobile-close"
          aria-label="Fermer le menu"
          onClick={() => setMenuOpen(false)}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <line x1="6" y1="6" x2="18" y2="18" />
            <line x1="18" y1="6" x2="6" y2="18" />
          </svg>
        </button>

        <div className="apr-mobile-links-wrapper">
          {links.map(([l, href], i) => (
            <a
              key={l}
              href={href}
              className="apr-mobile-link"
              onClick={() => setMenuOpen(false)}
            >
              <span className="apr-mobile-link-num">{String(i + 1).padStart(2, '0')}</span>
              {l === 'Mon histoire' ? <span>Mon <em>histoire</em></span> :
               l === 'Ménopause' ? <em>{l}</em> :
               l}
            </a>
          ))}
        </div>

        <div className="apr-mobile-foot">
          <a
            href="https://instagram.com/aprrricus"
            target="_blank"
            rel="noopener noreferrer"
            className="apr-mobile-instagram"
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <rect x="3" y="3" width="18" height="18" rx="5" />
              <circle cx="12" cy="12" r="4" />
              <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
            </svg>
            <span>@aprrricus</span>
          </a>

          <div className="apr-mobile-lang">
            <span style={{ marginRight: 6, opacity: 0.65 }}>Langue :</span>
            <button onClick={toggleLang}>
              <span style={{ color: lang === 'FR' ? 'var(--apr-ink)' : 'var(--apr-ink-faint)' }}>FR</span>
              <span style={{ opacity: 0.4, margin: '0 2px' }}>·</span>
              <span style={{ color: lang === 'EN' ? 'var(--apr-ink)' : 'var(--apr-ink-faint)' }}>EN</span>
            </button>
          </div>
        </div>
      </div>

      {/* STICKY CTA RÉSERVER (mobile only, géré via CSS) */}
      <a
        href="#prochain"
        className="apr-mobile-cta"
        aria-label="Réserver un séjour"
      >
        <svg className="apr-mobile-cta-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="4" />
          <line x1="12" y1="2" x2="12" y2="5" />
          <line x1="12" y1="19" x2="12" y2="22" />
          <line x1="2" y1="12" x2="5" y2="12" />
          <line x1="19" y1="12" x2="22" y2="12" />
          <line x1="4.93" y1="4.93" x2="6.7" y2="6.7" />
          <line x1="17.3" y1="17.3" x2="19.07" y2="19.07" />
          <line x1="4.93" y1="19.07" x2="6.7" y2="17.3" />
          <line x1="17.3" y1="6.7" x2="19.07" y2="4.93" />
        </svg>
        <span>Réserver un séjour</span>
      </a>
    </React.Fragment>
  );
}

function NavLink({ label, href }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={href}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        fontSize: 15, fontWeight: 600, textDecoration: 'none',
        color: h ? 'var(--apr-honey)' : 'var(--apr-ink)',
        transition: 'color .15s var(--ease-out)'
      }}>
      {label}
    </a>
  );
}
window.Nav = Nav;