// KSANET — Calculadoras (hub con 5 herramientas)

const { useState, useMemo } = React;

const fmtEur = (n) => new Intl.NumberFormat('es-ES', { maximumFractionDigits: 0 }).format(Math.round(n)) + ' €';
const fmtEurDec = (n) => new Intl.NumberFormat('es-ES', { maximumFractionDigits: 2 }).format(n) + ' €';

function calcCuota(capital, tae, plazo) {
  const i = (tae / 100) / 12;
  const n = plazo * 12;
  if (i === 0) return capital / n;
  return capital * (i * Math.pow(1 + i, n)) / (Math.pow(1 + i, n) - 1);
}

const TABS = [
  { k: 'hipoteca', n: '01', t: 'Cuota e hipoteca', d: 'Estima tu cuota mensual y el ahorro frente a un promotor.' },
  { k: 'escrituracion', n: '02', t: 'Costes de escrituración', d: 'Notario, registro, gestoría y AJD al recibir tu vivienda.' },
  { k: 'alquilarvscomprar', n: '03', t: 'Comprar vs alquilar', d: 'Compara cuánto te cuesta alquilar y cuánto comprar a 10 años.' },
  { k: 'energia', n: '04', t: 'Ahorro energético', d: 'Cuánto ahorras al año con una vivienda de eficiencia A.' },
  { k: 'capacidad', n: '05', t: 'Capacidad de compra', d: '¿Qué precio de vivienda puedes asumir con tu sueldo?' },
];

/* ---------- 01 · HIPOTECA ---------- */
function CalcHipoteca() {
  const [precio, setPrecio] = useState(312000);
  const [entrada, setEntrada] = useState(20);
  const [plazo, setPlazo] = useState(30);
  const [tae, setTae] = useState(3.2);

  const r = useMemo(() => {
    const capital = precio * (1 - entrada / 100);
    const cuota = calcCuota(capital, tae, plazo);
    const totalPagado = cuota * plazo * 12;
    const totalIntereses = totalPagado - capital;
    const aportar = precio * (entrada / 100);
    const precioPromotor = precio * 1.18;
    const ahorro = precioPromotor - precio;
    return { capital, cuota, totalPagado, totalIntereses, aportar, ahorro, precioPromotor };
  }, [precio, entrada, plazo, tae]);

  return (
    <div className="calc-grid">
      <div className="calc-controls">
        <CalcSlider label="Precio de la vivienda" val={fmtEur(precio)} min={180000} max={700000} step={2000} value={precio} onChange={setPrecio} minL="180.000 €" maxL="700.000 €"/>
        <CalcSlider label="Entrada (% del precio)" val={entrada + ' %'} min={10} max={50} step={1} value={entrada} onChange={setEntrada} minL="10 %" maxL="50 %"/>
        <CalcSlider label="Plazo de hipoteca" val={plazo + ' años'} min={10} max={40} step={1} value={plazo} onChange={setPlazo} minL="10 años" maxL="40 años"/>
        <CalcSlider label="TAE estimada" val={tae.toFixed(1) + ' %'} min={1.5} max={6} step={0.1} value={tae} onChange={setTae} minL="1,5 %" maxL="6,0 %"/>
        <div className="calc-disclaim">
          Cálculo orientativo. La cuota real depende de la oferta del banco y el perfil del solicitante. KSANET negocia financiación promotora colectiva con condiciones preferentes para socios.
        </div>
      </div>
      <div className="calc-results">
        <div className="calc-hero">
          <span className="calc-hero-lbl">Tu cuota mensual estimada</span>
          <div className="calc-hero-num">{fmtEur(r.cuota)}<span>/mes</span></div>
          <div className="calc-hero-sub">+ cuota gestora KSANET · 9 € / mes durante la cooperativa</div>
        </div>
        <div className="calc-rows">
          <CalcRow lbl="Aportación inicial" val={fmtEur(r.aportar)}/>
          <CalcRow lbl="Capital hipotecado" val={fmtEur(r.capital)}/>
          <CalcRow lbl="Intereses totales" val={fmtEur(r.totalIntereses)}/>
          <CalcRow lbl="Total a pagar" val={fmtEur(r.totalPagado + r.aportar)} accent/>
        </div>
        <div className="calc-saving">
          <div className="calc-saving-h">
            <span className="eyebrow"><span className="dot"></span>Ahorro vs. promotor privado</span>
          </div>
          <div className="calc-saving-grid">
            <div>
              <span className="lbl">Misma vivienda · promotor</span>
              <span className="val" style={{ textDecoration: 'line-through', color: 'var(--muted)' }}>{fmtEur(r.precioPromotor)}</span>
            </div>
            <div>
              <span className="lbl">Cooperativa KSANET</span>
              <span className="val">{fmtEur(precio)}</span>
            </div>
          </div>
          <div className="calc-saving-num">
            <span className="lbl">Te ahorras</span>
            <span className="val">{fmtEur(r.ahorro)}</span>
          </div>
        </div>
        <a href="contacto.html" className="btn btn-primary" style={{ width: '100%', justifyContent: 'space-between' }}>
          Hablar con un asesor <span className="btn-arrow">→</span>
        </a>
      </div>
    </div>
  );
}

