// Hero: playful headline + kinetic brain + live signup
const Hero = ({ onSubmit, status, email, setEmail, error, pdfUrl }) => {
  const [count, setCount] = React.useState(47);
  React.useEffect(() => {
    const iv = setInterval(() => setCount(c => Math.random() > 0.85 ? c + 1 : c), 4200);
    return () => clearInterval(iv);
  }, []);

  return (
    <section className="hero">
      <div className="shell">
        <div className="hero-top">
          <div className="live"><span className="d"/> {count} entrepreneurs TDAH rejoints cette semaine 🎉</div>
          <div>FR · 2026 · Vol. 01</div>
        </div>

        <div className="hero-grid">
          <div>
            <div className="eyebrow reveal in" style={{marginBottom:24}}>Pour entrepreneur TDAH (et cerveaux qui carburent)</div>
            <h1 className="hero-title display reveal in">
              <span className="line">Ton cerveau</span>
              <span className="line">fait <span className="highlight">180 km/h.</span></span>
              <span className="line"><span className="strike">Ta to-do list</span></span>
              <span className="line"><span className="wave">suit pas.</span></span>
            </h1>
            <p className="hero-lede reveal in reveal-delay-1">
              <strong>50 prompts IA</strong> pour déléguer à Claude &amp; ChatGPT tout ce que
              ton cerveau TDAH déteste&nbsp;: admin, plannings, décisions, rédaction, reporting.
              Livré dans ta boîte mail en 2 minutes ✨
            </p>

            <form className="form-row reveal in reveal-delay-2" onSubmit={onSubmit}>
              <input
                type="email"
                placeholder="ton@email.com"
                value={email}
                onChange={e => setEmail(e.target.value)}
                aria-label="Ton email"
                disabled={status === 'success'}
              />
              <button type="submit" disabled={status === 'loading' || status === 'success'}>
                {status === 'loading' ? 'Envoi…' : status === 'success' ? '✓ Envoyé' : 'Je récupère mes 50 prompts'}
                <span>→</span>
              </button>
            </form>
            {error && <div className="form-hint"><span className="form-error">⚠ {error}</span></div>}
            {status === 'success' && (
              <div className="form-success reveal in" style={{marginTop:16}}>
                🎉 Check ta boîte mail (et les spams).
                {pdfUrl && (
                  <div style={{marginTop:12}}>
                    <a href={pdfUrl} target="_blank" rel="noopener" style={{display:'inline-block',padding:'12px 22px',background:'#1B1840',color:'#FFF8EC',borderRadius:999,fontWeight:800,textDecoration:'none',border:'2px solid #1B1840',boxShadow:'4px 4px 0 0 #FF5A4A'}}>
                      📥 Ou télécharge maintenant
                    </a>
                  </div>
                )}
              </div>
            )}
            {status !== 'success' && (
              <div className="form-hint">
                <span className="chip">🔒 RGPD</span>
                <span className="chip">✉️ Zéro spam</span>
                <span className="chip">👋 Unsub 1 clic</span>
              </div>
            )}
          </div>

          <div className="hero-right reveal in reveal-delay-3">
            <BrainViz />
          </div>
        </div>
      </div>
    </section>
  );
};

const BrainViz = () => {
  return (
    <div className="brain">
      <div className="brain-ring" />
      <div className="brain-stage">
        <div className="brain-inner">
          <svg className="brain-svg" viewBox="0 0 200 200">
            <path d="M100 20 C60 20, 30 50, 30 90 C30 110, 40 125, 55 135 C55 155, 75 175, 100 175 C125 175, 145 155, 145 135 C160 125, 170 110, 170 90 C170 50, 140 20, 100 20 Z"/>
            <path d="M100 20 L100 175" opacity=".4"/>
            <path d="M70 45 C80 55, 75 70, 60 75 M60 90 C75 95, 80 110, 65 120 M75 145 C85 140, 90 155, 80 165" opacity=".6"/>
            <path d="M130 45 C120 55, 125 70, 140 75 M140 90 C125 95, 120 110, 135 120 M125 145 C115 140, 110 155, 120 165" opacity=".6"/>
            <path className="spark" d="M55 60 Q100 80, 145 60"/>
            <path className="spark" d="M50 110 Q100 130, 150 110" style={{animationDelay:'.5s'}}/>
            <path className="spark" d="M70 155 Q100 145, 130 155" style={{animationDelay:'1s'}}/>
          </svg>
        </div>

        <div className="speedo">
          180<small>km/h, sérieux</small>
        </div>
      </div>

      <div className="brain-thought t1">💡 idée startup #23</div>
      <div className="brain-thought t2">!! répondre à Paul</div>
      <div className="brain-thought t3">→ relancer factures</div>
      <div className="brain-thought t4">refondre le site ?</div>
      <div className="brain-thought t5">acheter courses</div>
      <div className="brain-thought t6">poster sur TikTok ?</div>
    </div>
  );
};

window.Hero = Hero;