// Chapters.jsx — numbered service chapters + numbered process steps with sticky photo column.
const _R = (k, fb) => (typeof window !== 'undefined' && window.__resources && window.__resources[k]) || fb;

const SERVICES = [
  {
    num: '01',
    title: 'Ton',
    photo: _R('chapTon', 'uploads/ndb_imago_bitte_den_zettel_in_vordergrund_entfernen_20260615_213355.jpeg'),
    lead: 'PA-Systeme die tragen — von der intimen Trauung bis zum 800-Mann-Festival.',
    bullets: ['Line-Arrays von Seeburg', 'Monitor-Wedges & In-Ear', 'Funkstrecken Shure & Sennheiser', 'Digitalpulte Behringer, Allen & Heath'] },
  {
    num: '02',
    title: 'Licht',
    photo: _R('chapLicht', 'uploads/ndb_imago_entferne_das_branding_20260615_214555.jpeg'),
    objectPos: '100% center',
    lead: 'LED-Bühnenshow, Architekturlicht, Effekte. Designt für den Moment, programmiert für Kontrolle.',
    bullets: ['Moving-Heads, Wash & Beam', 'Architektur-Beleuchtung', 'Hazer, Fog & Pyro-Effekte (kalt)', 'DMX-Programmierung live'] },
  {
    num: '03',
    title: 'Bühne & Rigging',
    photo: _R('chapBuehne', 'uploads/bts-maibaumfest2021-17.jpg'),
    lead: 'Truss, Traversen, Sololift. Wir bauen die Bühne, an der dein Event hängt.',
    bullets: ['Truss-Systeme & Traversen', 'Sololift-Stative bis 5 m', 'Bühnen-Module', 'Wetterfeste Outdoor-Setups'] },
  {
    num: '04',
    title: 'Beratung',
    photo: _R('chapBeratung', 'uploads/ndb_imago_pepp_das_bild_bitte_auf_in_dem_unreinheiten_verbes_20260615_220215.jpeg'),
    objectPos: '38% center',
    lead: 'Erst zuhören, dann planen. Wir kommen vorbei, schauen den Ort an, finden die richtige Größe.',
    bullets: ['Vor-Ort-Termine kostenlos', 'CAD-Pläne für die Genehmigung', 'Einsatzplanung & Logistik', 'Vermietung mit oder ohne Technik'] },
];

const PROCESS = [
  { num: '01', title: 'Briefing', text: 'Du sagst was du planst — Anlass, Ort, Größe, Vibe. Telefonisch, per Mail oder bei einem Bier.' },
  { num: '02', title: 'Konzept', text: 'Wir entwerfen ein Setup, das zum Event passt. Nicht zu wenig, nicht zu viel. Ehrliches Angebot innerhalb von 48 h.' },
  { num: '03', title: 'Vor-Ort', text: 'Bei größeren Events schauen wir die Location vorher an. Strom, Wege, Aufbauzeiten — alles abgeklopft.' },
  { num: '04', title: 'Aufbau', text: 'Wir kommen früh, bauen sauber auf, machen Soundcheck. Du musst dich um nichts kümmern.' },
  { num: '05', title: 'Show', text: 'Wir bleiben dabei. Mischen die Band, fahren das Licht, halten alles am Laufen.' },
  { num: '06', title: 'Abbau', text: 'Nach dem letzten Song packen wir alles ein und sind weg. Saubere Übergabe.' },
];

