'use client'

import { useState } from 'react'

const COMING_SOON = [
  'Agent IA — parcours sur mesure fondé sur les alumni',
  'Calendrier de recrutement avec alertes email',
  'Cours de finance quantitative (calcul stochastique, ML…)',
  'Sessions 1-on-1 avec des professionnels en poste',
]

export function CtaSection() {
  const [email, setEmail] = useState('')
  const [submitted, setSubmitted] = useState(false)

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!email) return
    // TODO: POST vers /api/waitlist/ Django
    setSubmitted(true)
  }

  return (
    <section className="section-cta" id="inscription">
      <div className="cta-inner">
        <div>
          <h2 className="cta-title">
            Restez informé des<br /><em>prochaines fonctionnalités</em>
          </h2>
          <p className="cta-desc">
            Le classement est entièrement gratuit et accessible à tous. Inscrivez-vous
            pour être notifié en avant-première des nouvelles fonctionnalités.
          </p>
          <div className="cta-includes" style={{ marginTop: '1.5rem' }}>
            {COMING_SOON.map((item) => (
              <div key={item} className="cta-include-item">{item}</div>
            ))}
          </div>
        </div>

        <div className="cta-form-wrap">
          {submitted ? (
            <p style={{ color: 'var(--gold-mid)', fontFamily: 'var(--mono)', fontSize: '0.8rem', letterSpacing: '0.06em' }}>
              ✓ Inscription confirmée — nous vous tiendrons informé
            </p>
          ) : (
            <form className="cta-form" onSubmit={handleSubmit}>
              <input
                type="email"
                className="cta-email"
                placeholder="votre@email.fr"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
              <button type="submit" className="cta-btn">Me tenir informé →</button>
            </form>
          )}
          <p className="cta-note">Conforme RGPD · Pas de carte bancaire · Résiliable à tout moment</p>
        </div>
      </div>
    </section>
  )
}