// WhatsInside.jsx — typical analysis / mineral spec
const WhatsInside = () => (
  <section id="source" style={{
    background: '#0A0A0A', color: '#fff',
    padding: 'clamp(96px, 12vw, 160px) clamp(20px, 4vw, 64px)',
  }}>
    <div style={{ maxWidth: 1080, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px, 6vw, 96px)', alignItems: 'center' }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
        <div className="eyebrow" style={{ marginBottom: 28 }}>Typical Analysis · Marenisco, MI</div>
        <h2 style={{
          fontFamily: "'Druk Wide', sans-serif",
          fontSize: 'clamp(36px, 5vw, 64px)',
          lineHeight: 1, textTransform: 'uppercase',
        }}>
          What's <span className="ins-box on-dark"><span>INSIDE</span></span><br/>matters.
        </h2>
        <div style={{ width: 56, height: 3, background: '#fff', marginTop: 24 }}/>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.75)', marginTop: 28, maxWidth: 420 }}>
          Independently tested. Zero detectable microplastics. Naturally rich in the minerals that matter — at levels nature, not a lab, decided.
        </p>
      </div>

      <div style={{ borderTop: '1px solid rgba(255,255,255,0.18)', borderBottom: '1px solid rgba(255,255,255,0.18)' }}>
        {[
          ['pH', '7.9'],
          ['Total Dissolved Solids', '730 mg/L'],
          ['Bicarbonates', '180 mg/L'],
          ['Calcium', '84 mg/L'],
          ['Magnesium', '17 mg/L'],
          ['Sodium', '50 mg/L'],
          ['Potassium', '2 mg/L'],
          ['Chloride', '154 mg/L'],
        ].map(([k, v]) => (
          <div key={k} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            padding: '18px 4px',
            borderTop: '1px solid rgba(255,255,255,0.08)',
            fontFamily: 'Inter, sans-serif',
          }}>
            <span style={{ fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>{k}</span>
            <span style={{ fontFamily: "'Helvetica Inserat', Impact, sans-serif", fontSize: 28, letterSpacing: '-0.01em' }}>{v}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.WhatsInside = WhatsInside;