const FinalCTA = () => (
  <section style={{ padding: '120px 48px', background: '#0F3518', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', bottom: -300, left: -200, width: 700, height: 700,
      border: '1px solid rgba(196,168,79,0.10)', borderRadius: '50%', pointerEvents: 'none' }}/>
    <div style={{ position: 'absolute', top: -200, right: -200, width: 540, height: 540,
      border: '1px solid rgba(196,168,79,0.06)', borderRadius: '50%', pointerEvents: 'none' }}/>
    <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
      <div style={{ color: '#C4A84F', fontSize: 12, fontWeight: 700, letterSpacing: '.24em',
        textTransform: 'uppercase', marginBottom: 32 }}>Energía que trasciende</div>
      <h2 style={{ fontFamily: 'Inter', fontSize: 72, fontWeight: 700, color: '#fff',
        lineHeight: 1.05, letterSpacing: '-.02em', margin: '0 0 32px', textWrap: 'balance' }}>
        ¿Listo para tomar el <em style={{ color: '#C4A84F', fontStyle: 'italic', fontFamily: 'Inter', fontWeight: 600 }}>control</em> de tu energía?
      </h2>
      <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.7)', maxWidth: 640,
        margin: '0 auto 48px', lineHeight: 1.65 }}>
        Solicita un diagnóstico energético gratuito. Analizamos tu factura, consumo y ubicación para estimar ahorro, inversión y retorno.
      </p>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 16, marginBottom: 64, flexWrap: 'wrap' }}>
        <Button variant="primary" style={{ padding: '20px 36px', fontSize: 15 }}>
          Solicitar diagnóstico energético
        </Button>
        <Button variant="onDark" style={{
          background: 'transparent', border: '1.5px solid rgba(196,168,79,0.5)',
          color: '#fff', padding: '20px 36px', fontSize: 15, boxShadow: 'none',
        }} icon="chat">WhatsApp directo</Button>
      </div>
      <div style={{ display: 'inline-flex', gap: 32, alignItems: 'center', flexWrap: 'wrap',
        justifyContent: 'center' }}>
        <a href="tel:+573017859742" style={{ display: 'inline-flex', alignItems: 'center', gap: 10,
          color: 'rgba(255,255,255,0.85)', textDecoration: 'none', fontSize: 14 }}>
          <Icon name="call" size={18} color="#C4A84F"/>+57 301 785 9742
        </a>
        <a href="mailto:comercial@amperaenergy.co" style={{ display: 'inline-flex', alignItems: 'center', gap: 10,
          color: 'rgba(255,255,255,0.85)', textDecoration: 'none', fontSize: 14 }}>
          <Icon name="mail" size={18} color="#C4A84F"/>comercial@amperaenergy.co
        </a>
      </div>
    </div>
  </section>
);
window.FinalCTA = FinalCTA;