const Faq = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: "C'est vraiment gratuit ?",
      a: "Oui ! Tu donnes ton email, tu reçois le PDF. Zéro carte bancaire, zéro période d'essai qui se transforme en abonnement. Désinscription en 1 clic si ça te gonfle."
    },
    {
      q: "Je vais recevoir du spam après ?",
      a: "5 emails sur 10 jours avec des conseils concrets pour entrepreneurs TDAH, puis 1 email par mois max. Si tu n'en veux plus : 1 clic, c'est fini. Je garde pas des gens qui veulent partir."
    },
    {
      q: "Je ne suis pas diagnostiqué TDAH, ça marche quand même ?",
      a: "Oui. Si tu te disperses, sur-réfléchis, procrastines, ou veux déléguer à l'IA ce que tu fais mal — c'est pour toi. Pas besoin de diagnostic. Ce PDF n'est pas un outil médical."
    },
    {
      q: "Je débute en IA, c'est accessible ?",
      a: "Chaque prompt est prêt à copier-coller dans Claude ou ChatGPT (versions gratuites incluses). Aucun setup technique, aucune API, aucun abonnement. Si tu sais ouvrir un onglet, tu sais t'en servir."
    },
    {
      q: "C'est compatible avec mon outil IA préféré ?",
      a: "Claude, ChatGPT, Mistral, Gemini, Perplexity — les prompts sont agnostiques. Ils marchent partout où tu peux coller du texte."
    },
    {
      q: "Combien de temps pour les mettre en place ?",
      a: "2 minutes pour recevoir le PDF. 5 minutes pour trouver les 3 prompts qui vont changer ta semaine. Jour 1 : tu gagnes déjà 2 heures."
    },
  ];

  return (
    <section className="faq" data-screen-label="09 FAQ">
      <div className="shell">
        <div className="section-label"><span className="num">§ 08</span><span>les questions qui reviennent</span></div>

        <h2 className="reveal">
          On répond à tout<br/>
          <span className="hand">(sans langue de bois).</span>
        </h2>

        <div className="faq-list">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''} reveal`} key={i} style={{transitionDelay:`${i*60}ms`}}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-q-mark">+</span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Faq = Faq;