/* global React, window */
const { useState, useEffect, useRef, useMemo } = React;

// ─── Logo ──────────────────────────────────────────
function Logo({ size = 48, variant = 'color' }) {
  const src = variant === 'white'
    ? 'assets/mexicarrier_white.png'
    : 'assets/mexicarrier_color.png';
  return <img src={src} alt="MexiCarrier" className="mc-logo" style={{ height: size, width: 'auto', display: 'block' }}/>;
}

// ─── Nav ───────────────────────────────────────────
function Nav() {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const LINKS = [
    ['#servicios', '01', 'Servicios'],
    ['#red', '02', 'La Red'],
    ['#cobertura', '03', 'Cobertura'],
    ['#proceso', '04', 'Proceso'],
    ['#contacto', '05', 'Contacto'],
  ];

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="nav-brand" href="#top" onClick={() => setOpen(false)}>
          <Logo size={52}/>
          <span className="nav-brand-sub">Infraestructura<br/>de Conectividad</span>
        </a>
        <div className="nav-links">
          {LINKS.map(l => <a key={l[0]} href={l[0]} data-num={l[1]}>{l[2]}</a>)}
        </div>
        <div className="nav-cta">
          <span className="nav-phone"><span className="dot"></span>722 167 5865</span>
          <a href="#contacto" className="btn btn-solid">Cotizar <span className="btn-arrow">→</span></a>
        </div>
        <button className={`nav-hamb ${open ? 'open' : ''}`}
                aria-label="Menú"
                aria-expanded={open}
                onClick={() => setOpen(v => !v)}>
          <span/><span/><span/>
        </button>
      </div>

      <div className={`nav-drawer ${open ? 'open' : ''}`} onClick={() => setOpen(false)}>
        <div className="nav-drawer-inner" onClick={e => e.stopPropagation()}>
          <button className="nav-drawer-close" aria-label="Cerrar menú" onClick={() => setOpen(false)}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square">
              <line x1="4" y1="4" x2="18" y2="18"/>
              <line x1="18" y1="4" x2="4" y2="18"/>
            </svg>
          </button>
          <div className="nav-drawer-links">
            {LINKS.map(l => (
              <a key={l[0]} href={l[0]} onClick={() => setOpen(false)}>
                <span className="nd-n">{l[1]}</span>
                <span className="nd-t">{l[2]}</span>
                <span className="nd-a">→</span>
              </a>
            ))}
          </div>
          <div className="nav-drawer-foot">
            <a href="tel:7221675865" className="btn btn-solid btn-lg">Llamar 722 167 5865</a>
            <a href="#contacto" className="btn btn-ghost btn-lg" onClick={() => setOpen(false)}>Cotizar por correo →</a>
          </div>
        </div>
      </div>
    </nav>
  );
}

// ─── Ticker ────────────────────────────────────────
function Ticker() {
  const items = [
    'CORE OPERATIVO',
    'PEERING EN IX MÉXICO',
    'SOPORTE NOC 24/7',
    'SLA CON PENALIZACIÓN',
    'RED PROPIA',
    'COBERTURA ACTIVA',
    'FIBRA ÓPTICA DEDICADA',
  ];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {[0,1].map(k => (
          <div className="ticker-group" key={k}>
            {items.map((it, i) => (
              <span className="ticker-item" key={i}>
                <span className="tk-v">{it}</span>
                <span className="tk-sep">●</span>
              </span>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Logo, Nav, Ticker });