// Hero.jsx
const Hero = () => (
  <section style={{
    position: 'relative',
    minHeight: '100vh',
    background: '#0A0A0A',
    color: '#fff',
    overflow: 'hidden',
    display: 'grid',
    gridTemplateColumns: '60px 1fr 1fr 60px',
    gridTemplateRows: '1fr',
  }}>
    {/* Left rotated wordmark column */}
    <div style={{
      borderRight: '1px solid rgba(255,255,255,0.18)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <WordmarkRotated size={72} />
    </div>

    {/* Content column */}
    <div style={{
      padding: 'clamp(120px, 14vh, 180px) clamp(24px, 4vw, 64px) 64px',
      display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 28,
    }}>
      <div className="eyebrow">Natural Mineral Water · Est. Marenisco, MI</div>
      <h1 style={{
        fontFamily: "'Helvetica Inserat', Impact, sans-serif",
        fontSize: 'clamp(64px, 10vw, 168px)',
        lineHeight: 0.85,
        letterSpacing: '-0.02em',
        textTransform: 'uppercase',
        fontWeight: 400,
      }}>
        WHAT'S<br/>
        <span className="ins-box on-dark"><span>INSIDE</span></span><br/>
        MATTERS.
      </h1>
      <p style={{
        fontSize: 18, lineHeight: 1.5, color: 'rgba(255,255,255,0.85)', maxWidth: 460, marginTop: 12,
      }}>
        Drawn directly from a centuries-old aquifer beneath Michigan's Upper Peninsula. Untouched, unaltered, and authentically Superior.
      </p>
      <div style={{ display: 'flex', gap: 14, marginTop: 12 }}>
        <a href="#notify" className="btn btn-primary-dark">Get Notified</a>
        <a href="#story" className="btn">Read the Story</a>
      </div>
    </div>

    {/* Bottle photo column — full bleed */}
    <div style={{
      position: 'relative',
      backgroundImage: "url('assets/photos/bottle-front-dark.jpeg')",
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      filter: 'saturate(0.85) contrast(1.05)',
    }}>
      {/* dim overlay to anchor the lower content */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,0.4) 100%)',
      }}/>
    </div>

    {/* Right strip column */}
    <div style={{
      borderLeft: '1px solid rgba(255,255,255,0.18)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '40px 0',
    }}>
      <OriginStrip vertical />
    </div>
  </section>
);

window.Hero = Hero;