/* ── Hero Section ── */

function Hero({ onNav }) {
  return (
    <section id="hero" data-screen-label="Hero"
      style={{ minHeight: '100vh', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>

      {/* Background photo */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: "url('assets/photos/hero-bg.jpg')",
        backgroundSize: 'cover', backgroundPosition: 'center 30%',
        backgroundAttachment: 'fixed',
        filter: 'brightness(0.35) contrast(1.1)',
      }}/>

      {/* Grain overlay */}
      <div style={{
        position: 'absolute', inset: '-50%', width: '200%', height: '200%',
        backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
        opacity: 0.04,
        animation: 'grain 8s steps(10) infinite',
        pointerEvents: 'none',
      }}/>

      {/* Scanlines */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px)',
        pointerEvents: 'none',
      }}/>

      {/* Content */}
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1280, margin: '0 auto', width: '100%', padding: '0 40px 80px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 60, alignItems: 'flex-end' }}>

          {/* Left: Band name + release info */}
          <div>
            {/* Text logo */}
            <img src="assets/logo2.png" alt="The Breakdown"
              style={{ maxWidth: '72%', height: 'auto', marginBottom: 40, animation: 'tb-flicker-logo 3.5s infinite', filter: 'brightness(1.05)' }}
            />
            <div style={{ display: 'flex', gap: 20, alignItems: 'center', marginBottom: 28 }}>
              <div style={{ width: 32, height: 1, background: '#e0e0e0' }}/>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: '#e0e0e0', opacity: 0.7, animation: 'tb-flicker 3s infinite' }}>
                LONDON · EST. 2020
              </div>
            </div>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Btn onClick={() => onNav('music')}>STREAM NOW</Btn>
              <Btn variant="secondary" onClick={() => onNav('live')}>LIVE DATES</Btn>
            </div>
          </div>

          {/* Right: Album art + latest release */}
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.blue, marginBottom: 16, animation: 'tb-flicker 2.5s infinite' }}>
              LATEST RELEASE
            </div>
            <div style={{ position: 'relative', display: 'inline-block', marginBottom: 20 }}>
              <img src="assets/artwork/DR.jpeg" alt="Distraction Reaction"
                style={{ width: 220, height: 220, objectFit: 'cover', display: 'block', animation: 'tb-flicker-img 3s infinite', boxShadow: '0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06)' }}
              />
            </div>
            <div style={{ animation: 'tb-flicker 2s infinite' }}>
              <div style={{ fontSize: 'clamp(1rem, 2.5vw, 1.4rem)', fontWeight: 900, letterSpacing: '3px', textTransform: 'uppercase', color: '#e0e0e0', lineHeight: 1.1 }}>
                DISTRACTION REACTION
              </div>
              <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '2px', color: C.muted, textTransform: 'uppercase', marginTop: 6 }}>
                THE NEW ALBUM — OUT 8 MAY
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Ticker strip */}
      <div style={{ position: 'relative', zIndex: 2 }}>
        <Ticker />
      </div>
    </section>
  );
}

Object.assign(window, { Hero });