/* RENOVAM — EV y complementarios */
function App() {
  window.useReveal();
  return (
    <>
      <window.SiteNav />
      <window.Crumb items={[{label:'Inicio', href:'index.html'}, {label:'Productos'}, {label:'EV & complementarios'}]} />
      <window.PageHero
        eyebrow="05 — Electrifica tu vida"
        title={<>EV, wallbox <em style={{fontStyle:'italic', fontFamily:'Syne, serif', color:'var(--ink-dim)', fontWeight:300}}>y eficiencia.</em></>}
        sub="La capa de eficiencia que multiplica tu sistema solar: cargadores residenciales, AC inverter, bombas de calor y monitoreo inteligente."
      />

      <section className="section-pad">
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow">Productos</div>
              <h2 style={{marginTop:18}}>Cada watt que ahorras es un panel <em>menos</em> que instalas.</h2>
            </div>
            <p>Antes de sobre-dimensionar tu sistema, eficienta tus consumos. Estos productos pagan su instalación en menos de 24 meses.</p>
          </div>
          <div className="feature-grid reveal-stagger">
            {[
              ['Wallbox EV residencial','Cargadores de 7.4 a 22 kW. Compatible Tesla, Audi, BMW, BYD, MG y todos los SAE J1772 / Type 2.'],
              ['Wallbox solar inteligente','Carga tu auto solo con el excedente solar. Tarifa $0 cuando hay sol.'],
              ['Bomba de calor','Reemplaza tu boiler de gas. 3× más eficiente. Calefacción y agua caliente.'],
              ['AC inverter','Aire acondicionado de bajo consumo. Reducción 60% vs equipos convencionales.'],
              ['Iluminación LED','Auditoría + reemplazo masivo. ROI típico 8–14 meses.'],
              ['Monitoreo inteligente','Smart meters por circuito. Identifica consumos ocultos y desperdicios.'],
            ].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)'}}>Combina con solar</div>
              <h2 style={{marginTop:18}}>Tu próximo auto puede cargar gratis con el sol de tu techo.</h2>
            </div>
            <div className="cta-actions">
              <a href="agenda.html" className="btn btn-primary">Agenda asesoría →</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 />);