// Hero2.jsx — massive editorial hero with slideshow + rotating word + scroll cue.
function Hero2() {
  const R = (k, fb) => (window.__resources && window.__resources[k]) || fb;
  const photos = [
    R('heroAppenheim',   'uploads/SuR_Appenheim-32-small.png'),
    R('heroLightshow',   'assets/photos/lightshow.jpg'),
    R('heroMaibaum',     'uploads/CH_Maibaumfest22-88.jpg'),
    R('heroFestival',    'assets/photos/festival-crowd.jpg'),
    R('heroVillage',     'assets/photos/village-stage.jpg'),
    R('heroSektfest',    'uploads/SuR_Sektfestbingen-9.jpg'),
    R('heroDrohne',      'uploads/CH_Maibaumfest22-109.jpg'),
    R('heroEffects',     'assets/photos/effects.jpg'),
    R('heroChurch',      'assets/photos/church-concert.jpg'),
  ];
  const rotating = ['Festivals', 'Hochzeiten', 'Livebands', 'Firmen Events', 'Konzerte', 'Galas'];

  const [photoIdx, setPhotoIdx] = React.useState(0);
  const [wordIdx, setWordIdx] = React.useState(0);

  React.useEffect(() => {
    const a = setInterval(() => setPhotoIdx(i => (i + 1) % photos.length), 5500);
    const b = setInterval(() => setWordIdx(i => (i + 1) % rotating.length), 2200);
    return () => { clearInterval(a); clearInterval(b); };
  }, []);

  React.useEffect(() => { if (window.lucide) lucide.createIcons(); }, []);

  const scrollDown = () => {
    const el = document.getElementById('leistungen');
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <section id="top" style={{
      position: 'relative',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      paddingTop: 'clamp(120px, 18vh, 200px)',
      paddingBottom: 0,
      overflow: 'hidden',
      background: 'var(--noir)' }}>
      {/* Background photo crossfade — sits on the right 50%, masked */}
      <div style={{
        position: 'absolute',
        top: 0, right: 0,
        width: '52%', height: '100%',
        overflow: 'hidden' }}>
        {photos.map((src, i) => (
          <div key={i} style={{
            position: 'absolute', inset: 0,
            backgroundImage: `url(${src})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            opacity: i === photoIdx ? 1 : 0,
            transition: 'opacity 1.4s ease-in-out',
            transform: i === photoIdx ? 'scale(1.04)' : 'scale(1.08)',
            transitionProperty: 'opacity, transform',
            transitionDuration: '1.4s, 7s' }}></div>
        ))}
        {/* Vignettes */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(90deg, var(--noir) 0%, rgba(10,10,10,0.7) 18%, rgba(10,10,10,0.2) 42%, transparent 70%)' }}></div>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(10,10,10,0.4) 0%, transparent 30%, transparent 70%, rgba(10,10,10,0.5) 100%)' }}></div>
      </div>

      {/* Big content */}
      <div className="container" style={{ position: 'relative', zIndex: 2, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingBottom: 60 }}>
        {/* Eyebrow */}
        <div className="reveal in" style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 'clamp(18px, 3vh, 36px)' }}>
          <span style={{ width: 8, height: 8, background: 'var(--neon)', borderRadius: 999, boxShadow: '0 0 20px var(--neon)' }}></span>
          <span className="eyebrow" style={{ color: 'var(--paper)' }}>Ockenheim · Rheinhessen · seit 2007</span>
        </div>

        {/* Mega headline */}
        <h1 className="display" style={{ fontSize: 'calc(var(--t-mega) * 0.9)', margin: 0, color: 'var(--paper)' }}>
          <span style={{ display: 'block' }}>Wir machen</span>
          <span style={{ display: 'flex', alignItems: 'baseline', gap: '0.15em', flexWrap: 'wrap' }}>
            <span style={{
              display: 'inline-block',
              position: 'relative',
              color: 'var(--neon)',
              minWidth: '6.5ch' }}>
              {rotating.map((w, i) => (
                <span key={w} style={{
                  display: 'inline-block',
                  position: i === wordIdx ? 'relative' : 'absolute',
                  top: 0, left: 0,
                  opacity: i === wordIdx ? 1 : 0,
                  transform: i === wordIdx ? 'translateY(0)' : 'translateY(20px)',
                  transition: 'opacity 0.5s, transform 0.5s',
                  visibility: i === wordIdx ? 'visible' : 'hidden' }}>{w}</span>
              ))}
            </span>
          </span>
          <span style={{ display: 'block', position: 'relative' }}>
            <span style={{ position: 'relative' }}>unvergesslich</span>
          </span>
        </h1>

        {/* Subline + CTA */}
        <div className="hero-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) auto',
          gap: 32,
          alignItems: 'end',
          marginTop: 'clamp(36px, 6vh, 64px)' }}>
          <div style={{ maxWidth: 520 }}>
            <p style={{
              fontSize: 'clamp(16px, 1.4vw, 22px)',
              lineHeight: 1.45,
              color: 'var(--paper)',
              margin: 0,
              fontWeight: 400 }}>
              Ton- und Lichttechnik für Livebands, DJs, Hochzeiten und alles dazwischen. Geplant von Nils &amp; Fabian — gemacht für Momente, die hängen bleiben.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button className="btn btn-fill" onClick={() => document.getElementById('kontakt')?.scrollIntoView({ behavior: 'smooth' })}>
              <span>Anfragen</span>
              <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </div>

      {/* Bottom strip — running ticker of stats */}
      <div style={{ position: 'relative', zIndex: 2, borderTop: '1px solid rgba(242,240,234,0.12)', borderBottom: '1px solid rgba(242,240,234,0.12)' }}>
        <div className="container stats-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          padding: '24px 0' }}>
          {[
            { v: '290+', l: 'Positionen im Mietpark' },
            { v: '~20', l: 'Jahre Erfahrung' },
            { v: '24/7', l: 'Erreichbar bei Buchung' },
            { v: 'Lokal', l: 'Fest in Rheinhessen verwurzelt' },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '0 var(--side)',
              borderLeft: i > 0 ? '1px solid rgba(242,240,234,0.12)' : 'none' }}>
              <div className="display" style={{ fontSize: 'clamp(28px, 3vw, 44px)', color: 'var(--paper)' }}>{s.v}</div>
              <div className="eyebrow" style={{ marginTop: 6 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Photo index marker */}
      <div style={{ position: 'absolute', top: 'clamp(100px, 16vh, 160px)', right: 'var(--side)', display: 'flex', gap: 10, zIndex: 3 }}>
        {photos.map((_, i) => (
          <span key={i} style={{
            width: i === photoIdx ? 28 : 12,
            height: 2,
            background: i === photoIdx ? 'var(--neon)' : 'rgba(242,240,234,0.3)',
            transition: 'all 0.4s' }}></span>
        ))}
      </div>
    </section>
  );
}
window.Hero2 = Hero2;