const { useState: useStateF } = React;

function FAQ() {
  const [open, setOpen] = useStateF(0);
  const items = [
    {
      q: "Quel investissement faut-il prévoir pour une infrastructure de croissance IA ?",
      a: "Nous ne parlons pas d'un outil isolé, mais d'une infrastructure complète adaptée à votre entreprise. L'investissement dépend de votre volume d'activité, de vos objectifs et du niveau de déploiement choisi. Lors de l'appel stratégique, nous définissons un plan précis, structuré et cohérent avec votre potentiel de croissance.",
    },
    {
      q: "Quel est mon rôle dans la mise en place ?",
      a: "Votre rôle est stratégique. Nous vous accompagnons dans un onboarding structuré pour comprendre vos offres, vos marges, votre zone et votre organisation actuelle. Ensuite, nous déployons l'infrastructure technique de notre côté. Vous restez concentré sur vos chantiers, nous structurons la croissance.",
    },
    {
      q: "En combien de temps l'infrastructure est-elle opérationnelle ?",
      a: "Le déploiement initial est rapide. Mais une infrastructure de croissance ne s'installe pas seulement, elle se structure et s'optimise. Les premières activations sont visibles rapidement, puis nous consolidons les performances pour rendre vos résultats prévisibles.",
    },
    {
      q: "Quelle garantie proposez-vous ?",
      a: "Notre modèle est simple : votre croissance valide notre travail. Nous nous engageons sur une logique de performance et d'optimisation continue. Nous construisons sur le long terme, dans une relation basée sur la confiance et les résultats.",
    },
    {
      q: "Comment suivez-vous les performances ?",
      a: "Nous suivons des indicateurs clairs : nombre de leads générés, rendez-vous obtenus et résultats concrets. Vous savez exactement ce que le système vous rapporte, et nous optimisons en continu pour améliorer les performances.",
    },
    {
      q: "Est-ce que l'IA relance aussi les emails ?",
      a: "Oui. L'IA peut relancer automatiquement par email, SMS, WhatsApp ou appel vocal. Chaque prospect est suivi intelligemment pour éviter toute perte d'opportunité.",
    },
    {
      q: "Est-ce que je dois gérer le système moi-même ?",
      a: "Non. Le système fonctionne de manière autonome. Votre seule mission est de traiter les rendez-vous qualifiés et signer vos clients.",
    },
  ];

  return (
    <section className="section" data-screen-label="07 FAQ" id="faq">
      <div className="reveal">
        <div className="eyebrow"><span className="num">/05</span><span className="bar"></span>FAQ</div>
        <h2 className="section-title">Les questions <span className="italic">fréquentes.</span></h2>
        <p className="section-lede">Voici ce que tout le monde veut savoir avant de démarrer.</p>
      </div>

      <div className="faq-list">
        {items.map((it, i) => (
          <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="faq-q-num">{String(i+1).padStart(2, '0')}</span>
              <span className="faq-q-text">{it.q}</span>
              <span className="faq-q-icon">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M7 1V13M1 7H13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                </svg>
              </span>
            </button>
            <div className="faq-a">
              <div className="faq-a-inner">{it.a}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.FAQ = FAQ;