const { useState, useEffect } = React;

const Ticker = () => (
  <div className="ticker" aria-hidden="true">
    <div className="ticker-track">
      <span>
        180 km/h <span className="star">✦</span>
        <em>délègue l'admin</em> <span className="star">✦</span>
        stop la paralysie <span className="star">✦</span>
        <em>PDF 52 pages</em> <span className="star">✦</span>
        gratuit <span className="star">✦</span>
        <em>claude + chatgpt</em> <span className="star">✦</span>
        cerveau TDAH <span className="star">✦</span>
        <em>0 €</em> <span className="star">✦</span>
        50 prompts <span className="star">✦</span>
      </span>
      <span>
        180 km/h <span className="star">✦</span>
        <em>délègue l'admin</em> <span className="star">✦</span>
        stop la paralysie <span className="star">✦</span>
        <em>PDF 52 pages</em> <span className="star">✦</span>
        gratuit <span className="star">✦</span>
        <em>claude + chatgpt</em> <span className="star">✦</span>
        cerveau TDAH <span className="star">✦</span>
        <em>0 €</em> <span className="star">✦</span>
        50 prompts <span className="star">✦</span>
      </span>
    </div>
  </div>
);

const TopBar = () => (
  <div className="topbar">
    <div className="topbar-inner">
      <div className="topbar-logo">
        <span className="dot"/>
        tdah-agents
      </div>
      <div className="topbar-meta">
        50 prompts · 52 pages · gratuit
      </div>
      <a href="#top" className="topbar-cta">
        Récupérer le PDF →
      </a>
    </div>
  </div>
);

const App = () => {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle');
  const [error, setError] = useState('');

  const validate = (e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);

  const [pdfUrl, setPdfUrl] = useState('');

  const handleSubmit = async (ev) => {
    ev.preventDefault();
    setError('');
    if (!email) { setError("Mets ton email — promis, 1 clic pour unsub."); return; }
    if (!validate(email)) { setError("Cet email a l'air cassé. Check-le."); return; }
    setStatus('loading');
    try {
      const res = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      const data = await res.json();
      if (!res.ok || !data.ok) {
        setStatus('idle');
        setError(data.error || "Erreur. Réessaie dans 10 sec.");
        return;
      }
      if (data.pdfUrl) setPdfUrl(data.pdfUrl);
      setStatus('success');
    } catch (err) {
      setStatus('idle');
      setError("Réseau capricieux. Réessaie.");
    }
  };

  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });

    const scan = () => document.querySelectorAll('.reveal:not(.in)').forEach(el => io.observe(el));
    scan();
    const t = setTimeout(scan, 400);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);

  const formProps = { onSubmit: handleSubmit, status, email, setEmail, error, pdfUrl };

  return (
    <div id="top">
      <TopBar/>
      <Hero {...formProps}/>
      <Ticker/>
      <Echecs/>
      <Benefices/>
      <HowItWorks/>
      <AvantApres/>
      <PromptsSample/>
      <Temoignages/>
      <Auteur/>
      <Faq/>
      <CtaFinal {...formProps}/>
    </div>
  );
};

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