/* RENOVAM — Sistemas con baterías */
function App() {
  window.useReveal();
  return (
    <>
      <window.SiteNav />
      <window.Crumb items={[{ label: 'Inicio', href: 'index.html' }, { label: 'Productos' }, { label: 'Sistemas con baterías' }]} />
      <section className="video-hero">
        <video className="video-hero-bg" autoPlay muted loop playsInline preload="auto">
          <source src="assets/baterias-hero.mp4" type="video/mp4" />
        </video>
        <div className="video-hero-overlay video-hero-overlay-dark"></div>
        <div className="container video-hero-content">
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.8)', opacity: 0, animation: 'fadeUp .8s .1s ease forwards' }}>02 — Nunca te quedes sin luz</div>
          <h1 style={{ fontSize: 'clamp(40px, 7vw, 92px)', marginTop: 24, color: '#fff', textShadow: '0 2px 30px rgba(0,0,0,0.5)', opacity: 0, animation: 'fadeUp .8s .2s ease forwards' }}>
            Sistemas anti apagones <em style={{ fontStyle: 'italic', fontFamily: 'Syne, serif', color: 'rgba(255,255,255,0.78)', fontWeight: 300 }}>con baterías.</em>
          </h1>
          <p style={{ maxWidth: 640, color: 'rgba(255,255,255,0.9)', fontSize: 'clamp(15px, 1.3vw, 18px)', marginTop: 24, lineHeight: 1.6, textShadow: '0 1px 20px rgba(0,0,0,0.5)', opacity: 0, animation: 'fadeUp .8s .3s ease forwards' }}>Estos equipos se adhieren a tu instalación eléctrica, analizándola en tiempo real, en el momento que detectan una variación de voltaje o el corte total de electricidad, entra a suministrar energía a toda la casa o parte de ella.  Tiempo de respuesta 0.3 milisegundos 

          </p>
        </div>
      </section>

      <section className="section-pad">
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow">Configuraciones</div>
              <h2 style={{ marginTop: 18 }}>De respaldo selectivo a <em>independencia</em> total.</h2>
            </div>
            <p>Las baterías se dimensionan según los circuitos críticos que quieras mantener encendidos durante un apagón.</p>
          </div>
          <div className="plans reveal-stagger">
            <div className="plan">
              <span className="plan-tag">Esencial</span>
              <h3>Backup 5 kWh</h3>
              <div className="plan-price">5 kWh <small>· desde $74,000 MXN</small></div>
              <p className="plan-sub">Respaldo de circuitos críticos por 4–6 hrs</p>
              <ul>
                <li>Batería LiFePO4 5.12 kWh</li>
                <li>Inversor híbrido 5 kW</li>
                <li>Tablero de respaldo</li>
                <li>Refrigerador, internet, iluminación</li>
                <li>Garantía 10 años / 6,000 ciclos</li>
              </ul>
              <a href="agenda.html" className="btn btn-ghost plan-cta">Cotizar →</a>
            </div>
            <div className="plan featured">
              <span className="plan-tag">Más popular</span>
              <h3>Híbrido 10 kWh</h3>
              <div className="plan-price">10 kWh <small>· desde $148,000 MXN</small></div>
              <p className="plan-sub">Respaldo de toda la casa por 8–12 hrs</p>
              <ul>
                <li>2× Batería LiFePO4 5.12 kWh</li>
                <li>Inversor híbrido 8 kW trifásico</li>
                <li>Conmutación automática &lt;20 ms</li>
                <li>App de monitoreo en tiempo real</li>
                <li>Time-of-use programable</li>
                <li>Garantía 10 años / 6,000 ciclos</li>
              </ul>
              <a href="agenda.html" className="btn btn-primary plan-cta">Agendar →</a>
            </div>
            <div className="plan">
              <span className="plan-tag">Off-grid ready</span>
              <h3>Total 20 kWh</h3>
              <div className="plan-price">20+ kWh <small>· desde $268,000 MXN</small></div>
              <p className="plan-sub">Independencia ≥24 hrs · expandible</p>
              <ul>
                <li>4× Batería LiFePO4 5.12 kWh</li>
                <li>Inversor híbrido 12 kW</li>
                <li>Soporta carga de EV en respaldo</li>
                <li>Generador de respaldo opcional</li>
                <li>Modo isla automático</li>
                <li>Garantía 12 años / 8,000 ciclos</li>
              </ul>
              <a href="agenda.html" className="btn btn-ghost plan-cta">Cotizar →</a>
            </div>
          </div>
        </div>
      </section>

      <section className="section-pad" style={{ background: '#0a1428', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow">Por qué LiFePO4</div>
              <h2 style={{ marginTop: 18 }}>La química <em>más segura</em> del mercado.</h2>
            </div>
            <p>No es litio-ion común. La química LiFePO4 (litio-fierro-fosfato) tolera mejor el calor, no se incendia y dura el doble de ciclos.</p>
          </div>
          <div className="feature-grid reveal-stagger">
            {[
            ['6,000+ ciclos', 'El doble de vida útil que litio-ion convencional. ~16 años de uso diario.'],
            ['Térmicamente estable', 'No entra en fuga térmica. Tolera temperaturas de hasta 60°C sin riesgo.'],
            ['Sin metales pesados', 'Sin cobalto, sin níquel. Más amigable con el planeta y reciclable.'],
            ['DoD 95%', 'Aprovechas casi toda la capacidad nominal sin afectar la vida útil.'],
            ['Conmutación 20ms', 'No notas el apagón. Equipos sensibles (CPAP, servidores, refrigeración).'],
            ['Monitoreo nube', 'Ve estado de carga, ciclos y producción desde tu celular.']].
            map(([t, d], i) =>
            <div className="feature" key={i}>
                <div className="feature-icon">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" stroke="white" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" /></svg>
                </div>
                <h4>{t}</h4>
                <p>{d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="cta-strip section-pad">
        <div className="container">
          <div className="cta-inner reveal">
            <div>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.85)' }}>Listo para empezar</div>
              <h2 style={{ marginTop: 18 }}>El próximo apagón en tu colonia, tu casa estará encendida.</h2>
            </div>
            <div className="cta-actions">
              <a href="agenda.html" className="btn btn-primary">Agenda visita técnica →</a>
              <a href="https://wa.me/527778297622" target="_blank" rel="noopener" className="btn btn-ghost">WhatsApp directo</a>
            </div>
          </div>
        </div>
      </section>

      <window.SiteFooter />
      <window.WaFab />
    </>);

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