/* ---------- 02 · ESCRITURACIÓN ---------- */
function CalcEscrituracion() {
  const [precio, setPrecio] = useState(280000);
  const [hipoteca, setHipoteca] = useState(180000);
  const [extras, setExtras] = useState(800);

  const r = useMemo(() => {
    // Notario: aranceles aprox 0.2% sobre escritura adjudicación (mín 600€, máx 2400€)
    const notarioAdj = Math.min(2400, Math.max(600, precio * 0.0018));
    // Notario hipoteca: pagado por el banco (Ley 5/2019), no se carga al socio
    // Registro de la propiedad: 0.15% sobre valor (mín 250€, máx 1500€)
    const registro = Math.min(1500, Math.max(250, precio * 0.0014));
    // AJD Madrid 0.75% sobre escritura adjudicación obra nueva cooperativa
    const ajd = precio * 0.0075;
    // Gestoría: tarifa media
    const gestoria = 450;
    // Otros: copias, certificados, tasaciones complementarias
    const otros = extras;
    const total = notarioAdj + registro + ajd + gestoria + otros;
    const pctSobrePrecio = (total / precio) * 100;
    return { notarioAdj, registro, ajd, gestoria, otros, total, pctSobrePrecio };
  }, [precio, hipoteca, extras]);

  return (
    <div className="calc-grid">
      <div className="calc-controls">
        <CalcSlider label="Valor de adjudicación" val={fmtEur(precio)} min={120000} max={600000} step={2000} value={precio} onChange={setPrecio} minL="120.000 €" maxL="600.000 €"/>
        <CalcSlider label="Capital a hipotecar" val={fmtEur(hipoteca)} min={0} max={precio} step={2000} value={Math.min(hipoteca, precio)} onChange={setHipoteca} minL="0 €" maxL={fmtEur(precio)}/>
        <CalcSlider label="Otros gastos previstos" val={fmtEur(extras)} min={0} max={3000} step={50} value={extras} onChange={setExtras} minL="0 €" maxL="3.000 €"/>
        <div className="calc-disclaim">
          <strong style={{ color: 'var(--ink)' }}>Comunidad de Madrid · 2026.</strong> AJD al 0,75 %. Notario y registro siguen el arancel oficial vigente. Desde la Ley 5/2019, los gastos de la escritura de hipoteca los paga el banco. Cifras orientativas: solicita siempre presupuesto detallado a la notaría y la gestoría asignadas a tu promoción.
        </div>
      </div>
      <div className="calc-results">
        <div className="calc-hero">
          <span className="calc-hero-lbl">Coste total de escrituración</span>
          <div className="calc-hero-num">{fmtEur(r.total)}<span>aprox.</span></div>
          <div className="calc-hero-sub">{r.pctSobrePrecio.toFixed(2)} % sobre el valor de adjudicación · pago único en notaría</div>
        </div>
        <div className="calc-rows">
          <CalcRow lbl="Actos Jurídicos Documentados (AJD · 0,75 %)" val={fmtEur(r.ajd)} accent/>
          <CalcRow lbl="Notario · escritura de adjudicación" val={fmtEur(r.notarioAdj)}/>
          <CalcRow lbl="Registro de la Propiedad" val={fmtEur(r.registro)}/>
          <CalcRow lbl="Gestoría" val={fmtEur(r.gestoria)}/>
          <CalcRow lbl="Otros gastos (copias, certificados...)" val={fmtEur(r.otros)}/>
        </div>
        <div className="calc-info-block">
          <span className="eyebrow"><span className="dot"></span>Importante</span>
          <p style={{ margin: '12px 0 0', fontSize: 14, lineHeight: 1.6, color: 'var(--ink-2)' }}>
            En el régimen de cooperativa <strong style={{ color: 'var(--ink)' }}>no hay ITP ni IVA</strong> al recibir la vivienda: tributa solo por AJD. Es una de las grandes ventajas fiscales del modelo cooperativo frente a la compraventa al promotor.
          </p>
        </div>
        <a href="contacto.html" className="btn btn-primary" style={{ width: '100%', justifyContent: 'space-between' }}>
          Pedir presupuesto detallado <span className="btn-arrow">→</span>
        </a>
      </div>
    </div>
  );
}

