/* RENOVAM — Kits residenciales */
const { useEffect } = React;

function App() {
  window.useReveal();

  return (
    <>
      <window.SiteNav />
      <window.Crumb items={[{ label: 'Inicio', href: 'index.html' }, { label: 'Productos', href: '#' }, { label: 'Paneles Solares' }]} />
      <section className="video-hero">
        <video id="kitsHeroVideo" className="video-hero-bg" autoPlay muted loop playsInline preload="auto">
          <source src="assets/kits-hero.mp4" type="video/mp4" />
        </video>
        <div className="video-hero-overlay"></div>
        <div className="container video-hero-content">
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.8)', opacity: 0, animation: 'fadeUp .8s .1s ease forwards' }}>01 — Ahorra en tu recibo</div>
          <h1 style={{ fontSize: 'clamp(40px, 7vw, 92px)', marginTop: 24, color: '#fff', textShadow: '0 2px 30px rgba(0,0,0,0.45)', opacity: 0, animation: 'fadeUp .8s .2s ease forwards' }}>
            Paneles Solares <em style={{ fontStyle: 'italic', fontFamily: 'Syne, serif', color: 'rgba(255,255,255,0.78)', fontWeight: 300 }}>fotovoltaicos.</em>
          </h1>
          <p style={{ maxWidth: 640, color: 'rgba(255,255,255,0.9)', fontSize: 'clamp(15px, 1.3vw, 18px)', marginTop: 24, lineHeight: 1.6, textShadow: '0 1px 20px rgba(0,0,0,0.45)', opacity: 0, animation: 'fadeUp .8s .3s ease forwards' }}>
            Sistemas interconectados a CFE de 2 a 10 kW. Ingeniería, instalación, gestión de permisos y monitoreo. Tres niveles para hogares mexicanos.
          </p>
        </div>
      </section>

      {/* PLANS */}
      <section className="section-pad plans-bg" style={{ backgroundImage: "linear-gradient(rgba(5,11,26,0.72), rgba(5,11,26,0.8)), url('assets/kits-plans-bg.jpg')" }}>
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>Tres niveles</div>
              <h2 style={{ marginTop: 18, color: '#fff' }}>Diseñado para tu <em style={{ color: 'rgba(255,255,255,0.65)' }}>recibo</em>, no para tu vecino.</h2>
            </div>
            <p style={{ color: 'rgba(255,255,255,0.82)' }}>El nivel adecuado depende de tu consumo bimestral, espacio en techo y expectativas de ahorro. Un ingeniero RENOVAM te asesora sin costo y te guía de la mano para que elijas el kit que más te conviene.</p>
          </div>
          <div className="plans reveal-stagger">
            <div className="plan">
              <span className="plan-tag">Básico</span>
              <h3>Inicio Solar</h3>
              <div className="plan-price">2–3 kW <small>· desde $41,,999 MXN</small></div>
              <p className="plan-sub">Recibo CFE bimestral $1,500 – $3,000</p>
              <ul>
                <li>4–6 paneles tier-1, 640W</li>
                <li>Vida Útil de +30 años</li>
                <li>Estructura aluminio anodizado para losa o para estructura PTR</li>
                <li>Gestión CFE incluida</li>
                <li>Monitoreo Wifi</li>
                <li>Garantía 12 años Microinversor</li>
              </ul>
              <a href="agenda.html" className="btn btn-ghost plan-cta">Solicitar cotización →</a>
            </div>
            <div className="plan featured">
              <span className="plan-tag">Más popular</span>
              <h3>Hogar Pro</h3>
              <div className="plan-price">4–6 kW <small style={{ fontSize: "13px" }}>· desde $69,999 MXN</small></div>
              <p className="plan-sub">Recibo CFE bimestral $4,000 – $9,000</p>
              <ul>
                <li>8–12 paneles tier-1, 640W bifaciales</li>
                <li>Inversor híbrido preparado para batería</li>
                <li>Estructura aluminio anodizado para losa o para estructura PTR</li>
                <li>Gestión CFE + medidor bidireccional</li>
                <li>Monitoreo en tiempo real</li>
                <li>Garantía 15 años potencia</li>
                <li>Visita técnica gratuita</li>
              </ul>
              <a href="agenda.html" className="btn btn-primary plan-cta">Agendar instalación →</a>
            </div>
            <div className="plan">
              <span className="plan-tag">Premium</span>
              <h3>Casa Deluxe</h3>
              <div className="plan-price">8–10 kW <small>· desde $119,999 MXN</small></div>
              <p className="plan-sub">Recibo CFE bimestral 10,000 +</p>
              <ul>
                <li>16–20 paneles premium, 640W bifaciales</li>
                <li>Inversor híbrido + opción de batería</li>
                <li>Aterrizaje contra rayos</li>
                <li>Estructura  aluminio anodizado para losa o para estructura PTR</li>
                <li>Monitoreo Wifi</li>
                <li>Garantía 30 años potencia</li>
                <li>Mantenimiento anual incluido 2 años</li>
              </ul>
              <a href="agenda.html" className="btn btn-ghost plan-cta">Solicitar cotización →</a>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT'S INCLUDED */}
      <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">Qué incluye</div>
              <h2 style={{ marginTop: 18 }}>Llave en mano, sin <em style={{ fontSize: "65px" }}>Sin letras chicas.</em></h2>
            </div>
            <p>El precio que cotizamos es el precio que pagas. Sin costos ocultos en gestión, materiales o mano de obra.</p>
          </div>
          <div className="feature-grid reveal-stagger">
            {[
            ['Visita técnica', 'Inspección de techo, sombreado, orientación y panel CFE. Gratis y sin compromiso.'],
            ['Diseño Real', 'Plano de distribución de paneles, ruta de cableado y memoria de cálculo.'],
            ['Materiales tier-1', 'Paneles JinkoSolar / Trina / Renesola. Inversores Hoymiles / Growatt / Huawei.'],
            ['Estructura certificada', 'Aluminio anodizado. Resistente a vientos de 200 km/h.'],
            ['Instalación', '1 a 3 días según tamaño. Cuadrilla certificada. Sin daños en techo.'],
            ['Gestión CFE', 'Trámite completo: solicitud, contrato bidireccional, cambio de medidor.'],
            ['Monitoreo', 'App móvil con producción diaria, ahorro y CO₂ evitado.'],
            ['Garantía', '30 años de potencia · 12 años de inversor · 10 años de instalación.'],
            ['Soporte', 'Servicio técnico en línea y agenda de mantenimientos.']].
            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="M5 12l4 4L19 6" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </div>
                <h4>{t}</h4>
                <p>{d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="section-pad proc-bg" style={{ backgroundImage: "linear-gradient(rgba(5,11,26,0.74), rgba(5,11,26,0.82)), url('assets/kits-proc-bg.jpg')" }}>
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>Cómo funciona</div>
              <h2 style={{ marginTop: 18, color: '#fff' }}>De tu recibo a tu primer <em style={{ color: 'rgba(255,255,255,0.65)' }}>kWh generado.</em></h2>
            </div>
            <p style={{ color: 'rgba(255,255,255,0.82)' }}>Proceso típico: 30 a 45 días desde la primera llamada hasta tu primer recibo CFE en $60.</p>
          </div>
        </div>
        <div className="proc-timeline reveal-stagger">
          {[
          ['Día 1', 'Llamada o WhatsApp', 'Compártenos tu recibo. En 2 hrs tienes una cotización formal y atención de alguno de nuestros ingenieros especialistas.',
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" style={{ height: "36px", width: "36px" }}><path d="M17.5 14.4c-1-.2-1.8-.5-2.5-.9-.3-.2-.7-.1-.9.1l-1 1c-1.8-1-3.2-2.4-4.2-4.2l1-1c.2-.2.3-.6.1-.9-.4-.7-.7-1.5-.9-2.5-.1-.4-.4-.6-.8-.6H5.6C5 5 4.5 5.5 4.6 6.1 5 11.6 9.4 16 14.9 16.4c.6 0 1.1-.4 1.1-1V15.2c0-.4-.3-.7-.5-.8z" stroke="#F5C842" strokeWidth="1.6" strokeLinejoin="round" /></svg>],
          ['Día 2–5', 'Visita técnica', 'Un ingeniero RENOVAM visita tu casa o negocio. Mediciones, sombras, orientación. Opción en línea o presencial.',
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" style={{ width: "36px", height: "36px" }}><path d="M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z" stroke="#F5C842" strokeWidth="1.6" strokeLinejoin="round" /><circle cx="12" cy="10" r="2.5" stroke="#F5C842" strokeWidth="1.6" /></svg>],
          ['Día 5–6', 'Diseño y propuesta', 'Plano técnico, bajada eléctrica y precio firme. Sin anticipos, se programa instalación.',
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" style={{ width: "36px", height: "36px" }}><rect x="4" y="3" width="16" height="18" rx="2" stroke="#F5C842" strokeWidth="1.6" style={{ width: "26px", height: "2px" }} /><path d="M8 8h8M8 12h8M8 16h5" stroke="#F5C842" strokeWidth="1.6" strokeLinecap="round" /></svg>],
          ['Día 7–9', 'Instalación + CFE', 'Materiales, instalación (1–3 días) y gestión del nuevo medidor. Proceso interno de CFE (3–30 días hábiles).',
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" style={{ width: "36px", height: "36px" }}><path d="M3 21h18M5 21V8l7-4 7 4v13M9 21v-5h6v5" stroke="#F5C842" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" /></svg>]].
          map(([n, t, d, icon], i) =>
          <div className="proc-step" key={i}>
              <div className="proc-node">
                <div className="proc-ic" style={{ width: "78px", height: "78px" }}>{icon}</div>
              </div>
              <div className="proc-day" style={{ color: "rgb(255, 255, 255)", fontSize: "15px" }}>{n}</div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          )}
        </div>
      </section>

      {/* CTA */}
      <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)' }}>Listo para empezar</div>
              <h2 style={{ marginTop: 18 }}>Tu próximo recibo CFE puede ser de $35 pesos.</h2>
            </div>
            <div className="cta-actions">
              <a href="agenda.html" className="btn btn-primary">Agenda visita técnica →</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 />);