// Hero v3 — multi-layer blur text. Crossfade carousel. Light background.
const HERO_IMAGES = [
  'hero/banner-1.jpg',
  'hero/banner-2.jpg',
  'hero/banner-3.jpg',
];

function HeroV3() {
  const [idx, setIdx] = React.useState(0);
  const [prev, setPrev] = React.useState(null);

  React.useEffect(() => {
    const t = setInterval(() => {
      setIdx(i => {
        setPrev(i);
        return (i + 1) % HERO_IMAGES.length;
      });
    }, 5500);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="top" data-screen-label="01 Open" style={{
      height: '100vh', position: 'relative', overflow: 'hidden',
      background: '#bdd0f2',
    }}>
      {HERO_IMAGES.map((src, i) => (
        <div key={src}
          className={`hero-slide${i === idx ? ' active' : ''}${i === prev ? ' prev' : ''}`}
          style={{ backgroundImage: `url(${src})` }}
        ></div>
      ))}

      {/* Very light top vignette only */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(180deg, rgba(15,13,10,.28) 0%, transparent 40%)',
      }}></div>

      {/* Soft bottom fade — kept short so banner image stays visible */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, height: '52vh',
        background: 'linear-gradient(to bottom, transparent 0%, rgba(189,208,242,.10) 25%, rgba(189,208,242,.55) 55%, rgba(189,208,242,.92) 76%, #bdd0f2 88%)',
        pointerEvents: 'none', zIndex: 5,
      }}></div>

      {/* Bottom content */}
      <div className="hero-bottom" style={{
        position: 'absolute', bottom: 80, left: 40, right: 40,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        gap: 40, color: 'var(--paper)',
        zIndex: 6,
      }}>
        <div className="reveal delay-2 in" style={{ maxWidth: 640 }}>
          <h1 style={{
            fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic',
            fontSize: 'clamp(52px, 7vw, 116px)',
            lineHeight: .9, letterSpacing: '-.04em',
            color: 'var(--ink)', margin: 0,
          }}>
            <span style={{ position: 'relative', display: 'inline-block' }}>
              <span style={{ position: 'absolute', inset: '-4px -24px', filter: 'blur(52px)', opacity: .38, color: 'var(--ink)' }}>petra voice</span>
              <span style={{ position: 'absolute', inset: '-2px -10px', filter: 'blur(18px)', opacity: .28, color: 'var(--ink)' }}>petra voice</span>
              <span style={{ position: 'absolute', inset: 0, filter: 'blur(5px)', opacity: .22, color: 'var(--ink)' }}>petra voice</span>
              <span style={{ position: 'relative' }}>
                petra{' '}
                <span style={{ display: 'inline-block', filter: 'blur(3px)', opacity: 0.52 }}>voice</span>
              </span>
            </span>
          </h1>
        </div>

        <div className="reveal delay-3 in" style={{ display: 'flex', gap: 10, alignItems: 'center', zIndex: 2 }}>
          <a href="#works" data-hover onClick={e => { e.preventDefault(); document.getElementById('works').scrollIntoView({ behavior: 'smooth' }); }}
            style={{
              padding: '14px 28px', borderRadius: 999,
              background: 'rgba(239,233,221,.92)', color: 'var(--ink)',
              backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
              fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase',
              display: 'inline-flex', alignItems: 'center', gap: 10, fontWeight: 500,
            }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--vermilion)' }}></span>
            enter
          </a>
          <a href="#them" data-hover onClick={e => { e.preventDefault(); document.getElementById('them').scrollIntoView({ behavior: 'smooth' }); }}
            style={{
              padding: '14px 28px', borderRadius: 999,
              border: '1px solid rgba(26,24,18,.18)',
              background: 'rgba(239,233,221,.45)',
              backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
              color: 'var(--ink)',
              fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase',
            }}>
            them ↓
          </a>
        </div>
      </div>

      {/* Slide indicators */}
      <div style={{
        position: 'absolute', bottom: 36, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', gap: 6, zIndex: 7,
      }}>
        {HERO_IMAGES.map((_, i) => (
          <button key={i} data-hover onClick={() => { setPrev(idx); setIdx(i); }} style={{
            width: i === idx ? 22 : 6, height: 2,
            background: i === idx ? 'var(--ink)' : 'rgba(26,24,18,.25)',
            transition: 'all .5s var(--e-out)', borderRadius: 2,
          }}></button>
        ))}
      </div>
    </section>
  );
}

window.HeroV3 = HeroV3;