const Calculator = () => {
  const [factura, setFactura] = React.useState(500000);
  const [segment, setSegment] = React.useState('hogar');
  const [city, setCity] = React.useState('barranquilla');

  const ahorroMensual = Math.round(factura * 0.95);
  const ahorroTotal = ahorroMensual * 12 * 25;
  const inversion = Math.round(factura * 57);
  const sistemaKw = (factura / 76000).toFixed(1);
  const fmt = n => '$' + n.toLocaleString('es-CO');

  const segBtn = (id, label) => (
    <button key={id} onClick={() => setSegment(id)} style={{
      padding: '12px 8px', fontSize: 13, fontWeight: 700, fontFamily: 'Inter',
      border: 'none', borderRadius: 12, cursor: 'pointer',
      background: segment === id ? '#1B5C2C' : 'rgba(255,255,255,0.10)',
      color: '#fff', transition: 'background .2s',
    }}>{label}</button>
  );

  const cityBtn = (id, label) => (
    <button key={id} onClick={() => setCity(id)} style={{
      padding: '12px 8px', fontSize: 12, fontWeight: 700, fontFamily: 'Inter',
      border: 'none', borderRadius: 12, cursor: 'pointer',
      background: city === id ? '#1B5C2C' : 'rgba(255,255,255,0.10)',
      color: '#fff', transition: 'background .2s',
    }}>{label}</button>
  );

  const kpi = (label, value) => (
    <div style={{ border: '1px solid rgba(15,53,24,0.12)', borderRadius: 12, padding: 20 }}>
      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.16em',
        textTransform: 'uppercase', color: '#1B5C2C', marginBottom: 8 }}>{label}</div>
      <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 22, color: '#0F3518',
        letterSpacing: '-.02em', fontFeatureSettings: '"tnum"' }}>{value}</div>
    </div>
  );

  return (
    <section id="calculadora" className="amp-px amp-py" style={{ padding: '96px 48px', background: '#0F3518', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -200, right: -200, width: 540, height: 540,
        border: '1px solid rgba(255,255,255,0.05)', borderRadius: '50%' }}/>
      <div className="amp-g2" style={{ maxWidth: 1440, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '5fr 7fr', gap: 48, position: 'relative' }}>
        <div style={{ color: '#fff' }}>
          <Eyebrow dark>Diagnóstico energético inteligente</Eyebrow>
          <h2 style={{ fontFamily: 'Inter', fontSize: 44, fontWeight: 600, lineHeight: 1.2,
            color: '#fff', margin: '16px 0 24px', letterSpacing: '-.01em', textWrap: 'balance' }}>
            Evalúa el potencial <span style={{ color: '#C4A84F' }}>energético</span> de tu hogar o negocio
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.7)', margin: '0 0 32px', fontSize: 16, lineHeight: 1.65 }}>
            Ingresa datos básicos de consumo, ciudad y cubierta para una estimación inicial de ahorro, inversión y tamaño del sistema.
          </p>
          <div style={{ background: 'rgba(255,255,255,0.06)', backdropFilter: 'blur(20px)',
            borderRadius: 24, padding: 28, border: '1px solid rgba(255,255,255,0.10)',
            display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.16em',
                textTransform: 'uppercase', color: '#fff', marginBottom: 12 }}>Tipo de proyecto</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
                {segBtn('hogar', 'Hogar')}
                {segBtn('negocio', 'Negocio')}
                {segBtn('empresa', 'Empresa')}
              </div>
            </div>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
                <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.16em',
                  textTransform: 'uppercase', color: '#fff' }}>Factura mensual (COP)</span>
                <span style={{ color: '#C4A84F', fontWeight: 700, fontFeatureSettings: '"tnum"' }}>{fmt(factura)}</span>
              </div>
              <input type="range" min="100000" max="5000000" step="50000"
                value={factura} onChange={e => setFactura(+e.target.value)}
                style={{ width: '100%', accentColor: '#C4A84F' }}/>
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.16em',
                textTransform: 'uppercase', color: '#fff', marginBottom: 12 }}>Ciudad</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 8 }}>
                {cityBtn('barranquilla', 'Barranquilla')}
                {cityBtn('puerto-colombia', 'Puerto Colombia')}
                {cityBtn('santa-marta', 'Santa Marta')}
                {cityBtn('cartagena', 'Cartagena')}
              </div>
            </div>
          </div>
        </div>

        <div>
          <div style={{ background: '#fff', borderRadius: 24, padding: 40 }}>
            <Eyebrow>Resultado preliminar</Eyebrow>
            <h3 style={{ fontFamily: 'Inter', fontSize: 36, fontWeight: 600, color: '#0F3518',
              margin: '12px 0 32px', letterSpacing: '-.01em', lineHeight: 1.15, textWrap: 'balance' }}>
              Tu diagnóstico energético inicial
            </h3>
            <div style={{ background: 'linear-gradient(135deg, #0F3518, #1B5C2C)', color: '#fff',
              padding: 32, borderRadius: 16, marginBottom: 24 }}>
              <Eyebrow dark>Ahorro total proyectado</Eyebrow>
              <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 56, letterSpacing: '-.02em',
                lineHeight: 1, marginTop: 12, fontFeatureSettings: '"tnum"' }}>{fmt(ahorroTotal)}</div>
              <p style={{ margin: '12px 0 0', fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
                Basado en 25 años de operación del sistema
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 24 }}>
              {kpi('Ahorro mensual', fmt(ahorroMensual))}
              {kpi('Inversión estimada', fmt(inversion))}
              {kpi('Retorno', '5,0 años')}
              {kpi('Sistema sugerido', sistemaKw + ' kWp')}
            </div>
            <Button variant="primary" icon="arrow_forward" style={{ width: '100%', justifyContent: 'center', padding: '18px 24px' }}>
              Solicitar diagnóstico personalizado
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Calculator = Calculator;