// FAQSection — accordion
function FAQSection() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "J'ai peur que ce ne soit pas assez concret.", a: "Pour moi, ces outils ne sont pas abstraits. Ce sont des outils de connaissance de soi, hyper concrets et précis, que tu pourras appliquer directement à ta vie et à ton business lorsqu'on échangera ensemble. Le but, c'est que tu ne sois pas dans le flou. Bien au contraire : c'est que tu repartes avec plus de clarté sur ton fonctionnement, ton énergie, la meilleure manière pour toi de prendre tes décisions — et surtout comment t'en servir dans ton quotidien et notamment dans ton business." },
    { q: "Faut-il croire en ces outils pour que ça fonctionne ?", a: "Non. Tu n'as pas besoin d'y croire à 100 %, juste de venir avec un minimum d'ouverture d'esprit. Beaucoup de femmes arrivent curieuses et un peu sceptiques — et repartent surprises de se reconnaître autant." },
    { q: "Est-ce que c'est de la voyance ? Tu vas me prédire l'avenir ?", a: "Non, je ne prédis rien. Je ne te dis pas ce qui va t'arriver, ni ce que tu dois faire. Je t'éclaire sur qui tu es et comment tu fonctionnes — ensuite, c'est toi qui décides. Tu gardes toujours ton libre arbitre." },
    { q: "En quoi est-ce différent d'un thème astral que je trouve en ligne ?", a: "Un thème gratuit te donne des infos brutes, souvent génériques et difficiles à relier à ta vie à toi. Moi, je mets beaucoup d'importance à ce que tu repartes non seulement avec les informations, mais surtout avec la façon de les intégrer concrètement dans ta vie — en personnalisant la lecture pour toi, ta situation et là où tu en es." },
    { q: "Et si je ne suis pas entrepreneuse ?", a: "Aucun souci. Même si j'adore appliquer ces outils au business, ils servent tous les aspects de ta vie : tes relations, tes choix, ta façon de gérer ton énergie. Tu en repars avec une meilleure connaissance de toi, quel que soit ton chemin." },
    { q: "Avec quoi je repars concrètement ?", a: "Pendant l'appel de 90 min, on fait ta lecture en direct et tu peux poser toutes tes questions. Et dans les 48h, tu reçois un récap complet de notre échange, pour pouvoir t'y replonger dès que tu en as besoin. Tu ne repars jamais les mains vides." },
    { q: "Que me faut-il comme information pour réserver ?", a: "Ta date, ton heure et ton lieu de naissance — c'est la base pour préparer ta lecture. Je te précise tout au moment de la réservation." },
    { q: "Combien de temps après la réservation a lieu notre appel ?", a: "En général sous 7 jours ouvrés, selon mes disponibilités." },
    { q: "Je peux offrir la lecture en cadeau ?", a: "Oui, avec plaisir — c'est un super cadeau à offrir à une femme que tu aimes. Contacte-moi directement et on organise ça ensemble." },
  ];
  return (
    <section id="faq" className="mi-section">
      <div className="mi-section__head">
        <h2>FAQ</h2>
      </div>
      <div className="mi-faq__cols" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: '0 56px', maxWidth: '1060px', margin: '0 auto', alignItems: 'start' }}>
        {(() => { const half = Math.ceil(items.length / 2); return [items.slice(0, half), items.slice(half)].map((col, c) => (
          <div key={c} className="mi-faq__list">
            {col.map((it, j) => { const i = c === 0 ? j : half + j; return (
              <details key={i} open={open === i} onClick={(e) => { e.preventDefault(); setOpen(open === i ? -1 : i); }}>
                <summary>
                  <span>{it.q}</span>
                  <span className="mi-faq__icon">{open === i ? '−' : '+'}</span>
                </summary>
                <p>{it.a}</p>
              </details>
            ); })}
          </div>
        )); })()}
      </div>
    </section>
  );
}

Object.assign(window, { FAQSection });