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

function App() {
  const [modalOpen, setModalOpen] = useStateApp(false);
  const [prefillEmail, setPrefillEmail] = useStateApp('');
  const [prefillDemo, setPrefillDemo] = useStateApp(false);

  // Todos los canales (email, WhatsApp, llamada de SKAI) llevan al mismo link.
  // ?rsvp=email@empresa.com abre el formulario con el email puesto.
  // ?demo=1 además marca la casilla de "quiero mi SKAI gratis".
  useEffectApp(() => {
    const params = new URLSearchParams(window.location.search);
    const rsvp = params.get('rsvp');
    const demo = params.get('demo');
    if (rsvp || demo) {
      if (rsvp) setPrefillEmail(rsvp.trim());
      if (demo) setPrefillDemo(true);
      setModalOpen(true);
    }
  }, []);

  const openConfirm = () => {
    setPrefillDemo(false);
    setModalOpen(true);
  };

  const openDemo = () => {
    setPrefillDemo(true);
    setModalOpen(true);
  };

  const goAgenda = () => {
    const el = document.getElementById('programa');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <>
      <Hero
        onOpenConfirm={openConfirm}
        onOpenDemo={openDemo}
        onGoAgenda={goAgenda}
        showCountdown
      />
      <Concept onOpenDemo={openDemo} />
      <Agenda />
      <Speakers />
      <Challenge onOpenConfirm={openConfirm} />
      <Proof />
      <Venue />
      <ClosingCta onOpenConfirm={openConfirm} />
      <Footer />
      <ConfirmModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        prefillEmail={prefillEmail}
        prefillDemo={prefillDemo}
      />
    </>
  );
}

function ClosingCta({ onOpenConfirm }) {
  return (
    <section className="closing">
      <div className="page closing-inner">
        <h2>{COPY.short}</h2>
        <p>
          {EVENT.dateLabel} · {EVENT.timeRange} · #LaPlaza, Circular Universe (Logroño).
          Aforo limitado.
        </p>
        <div className="closing-actions">
          <button className="btn btn-primary btn-lg" onClick={onOpenConfirm}>
            Confirmar asistencia <span className="arrow">→</span>
          </button>
          <a className="btn btn-ghost btn-lg" href={`tel:${EVENT.phoneTel}`}>
            O llama al {EVENT.phone}
          </a>
        </div>
      </div>
    </section>
  );
}

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