/* ---------- 03 · COMPRAR VS ALQUILAR ---------- */
function CalcAlquilar() {
  const [precio, setPrecio] = useState(280000);
  const [alquiler, setAlquiler] = useState(1200);
  const [anios, setAnios] = useState(15);
  const [revAlq, setRevAlq] = useState(2.5);

  const r = useMemo(() => {
    // Alquiler total con revalorización anual
    let totAlq = 0;
    let mensualAct = alquiler;
    for (let y = 0; y < anios; y++) {
      totAlq += mensualAct * 12;
      mensualAct *= 1 + revAlq / 100;
    }
    // Compra: 20% entrada + cuota hipoteca a 30 años + gastos escrituración
    const entrada = precio * 0.20;
    const capital = precio * 0.80;
    const cuota = calcCuota(capital, 3.2, 30);
    const escrituracion = precio * 0.012; // ~1.2% global aprox
    const pagadoCompra = entrada + escrituracion + cuota * 12 * anios;
    // Patrimonio acumulado: amortización + revalorización vivienda
    const tasaRev = 0.025;
    const valorViviendaFut = precio * Math.pow(1 + tasaRev, anios);
    // Capital amortizado (aproximación)
    const i = 0.032 / 12;
    const n = 360;
    const k = anios * 12;
    const saldoPendiente = capital * (Math.pow(1 + i, n) - Math.pow(1 + i, k)) / (Math.pow(1 + i, n) - 1);
    const patrimonio = valorViviendaFut - saldoPendiente;
    const balanceCompra = pagadoCompra - patrimonio;
    return { totAlq, pagadoCompra, patrimonio, balanceCompra, cuota, mensualAct, entrada, valorViviendaFut, saldoPendiente };
  }, [precio, alquiler, anios, revAlq]);

  const compraGana = r.balanceCompra < r.totAlq;
  const diferencia = Math.abs(r.totAlq - r.balanceCompra);

  return (
    <div className="calc-grid">
      <div className="calc-controls">
        <CalcSlider label="Precio de la vivienda" val={fmtEur(precio)} min={150000} max={600000} step={2000} value={precio} onChange={setPrecio} minL="150.000 €" maxL="600.000 €"/>
        <CalcSlider label="Alquiler mensual equivalente" val={fmtEur(alquiler) + '/mes'} min={500} max={3000} step={25} value={alquiler} onChange={setAlquiler} minL="500 €" maxL="3.000 €"/>
        <CalcSlider label="Horizonte de comparación" val={anios + ' años'} min={5} max={30} step={1} value={anios} onChange={setAnios} minL="5 años" maxL="30 años"/>
        <CalcSlider label="Subida anual del alquiler" val={revAlq.toFixed(1) + ' %'} min={0} max={6} step={0.1} value={revAlq} onChange={setRevAlq} minL="0 %" maxL="6 %"/>
        <div className="calc-disclaim">
          Modelo simplificado: hipoteca a 30 años al 3,2 %, escrituración estimada ~1,2 % del precio, revalorización vivienda 2,5 %/año. La compra incluye el patrimonio acumulado al final del período.
        </div>
      </div>
      <div className="calc-results">
        <div className="calc-hero" style={{ textAlign: 'center' }}>
          <span className="calc-hero-lbl">A {anios} años, {compraGana ? 'comprar' : 'alquilar'} es mejor por</span>
          <div className="calc-hero-num" style={{ color: compraGana ? 'var(--brand)' : 'var(--ink)' }}>{fmtEur(diferencia)}</div>
          <div className="calc-hero-sub">{compraGana ? 'Diferencia favorable a la compra en cooperativa' : 'El alquiler resulta menos costoso en este escenario'}</div>
        </div>
        <div className="versus">
          <div className="versus-col">
            <div className="versus-h">Alquilar</div>
            <div className="versus-num">{fmtEur(r.totAlq)}</div>
            <div className="versus-d">Total pagado en {anios} años · {fmtEur(r.mensualAct)}/mes al final</div>
            <div className="versus-extra">Patrimonio al final: <strong>0 €</strong></div>
          </div>
          <div className="versus-vs">VS</div>
          <div className={'versus-col ' + (compraGana ? 'win' : '')}>
            <div className="versus-h">Comprar (cooperativa)</div>
            <div className="versus-num">{fmtEur(r.pagadoCompra)}</div>
            <div className="versus-d">Pagos totales · entrada + cuotas + escrituración</div>
            <div className="versus-extra">Patrimonio: <strong>{fmtEur(r.patrimonio)}</strong></div>
          </div>
        </div>
        <div className="calc-rows">
          <CalcRow lbl="Cuota hipoteca mensual" val={fmtEur(r.cuota)}/>
          <CalcRow lbl="Entrada inicial (20 %)" val={fmtEur(r.entrada)}/>
          <CalcRow lbl={'Valor de la vivienda en ' + anios + ' años'} val={fmtEur(r.valorViviendaFut)}/>
          <CalcRow lbl="Saldo pendiente hipoteca" val={fmtEur(r.saldoPendiente)}/>
        </div>
      </div>
    </div>
  );
}

