// ============================================================
// Velio Tech — Shared UI: Nav, Footer, Logo
// ============================================================

const { useState, useEffect, useRef } = React;

function Logo({ onClick }) {
  return (
    <div className="nav-logo" onClick={onClick} role="button" tabIndex={0}>
      <img src="assets/velio-wordmark.png" alt="Velio Tech" />
    </div>
  );
}
window.Logo = Logo;

function Nav({ page, go }) {
  const [open, setOpen] = useState(false);
  const links = [
    { id: 'inicio', label: 'Inicio' },
    { id: 'demo', label: 'Ver Demostración' },
    { id: 'servicios', label: 'Servicios y Precios' },
    { id: 'contacto', label: 'Contacto' },
  ];

  return (
    <header className="nav">
      <div className="shell nav-inner">
        <Logo onClick={() => { go('inicio'); setOpen(false); }} />
        <nav className="nav-links">
          {links.map((l) => (
            <button
              key={l.id}
              className={page === l.id ? 'active' : ''}
              onClick={() => go(l.id)}
            >
              {l.label}
            </button>
          ))}
        </nav>
        <div className="nav-cta">
          <button className="btn btn-ghost nav-cta-text" onClick={() => go('demo')}>
            Ver Demo
          </button>
          <button className="btn btn-sky" onClick={() => go('contacto')}>
            Hablar con nosotros
          </button>
        </div>
        <button
          className="nav-toggle"
          onClick={() => setOpen(!open)}
          aria-label="Menú"
        >
          {open ? Icon.close(22) : Icon.menu(22)}
        </button>
      </div>
      <div className={`mobile-menu ${open ? 'open' : ''}`}>
        {links.map((l) => (
          <button
            key={l.id}
            onClick={() => { go(l.id); setOpen(false); }}
          >
            {l.label}
          </button>
        ))}
        <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
          <button className="btn btn-wa" style={{ flex: 1 }} onClick={() => go('contacto')}>
            {Icon.whatsapp(18)} WhatsApp
          </button>
        </div>
      </div>
    </header>
  );
}
window.Nav = Nav;

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <div style={{ marginBottom: 22 }}>
              <img src="assets/velio-wordmark-white.png" alt="Velio Tech" style={{ height: 60, width: 'auto', display: 'block' }} />
            </div>
            <p style={{ color: '#B6C6F0', maxWidth: 320, fontSize: 15 }}>
              Hacemos crecer tu negocio sin que el idioma sea una barrera. Hecho con cariño en South Florida.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              <a className="footer-social" aria-label="Instagram">{Icon.ig(22)}</a>
              <a className="footer-social" aria-label="WhatsApp">{Icon.whatsapp(22)}</a>
              <a className="footer-social" aria-label="Email">{Icon.mail(22)}</a>
            </div>
          </div>
          <div>
            <div className="footer-col-label">Navegar</div>
            <ul>
              <li><a onClick={() => go('inicio')} style={{ cursor: 'pointer' }}>Inicio</a></li>
              <li><a onClick={() => go('demo')} style={{ cursor: 'pointer' }}>Ver Demo</a></li>
              <li><a onClick={() => go('servicios')} style={{ cursor: 'pointer' }}>Servicios y Precios</a></li>
              <li><a onClick={() => go('contacto')} style={{ cursor: 'pointer' }}>Contacto</a></li>
            </ul>
          </div>
          <div>
            <div className="footer-col-label">Contacto</div>
            <ul>
              <li>WhatsApp: +1 (786) 803 0809</li>
              <li>heidy@veliotech.com</li>
              <li>Miami, FL</li>
              <li>Lun–Sáb · 8am–8pm</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Velio Tech LLC · Hecho en español, para tu negocio.</div>
          <div>Aviso de privacidad · Términos</div>
        </div>
      </div>
      <style>{`
        .footer-social {
          width: 42px; height: 42px; border-radius: 50%;
          background: rgba(255,255,255,0.08); color: #DCE6FF;
          display: inline-flex; align-items: center; justify-content: center;
          transition: background .2s ease;
          cursor: pointer;
        }
        .footer-social:hover { background: rgba(255,255,255,0.18); color: #fff; }
      `}</style>
    </footer>
  );
}
window.Footer = Footer;