const CALC_SERVICES = [
  { label: 'Construcción / Remodelación', base: 800 },
  { label: 'Mantenimiento Integral', base: 120 },
  { label: 'Alberca', base: 2500 },
  { label: 'Jardinería', base: 80 },
  { label: 'Electricidad', base: 150 },
  { label: 'Plomería', base: 130 },
  { label: 'Limpieza Profesional', base: 60 },
  { label: 'Aire Acondicionado', base: 1800 },
  { label: 'Paneles Solares', base: 12000 },
  { label: 'RFID Hotelero', base: 3500 },
];

const TLCalculator = () => {
  const [svc, setSvc] = React.useState(0);
  const [area, setArea] = React.useState(80);
  const [urgency, setUrgency] = React.useState(1);
  const [freq, setFreq] = React.useState(1);
  const [type, setType] = React.useState(1);

  const urgencyMult = [1, 1.25, 1.6];
  const freqDisc = [1, 0.9, 0.8];
  const typeMult = [1, 1.15, 1.4];

  const base = CALC_SERVICES[svc].base;
  const estimated = Math.round(base * (area / 80) * urgencyMult[urgency] * freqDisc[freq] * typeMult[type]);
  const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); };

  const sliderStyle = { width: '100%', accentColor: '#1D1D1F', cursor: 'pointer' };
  const labelStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#3D3D3F', letterSpacing: 0.3, display: 'block', marginBottom: 10 };

  return (
    <section style={{ background: '#F5F5F7', padding: '100px 40px' }}>
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#1D1D1F', letterSpacing: 3, textTransform: 'uppercase', marginBottom: 16 }}>Herramienta</div>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 44px)', color: '#1D1D1F', letterSpacing: -1.5, margin: '0 0 16px' }}>Calculadora de presupuesto</h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: '#9E9EA3', lineHeight: 1.7 }}>Obtén una estimación inicial orientativa. Para una cotización exacta, agenda tu visita técnica.</p>
        </div>

        <div style={{ background: '#fff', borderRadius: 24, border: '1px solid #E5E5EA', padding: 48, boxShadow: '0 4px 40px rgba(0,0,0,0.04)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {/* Controls */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
              <div>
                <label style={labelStyle}>Tipo de servicio</label>
                <select style={{ width: '100%', fontFamily: 'Inter, sans-serif', fontSize: 14, color: '#1D1D1F', background: '#F5F5F7', border: '1.5px solid #E5E5EA', borderRadius: 10, padding: '12px 14px', outline: 'none', cursor: 'pointer' }} value={svc} onChange={e => setSvc(+e.target.value)}>
                  {CALC_SERVICES.map((s,i) => <option key={s.label} value={i}>{s.label}</option>)}
                </select>
              </div>

              <div>
                <label style={labelStyle}>Área / Tamaño del proyecto: <strong style={{ color: '#1D1D1F' }}>{area} m²</strong></label>
                <input type="range" min={20} max={500} step={10} value={area} onChange={e => setArea(+e.target.value)} style={sliderStyle}/>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'Inter, sans-serif', fontSize: 11, color: '#9E9EA3', marginTop: 4 }}><span>20 m²</span><span>500 m²</span></div>
              </div>

              <div>
                <label style={labelStyle}>Urgencia</label>
                <div style={{ display: 'flex', gap: 8 }}>
                  {['Normal', 'Prioritario', 'Emergencia'].map((u, i) => (
                    <button key={u} onClick={() => setUrgency(i)} style={{
                      flex: 1, background: urgency === i ? '#1D1D1F' : '#F5F5F7',
                      color: urgency === i ? '#fff' : '#9E9EA3',
                      border: `1.5px solid ${urgency === i ? '#1D1D1F' : '#E5E5EA'}`,
                      borderRadius: 10, padding: '10px 0',
                      fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, cursor: 'pointer', transition: 'all 0.2s',
                    }}>{u}</button>
                  ))}
                </div>
              </div>

              <div>
                <label style={labelStyle}>Frecuencia</label>
                <div style={{ display: 'flex', gap: 8 }}>
                  {['Única vez', 'Mensual', 'Anual'].map((f, i) => (
                    <button key={f} onClick={() => setFreq(i)} style={{
                      flex: 1, background: freq === i ? '#1D1D1F' : '#F5F5F7',
                      color: freq === i ? '#fff' : '#9E9EA3',
                      border: `1.5px solid ${freq === i ? '#1D1D1F' : '#E5E5EA'}`,
                      borderRadius: 10, padding: '10px 0',
                      fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, cursor: 'pointer', transition: 'all 0.2s',
                    }}>{f}</button>
                  ))}
                </div>
              </div>

              <div>
                <label style={labelStyle}>Tipo de inmueble</label>
                <div style={{ display: 'flex', gap: 8 }}>
                  {['Residencial', 'Condominio', 'Hotel'].map((t, i) => (
                    <button key={t} onClick={() => setType(i)} style={{
                      flex: 1, background: type === i ? '#1D1D1F' : '#F5F5F7',
                      color: type === i ? '#fff' : '#9E9EA3',
                      border: `1.5px solid ${type === i ? '#1D1D1F' : '#E5E5EA'}`,
                      borderRadius: 10, padding: '10px 0',
                      fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, cursor: 'pointer', transition: 'all 0.2s',
                    }}>{t}</button>
                  ))}
                </div>
              </div>
            </div>

            {/* Result */}
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: '#1D1D1F', borderRadius: 20, padding: 40, textAlign: 'center' }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 12, color: '#6E6E73', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 16 }}>Estimación inicial</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(36px, 4vw, 52px)', color: '#fff', letterSpacing: -2, lineHeight: 1 }}>
                ${estimated.toLocaleString('es-MX')}
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(255,255,255,0.4)', marginTop: 8, marginBottom: 32 }}>MXN · precio referencial</div>

              <div style={{ background: '#F5F5F7', borderRadius: 14, padding: '16px 20px', marginBottom: 32, textAlign: 'left', width: '100%', boxSizing: 'border-box' }}>
                {[
                  ['Servicio', CALC_SERVICES[svc].label],
                  ['Área', `${area} m²`],
                  ['Urgencia', ['Normal','Prioritario','Emergencia'][urgency]],
                  ['Frecuencia', ['Única vez','Mensual','Anual'][freq]],
                  ['Inmueble', ['Residencial','Condominio','Hotel'][type]],
                ].map(([k,v]) => (
                  <div key={k} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                    <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#6E6E73' }}>{k}</span>
                    <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#fff', fontWeight: 600 }}>{v}</span>
                  </div>
                ))}
              </div>

              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#9E9EA3', lineHeight: 1.6, margin: '0 0 24px' }}>
                Estimación inicial orientativa. Para una cotización exacta recomendamos agendar una visita técnica sin costo.
              </p>

              <button onClick={() => scrollTo('cotizar')} style={{
                background: '#fff', color: '#1D1D1F', border: 'none', cursor: 'pointer',
                fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 14,
                padding: '14px 32px', borderRadius: 100, width: '100%',
                transition: 'all 0.2s',
              }}
              onMouseEnter={e => { e.target.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.target.style.transform = 'none'; }}
              >
                Solicitar cotización exacta →
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TLCalculator });