// Quillpilot — main App
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [modal, setModal] = useStateApp(null);
  const [toast, setToast] = useStateApp(null);

  useEffectApp(() => {
    const onKey = (e) => { if (e.key === 'Escape') setModal(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // smooth scroll for anchor links
  useEffectApp(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const href = a.getAttribute('href');
      if (href === '#' || href.length < 2) return;
      const tgt = document.querySelector(href);
      if (tgt) {
        e.preventDefault();
        const y = tgt.getBoundingClientRect().top + window.scrollY - 24;
        window.scrollTo({ top: y, behavior: 'smooth' });
      }
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  const onSignup = (email) => {
    setToast(`You're on the list — we'll be in touch at ${email}`);
    setTimeout(() => setToast(null), 4000);
  };

  return (
    <>
      <Nav onOpenModal={setModal} />
      <Hero onSignup={onSignup} />
      <Logos />
      <Steps />
      <Bento onOpenModal={setModal} />
      <Personas />
      <Testimonials />
      <Pricing />
      <FAQ />
      <CTA />
      <FooterWordmark />
      <FooterBottom />

      <div className={`modal-backdrop${modal ? ' open' : ''}`} onClick={(e) => { if (e.target === e.currentTarget) setModal(null); }}>
        <div className="modal">
          {modal && <ModalContent kind={modal} onClose={() => setModal(null)} />}
        </div>
      </div>

      <div className={`toast${toast ? ' show' : ''}`}>
        <span className="dot"></span>
        <span>{toast}</span>
      </div>
    </>
  );
}

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