/* ---------- 04 · AHORRO ENERGÉTICO ---------- */
function CalcEnergia() {
  const [m2, setM2] = useState(85);
  const [tipo, setTipo] = useState('antigua'); // antigua / media / actual
  const [tarifa, setTarifa] = useState(0.16); // €/kWh

  const r = useMemo(() => {
    // Consumo estimado kWh/m²/año por tipo
    const consMap = { antigua: 195, media: 110, actual: 38 };
    const consActual = consMap[tipo];
    const consNueva = 38; // KSANET certificación A
    const kwhAhorro = (consActual - consNueva) * m2;
    const eurAhorroAnual = kwhAhorro * tarifa;
    const eurAhorro20 = eurAhorroAnual * 20;
    const co2 = kwhAhorro * 0.31; // kg CO2 por kWh red española
    return { consActual, consNueva, kwhAhorro, eurAhorroAnual, eurAhorro20, co2 };
  }, [m2, tipo, tarifa]);

  return (
    <div className="calc-grid">
      <div className="calc-controls">
        <CalcSlider label="Superficie útil" val={m2 + ' m²'} min={40} max={200} step={1} value={m2} onChange={setM2} minL="40 m²" maxL="200 m²"/>
        <div className="calc-field">
          <div className="calc-field-h">
            <label>Tu vivienda actual</label>
          </div>
          <div className="calc-segments">
            {[
              { k: 'antigua', t: 'Anterior 1980', s: 'Letra E–G' },
              { k: 'media', t: 'Años 90–10', s: 'Letra C–D' },
              { k: 'actual', t: 'Después 2013', s: 'Letra B' },
            ].map(o => (
              <button key={o.k} className={'calc-seg ' + (tipo === o.k ? 'active' : '')} onClick={() => setTipo(o.k)}>
                <span>{o.t}</span><span className="calc-seg-s">{o.s}</span>
              </button>
            ))}
          </div>
        </div>
        <CalcSlider label="Tarifa eléctrica media" val={tarifa.toFixed(2) + ' €/kWh'} min={0.08} max={0.30} step={0.01} value={tarifa} onChange={setTarifa} minL="0,08 €" maxL="0,30 €"/>
        <div className="calc-disclaim">
          Estimación basada en consumos medios reales. Las viviendas de KSANET se entregan con <strong style={{ color: 'var(--ink)' }}>certificación energética A</strong> (~38 kWh/m²/año), aerotermia, ventilación con recuperación de calor y carpinterías de altas prestaciones.
        </div>
      </div>
      <div className="calc-results">
        <div className="calc-hero">
          <span className="calc-hero-lbl">Ahorro estimado al año</span>
          <div className="calc-hero-num">{fmtEur(r.eurAhorroAnual)}<span>/año</span></div>
          <div className="calc-hero-sub">{Math.round(r.kwhAhorro)} kWh/año · {Math.round(r.co2)} kg CO₂ evitados</div>
        </div>
        <div className="calc-rows">
          <CalcRow lbl="Consumo vivienda actual" val={Math.round(r.consActual * m2) + ' kWh/año'}/>
          <CalcRow lbl="Consumo vivienda KSANET (A)" val={Math.round(r.consNueva * m2) + ' kWh/año'}/>
          <CalcRow lbl="Ahorro anual en kWh" val={Math.round(r.kwhAhorro) + ' kWh'}/>
          <CalcRow lbl="Ahorro acumulado a 20 años" val={fmtEur(r.eurAhorro20)} accent/>
        </div>
        <div className="energy-bars">
          <div className="energy-bar">
            <div className="energy-bar-h"><span>Vivienda actual</span><span>{r.consActual} kWh/m²</span></div>
            <div className="energy-bar-track"><div className="energy-bar-fill bad" style={{ width: Math.min(100, (r.consActual/220)*100) + '%' }}></div></div>
          </div>
          <div className="energy-bar">
            <div className="energy-bar-h"><span>Vivienda KSANET A</span><span>{r.consNueva} kWh/m²</span></div>
            <div className="energy-bar-track"><div className="energy-bar-fill good" style={{ width: Math.min(100, (r.consNueva/220)*100) + '%' }}></div></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- 05 · CAPACIDAD DE COMPRA ---------- */
function CalcCapacidad() {
  const [ingresos, setIngresos] = useState(2400); // netos mensuales del hogar
  const [ahorro, setAhorro] = useState(50000);
  const [otrasDeudas, setOtrasDeudas] = useState(0);
  const [plazo, setPlazo] = useState(30);
  const [tae, setTae] = useState(3.2);

  const r = useMemo(() => {
    // Banco: cuota máxima = 35% ingresos netos - otras deudas
    const cuotaMax = (ingresos * 0.35) - otrasDeudas;
    // Capital máximo a partir de cuota
    const i = (tae / 100) / 12;
    const n = plazo * 12;
    const capitalMax = i === 0 ? cuotaMax * n : cuotaMax * (Math.pow(1 + i, n) - 1) / (i * Math.pow(1 + i, n));
    // Gastos compra ~10% sobre precio (en cooperativa baja a ~3-4%)
    // Asumimos cooperativa: 4% gastos
    const factor = 1.04;
    // ahorro disponible para entrada + gastos
    // ahorro = entrada + gastos = (precio - capitalMax) + (precio*0.04)
    // ahorro = precio*1.04 - capitalMax  →  precio = (ahorro + capitalMax) / 1.04
    const precioMaxCoop = (ahorro + capitalMax) / factor;
    const factorPromotor = 1.12; // 10% gastos + IVA dif
    const precioMaxPromotor = (ahorro + capitalMax) / factorPromotor;
    const entrada = precioMaxCoop - capitalMax;
    const pctEntrada = (entrada / precioMaxCoop) * 100;
    return { cuotaMax, capitalMax, precioMaxCoop, precioMaxPromotor, entrada, pctEntrada };
  }, [ingresos, ahorro, otrasDeudas, plazo, tae]);

  return (
    <div className="calc-grid">
      <div className="calc-controls">
        <CalcSlider label="Ingresos netos del hogar" val={fmtEur(ingresos) + '/mes'} min={1000} max={8000} step={50} value={ingresos} onChange={setIngresos} minL="1.000 €" maxL="8.000 €"/>
        <CalcSlider label="Ahorro disponible" val={fmtEur(ahorro)} min={0} max={250000} step={1000} value={ahorro} onChange={setAhorro} minL="0 €" maxL="250.000 €"/>
        <CalcSlider label="Otras deudas mensuales" val={fmtEur(otrasDeudas)} min={0} max={1500} step={25} value={otrasDeudas} onChange={setOtrasDeudas} minL="0 €" maxL="1.500 €"/>
        <CalcSlider label="Plazo de hipoteca" val={plazo + ' años'} min={15} max={40} step={1} value={plazo} onChange={setPlazo} minL="15 años" maxL="40 años"/>
        <CalcSlider label="TAE estimada" val={tae.toFixed(1) + ' %'} min={1.5} max={6} step={0.1} value={tae} onChange={setTae} minL="1,5 %" maxL="6,0 %"/>
        <div className="calc-disclaim">
          Regla bancaria estándar: la cuota mensual no debe superar el <strong style={{ color: 'var(--ink)' }}>35 %</strong> de los ingresos netos del hogar. La cooperativa requiere menos gastos asociados que la compra al promotor (≈4 % vs ≈12 %), por lo que tu ahorro estira más.
        </div>
      </div>
      <div className="calc-results">
        <div className="calc-hero">
          <span className="calc-hero-lbl">Precio máximo asumible · cooperativa</span>
          <div className="calc-hero-num">{fmtEur(r.precioMaxCoop)}</div>
          <div className="calc-hero-sub">Cuota máxima recomendada: {fmtEur(r.cuotaMax)} / mes</div>
        </div>
        <div className="calc-rows">
          <CalcRow lbl="Capital máximo financiable" val={fmtEur(r.capitalMax)}/>
          <CalcRow lbl="Entrada disponible" val={fmtEur(Math.max(0, r.entrada)) + ' (' + r.pctEntrada.toFixed(0) + '%)'}/>
          <CalcRow lbl="Cuota máxima (35 % ingresos)" val={fmtEur(r.cuotaMax) + '/mes'} accent/>
        </div>
        <div className="calc-saving">
          <div className="calc-saving-h">
            <span className="eyebrow"><span className="dot"></span>Cooperativa vs promotor</span>
          </div>
          <div className="calc-saving-grid">
            <div>
              <span className="lbl">Promotor privado</span>
              <span className="val">{fmtEur(r.precioMaxPromotor)}</span>
            </div>
            <div>
              <span className="lbl">Cooperativa KSANET</span>
              <span className="val" style={{ color: 'var(--brand)' }}>{fmtEur(r.precioMaxCoop)}</span>
            </div>
          </div>
          <div className="calc-saving-num">
            <span className="lbl">Diferencia de capacidad</span>
            <span className="val">+{fmtEur(r.precioMaxCoop - r.precioMaxPromotor)}</span>
          </div>
        </div>
        <a href="contacto.html" className="btn btn-primary" style={{ width: '100%', justifyContent: 'space-between' }}>
          Buscar promociones a mi alcance <span className="btn-arrow">→</span>
        </a>
      </div>
    </div>
  );
}

/* ---------- HELPERS ---------- */
function CalcSlider({ label, val, min, max, step, value, onChange, minL, maxL }) {
  return (
    <div className="calc-field">
      <div className="calc-field-h">
        <label>{label}</label>
        <span className="calc-val">{val}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={(e) => onChange(+e.target.value)}/>
      <div className="calc-range-meta"><span>{minL}</span><span>{maxL}</span></div>
    </div>
  );
}

function CalcRow({ lbl, val, accent }) {
  return (
    <div className="calc-row">
      <span className="lbl">{lbl}</span>
      <span className="val" style={accent ? { color: 'var(--brand)', fontWeight: 500 } : null}>{val}</span>
    </div>
  );
}

const RENDERS = {
  hipoteca: { c: CalcHipoteca, h: '¿Cuánto te <em>costaría?</em>', s: 'Estima tu cuota mensual y el ahorro frente a un promotor privado.' },
  escrituracion: { c: CalcEscrituracion, h: 'Costes de <em>escrituración</em>', s: 'Notario, registro, AJD y gestoría al recibir tu vivienda.' },
  alquilarvscomprar: { c: CalcAlquilar, h: 'Comprar o <em>alquilar</em>', s: '¿Qué te conviene más en tu horizonte temporal?' },
  energia: { c: CalcEnergia, h: 'Ahorro <em>energético</em>', s: 'Cuánto bajará tu factura con una vivienda de eficiencia A.' },
  capacidad: { c: CalcCapacidad, h: 'Tu capacidad <em>de compra</em>', s: 'Qué precio de vivienda puedes asumir con tu sueldo y ahorro.' },
};

function CalcPage() {
  useReveal();
  const [tab, setTab] = useState(() => {
    const h = (window.location.hash || '').slice(1);
    return TABS.some(t => t.k === h) ? h : 'hipoteca';
  });
  const handleTab = (k) => {
    setTab(k);
    history.replaceState(null, '', '#' + k);
  };
  const cur = RENDERS[tab];
  const Cmp = cur.c;

  return (
    <>
      <Header active="calculadora"/>

      <section className="page-head">
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>Calculadoras · 5 herramientas para socios</span>
          <h1 className="h-display calc-h1" dangerouslySetInnerHTML={{ __html: cur.h }}/>
          <p className="lede" style={{ marginTop: 24 }}>{cur.s}</p>
        </div>
      </section>

      <section className="calc-tabs-section">
        <div className="container">
          <div className="calc-tabs">
            {TABS.map(t => (
              <button key={t.k} className={'calc-tab ' + (tab === t.k ? 'active' : '')} onClick={() => handleTab(t.k)}>
                <span className="calc-tab-n">{t.n}</span>
                <span className="calc-tab-t">{t.t}</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="section paper" style={{ paddingTop: 48 }}>
        <div className="container" data-screen-label={'Calc ' + tab}>
          <Cmp/>
        </div>
      </section>

      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<CalcPage/>);