// Story.jsx — long-form brand story
const Story = () => (
  <section id="story" style={{
    background: '#F4F4F2',
    color: '#0A0A0A',
    padding: 'clamp(96px, 12vw, 192px) clamp(20px, 4vw, 64px)',
  }}>
    <div style={{
      maxWidth: 1080, margin: '0 auto',
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 'clamp(40px, 6vw, 96px)',
      alignItems: 'start',
    }}>
      <div>
        <div className="eyebrow on-light" style={{ marginBottom: 28 }}>The Source</div>
        <h2 style={{
          fontFamily: "'Helvetica Inserat', Impact, sans-serif",
          fontSize: 'clamp(40px, 6vw, 96px)',
          lineHeight: 0.9,
          letterSpacing: '-0.01em',
          textTransform: 'uppercase',
          fontWeight: 400,
        }}>
          Centuries<br/>of stone.<br/>Just water.
        </h2>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 22, fontSize: 17, lineHeight: 1.65, paddingTop: 12 }}>
        <p>
          From the pristine Lake Superior aquifer our water is naturally enriched with calcium, potassium, magnesium, and bicarbonates as it filters through mineral-rich stone. Protected for centuries, it emerges pure, balanced, and authentically Superior.
        </p>
        <p>
          Drawn directly from a protected, centuries-old aquifer deep beneath a protected forest and bottled at an FDA-certified facility in Michigan's Upper Peninsula, it remains untouched and unaltered until it gets to you — meaning nothing is added, and nothing is removed.
        </p>
        <p style={{ fontFamily: "'Druk Wide', sans-serif", fontSize: 22, lineHeight: 1.2, marginTop: 8, textTransform: 'uppercase' }}>
          Just pure mineral bliss.
        </p>
      </div>
    </div>
  </section>
);

window.Story = Story;