// ============================================================
// Velio Tech — App Root (routing + page switching)
// ============================================================

const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const initialPage = () => {
    const hash = window.location.hash.replace('#', '').trim();
    return ['inicio', 'demo', 'servicios', 'contacto'].includes(hash) ? hash : 'inicio';
  };
  const [page, setPage] = useStateApp(initialPage());

  const go = (next) => {
    setPage(next);
    window.location.hash = next;
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  useEffectApp(() => {
    const handler = () => {
      const hash = window.location.hash.replace('#', '').trim();
      if (['inicio', 'demo', 'servicios', 'contacto'].includes(hash)) {
        setPage(hash);
      }
    };
    window.addEventListener('hashchange', handler);
    return () => window.removeEventListener('hashchange', handler);
  }, []);

  let body;
  if (page === 'inicio') body = <Inicio go={go} />;
  else if (page === 'demo') body = <Demo go={go} />;
  else if (page === 'servicios') body = <Servicios go={go} />;
  else if (page === 'contacto') body = <Contacto go={go} />;
  else body = <Inicio go={go} />;

  return (
    <div>
      <Nav page={page} go={go} />
      <main key={page}>{body}</main>
      <Footer go={go} />
      <FloatingWA go={go} />
    </div>
  );
}

function FloatingWA({ go }) {
  return (
    <>
      <button
        className="float-wa"
        onClick={() => go('contacto')}
        aria-label="Escríbenos por WhatsApp"
      >
        {Icon.whatsapp(26)}
        <span className="float-wa-pulse"></span>
      </button>
      <style>{`
        .float-wa {
          position: fixed; right: 22px; bottom: 22px; z-index: 60;
          width: 64px; height: 64px; border-radius: 50%;
          background: #25D366; color: #fff; border: none; cursor: pointer;
          display: flex; align-items: center; justify-content: center;
          box-shadow: 0 20px 40px -12px rgba(31,173,92,0.6);
          transition: transform .25s var(--ease);
        }
        .float-wa:hover { transform: scale(1.08); }
        .float-wa-pulse {
          position: absolute; inset: 0; border-radius: 50%;
          background: #25D366; opacity: 0.4;
          animation: floatPulse 2s var(--ease) infinite;
          pointer-events: none;
        }
        @keyframes floatPulse {
          0% { transform: scale(1); opacity: .35; }
          100% { transform: scale(1.6); opacity: 0; }
        }
      `}</style>
    </>
  );
}

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