// Equipment2.jsx — bold equipment teaser linking to catalog. Marquee of brands + numbered category tiles.

function Equipment2() {
  window.useReveal();
  const [cats, setCats] = React.useState([]);
  React.useEffect(() => {
    const url = (window.__resources && window.__resources.catalog) || 'catalog.json';
    fetch(url).then(r => r.json()).then(data => {
      setCats(data.map(c => ({ name: c.category, count: c.items.length, icon: c.icon })));
    }).catch(() => {});
  }, []);
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  const total = cats.reduce((s, c) => s + c.count, 0);

  const brands = ['Seeburg', 'Sennheiser', 'Shure', 'Behringer', 'Allen & Heath', 'Yamaha', 'Pioneer DJ', 'Cameo', 'Stairville', 'LD Systems', 'Adam Hall'];

  return (
    <section id="technik" style={{
      background: 'var(--noir)',
      paddingTop: 'clamp(80px, 14vh, 160px)',
      paddingBottom: 'clamp(80px, 14vh, 160px)',
      position: 'relative' }}>
      <div className="container">
        <SectionEyebrow num="02" label="Equipment / Mietpark" />

        {/* Headline + count */}
        <div className="reveal" style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto',
          alignItems: 'end', gap: 40, marginBottom: 'clamp(48px, 8vh, 96px)' }}>
          <h2 className="display" style={{ fontSize: 'var(--t-display)', margin: 0, color: 'var(--paper)' }}>
            Alles auf Lager.<br/>
            Sofort <span style={{ color: 'var(--neon)' }}>einsatzbereit</span>.
          </h2>
          <div style={{ textAlign: 'right' }}>
            <div className="display" style={{ fontSize: 'clamp(48px, 6vw, 84px)', color: 'var(--neon)', lineHeight: 0.9 }}>
              {total || '290+'}
            </div>
            <div className="eyebrow" style={{ marginTop: 6 }}>Positionen im Mietpark</div>
          </div>
        </div>
      </div>

      {/* Brand marquee */}
      <div className="hairline-top hairline-bot reveal" style={{ marginBottom: 'clamp(48px, 8vh, 96px)' }}>
        <div className="brand-marquee">
        <Marquee
          items={brands}
          dur="48s"
          size={28}
          color="var(--paper)"
          paddingY={24}
        />
        </div>
      </div>

      <div className="container">
        {/* Category tiles */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
          gap: 1,
          background: 'rgba(242,240,234,0.12)',
          border: '1px solid rgba(242,240,234,0.12)' }}>
          {(cats.length ? cats : Array(9).fill({ name: '…', count: 0, icon: 'box' })).map((c, i) => (
            <a key={i} href="katalog.html" data-hover className="reveal" style={{
              background: 'var(--noir)',
              padding: '32px 24px',
              display: 'flex', flexDirection: 'column', gap: 12,
              minHeight: 180,
              position: 'relative',
              transition: 'background 0.3s',
              overflow: 'hidden' }}
            onMouseEnter={e => { e.currentTarget.style.background = 'var(--neon)'; const all = e.currentTarget.querySelectorAll('*'); all.forEach(el => el.style.color = 'var(--noir)'); }}
            onMouseLeave={e => { e.currentTarget.style.background = 'var(--noir)'; const all = e.currentTarget.querySelectorAll('*'); all.forEach(el => el.style.color = ''); }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)', letterSpacing: '0.2em', fontWeight: 600 }}>
                {String(i + 1).padStart(2, '0')}
              </div>
              <i data-lucide={c.icon || 'box'} style={{ width: 32, height: 32, color: 'var(--paper)', strokeWidth: 1.5 }}></i>
              <div style={{ marginTop: 'auto' }}>
                <div className="display" style={{ fontSize: 20, color: 'var(--paper)', lineHeight: 1 }}>{c.name}</div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 6, fontWeight: 500, letterSpacing: '0.1em' }}>
                  {c.count} POSITIONEN →
                </div>
              </div>
            </a>
          ))}
        </div>

        {/* Big CTA */}
        <div className="reveal" style={{
          marginTop: 'clamp(60px, 10vh, 120px)',
          padding: 'clamp(36px, 6vw, 60px)',
          background: 'var(--neon)',
          color: 'var(--noir)',
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) auto',
          alignItems: 'center',
          gap: 40 }}>
          <div>
            <h3 className="display" style={{ fontSize: 'clamp(28px, 3.6vw, 56px)', margin: '0 0 12px', color: 'var(--noir)' }}>
              Den ganzen Katalog ansehen.
            </h3>
            <p style={{ fontSize: 17, lineHeight: 1.5, margin: 0, color: 'var(--noir)', maxWidth: 480 }}>
              Über 290 Positionen, durchsuchbar nach Kategorie und Artikelnummer. Preise auf Anfrage — passend zu Termin und Umfang.
            </p>
          </div>
          <a href="katalog.html" data-hover className="btn" style={{
            borderColor: 'var(--noir)', color: 'var(--noir)',
            background: 'transparent' }}>
            <span>Zum Katalog</span>
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}
window.Equipment2 = Equipment2;