const About = () => (
  <section id="nosotros" style={{ padding: '96px 48px', background: '#F8F7F3' }}>
    <div style={{ maxWidth: 1440, margin: '0 auto', display: 'grid',
      gridTemplateColumns: '5fr 7fr', gap: 64, alignItems: 'center' }}>
      <div>
        <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', height: 460,
          backgroundImage: 'url(/assets/hero-residencial.jpg)', backgroundSize: 'cover',
          backgroundPosition: 'center' }}>
          <div style={{ position: 'absolute', bottom: 20, left: 20, right: 20,
            background: 'rgba(15,53,24,0.85)', backdropFilter: 'blur(12px)',
            padding: '16px 20px', borderRadius: 12,
            border: '1px solid rgba(196,168,79,0.25)' }}>
            <div style={{ fontFamily: 'Inter', color: '#C4A84F', fontSize: 11, fontWeight: 700,
              letterSpacing: '.16em', textTransform: 'uppercase', marginBottom: 4 }}>Sede principal</div>
            <div style={{ color: '#fff', fontSize: 18, fontWeight: 600 }}>Barranquilla, Colombia</div>
          </div>
        </div>
      </div>
      <div>
        <Eyebrow>Sobre nosotros</Eyebrow>
        <h2 style={{ fontFamily: 'Inter', fontSize: 48, fontWeight: 600, color: '#0F3518',
          margin: '16px 0 24px', letterSpacing: '-.01em', lineHeight: 1.2, textWrap: 'balance' }}>
          Un aliado <span style={{ color: '#C4A84F' }}>cercano</span>, experto y comprometido
        </h2>
        <p style={{ fontSize: 17, color: 'rgba(26,26,24,0.72)', margin: '0 0 20px', lineHeight: 1.65 }}>
          Ampera nace con el propósito de acercar la energía solar renovable a las personas. Diseñamos, instalamos y monitoreamos sistemas energéticos inteligentes para hogares, negocios y empresas en todo el Caribe colombiano.
        </p>
        <p style={{ fontSize: 17, color: 'rgba(26,26,24,0.72)', margin: '0 0 32px', lineHeight: 1.65 }}>
          Nuestra identidad refleja <strong style={{ color: '#0F3518', fontWeight: 600 }}>solidez, confianza y futuro</strong>: tecnología que trasciende, energía que dura.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 24,
          paddingTop: 32, borderTop: '1px solid rgba(15,53,24,0.10)' }}>
          {[
            { num: '8', label: 'Ciudades con cobertura' },
            { num: '25 años', label: 'Garantía de generación' },
          ].map(s => (
            <div key={s.label}>
              <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 32, color: '#C4A84F',
                letterSpacing: '-.02em', lineHeight: 1, fontFeatureSettings: '"tnum"' }}>{s.num}</div>
              <div style={{ marginTop: 8, fontSize: 13, color: 'rgba(26,26,24,0.6)', lineHeight: 1.5 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);
window.About = About;