/* RENOVAM — Off-grid */
function App() {
  window.useReveal();
  return (
    <>
      <window.SiteNav />
      <window.Crumb items={[{label:'Inicio', href:'index.html'}, {label:'Productos'}, {label:'Off-grid'}]} />
      <window.PageHero
        eyebrow="03 — Energía donde no hay red"
        title={<>Sistemas <em style={{fontStyle:'italic', fontFamily:'Syne, serif', color:'var(--ink-dim)', fontWeight:300}}>off-grid.</em></>}
        sub="Para ranchos, obras, telecomunicaciones, casas remotas y proyectos de seguridad. Generación, almacenamiento y control 100% independiente de CFE."
      />

      <section className="section-pad">
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow">Aplicaciones</div>
              <h2 style={{marginTop:18}}>Donde la red <em>no llega</em>, RENOVAM sí.</h2>
            </div>
            <p>Cada proyecto off-grid se diseña con redundancia: generación + almacenamiento + control. Nunca dependes de un solo punto de falla.</p>
          </div>
          <div className="feature-grid reveal-stagger">
            {[
              ['Ranchos y casas remotas','Hogares en zonas rurales sin acceso a CFE. Sistema completo con respaldo de generador opcional.'],
              ['Obras y construcción','Energía móvil para obras en proceso. Reemplaza diésel, reduce ruido y emisiones.'],
              ['Telecomunicaciones','Repetidoras, antenas y sistemas críticos en zonas montañosas. SLA 99.9%.'],
              ['Seguridad y vigilancia','Cámaras, alarmas e iluminación perimetral con autonomía total.'],
              ['Bombeo de agua','Pozos profundos, riego agrícola, abastecimiento de cisternas con energía limpia.'],
              ['Estaciones científicas','Investigación, estaciones meteorológicas, refugios de montaña.'],
            ].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"><circle cx="12" cy="12" r="4" stroke="white" strokeWidth="2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2" stroke="white" strokeWidth="2" strokeLinecap="round"/></svg>
                </div>
                <h4>{t}</h4>
                <p>{d}</p>
              </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">Arquitectura típica</div>
              <h2 style={{marginTop:18}}>Tres capas. <em>Cero</em> dependencia.</h2>
            </div>
            <p>Generación solar como fuente primaria, baterías LiFePO4 para autonomía y un generador de respaldo opcional para días largos sin sol.</p>
          </div>
        </div>
        <div className="steps reveal-stagger">
          {[
            ['Capa 1','Generación','Paneles fotovoltaicos sobredimensionados 30% para días nublados consecutivos.'],
            ['Capa 2','Almacenamiento','Banco de baterías LiFePO4 con autonomía de 2 a 5 días según uso.'],
            ['Capa 3','Control','Inversor-cargador con MPPT integrado y conmutación automática a generador.'],
            ['Capa 4','Respaldo','Generador diésel/gas opcional. Arranca solo si el banco baja del 20%.'],
          ].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)'}}>Proyectos a medida</div>
              <h2 style={{marginTop:18}}>Cuéntanos del sitio. Te diseñamos el sistema.</h2>
            </div>
            <div className="cta-actions">
              <a href="agenda.html" className="btn btn-primary">Solicitar diseño →</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 />);