function Faq() {
  const items = [
    { q: "Combien de temps prend la conception d'un site ?", a: "Selon la complexité, comptez entre 4 et 12 semaines. On travaille par sprints courts pour te montrer du progrès chaque semaine. Au besoin, nous pouvons augmenter la cadence et les ressources pour une livraison rapide en cas d'urgence." },
    { q: "Sur quels outils développez-vous ?", a: "De base, tu obtiens un site entièrement codé sur-mesure pour des performances optimales. Cependant, selon tes besoins, nous concevons et adaptons nos solutions sur toutes les plateformes existantes (CMS, e-commerce, no-code...)." },
    { q: "Proposez-vous une maintenance après le lancement ?", a: "Oui. Nos forfaits d'infogérance couvrent l'hébergement, les mises à jour de sécurité, les sauvegardes, le monitoring 24/7 et un quota d'évolutions mensuelles." },
    { q: "Travaillez-vous seulement avec des entreprises ou aussi avec des particuliers ?", a: "Nous accompagnons aussi bien les entreprises que les particuliers (freelances, indépendants, porteurs de projet). De plus, nous développons pour des clients partout dans le monde. Le distanciel est notre quotidien et nous sommes habitués à collaborer à l'international." },
    { q: "Mon site existant peut-il être repris et amélioré ?", a: "Absolument. On commence par un audit technique et UX gratuit, puis on définit ensemble la trajectoire la plus pragmatique : refonte totale, refonte progressive, ou simple optimisation." },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="faq" data-screen-label="06 FAQ">
      <div className="container">
        <div className="reveal">
          <div className="section-eyebrow">QUESTIONS FRÉQUENTES</div>
          <h2 className="section-title">Tout ce que tu dois savoir<br />avant de démarrer</h2>
        </div>
        <div className="faq-wrap">
          {items.map((it, i) => (
            <div key={i} className="reveal" style={{ transitionDelay: `${i * 0.05}s` }}>
              <div
                className={`faq-item${open === i ? " open" : ""}`}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <div className="faq-q">
                  <span>{it.q}</span>
                  <span className="faq-toggle"><Icon.Plus /></span>
                </div>
                <div className="faq-a">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;