/* RENOVAM — shared chrome (nav + footer + WA + reveal) for internal pages */
const { useState, useEffect, useRef, useMemo } = React;

window.useScrolled = function (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;
};

window.useReveal = function () {
  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();
  }, []);
};

window.SiteNav = function SiteNav({ active }) {
  const scrolled = window.useScrolled(24);
  return (
    <nav className={`nav scrolled`}>
      <a href="index.html" className="nav-logo">
        <img src="assets/renovam-logo.png" alt="RENOVAM" />
        <span>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>
    </nav>);

};

window.SiteFooter = function SiteFooter() {
  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">contacto@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 />EC 0586<br />EC 1181</p>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 RENOVAM · RFC: VAMC010629R73</span>
        <span>Hecho con ☀ en CDMX</span>
      </div>
    </footer>);

};

window.WaFab = 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>);

};

window.PageHero = function PageHero({ eyebrow, title, sub }) {
  return (
    <section className="page-hero">
      <div className="hero-bg">
        <div className="hero-grid"></div>
        <div className="hero-sun" style={{ top: '20%', width: 500, height: 500 }}></div>
      </div>
      <div className="container page-hero-content">
        <div className="eyebrow" style={{ opacity: 0, animation: 'fadeUp .8s .1s ease forwards' }}>{eyebrow}</div>
        <h1 style={{ fontSize: 'clamp(40px, 7vw, 96px)', marginTop: 24, opacity: 0, animation: 'fadeUp .8s .2s ease forwards' }}>{title}</h1>
        {sub && <p style={{ maxWidth: 640, color: 'var(--ink-dim)', fontSize: 'clamp(15px, 1.3vw, 18px)', marginTop: 24, lineHeight: 1.6, opacity: 0, animation: 'fadeUp .8s .3s ease forwards' }}>{sub}</p>}
      </div>
    </section>);

};

window.Crumb = function Crumb({ items }) {
  return (
    <div className="crumb">
      {items.map((it, i) =>
      <span key={i}>
          {it.href ? <a href={it.href}>{it.label}</a> : <span>{it.label}</span>}
          {i < items.length - 1 && <span className="crumb-sep">/</span>}
        </span>
      )}
    </div>);

};