// Pillars.jsx — three-pillar section
const Pillars = () => (
  <section className="section" style={{ background: '#0A0A0A', color: '#fff', padding: '0' }}>
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      borderTop: '1px solid rgba(255,255,255,0.18)',
      borderBottom: '1px solid rgba(255,255,255,0.18)',
    }}>
      <div style={{ padding: '64px 40px', borderRight: '1px solid rgba(255,255,255,0.18)' }}>
        <div style={{
          fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 13,
          letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 24,
        }}>
          SUPERIOR <span style={{ fontWeight: 400, letterSpacing: '0.04em', textTransform: 'lowercase' }}>taste</span>
        </div>
        <div style={{
          fontFamily: "'Helvetica Inserat', Impact, sans-serif", fontSize: 40, lineHeight: 0.95,
          letterSpacing: '-0.01em', textTransform: 'uppercase',
        }}>
          Clean,<br/>pristine,<br/>natural flavor.
        </div>
        <div style={{
          fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,0.7)', marginTop: 24,
        }}>
          Bottled at the source in Marenisco, Michigan. Nothing added, nothing removed. Just pure mineral bliss.
        </div>
      </div>

      <div style={{ padding: '64px 40px', borderRight: '1px solid rgba(255,255,255,0.18)' }}>
        <div style={{
          fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 13,
          letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 24,
        }}>
          SUPERIOR <span style={{ fontWeight: 400, letterSpacing: '0.04em', textTransform: 'lowercase' }}>hydration</span>
        </div>
        <div style={{
          fontFamily: "'Helvetica Inserat', Impact, sans-serif", fontSize: 40, lineHeight: 0.95,
          letterSpacing: '-0.01em', textTransform: 'uppercase',
        }}>
          Faster<br/>absorption.<br/>Period.
        </div>
        <div style={{
          fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,0.7)', marginTop: 24,
        }}>
          Naturally enriched with calcium, potassium, magnesium, and bicarbonates. The minerals your body recognizes.
        </div>
      </div>

      <div style={{ padding: '64px 40px' }}>
        <div style={{
          fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 13,
          letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 24,
        }}>
          SUPERIOR <span style={{ fontWeight: 400, letterSpacing: '0.04em', textTransform: 'lowercase' }}>Sustainability</span>
        </div>
        <div style={{
          fontFamily: "'Helvetica Inserat', Impact, sans-serif", fontSize: 40, lineHeight: 0.95,
          letterSpacing: '-0.01em', textTransform: 'uppercase',
        }}>
          100%<br/>replenishing<br/>aquifer.
        </div>
        <div style={{
          fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,0.7)', marginTop: 24,
        }}>
          Domestically sourced. Minimal footprint. Refilled every year through rain and snowmelt — no impact on the Superior ecosystem.
        </div>
      </div>
    </div>
  </section>
);

window.Pillars = Pillars;