/* RENOVAM — main React app (home) */
const { useState, useEffect, useRef, useMemo } = React;

// ============== HOOKS ==============
function useScrolled(threshold = 24) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [threshold]);
  return scrolled;
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal, .reveal-stagger');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useCountUp(target, trigger) {
  const ref = useRef(null);
  useEffect(() => {
    if (!trigger || !ref.current) return;
    const el = ref.current;
    const dur = 1800;
    const start = performance.now();
    const from = 0;
    const ease = (t) => 1 - Math.pow(1 - t, 3);
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / dur);
      const v = from + (target - from) * ease(t);
      el.textContent = Math.floor(v).toLocaleString('es-MX');
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, trigger]);
  return ref;
}

// ============== NAV ==============
function Nav() {
  const scrolled = useScrolled(24);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="index.html" className="nav-logo">
        <img src="assets/renovam-logo.png" alt="RENOVAM" />
        <span style={{ fontFamily: "monospace" }}>RENOVAM</span>
      </a>
      <div className="nav-links">
        <div className="dropdown">
          <button className="menu-btn">Productos
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
          </button>
          <div className="dropdown-menu">
            <a href="kits-residenciales.html"><strong>Paneles Solares</strong><small>Ahorra hasta 95% en tu recibo CFE</small></a>
            <a href="sistemas-baterias.html"><strong>Sistemas con baterías</strong><small>Respaldo total con LiFePO4</small></a>
            <a href="off-grid.html"><strong>Off-grid</strong><small>Energía donde no hay red</small></a>
            <a href="ev-y-complementarios.html"><strong>Instalación de Cargadores para carros eléctricos</strong><small>Wallbox compatibles con Tesla, BMW, BYD</small></a>
            <a href="hogar-inteligente.html"><strong>Hogar Inteligente</strong><small>AC, bombas de calor, automatización</small></a>
            <a href="componentes.html"><strong>Componentes</strong><small>Paneles, inversores, accesorios</small></a>
          </div>
        </div>
        <a href="ecotecnologias.html">Ecotecnologías</a>
        <a href="nosotros.html">Nosotros</a>
        <a href="servicios.html">Servicios</a>
        <a href="agenda.html" className="nav-cta">Agenda tu instalación →</a>
      </div>
      <button className="nav-burger" aria-label="menu"><span></span><span></span><span></span></button>
    </nav>);

}

// ============== HERO ==============
function HeroParticles({ count = 22 }) {
  const particles = useMemo(() => Array.from({ length: count }, (_, i) => ({
    left: Math.random() * 100,
    delay: Math.random() * 12,
    duration: 12 + Math.random() * 14,
    opacity: 0.2 + Math.random() * 0.4,
    size: 1 + Math.random() * 2.5
  })), [count]);
  return (
    <div className="hero-particles">
      {particles.map((p, i) =>
      <span key={i} className="particle" style={{
        left: `${p.left}%`,
        animationDelay: `-${p.delay}s`,
        animationDuration: `${p.duration}s`,
        opacity: p.opacity,
        width: `${p.size}px`,
        height: `${p.size}px`
      }} />
      )}
    </div>);

}

