function ProgressBar(){
  const y = useScrollY();
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    const max = document.documentElement.scrollHeight - window.innerHeight;
    setP(max > 0 ? Math.min(1, y/max) : 0);
  }, [y]);
  return (
    <div style={{position:'fixed', top:0, left:0, right:0, height:2, zIndex:9997, background:'rgba(244,237,216,.06)'}}>
      <div style={{height:'100%', width:`${p*100}%`, background:'var(--passion)', transition:'width .1s linear'}}/>
    </div>
  );
}

function LangSwitcher(){
  const { lang, setLang } = useLang();
  return (
    <div style={{display:'flex', alignItems:'center', gap:6, pointerEvents:'auto', zIndex:9999}}>
      {['it','de'].map((l, i) => (
        <React.Fragment key={l}>
          {i > 0 && <span className="italiana" style={{fontSize:10, opacity:.3, color:'var(--cream)'}}>/</span>}
          <button onClick={() => setLang(l)} className="italiana" style={{
            background:'transparent', border:'none', cursor:'pointer',
            fontSize:10, letterSpacing:2.5, textTransform:'uppercase', padding:'6px 2px',
            color: lang === l ? 'var(--passion)' : 'rgba(244,237,216,.55)',
            borderBottom: lang === l ? '1px solid var(--passion)' : '1px solid transparent',
            transition:'color .2s',
          }}>
            {l.toUpperCase()}
          </button>
        </React.Fragment>
      ))}
    </div>
  );
}

function StickyNav({ sections, active, onJump }){
  const isMobile = useIsMobile();
  const [menuOpen, setMenuOpen] = React.useState(false);

  const handleJump = (id) => { onJump(id); setMenuOpen(false); };

  return (
    <nav className={menuOpen ? 'nav-mobile-open' : ''} style={{
      position:'fixed', top:20, left:0, right:0, zIndex:9996,
      display:'flex', justifyContent:'space-between', alignItems:'center',
      padding:'0 32px', pointerEvents:'none',
    }}>
      {/* Logo */}
      <div style={{display:'flex', alignItems:'center', gap:12, pointerEvents:'auto', zIndex:9999}}>
        <div style={{width:8, height:8, background:'var(--passion)', borderRadius:'50%', animation:'pulse 2s infinite'}}/>
        <span className="italiana" style={{fontSize:11, letterSpacing:3, color:'var(--cream)', textTransform:'uppercase'}}>
          {CONFIG.couple.name1[0]}&nbsp;·&nbsp;{CONFIG.couple.name2[0]}&nbsp;&nbsp;&nbsp;{CONFIG.event.date_short}
        </span>
      </div>

      {/* Link desktop */}
      <div className="nav-links" style={{display:'flex', gap:18, pointerEvents:'auto'}}>
        {sections.map(s => (
          <button key={s.id} onClick={() => handleJump(s.id)}
            className="italiana"
            style={{
              background:'transparent', border:'none', cursor:'pointer',
              fontSize:10, letterSpacing:2.5,
              color: active===s.id ? 'var(--passion)' : 'rgba(244,237,216,.55)',
              textTransform:'uppercase', padding:'6px 0', transition:'color .2s',
              borderBottom: active===s.id ? '1px solid var(--passion)' : '1px solid transparent',
            }}>
            {s.num}
          </button>
        ))}
      </div>

      {/* Hamburger (solo mobile) */}
      <button className="nav-hamburger italiana" onClick={() => setMenuOpen(o => !o)}
        aria-label="menu" style={{
          display: 'none', // mostrato via CSS su mobile
          pointerEvents:'auto', background:'transparent', border:'none',
          color:'var(--cream)', cursor:'pointer', fontSize:20,
          zIndex:9999, padding:'6px',
        }}>
        {menuOpen ? '✕' : '☰'}
      </button>

      {/* Selettore lingua */}
      <LangSwitcher/>
    </nav>
  );
}

Object.assign(window, { ProgressBar, StickyNav });
