/* Nav + Tweaks */
const Nav = () => {
  const [menuOpen, setMenuOpen] = React.useState(false);

  // Close the menu when resizing up to desktop
  React.useEffect(() => {
    const onResize = () => {
      if (window.innerWidth > 768) setMenuOpen(false);
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  // Lock body scroll when menu open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  return (
    <>
      <nav className="nav">
        <div className="wrap nav-inner">
          <a href="/" className="logo">AIVENT</a>
          <div className="nav-links">
            <a href="/#so-funktionierts">So funktioniert's</a>
            <a href="/#integrationen">Integrationen</a>
            <a href="/#preise">Preise</a>
            <a href="/#faq">FAQ</a>
            <a href="whatsapp.html" className="nav-new" aria-hidden="false" style={{textDecoration:'none'}}>
              <span className="nav-new-badge">NEU</span>
              <svg className="nav-new-arrow" width="12" height="10" viewBox="0 0 12 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M1 5h10"/>
                <path d="M7 1l4 4-4 4"/>
              </svg>
              <span className="nav-new-chip">WhatsApp</span>
            </a>
          </div>
          <div style={{display:'flex',gap:10,alignItems:'center'}}>
            <a href="login.html" className="nav-login-desktop" style={{fontFamily:'var(--f-sans)',fontSize:14,color:'var(--ink)',textDecoration:'none',padding:'10px 4px',letterSpacing:'-0.01em',opacity:0.85}}>Login</a>
            <a href="demo.html" className="btn btn-primary nav-cta-desktop" style={{padding:'10px 16px',fontSize:13}}>Demo buchen</a>
            <button
              className="nav-toggle"
              aria-label={menuOpen ? 'Menü schließen' : 'Menü öffnen'}
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen(!menuOpen)}
            >
              {menuOpen ? (
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="var(--ink)" strokeWidth="1.6" strokeLinecap="round">
                  <line x1="3" y1="3" x2="15" y2="15"/>
                  <line x1="15" y1="3" x2="3" y2="15"/>
                </svg>
              ) : (
                <span></span>
              )}
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile menu drawer */}
      <div className={`mobile-menu ${menuOpen ? 'open' : ''}`} aria-hidden={!menuOpen}>
        <a href="/#so-funktionierts" onClick={() => setMenuOpen(false)}>
          So funktioniert's <span style={{color:'var(--lime-deep)',fontSize:13}}>→</span>
        </a>
        <a href="/#integrationen" onClick={() => setMenuOpen(false)}>
          Integrationen <span style={{color:'var(--lime-deep)',fontSize:13}}>→</span>
        </a>
        <a href="/#preise" onClick={() => setMenuOpen(false)}>
          Preise <span style={{color:'var(--lime-deep)',fontSize:13}}>→</span>
        </a>
        <a href="/#faq" onClick={() => setMenuOpen(false)}>
          FAQ <span style={{color:'var(--lime-deep)',fontSize:13}}>→</span>
        </a>
        <a href="whatsapp.html" onClick={() => setMenuOpen(false)} style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:10}}>
          <span style={{display:'flex',alignItems:'center',gap:10}}>
            <span style={{display:'inline-flex',alignItems:'center',padding:'2px 7px',fontFamily:'var(--f-mono)',fontSize:10,letterSpacing:'0.12em',fontWeight:600,background:'var(--lime)',color:'var(--ink)'}}>NEU</span>
            WhatsApp
          </span>
          <span style={{color:'var(--lime-deep)',fontSize:13}}>→</span>
        </a>
        <a href="ueber-uns.html" onClick={() => setMenuOpen(false)}>
          Über uns <span style={{color:'var(--lime-deep)',fontSize:13}}>→</span>
        </a>
        <a href="karriere.html" onClick={() => setMenuOpen(false)}>
          Karriere <span style={{color:'var(--lime-deep)',fontSize:13}}>→</span>
        </a>
        <a href="kontakt.html" onClick={() => setMenuOpen(false)}>
          Kontakt <span style={{color:'var(--lime-deep)',fontSize:13}}>→</span>
        </a>
        <a href="login.html" onClick={() => setMenuOpen(false)}>
          Login <span style={{color:'var(--lime-deep)',fontSize:13}}>→</span>
        </a>
        <a href="demo.html" className="btn btn-primary" style={{padding:'16px 22px',fontSize:14,marginTop:20}}>
          Demo buchen <span className="arrow">↗</span>
        </a>
      </div>
    </>
  );
};

const TweaksPanel = ({cfg, setCfg, visible}) => {
  if (!visible) return null;
  const colors = [
    {k:'lime',c:'#D4FF00',lbl:'Lime (original)'},
    {k:'limeMid',c:'#BEF264',lbl:'Lime mid'},
    {k:'limeDeep',c:'#A3E635',lbl:'Lime deep'},
    {k:'chartreuse',c:'#C5E800',lbl:'Chartreuse'},
    {k:'olive',c:'#B8D900',lbl:'Olive-lime'},
    {k:'acid',c:'oklch(0.88 0.22 95)',lbl:'Acid'},
    {k:'electric',c:'oklch(0.82 0.22 155)',lbl:'Electric'},
    {k:'cyber',c:'oklch(0.87 0.22 175)',lbl:'Cyber'},
    {k:'sky',c:'#38BDF8',lbl:'Sky Blue'},
    {k:'indigo',c:'#818CF8',lbl:'Indigo'},
    {k:'violet',c:'#A78BFA',lbl:'Violet'},
    {k:'magenta',c:'#F472B6',lbl:'Magenta'},
    {k:'orange',c:'#FB923C',lbl:'Orange'},
  ];
  return (
    <div className="tweaks-panel visible">
      <div className="tweaks-head">
        <span>◆ TWEAKS</span>
        <span style={{color:'var(--lime)'}}>AIVENT v2</span>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <label>Akzentfarbe</label>
          <div className="tweak-opts">
            {colors.map(c=>(
              <button key={c.k} className={`swatch ${cfg.accent===c.k?'active':''}`} style={{background:c.c}} onClick={()=>setCfg({...cfg,accent:c.k})} title={c.lbl}></button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>Hero-Visual</label>
          <div className="tweak-opts">
            {['transcript','waveform','dashboard'].map(v=>(
              <button key={v} className={cfg.hero===v?'active':''} onClick={()=>setCfg({...cfg,hero:v})}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>Headline-Stil</label>
          <div className="tweak-opts">
            {['bold','editorial','direkt'].map(v=>(
              <button key={v} className={cfg.headline===v?'active':''} onClick={()=>setCfg({...cfg,headline:v})}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>Sektions-Rhythmus</label>
          <div className="tweak-opts">
            {['dark-first','alternating','mostly-dark'].map(v=>(
              <button key={v} className={cfg.rhythm===v?'active':''} onClick={()=>setCfg({...cfg,rhythm:v})}>{v}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

window.Nav = Nav;
window.TweaksPanel = TweaksPanel;