// BeSuperior.jsx — manifesto section + barcode keyvis
const BeSuperior = () => (
  <section id="sustainability" style={{
    background: '#0A0A0A', color: '#fff',
    padding: 'clamp(96px, 14vw, 192px) clamp(20px, 4vw, 64px)',
    borderTop: '1px solid rgba(255,255,255,0.18)',
  }}>
    <div style={{ maxWidth: 1080, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(48px, 6vw, 96px)', alignItems: 'center' }}>
      <div>
        <h2 style={{
          fontFamily: "'Druk Wide', sans-serif",
          fontSize: 'clamp(56px, 9vw, 128px)',
          lineHeight: 0.95,
          textTransform: 'uppercase',
        }}>
          BE<br/>SUPERIOR
        </h2>
        <p style={{ fontSize: 20, lineHeight: 1.5, color: 'rgba(255,255,255,0.85)', marginTop: 28, maxWidth: 480 }}>
          Choosing higher standards in pursuit of a better tomorrow.
        </p>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.6)', marginTop: 18, maxWidth: 480 }}>
          A higher standard for what we drink. A higher standard for what we leave behind. A higher standard, full stop.
        </p>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 24 }}>
        <img src="assets/barcode.svg" style={{ width: 220, height: 'auto' }} alt="Barcode 8 50086 77912 9"/>
        <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
          <img src="assets/sommelier-seal.svg" style={{ width: 88, filter: 'invert(1)' }} alt="Water Sommelier Union — Certified and Approved"/>
          <img src="assets/microplastic-free.svg" style={{ width: 88, filter: 'invert(1)' }} alt="Microplastic Free"/>
          <img src="assets/us-flag-bw.svg" style={{ width: 80, filter: 'invert(1)' }} alt="USA Sourced"/>
        </div>
      </div>
    </div>
  </section>
);

window.BeSuperior = BeSuperior;