// Footer.jsx
const Footer = () => (
  <footer id="contact" style={{
    background: '#0A0A0A', color: '#fff',
    padding: '64px clamp(20px, 4vw, 64px) 32px',
    borderTop: '1px solid rgba(255,255,255,0.18)',
  }}>
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48,
        paddingBottom: 48,
        borderBottom: '1px solid rgba(255,255,255,0.18)',
      }}>
        <div>
          <div style={{ fontFamily: "'Helvetica Inserat', Impact, sans-serif", fontSize: 56, lineHeight: 0.9, letterSpacing: '-0.01em', textTransform: 'uppercase' }}>SUPERIOR</div>
          <div style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginTop: 12 }}>Natural Mineral Water · Marenisco, MI</div>
          <p style={{ fontSize: 13, lineHeight: 1.6, color: 'rgba(255,255,255,0.6)', marginTop: 18, maxWidth: 380 }}>
            Bottled at the source by Superior Waters in Michigan's Upper Peninsula. An Icenta Water brand.
          </p>
        </div>

        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Product</div>
          <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
            <li><a href="#story" style={{ textDecoration: 'none', color: 'rgba(255,255,255,0.85)' }}>The Story</a></li>
            <li><a href="#source" style={{ textDecoration: 'none', color: 'rgba(255,255,255,0.85)' }}>The Source</a></li>
            <li><a href="#sustainability" style={{ textDecoration: 'none', color: 'rgba(255,255,255,0.85)' }}>Sustainability</a></li>
          </ul>
        </div>

        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Contact</div>
          <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
            <li><a href="mailto:hello@icentawater.com" style={{ textDecoration: 'none', color: 'rgba(255,255,255,0.85)' }}>hello@icentawater.com</a></li>
            <li><a href="tel:9067872007" style={{ textDecoration: 'none', color: 'rgba(255,255,255,0.85)' }}>(906) 787-2007</a></li>
            <li style={{ color: 'rgba(255,255,255,0.55)', fontSize: 13 }}>Marenisco, MI USA</li>
          </ul>
        </div>

        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Certifications</div>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <img src="assets/sommelier-seal.svg" style={{ width: 56, filter: 'invert(1)' }} alt=""/>
            <img src="assets/microplastic-free.svg" style={{ width: 56, filter: 'invert(1)' }} alt=""/>
          </div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', marginTop: 12, lineHeight: 1.5 }}>
            FDA-certified bottling. Independently tested.
          </div>
        </div>
      </div>

      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingTop: 28, fontSize: 11, color: 'rgba(255,255,255,0.5)',
      }}>
        <OriginStrip />
        <div style={{ letterSpacing: '0.18em', textTransform: 'uppercase' }}>© 2026 Icenta Water</div>
      </div>
    </div>
  </footer>
);

window.Footer = Footer;