function Hero() {
  return (
    <section className="hero hero-minimal">
      <div className="hero-image" style={{ backgroundImage: "url('assets/hero-house.jpg')" }}></div>
      <div className="hero-overlay"></div>
      <div className="hero-hotspots">
        <a href="kits-residenciales.html" className="hotspot hotspot-panels" aria-label="Paneles Solares">
          <span className="hs-dot">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="4" fill="#F5C842" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1" stroke="#F5C842" strokeWidth="2" strokeLinecap="round" /></svg>
          </span>
          <span className="hs-tooltip">Paneles Solares <span className="hs-arrow">→</span></span>
        </a>
        <a href="sistemas-baterias.html" className="hotspot hotspot-batteries" aria-label="Sistemas con baterías">
          <span className="hs-dot">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="4" y="7" width="15" height="11" rx="2" stroke="#F5C842" strokeWidth="2" /><path d="M19 11v3" stroke="#F5C842" strokeWidth="2" strokeLinecap="round" /><path d="M7 10v5M11 10v5" stroke="#F5C842" strokeWidth="2" strokeLinecap="round" /></svg>
          </span>
          <span className="hs-tooltip">Sistemas con Baterías <span className="hs-arrow">→</span></span>
        </a>
        <a href="ev-y-complementarios.html" className="hotspot hotspot-ev" aria-label="Cargadores EV">
          <span className="hs-dot">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M13 2L4 14h7l-1 8 10-12h-7l1-8z" fill="#F5C842" /></svg>
          </span>
          <span className="hs-tooltip">Cargadores para carros eléctricos <span className="hs-arrow">→</span></span>
        </a>
      </div>
      <div className="container hero-minimal-content">
        <h1 className="hero-minimal-title">RENOVAMos<br />el uso de la energía.</h1>
        <p className="hero-minimal-sub">Energía solar para tu hogar. Diseñada, instalada y respaldada en México.</p>
      </div>
      <div className="hero-minimal-actions">
        <a href="kits-residenciales.html" className="btn btn-light">Conoce los kits</a>
        <a href="agenda.html" className="btn btn-dark">Agenda tu instalación</a>
      </div>
      <div className="hero-scroll-min">
        <svg width="14" height="22" viewBox="0 0 14 22" fill="none">
          <path d="M7 1v20m0 0l-5-5m5 5l5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
    </section>);

}

// ============== MARQUEE ==============
function Marquee() {
  const items = ['+400 instalaciones', 'UVIE certificado', 'UIIE acreditado', 'Interconexión CFE', 'Gestión CFE', '30 años de garantía', 'Ingeniería 100% mexicana', 'Monitoreo 24/7'];
  const row = items.map((t, i) => <span key={i}>{t}</span>);
  return (
    <div className="marquee">
      <div className="marquee-track">{row}{row}</div>
    </div>);

}

// ============== METRICS ==============
function Metric({ num, suffix, label, trigger }) {
  const ref = useCountUp(num, trigger);
  return (
    <div className="metric">
      <div className="metric-num">
        <span ref={ref}>30</span>
        {suffix && <span className="suffix">{suffix}</span>}
      </div>
      <div className="metric-label">{label}</div>
    </div>);

}

function Metrics() {
  const ref = useRef(null);
  const [trigger, setTrigger] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {setTrigger(true);io.disconnect();}
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <section className="metrics" ref={ref}>
      <div className="metrics-grid">
        <Metric num={400} suffix="+" label="Instalaciones residenciales y comerciales activas" trigger={trigger} />
        <Metric num={3200} suffix="MWh" label="Energía limpia generada al año por la red de clientes RENOVAM" trigger={trigger} />
        <Metric num={95} suffix="Paneles" label="Instalados por el equipo RENOVAM" trigger={trigger} />
        <Metric num={15} suffix="años" label="Garantía de potencia y rendimiento por panel instalado" trigger={trigger} />
      </div>
    </section>);

}

// ============== PRODUCTS ==============
function VizPanels() {
  return (
    <svg className="viz-panels" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="panelG" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#1c3157" />
          <stop offset="100%" stopColor="#050b1a" />
        </linearGradient>
        <linearGradient id="shineG" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(255,255,255,0.18)" />
          <stop offset="100%" stopColor="rgba(255,255,255,0)" />
        </linearGradient>
      </defs>
      <g transform="translate(80 80) skewY(-12)">
        {[0, 1, 2, 3].map((r) => [0, 1, 2, 3].map((c) =>
        <g key={`${r}-${c}`} transform={`translate(${c * 60} ${r * 88})`}>
            <rect width="56" height="84" rx="3" fill="url(#panelG)" stroke="rgba(255,255,255,0.08)" />
            <rect width="56" height="84" rx="3" fill="url(#shineG)" />
            {[1, 2, 3, 4, 5].map((i) =>
          <line key={i} x1="0" y1={i * 14} x2="56" y2={i * 14} stroke="rgba(255,255,255,0.06)" strokeWidth="0.5" />
          )}
            <line x1="28" y1="0" x2="28" y2="84" stroke="rgba(255,255,255,0.06)" strokeWidth="0.5" />
          </g>
        ))}
      </g>
    </svg>);

}

