/* RENOVAM — Hogar Inteligente */
function App() {
  window.useReveal();
  return (
    <>
      <window.SiteNav />
      <window.Crumb items={[{label:'Inicio', href:'index.html'}, {label:'Productos'}, {label:'Hogar Inteligente'}]} />
      <window.PageHero
        eyebrow="06 — Climatización y automatización"
        title={<>Hogar <em style={{fontStyle:'italic', fontFamily:'Syne, serif', color:'var(--ink-dim)', fontWeight:300}}>Inteligente.</em></>}
        sub="Climatización inverter, iluminación inteligente y automatización integral. La capa que multiplica el ahorro de tu sistema solar y eleva el confort de tu casa."
      />

      <section className="section-pad">
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow">Productos</div>
              <h2 style={{marginTop:18}}>Tu casa, controlada desde <em>tu celular.</em></h2>
            </div>
            <p>Cada producto se integra a un mismo panel de control. Activación por voz (Alexa, Google, Apple HomeKit) y rutinas automáticas que ahorran energía sin que tengas que pensarlo.</p>
          </div>
          <div className="feature-grid reveal-stagger">
            {[
              ['Bombas de calor inverter WiFi','Calefacción y agua caliente con eficiencia 4× superior al boiler de gas. Control remoto vía app y programación por horarios solares.'],
              ['AC WiFi inverter','Aires acondicionados de bajo consumo con conectividad nativa. Reducción 60% vs equipos convencionales y programación inteligente.'],
              ['Hogar inteligente','Hub central compatible con Alexa, Google Home y Apple HomeKit. Integra clima, luces, cerraduras, cámaras y sensores en una sola app.'],
              ['Iluminación inteligente','Focos y luminarias LED con temperatura ajustable, escenas predefinidas y sensores de movimiento. Control por voz y app.'],
              ['Automatizaciones del hogar','Persianas automáticas, cerraduras inteligentes, riego automatizado, detectores de fugas y rutinas personalizadas.'],
              ['Monitoreo energético','Smart meters por circuito que identifican consumos ocultos. Cruza datos con tu producción solar en tiempo real.'],
            ].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="M3 12L12 4l9 8M5 10v10h14V10" stroke="white" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/></svg>
                </div>
                <h4>{t}</h4>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-pad" style={{background:'var(--bg-soft)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow">Por qué combinarlo con solar</div>
              <h2 style={{marginTop:18}}>Eficiencia × generación = <em>casa autosuficiente.</em></h2>
            </div>
            <p>Combinar un sistema solar con climatización inverter y automatización reduce el consumo eléctrico de tu hogar hasta 70%. Es la fórmula más rápida para llegar a recibos CFE en cero.</p>
          </div>
        </div>
        <div className="steps reveal-stagger">
          {[
            ['01','Auditoría energética','Identificamos consumos ocultos por circuito con smart meters durante 1–2 semanas.'],
            ['02','Reemplazo eficiente','Cambiamos equipos antiguos por inverter WiFi. ROI típico 14–24 meses por equipo.'],
            ['03','Automatización','Instalamos hub central y rutinas que apagan equipos cuando no se usan.'],
            ['04','Integración solar','Las rutinas priorizan el consumo durante el día, cuando hay generación solar.'],
          ].map(([n, t, d], i) => (
            <div className="step" key={i}>
              <div className="step-num">{n}</div>
              <h4>{t}</h4>
              <p>{d}</p>
            </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)'}}>Empieza por la auditoría</div>
              <h2 style={{marginTop:18}}>Antes de instalar más paneles, eficiencia tus equipos.</h2>
            </div>
            <div className="cta-actions">
              <a href="agenda.html" className="btn btn-primary">Agenda auditorí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 />);