/* RENOVAM — Nosotros */
function App() {
  window.useReveal();

  React.useEffect(() => {
    const row = document.querySelector('.stats-row');
    if (!row) return;
    let dragEl = null;
    const cards = () => [...row.querySelectorAll('.stat-card')];
    const onStart = (e) => {
      dragEl = e.target.closest('.stat-card');
      if (!dragEl) return;
      dragEl.classList.add('dragging');
      e.dataTransfer.effectAllowed = 'move';
    };
    const onEnd = () => {
      if (dragEl) dragEl.classList.remove('dragging');
      cards().forEach((c) => c.classList.remove('drag-over'));
      dragEl = null;
    };
    const onOver = (e) => {
      e.preventDefault();
      const target = e.target.closest('.stat-card');
      cards().forEach((c) => c.classList.remove('drag-over'));
      if (target && target !== dragEl) target.classList.add('drag-over');
    };
    const onDrop = (e) => {
      e.preventDefault();
      const target = e.target.closest('.stat-card');
      if (!target || !dragEl || target === dragEl) return;
      const list = cards();
      const from = list.indexOf(dragEl);
      const to = list.indexOf(target);
      if (from < to) target.after(dragEl);else
      target.before(dragEl);
      cards().forEach((c) => c.classList.remove('drag-over'));
    };
    row.addEventListener('dragstart', onStart);
    row.addEventListener('dragend', onEnd);
    row.addEventListener('dragover', onOver);
    row.addEventListener('drop', onDrop);
    return () => {
      row.removeEventListener('dragstart', onStart);
      row.removeEventListener('dragend', onEnd);
      row.removeEventListener('dragover', onOver);
      row.removeEventListener('drop', onDrop);
    };
  }, []);

  return (
    <>
      <window.SiteNav />
      <window.Crumb items={[{ label: 'Inicio', href: 'index.html' }, { label: 'Nosotros' }]} />
      <section className="page-hero page-hero-image" style={{ backgroundImage: "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.7) 100%), url('assets/hero-team.png')" }}>
        <div className="container page-hero-content" style={{ position: 'relative', zIndex: 2 }}>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.85)', opacity: 0, animation: 'fadeUp .8s .1s ease forwards' }}>Quiénes somos</div>
          <h1 style={{ fontSize: 'clamp(40px, 7vw, 96px)', marginTop: 24, color: '#fff', textShadow: '0 2px 30px rgba(0,0,0,0.4)', opacity: 0, animation: 'fadeUp .8s .2s ease forwards' }}>
            4 años <em style={{ fontStyle: 'italic', fontFamily: 'Syne, serif', color: 'rgba(255,255,255,0.7)', fontWeight: 300 }}>llenos de energía.</em>
          </h1>
          <p style={{ maxWidth: 640, color: 'rgba(255,255,255,0.88)', fontSize: 'clamp(15px, 1.3vw, 18px)', marginTop: 24, lineHeight: 1.6, textShadow: '0 1px 20px rgba(0,0,0,0.4)', opacity: 0, animation: 'fadeUp .8s .3s ease forwards' }}>RENOVAM es una empresa mexicana fundada por Cristóbal Valdos y Oscar Zagal. Comenzamos en 2022, cuando los paneles solares eran el boom. Muchas personas se animaron a tener paneles solares porque se dieron cuenta que no eran tan caros como antes, y que era una de las mejores inversiones en su hogar, negocio o industria. Hoy somos referencia técnica en CDMX, Estado de México y Morelos.

          </p>
        </div>
      </section>

      <section className="section-pad about-merged" style={{ background: '#0a1428', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="about-top reveal">
            <div className="about-copy">
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)' }}>Nuestra filosofía</div>
              <p className="about-lead">
                Creemos que la energía propia es libertad. Que un techo mexicano puede ser una planta de generación. Y que la transición energética no se hace con discursos: se hace con ingeniería seria, fierros bien apretados y permisos firmados a tiempo.
              </p>
              <p className="about-body">
                Empezamos con la convicción de que México podía ser pionero solar. Hoy operamos en CDMX, Estado de México y Morelos, con una red de instaladores certificados, gestión integral con CFE y un equipo técnico que ha visto de todo: techos imposibles, sombreados extremos, casas históricas, ranchos sin red.
              </p>
              <p className="about-body" style={{ color: '#F5C842' }}>
                No vendemos paneles. Diseñamos sistemas. Y respondemos por ellos durante toda su vida útil.
              </p>
            </div>
            <div className="about-photos">
              <div className="about-photo about-photo-a" style={{ backgroundImage: "url('assets/nosotros-2.jpg')", backgroundSize: "cover" }}></div>
              <div className="about-photo about-photo-b" style={{ backgroundImage: "url('assets/nosotros-1.jpg')" }}></div>
            </div>
          </div>

          <div className="stats-row">
            <div className="stat-card" draggable="true">
              <div className="stat-ic">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6" stroke="#F5C842" strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round" /></svg>
              </div>
              <div className="stat-num" style={{ fontSize: "37px" }}>400<span style={{ fontSize: "37px" }}>+</span></div>
              <div className="stat-label">Instalaciones residenciales y comerciales</div>
            </div>
            <div className="stat-card" draggable="true">
              <div className="stat-ic">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z" stroke="#F5C842" strokeWidth="1.8" strokeLinejoin="round" /><circle cx="12" cy="10" r="2.5" stroke="#F5C842" strokeWidth="1.8" /></svg>
              </div>
              <div className="stat-num" style={{ fontSize: "37px" }}>10<span style={{ fontSize: "37px" }}>Estados</span></div>
              <div className="stat-label">Tenemos instalaciones en CDMX, Morelos, Edomex, Puebla, Querétaro, Hidalgo, Guerrero, Oaxaca, Veracruz y Tlaxcala</div>
            </div>
            <div className="stat-card" draggable="true">
              <div className="stat-ic">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#F5C842" strokeWidth="1.8" /><path d="M12 7v5l3 3" stroke="#F5C842" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
              <div className="stat-num" style={{ fontSize: "37px" }}>4<span style={{ fontSize: "37px" }}>años</span></div>
              <div className="stat-label">Diseñando sistemas solares</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-pad">
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow">CERTIFICACIONES</div>
              <h2 style={{ marginTop: 18 }}>Certificaciones que <em>respaldan</em> cada instalación.</h2>
            </div>
            <p>Hacemos cada instalación como si fuese para nosotros. Es lo que nos distingue.</p>
          </div>
          <div className="feature-grid reveal-stagger">
            {[
            ['UVIE siempre acreditada', 'Cada que una instalación rebasa los 10kW de potencia se requiere una Unidad de Verificación de Instalaciones Eléctricas. Esto valida la seguridad de la instalación y la seguridad de las personas.'],
            ['Certificación EC0586', 'Es un estándar de competencia con el cuál avalan a las personas competentes para instalar un sistema fotovoltaico a nivel residencial, comercial e industrial.'],
            ['Certificación EC1181', 'Es un estándar de competencia con el cuál avalan a las personas competentes para supervisar la instalación de sistemas fotovoltaicos, apegados siempre a la normativa oficial mexicana en residencias, comercios e industrias.'],
            ['Ingeniería en Energías Renovables', 'Los encargados de cada instalación son en su mayoría Ingenieros en Energías Renovables egresados de la UNAM.'],
            ['Certificaciones en cada equipo', 'Todos los equipos que utilizamos cuentan con certificaciones UL a nivel nacional e internacional, ya que nos preocupamos por la respuesta a garantías que ofrecen los fabricantes, tanto de rendimiento como de duración.'],
            ['+400 referencias', 'Clientes activos en diferentes puntos de la República Mexicana. Visitas a instalaciones siempre disponibles.']].
            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="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z" stroke="white" strokeWidth="2" strokeLinejoin="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)' }}>Hablemos</div>
              <h2 style={{ marginTop: 18 }}>¿Quieres conocer una instalación nuestra antes de decidir?</h2>
            </div>
            <div className="cta-actions">
              <a href="agenda.html" className="btn btn-primary">Agenda visita →</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 />);