function VizBattery() {
  return (
    <svg className="viz-panels" viewBox="0 0 400 400" fill="none">
      <defs>
        <linearGradient id="batG" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1c3157" />
          <stop offset="100%" stopColor="#0a1428" />
        </linearGradient>
      </defs>
      {[0, 1, 2].map((i) =>
      <g key={i} transform={`translate(${110 + i * 20} ${100 + i * 30})`}>
          <rect width="160" height="220" rx="12" fill="url(#batG)" stroke="rgba(255,255,255,0.1)" />
          <rect x="20" y="20" width="120" height="6" rx="3" fill="#5fd28a" opacity={0.9 - i * 0.2} />
          <rect x="20" y="36" width="80" height="3" rx="1.5" fill="rgba(255,255,255,0.2)" />
          <circle cx="80" cy="120" r="32" stroke="#5fd28a" strokeWidth="2" fill="none" opacity={0.7 - i * 0.2} />
          <text x="80" y="128" textAnchor="middle" fill="#5fd28a" fontFamily="JetBrains Mono" fontSize="18" fontWeight="600" opacity={0.9 - i * 0.2}>{96 - i * 4}%</text>
        </g>
      )}
    </svg>);

}

function VizGrid() {
  return (
    <svg className="viz-panels" viewBox="0 0 400 400" fill="none">
      <g opacity="0.6">
        <path d="M50 350 L50 200 M200 350 L200 100 M350 350 L350 200" stroke="rgba(255,255,255,0.2)" strokeWidth="2" />
        <path d="M50 200 L200 100 L350 200" stroke="rgba(255,255,255,0.2)" strokeWidth="2" />
        <path d="M50 240 L200 140 L350 240" stroke="rgba(255,255,255,0.15)" strokeWidth="1.5" strokeDasharray="4 4" />
        <circle cx="50" cy="200" r="6" fill="#C41E5B" />
        <circle cx="200" cy="100" r="8" fill="#f4d27a" />
        <circle cx="350" cy="200" r="6" fill="#C41E5B" />
        <circle cx="200" cy="350" r="20" fill="none" stroke="#5fd28a" strokeWidth="2" />
        <path d="M192 350 L200 358 L210 342" stroke="#5fd28a" strokeWidth="2" fill="none" strokeLinecap="round" />
      </g>
    </svg>);

}

