/* RENOVAM — Componentes */
function App() {
  window.useReveal();
  return (
    <>
      <window.SiteNav />
      <window.Crumb items={[{label:'Inicio', href:'index.html'}, {label:'Productos'}, {label:'Componentes'}]} />
      <window.PageHero
        eyebrow="04 — Tecnología y accesorios"
        title={<>Componentes <em style={{fontStyle:'italic', fontFamily:'Syne, serif', color:'var(--ink-dim)', fontWeight:300}}>técnicos.</em></>}
        sub="Para instaladores, ingenieros y clientes técnicos. Stock en CDMX de paneles, inversores, cable PV, conectores MC4 y estructuras certificadas."
      />

      <section className="section-pad">
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow">Catálogo</div>
              <h2 style={{marginTop:18}}>Componentes <em>tier-1</em> con factura y garantía.</h2>
            </div>
            <p>Todo lo que vendemos lo instalamos en proyectos propios. No es revendedor de paso: es el mismo material que va a las casas que firmamos.</p>
          </div>
          <div className="feature-grid reveal-stagger">
            {[
              ['Paneles fotovoltaicos','JinkoSolar · Trina · LONGi · Canadian Solar. 540 a 600W mono PERC y bifaciales.'],
              ['Inversores string','Sungrow · Growatt · Solis · Fronius. De 3 a 50 kW. Mono y trifásicos.'],
              ['Inversores híbridos','Deye · Sungrow · Growatt. Listos para batería con conmutación a respaldo.'],
              ['Microinversores','Enphase IQ8. Para techos con sombra parcial o paneles independientes.'],
              ['Baterías LiFePO4','Pylontech · Dyness · BYD. De 5 a 50 kWh modulares.'],
              ['Estructuras','Aluminio anodizado y galvanizado. Para teja, lámina, losa y suelo.'],
              ['Cable PV','4 mm² y 6 mm² doble aislamiento UV. Por metro o rollo.'],
              ['Conectores MC4','Originales Stäubli y compatibles certificados TÜV.'],
              ['Protecciones DC/AC','Fusibles, breakers, supresores de pico, tableros completos.'],
            ].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"><rect x="3" y="3" width="18" height="18" rx="2" stroke="white" strokeWidth="2"/><path d="M9 3v18M15 3v18M3 9h18M3 15h18" stroke="white" strokeWidth="1.5"/></svg>
                </div>
                <h4>{t}</h4>
                <p>{d}</p>
              </div>
            ))}
          </div>
          <div style={{marginTop:60, textAlign:'center'}} className="reveal">
            <a href="https://wa.me/527778297622" target="_blank" rel="noopener" className="btn btn-primary">Solicitar lista de precios →</a>
          </div>
        </div>
      </section>

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