/* RENOVAM — Servicios */
function App() {
  window.useReveal();
  return (
    <>
      <window.SiteNav />
      <window.Crumb items={[{label:'Inicio', href:'index.html'}, {label:'Servicios'}]} />
      <window.PageHero
        eyebrow="Servicios técnicos"
        title={<>Servicio <em style={{fontStyle:'italic', fontFamily:'Syne, serif', color:'var(--ink-dim)', fontWeight:300}}>integral.</em></>}
        sub="No solo instalamos: diseñamos, gestionamos, mantenemos y reparamos. Sistemas de cualquier marca o instalador previo."
      />

      <section className="section-pad">
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow">Qué hacemos</div>
              <h2 style={{marginTop:18}}>Soporte técnico de <em>verdad.</em></h2>
            </div>
            <p>Si tu instalador desapareció o tu sistema dejó de producir, podemos diagnosticar y reparar. También damos mantenimiento preventivo.</p>
          </div>
          <div className="feature-grid reveal-stagger">
            {[
              ['Diseño y proyecto','Memoria de cálculo, plano CAD, BOM y lista de protecciones. Para tu propio instalador o el nuestro.'],
              ['Instalación llave en mano','Cuadrilla certificada UVIE. 1 a 5 días según tamaño. Garantía de instalación 2 años.'],
              ['Gestión CFE','Solicitud de interconexión, contrato bidireccional, cambio de medidor.'],
              ['Mantenimiento preventivo','Limpieza de paneles, revisión de conexiones, análisis termográfico anual.'],
              ['Diagnóstico y reparación','Sistemas de cualquier marca. Análisis de producción y reparación de fallas.'],
              ['Verificación UVIE','Como unidad acreditada, certificamos instalaciones de terceros ante CFE.'],
              ['Repotenciación','Aumenta capacidad de tu sistema existente. Agregar paneles, baterías o monitoreo.'],
              ['Auditoría energética','Análisis de consumos por circuito. Identifica desperdicios antes de instalar solar.'],
              ['Capacitación','Cursos para instaladores, ingenieros y empresas que quieren entender el sistema.'],
            ].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="M14 7l-1.5-1.5a2 2 0 00-3 0L4 11l4 4 5.5-5.5a2 2 0 000-3L14 7z M14 7l3 3M9 16l3 3-7 3 4-6z" 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)'}}>Soporte</div>
              <h2 style={{marginTop:18}}>¿Tu sistema dejó de producir? Diagnosticamos en 48 horas.</h2>
            </div>
            <div className="cta-actions">
              <a href="agenda.html" className="btn btn-primary">Solicitar diagnóstico →</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 />);