function Hero({ navigate }) {
  return (
    <section style={{ background: 'var(--wht)', position: 'relative' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1.1fr 1fr', minHeight: 580,
        borderBottom: '1px solid var(--blk)',
      }}>
        {/* Left: wordmark + copy */}
        <div style={{ padding: '72px 48px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--fg-2)',
          }}>FALL ’26 · CHAPTER 04</div>

          <div>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 800, textTransform: 'uppercase',
              fontSize: 116, lineHeight: 0.95, letterSpacing: '-0.01em',
              margin: 0, color: 'var(--blk)',
            }}>BLK<br />SQRL<sup style={{ fontFamily: 'var(--font-body)', fontSize: 28, verticalAlign: 'super' }}>®</sup></h1>
            <p style={{ marginTop: 20, fontSize: 17, lineHeight: 1.5, maxWidth: 440, color: 'var(--fg-2)' }}>
              DC's other native species. Heavyweight cotton, screen-printed in the DMV,
              and one stupidly good red tee per drop. Wears in, doesn't wear out.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
              <button onClick={() => navigate('shop')} style={{
                background: 'var(--blk)', color: 'var(--wht)', border: '1.5px solid var(--blk)',
                padding: '14px 24px', fontFamily: 'var(--font-body)', fontWeight: 700,
                fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase',
                cursor: 'pointer', borderRadius: 4,
              }}>Shop the drop</button>
              <button onClick={() => navigate('about')} style={{
                background: 'var(--wht)', color: 'var(--blk)', border: '2px solid var(--blk)',
                padding: '14px 24px', fontFamily: 'var(--font-body)', fontWeight: 700,
                fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase',
                cursor: 'pointer', borderRadius: 4,
              }}>Our story</button>
            </div>
          </div>

          <div style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            Pictured · Classic Tee in Red · 6oz cotton · $32
          </div>
        </div>

        {/* Right: brand panel on cream (red is not a brand color) */}
        <div style={{
          background: 'var(--cream)', position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden',
          borderLeft: '1px solid var(--blk)',
        }}>
          <img src="../../assets/logo.png" alt="" style={{ width: '64%' }} />
          {/* Real sticker artifact in the corner */}
          <div style={{
            position: 'absolute', bottom: 32, right: 32,
            transform: 'rotate(-6deg)', filter: 'drop-shadow(0 6px 14px rgba(0,0,0,0.18))',
          }}>
            <img src="../../assets/logo-sticker.png" alt="" style={{ width: 92, display: 'block' }} />
          </div>
        </div>
      </div>

      {/* Marquee */}
      <div style={{
        background: 'var(--blk)', color: 'var(--wht)',
        padding: '14px 0', overflow: 'hidden', whiteSpace: 'nowrap',
        fontFamily: 'var(--font-display)', fontWeight: 800, textTransform: 'uppercase',
        fontSize: 22, letterSpacing: '-0.005em',
        display: 'flex', gap: 32,
      }}>
        {Array.from({ length: 8 }).map((_, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 32 }}>
            MADE IN DC <span style={{ opacity: 0.5 }}>★</span> SHIPS WEEKLY <span style={{ opacity: 0.5 }}>★</span>
          </span>
        ))}
      </div>
    </section>
  );
}

window.Hero = Hero;