// Nav2.jsx — bold top nav with overlay menu + top marquee strip.
function Nav2() {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { window.removeEventListener('scroll', onScroll); };
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
  }, [open]);
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  const goTo = (id) => {
    setOpen(false);
    setTimeout(() => {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, open ? 350 : 0);
  };

  const menuItems = [
    { id: 'leistungen', label: 'Leistungen', num: '01' },
    { id: 'technik', label: 'Technik', num: '02' },
    { id: 'ablauf', label: 'Ablauf', num: '03' },
    { id: 'team', label: 'Team', num: '04' },
    { id: 'kontakt', label: 'Kontakt', num: '05' },
  ];

  return (
    <React.Fragment>
      {/* Top marquee strip */}
      <div style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100, background: 'var(--neon)', color: 'var(--noir)', borderBottom: '1px solid var(--noir)' }}>
        <Marquee
          items={[
            'Ton', 'Licht', 'Bühne', 'DJ-Sets', 'Festivals', 'Hochzeiten', 'Firmenfeiern', 'Livebands', 'Konzerte', 'Präsentationen', 'Open-Air', 'Galas',
          ]}
          dur="42s"
          color="var(--noir)"
          paddingY={8}
          size={13}
        />
      </div>

      {/* Main nav bar */}
      <nav style={{
        position: 'fixed', top: 30, left: 0, right: 0, zIndex: 99,
        padding: `${scrolled ? 14 : 22}px var(--side)`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        background: scrolled ? 'rgba(10,10,10,0.85)' : 'transparent',
        backdropFilter: scrolled ? 'blur(16px)' : 'none',
        transition: 'padding 0.3s, background 0.3s',
        borderBottom: scrolled ? '1px solid rgba(242,240,234,0.08)' : '1px solid transparent',
      }}>
        <a onClick={() => goTo('top')} data-hover style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src={(window.__resources && window.__resources.logo) || "assets/logo-nf-audio.png"} alt="NF-Audio" style={{ height: 130, filter: 'brightness(1.05)' }} className="nav-logo" />
        </a>

        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <button onClick={() => setOpen(true)} data-hover style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '12px 18px', border: '1px solid var(--paper)',
            fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
            letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600,
          }}>
            <span>Menü</span>
            <span style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span style={{ width: 16, height: 1.5, background: 'var(--paper)' }}></span>
              <span style={{ width: 16, height: 1.5, background: 'var(--paper)' }}></span>
            </span>
          </button>
        </div>
      </nav>

      {/* Overlay menu */}
      <div style={{
        position: 'fixed', inset: 0, zIndex: 200,
        background: 'var(--noir)',
        clipPath: open ? 'inset(0 0 0 0)' : 'inset(0 0 100% 0)',
        transition: 'clip-path 0.65s cubic-bezier(0.7, 0, 0.2, 1)',
        display: 'flex', flexDirection: 'column',
        padding: 'var(--side)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <img src={(window.__resources && window.__resources.logo) || "assets/logo-nf-audio.png"} alt="NF-Audio" style={{ height: 130 }} className="nav-logo menu-logo" />
          <button onClick={() => setOpen(false)} data-hover style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '12px 18px', border: '1px solid var(--paper)',
            fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
            letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600,
          }}>
            <span>Schließen</span>
            <span style={{ position: 'relative', width: 16, height: 16 }}>
              <span style={{ position: 'absolute', top: '50%', left: 0, width: 16, height: 1.5, background: 'var(--paper)', transform: 'rotate(45deg)' }}></span>
              <span style={{ position: 'absolute', top: '50%', left: 0, width: 16, height: 1.5, background: 'var(--paper)', transform: 'rotate(-45deg)' }}></span>
            </span>
          </button>
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'clamp(4px, 1vw, 12px)' }}>
          {menuItems.map((item, i) => (
            <a
              key={item.id}
              onClick={() => goTo(item.id)}
              data-hover
              className="display"
              style={{
                fontSize: 'clamp(48px, 9vw, 140px)',
                color: 'var(--paper)',
                display: 'flex', alignItems: 'baseline', gap: 28,
                opacity: open ? 1 : 0,
                transform: open ? 'none' : 'translateY(40px)',
                transition: `opacity 0.6s ${0.2 + i * 0.07}s, transform 0.6s ${0.2 + i * 0.07}s`,
                paddingBlock: '0.04em',
                position: 'relative',
              }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--neon)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--paper)'}
            >
              <span className="mono" style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-soft)', letterSpacing: '0.1em', position: 'relative', top: '-0.7em' }}>{item.num}</span>
              <span>{item.label}</span>
            </a>
          ))}
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24,
          paddingTop: 32, borderTop: '1px solid rgba(242,240,234,0.12)',
          opacity: open ? 1 : 0,
          transition: `opacity 0.6s ${0.5}s`,
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}>Adresse</div>
            <div style={{ fontSize: 15, color: 'var(--paper)' }}>Grabenstr. 36<br/>55437 Ockenheim</div>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}>Telefon</div>
            <div style={{ fontSize: 15, color: 'var(--paper)' }}>0177 88 37 650<br/>01515 631 78 04</div>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}>E-Mail</div>
            <div style={{ fontSize: 15, color: 'var(--paper)' }}>info@nf-audio.de</div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
window.Nav2 = Nav2;