function Chapters() {
  window.useReveal();
  const [activeService, setActiveService] = React.useState(0);

  // sticky-aware: track which service is in view
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const idx = parseInt(e.target.getAttribute('data-svc'), 10);
          if (!Number.isNaN(idx)) setActiveService(idx);
        }
      });
    }, { rootMargin: '-50% 0px -50% 0px', threshold: 0 });
    document.querySelectorAll('[data-svc]').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <React.Fragment>
      {/* ----- LEISTUNGEN ----- */}
      <section id="leistungen" style={{ background: 'var(--noir)', paddingTop: 'clamp(80px, 14vh, 160px)', paddingBottom: 'clamp(80px, 14vh, 160px)', position: 'relative' }}>
        <div className="container">
          <SectionEyebrow num="01" label="Was wir machen" />
          <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)' }}>
              Vier <span className="serif-italic" style={{ color: 'var(--neon)' }}>Disziplinen</span>.<br/>
              Eine Crew.
            </h2>
            <p style={{ maxWidth: 360, fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.5, margin: 0 }}>
              Wir liefern nicht nur Equipment — wir liefern das richtige Setup für deinen Anlass, betreut von uns persönlich.
            </p>
          </div>

          {/* Sticky + scrolling: photo column sticks, services scroll on the right */}
          <div className="svc-grid-chapters" style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)',
            gap: 'clamp(32px, 6vw, 80px)',
            alignItems: 'start' }}>
            {/* Sticky photo column */}
            <div style={{ position: 'sticky', top: 120 }}>
              <div style={{
                position: 'relative',
                aspectRatio: '4 / 5',
                width: '100%',
                overflow: 'hidden',
                background: 'var(--noir-2)' }}>
                {SERVICES.map((s, i) => (
                  <img key={i} src={s.photo} alt={s.title} style={{
                    position: 'absolute', inset: 0,
                    width: '100%', height: '100%',
                    objectFit: 'cover',
                    objectPosition: s.objectPos || 'center',
                    opacity: i === activeService ? 1 : 0,
                    transform: i === activeService ? 'scale(1)' : 'scale(1.05)',
                    transition: 'opacity 0.7s ease, transform 1s ease' }} />
                ))}
                {/* Active service big number overlay */}
                <div style={{
                  position: 'absolute', bottom: 24, left: 24, right: 24, zIndex: 3,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                  color: 'var(--paper)', mixBlendMode: 'difference' }}>
                  <div className="display" style={{ fontSize: 'clamp(64px, 9vw, 140px)', lineHeight: 0.8 }}>
                    {SERVICES[activeService].num}
                  </div>
                  <div className="eyebrow" style={{ color: 'var(--paper)' }}>{SERVICES[activeService].title}</div>
                </div>
              </div>
            </div>

            {/* Service entries */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(80px, 14vh, 160px)' }}>
              {SERVICES.map((s, i) => (
                <div key={i} data-svc={i} className="reveal" style={{ minHeight: '40vh' }}>
                  <div className="mono" style={{ fontSize: 13, color: 'var(--neon)', fontWeight: 600, letterSpacing: '0.18em', marginBottom: 20 }}>
                    // {s.num} / {String(SERVICES.length).padStart(2, '0')}
                  </div>
                  <h3 className="display" style={{ fontSize: 'clamp(48px, 6vw, 96px)', margin: '0 0 24px', color: 'var(--paper)' }}>
                    {s.title}
                  </h3>
                  <p style={{ fontSize: 'clamp(18px, 1.3vw, 22px)', lineHeight: 1.5, color: 'var(--paper)', margin: '0 0 28px', maxWidth: 480 }}>
                    {s.lead}
                  </p>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                    {s.bullets.map((b, j) => (
                      <li key={j} style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 16, color: 'var(--ink-soft)' }}>
                        <span style={{ width: 6, height: 6, background: 'var(--neon)', borderRadius: 999, flexShrink: 0 }}></span>
                        {b}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ----- BIG MARQUEE BREAK ----- */}
      <div className="hairline-top hairline-bot">
        <Marquee
          italic={true}
          items={['Ton', 'Licht', 'Bühne', 'Rigging', 'Livebands', 'Medien', 'Live-Mitschnitte']}
          dur="40s"
          size={70}
          color="var(--paper)"
          paddingY={24}
        />
      </div>

      {/* ----- ABLAUF ----- */}
      <section id="ablauf" style={{ background: 'var(--noir-2)', paddingTop: 'clamp(80px, 14vh, 160px)', paddingBottom: 'clamp(80px, 14vh, 160px)' }}>
        <div className="container">
          <SectionEyebrow num="03" label="So läuft's ab" />
          <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)' }}>
              Sechs <span className="serif-italic" style={{ color: 'var(--neon)' }}>Schritte</span>,<br/>
              keine Überraschungen.
            </h2>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
            gap: 0 }}>
            {PROCESS.map((p, i) => (
              <div key={i} className="reveal" style={{
                padding: '40px 28px',
                borderTop: '1px solid rgba(242,240,234,0.15)',
                borderRight: i < PROCESS.length - 1 && (i + 1) % 3 !== 0 ? '1px solid rgba(242,240,234,0.15)' : 'none',
                position: 'relative',
                cursor: 'none',
                transition: 'background 0.3s' }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(214,255,31,0.04)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                <div className="display" style={{
                  fontSize: 'clamp(72px, 8vw, 120px)',
                  color: 'rgba(242,240,234,0.08)',
                  position: 'absolute', top: 12, right: 12,
                  lineHeight: 0.8 }}>{p.num}</div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--neon)', fontWeight: 600, letterSpacing: '0.16em', marginBottom: 14 }}>
                  Schritt {p.num}
                </div>
                <h3 className="display" style={{ fontSize: 'clamp(28px, 2.6vw, 40px)', margin: '0 0 16px', color: 'var(--paper)' }}>
                  {p.title}
                </h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0 }}>{p.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}
window.Chapters = Chapters;