/* Shared helpers, hooks, and reveal logic */

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    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' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useClock() {
  const [t, setT] = React.useState(() => new Date());
  React.useEffect(() => {
    const i = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(i);
  }, []);
  // Hora de Madrid (Europe/Madrid) con DST automático
  const fmt = new Intl.DateTimeFormat('es-ES', {
    timeZone: 'Europe/Madrid',
    hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
  });
  return `${fmt.format(t)} CET`;
}

function useMouseSpotlight(ref) {
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const mv = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty('--mx', (e.clientX - r.left) + 'px');
      el.style.setProperty('--my', (e.clientY - r.top) + 'px');
    };
    el.addEventListener('mousemove', mv);
    return () => el.removeEventListener('mousemove', mv);
  }, [ref]);
}

function TickerBar() {
  const clock = useClock();
  const quarter = `Q${Math.floor(new Date().getMonth() / 3) + 1}`;
  const items = [
    { k: 'STATUS', v: 'OPERACIONAL', up: true },
    { k: 'FLUJOS ACTIVOS', v: '127' },
    { k: 'TAREAS AUTOMATIZADAS / 24H', v: '18,432', up: true },
    { k: 'HORAS LIBERADAS / 24H', v: '246' },
    { k: 'PRECISIÓN MEDIA', v: '99.7%', up: true },
    { k: 'AGENTES EN PROD', v: '43' },
    { k: 'LATENCIA P95', v: '86ms', up: true },
    { k: 'INTEGRACIONES', v: '412' },
    { k: 'INCIDENTES 30D', v: '0', up: true },
    { k: `CAPACIDAD ${quarter}`, v: '4/12', down: true },
    { k: 'CLIENTES B2B', v: 'España · Elche' },
  ];
  const row = (keyPrefix) => items.map((it, i) => (
    <span key={`${keyPrefix}-${i}`} className="stream-item">
      <span className="k">{it.k}</span>
      <span className={'v' + (it.up ? ' up' : it.down ? ' down' : '')}>{it.v}{it.up ? ' ↑' : it.down ? ' ↓' : ''}</span>
    </span>
  ));
  return (
    <div className="ticker-bar">
      <div className="status">SYS · ONLINE</div>
      <div className="stream">
        <div className="stream-inner">
          {row('a')}{row('b')}
        </div>
      </div>
      <div className="clock">
        <span>MADRID · ES</span>
        <span>{clock}</span>
      </div>
    </div>
  );
}

function Header({ onCTA }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', h, { passive: true }); h();
    return () => window.removeEventListener('scroll', h);
  }, []);
  const quarter = `Q${Math.floor(new Date().getMonth() / 3) + 1}`;
  return (
    <header className={'site-header' + (scrolled ? ' scrolled' : '')}>
      <div className="header-inner">
        <a href="#top" className="brand">
          <img src="logo.png" alt="Stratium" className="brand-logo" width="36" height="36" decoding="async" />
          <div>
            <div className="brand-name">Stratium</div>
          </div>
          <span className="brand-badge">Ops Engineering / AI</span>
        </a>
        <nav className="nav">
          <a href="#manifiesto"><span className="num">01</span>Manifiesto</a>
          <a href="#servicios"><span className="num">02</span>Servicios</a>
          <a href="#mapa"><span className="num">03</span>Sistema</a>
          <a href="#diagnostico"><span className="num">04</span>Diagnóstico</a>
          <a href="#roi"><span className="num">05</span>ROI</a>
          <a href="#faq"><span className="num">06</span>FAQ</a>
        </nav>
        <div className="header-meta">
          <div className="capacity">{quarter} · 4/12 plazas</div>
          <a
            className="btn btn--primary btn--corners"
            href="https://calendly.com/alfdonver02/sesion-de-diagnostico-operativo-stratium"
            target="_blank"
            rel="noreferrer"
          >
            Reservar sesión
            <svg viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5"/></svg>
          </a>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <div className="brand">
            <img src="logo.png" alt="Stratium" className="brand-logo" width="32" height="32" decoding="async" loading="lazy" />
            <div className="brand-name">Stratium</div>
          </div>
          <p>Ingeniería operativa e inteligencia artificial aplicada. Transformamos empresas manuales en sistemas de alto rendimiento.</p>
          <div className="footer-addr">
            <b>Sede</b>
            Elche · Alicante · España<br/>
            contacto@stratium.es · +34 641 955 502
          </div>
        </div>
        <div className="footer-col">
          <h4>Plataforma</h4>
          <ul>
            <li><a href="#servicios">Servicios</a></li>
            <li><a href="#mapa">Sistema Stratium</a></li>
            <li><a href="#roi">Calculadora ROI</a></li>
            <li><a href="#diagnostico">Diagnóstico 60s</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Compañía</h4>
          <ul>
            <li><a href="#manifiesto">Manifiesto</a></li>
            <li><a href="#faq">FAQ técnica</a></li>
            <li><a href="#">Casos (NDA)</a></li>
            <li><a href="#">Carreras</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Contacto</h4>
          <ul>
            <li><a href="mailto:contacto@stratium.es">contacto@stratium.es</a></li>
            <li><a href="https://wa.me/34641955502">WhatsApp directo</a></li>
            <li><a href="#funnel">Reservar sesión</a></li>
            <li><a href="#">LinkedIn</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© {new Date().getFullYear()} Stratium · Eficiencia operativa integral</div>
        <div>
          <a href="#">Privacidad</a>
          <a href="#">Términos</a>
          <a href="#">Seguridad</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { useReveal, useClock, useMouseSpotlight, TickerBar, Header, Footer });