function VizEV() {
  return (
    <svg className="viz-panels" viewBox="0 0 400 400" fill="none">
      <rect x="80" y="120" width="240" height="180" rx="20" fill="#0a1428" stroke="rgba(255,255,255,0.12)" />
      <rect x="100" y="140" width="100" height="80" rx="6" fill="#1c3157" />
      <text x="150" y="186" textAnchor="middle" fill="#5fd28a" fontFamily="JetBrains Mono" fontSize="20" fontWeight="600">7.4</text>
      <text x="150" y="206" textAnchor="middle" fill="rgba(255,255,255,0.5)" fontFamily="JetBrains Mono" fontSize="9">kW</text>
      <circle cx="260" cy="180" r="36" stroke="#C41E5B" strokeWidth="3" fill="none" strokeDasharray="180" strokeDashoffset="40" />
      <text x="260" y="186" textAnchor="middle" fill="#fff" fontFamily="Syne" fontSize="22" fontWeight="700">82%</text>
      <path d="M120 280 L140 240 L130 240 L150 200" stroke="#f4d27a" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function Products() {
  return (
    <section className="section-pad products">
      <div className="container">
        <div className="section-header reveal">
          <div>
            <div className="eyebrow">Líneas de producto</div>
            <h2 style={{ marginTop: 18 }}>Soluciones que <em>encienden</em> hogares, negocios y comunidades.</h2>
          </div>
          <p>Desde kits residenciales hasta sistemas de respaldo total y electrificación de vehículos. Cada proyecto se diseña a medida, con monitoreo Wifi, garantía de 10 años y servicio post-instalación.</p>
        </div>
        <div className="product-grid reveal">
          <a href="kits-residenciales.html" className="product-card feature">
            <div className="pc-bg" style={{ backgroundImage: "url('assets/cat-kits.png')" }}></div>
            <div className="pc-grad"></div>
            <div className="pc-content">
              <div className="pc-eyebrow">01 — Ahorra en tu recibo</div>
              <h3>Paneles<br />Solares.</h3>
              <p style={{ color: "rgb(247, 248, 250)" }}>De 2 a 10 kW interconectados a CFE. Tres niveles —Básico, Intermedio y Premium— diseñados para reducir tu recibo bimestral hasta 95%. Retorno típico de inversión: 3 a 4 años.</p>
              <span className="pc-link">Conocer paneles <svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M1 6h13m0 0L9 1m5 5l-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg></span>
            </div>
          </a>
          <a href="sistemas-baterias.html" className="product-card span-4">
            <div className="pc-bg" style={{ backgroundImage: "url('assets/cat-baterias.jpg')" }}></div>
            <div className="pc-grad"></div>
            <div className="pc-content">
              <div className="pc-eyebrow">02 — Nunca te quedes sin luz</div>
              <h3>Sistemas con baterías.</h3>
              <p>Litio LiFePO4 con respaldo parcial o total. Segmento premium para hogares que no pueden permitirse un apagón.</p>
              <span className="pc-link">Ver baterías <svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M1 6h13m0 0L9 1m5 5l-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg></span>
            </div>
          </a>
          <a href="off-grid.html" className="product-card span-6">
            <div className="pc-bg" style={{ backgroundImage: "url('assets/cat-offgrid.png')" }}></div>
            <div className="pc-grad"></div>
            <div className="pc-content">
              <div className="pc-eyebrow">03 — Energía donde no hay red</div>
              <h3>Sistemas off-grid.</h3>
              <p>Para ranchos, obras, telecomunicaciones y seguridad. Generación, almacenamiento y control independiente de CFE.</p>
              <span className="pc-link">Explorar off-grid <svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M1 6h13m0 0L9 1m5 5l-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg></span>
            </div>
          </a>
          <a href="ev-y-complementarios.html" className="product-card span-6">
            <div className="pc-bg" style={{ backgroundImage: "url('assets/cat-ev.png')" }}></div>
            <div className="pc-grad"></div>
            <div className="pc-content">
              <div className="pc-eyebrow">04 — Electrifica tu vida</div>
              <h3>Instalación de Cargadores<br />para carros eléctricos.</h3>
              <p>Wallbox residenciales de 7.4 a 22 kW compatibles con Tesla, BMW, BYD, Audi y todos los SAE J1772 / Type 2. Carga inteligente con tu propio sistema solar.</p>
              <span className="pc-link">Ver cargadores <svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M1 6h13m0 0L9 1m5 5l-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg></span>
            </div>
          </a>
        </div>
      </div>
    </section>);

}

// ============== FEATURED ==============
function Featured() {
  return (
    <section className="featured">
      <div className="featured-inner" style={{ backgroundImage: "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.4) 100%), url('assets/caso-villa-coapa.png')" }}>
        <div className="featured-content reveal">
          <div>
            <div className="eyebrow" style={{ color: "rgb(248, 248, 248)" }}>CASO · VILLA COAPA, CDMX.</div>
            <h2 style={{ marginTop: 18 }}>Ingeniería que se integra al diseño de la casa, no que lo interrumpe.</h2>
          </div>
          <div className="featured-meta">
            <div className="item"><small>Sistema instalado</small><p>15 kW · 18 paneles · Inversor Híbrido Hoymiles + 15 kWh LiFePO4</p></div>
            <div className="item"><small>Ahorro anual</small><p>$48,200 MXN · ROI proyectado 3.6 años</p></div>
            <div className="item"><small>Tiempo de instalación</small><p>9 días + 21 días de gestión CFE</p></div>
          </div>
        </div>
      </div>
    </section>);

}

// Calculator now lives in calculator.jsx
const Calculator = window.Calculator;

// ============== TIMELINE ==============
function Timeline() {
  const items = [
  ['2019', 'Ingreso a la carrera de Ingeniería en Energías Renovables - UNAM', 'Cristobal Valdos y Oscar Zagal entran a la carrera de acceso indirecto, siendo 2 de las 27 personas seleccionadas para el ingreso a la carrera. Ambos teniendo la convicción de ayudar al planeta y a los seres que no tenían voz para defenderse.'],
  ['2022', 'Egreso de la carrera', 'Saliendo de la carrera comienza la idea de realizar una empresa de Energías Renovables.'],
  ['2023', 'Consolidación de la empresa en un lugar físico', 'Abrimos operaciones en CDMX. Esto con la intención de estar más céntricos a todos nuestros puntos de instalación y clientes.'],
  ['2025', '+300 sistemas activos', 'Cruzamos las 300 instalaciones con monitoreo en tiempo real y soporte técnico de por vida.'],
  ['2026', 'Expansión multidisciplinaria', 'Lanzamos línea de media tensión, transformadores, plantas de emergencia, entre otros servicios más.']];

  return (
    <section className="section-pad timeline">
      <div className="container">
        <div className="timeline-grid">
          <div className="reveal">
            <div className="eyebrow">Nuestra historia</div>
            <h2 style={{ marginTop: 18, fontSize: 'clamp(36px, 5vw, 64px)' }}>4 años convirtiendo techos mexicanos en plantas de energía.</h2>
            <p style={{ color: 'var(--ink-dim)', marginTop: 24, fontSize: 16, lineHeight: 1.6 }}>RENOVAM nació en una época en la que los paneles solares eran el boom en México. Hoy para muchos de nuestros clientes somos los mejores en atención, calidad y precio. </p>
            <a href="nosotros.html" className="btn btn-ghost" style={{ marginTop: 32 }}>Conoce al equipo →</a>
          </div>
          <div className="timeline-list reveal-stagger">
            {items.map(([year, title, desc], i) =>
            <div key={i} className="timeline-item">
                <div className="timeline-year">{year}</div>
                <div>
                  <div className="timeline-title">{title}</div>
                  <div className="timeline-desc">{desc}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ============== TESTIMONIAL ==============
function Testimonial() {
  return (
    <section className="section-pad testimonial" style={{ backgroundColor: "rgb(255, 255, 255)" }}>
      <div className="container">
        <div className="testi-card reveal">
          <image-slot id="testi-edmundo" className="testi-photo" shape="circle" placeholder="Foto del cliente"></image-slot>
          <p className="testi-quote" style={{ color: "rgb(237, 10, 95)" }}>El equipo de RENOVAM no solo instaló paneles, bomba de calor y aires acondicionados en mi casa: rediseñó la forma en la que entiendo mi consumo y en cómo disfruto mi casa y mi calidad de vida. Mi recibo CFE bajó a $60 pesos desde el segundo bimestre. Ahora les presumo a todos mis amigos y familia, lo caliente de mi alberca, la temperatura en toda mi casa y los grandes ahorros que tengo día con día.</p>
          <div className="testi-author">
            <strong>Edmundo O´Sullivan · Lomas de Cocoyoc, Morelos</strong>
            Sistema interconectado 4 kW + Bomba de Calor HAX + 3 Aires acondicionados · Instalado 2024
          </div>
        </div>
      </div>
    </section>);

}

// ============== CTA STRIP ==============
function CtaStrip() {
  return (
    <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)' }}>Empieza hoy</div>
            <h2 style={{ marginTop: 18 }}>La energía que produces vale más que la que pagas.</h2>
          </div>
          <div className="cta-actions">
            <a href="agenda.html" className="btn btn-primary">Agenda tu instalación →</a>
            <a href="https://wa.me/527778297622" target="_blank" rel="noopener" className="btn btn-ghost">WhatsApp directo</a>
          </div>
        </div>
      </div>
    </section>);

}

// ============== FOOTER ==============
function Footer() {
  return (
    <footer>
      <div className="foot-grid">
        <div className="foot-brand">
          <img src="assets/renovam-logo.png" alt="RENOVAM" />
          <p>Energías renovables y ecotecnologías. Especialistas en sistemas fotovoltaicos interconectados, baterías de litio y soluciones off-grid en México.</p>
        </div>
        <div className="foot-col">
          <h4>Productos</h4>
          <a href="kits-residenciales.html">Paneles Solares</a>
          <a href="sistemas-baterias.html">Sistemas con baterías</a>
          <a href="off-grid.html">Off-grid</a>
          <a href="ev-y-complementarios.html">Instalación de Cargadores EV</a>
          <a href="hogar-inteligente.html">Hogar Inteligente</a>
          <a href="componentes.html">Componentes</a>
        </div>
        <div className="foot-col">
          <h4>Empresa</h4>
          <a href="nosotros.html">Nosotros</a>
          <a href="ecotecnologias.html">Ecotecnologías</a>
          <a href="servicios.html">Servicios</a>
          <a href="agenda.html">Agenda</a>
          <a href="contacto.html">Contacto</a>
        </div>
        <div className="foot-col">
          <h4>Contacto</h4>
          <a href="tel:+527778297622">777 829 7622</a>
          <a href="https://wa.me/527778297622">WhatsApp</a>
          <a href="mailto:hola@renovam.mx">hola@renovam.mx</a>
          <p style={{ color: 'var(--ink-mute)', fontSize: 13, marginTop: 12, lineHeight: 1.5 }}>Manuel M. Flores 25,<br />Col. Obrera 06800, CDMX</p>
        </div>
        <div className="foot-col">
          <h4>Credenciales</h4>
          <p style={{ color: 'var(--ink-dim)', fontSize: 13, lineHeight: 1.7, margin: 0 }}>UVIE acreditada<br />UIIE certificada<br />Interconexión CFE<br />Gestión SENER<br />Régimen RESICO</p>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 RENOVAM  · RFC: VAMC010629R73</span>
        <span>Hecho con ☀ en CDMX</span>
      </div>
    </footer>);

}

// ============== WA FAB ==============
function WaFab() {
  return (
    <a href="https://wa.me/527778297622" target="_blank" rel="noopener" className="wa-fab" aria-label="WhatsApp">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413" />
      </svg>
    </a>);

}

// ============== TWEAKS ==============
function Tweaks() {
  const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#C41E5B",
    "bgMode": "dark",
    "headlineSize": 1
  } /*EDITMODE-END*/;
  const [t, setTweak] = window.useTweaks(TWEAKS_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty('--pink', t.accent);
    const r = parseInt(t.accent.slice(1, 3), 16);
    const g = parseInt(t.accent.slice(3, 5), 16);
    const b = parseInt(t.accent.slice(5, 7), 16);
    document.documentElement.style.setProperty('--pink-glow', `rgba(${r},${g},${b},0.35)`);
  }, [t.accent]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Acento de marca">
        <window.TweakColor
          label="Color principal"
          value={t.accent}
          onChange={(v) => setTweak('accent', v)}
          options={['#C41E5B', '#E94A82', '#f4d27a', '#5fd28a', '#4a7dff']} />
        
      </window.TweakSection>
    </window.TweaksPanel>);

}

// ============== APP ==============
function App() {
  useReveal();
  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Metrics />
      <Calculator />
      <Products />
      <Featured />
      <Timeline />
      <Testimonial />
      <CtaStrip />
      <Footer />
      <WaFab />
      <Tweaks />
    </>);

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);