// FAQ
function Faq() {
  const items = [
    {
      q: "Comment fonctionne l'essayage virtuel ?",
      a: "Tu prends une photo de toi en pied (ou tu importes une photo existante). Myrrae apprend ta silhouette et applique chaque pièce dessus en photoréaliste. Le rendu est généré en quelques secondes par notre modèle d'IA, calibré sur des milliers de mesures de tailles réelles.",
    },
    {
      q: "Mes photos restent-elles privées ?",
      a: "Oui — tes photos sont chiffrées de bout en bout et ne sont jamais utilisées pour entraîner nos modèles. Tu peux les supprimer à tout moment depuis l'application.",
    },
    {
      q: "Combien coûte l'application ?",
      a: "Myrrae propose une version gratuite qui donne accès à l'essayage virtuel et au styliste IA, avec certaines limites. Tu peux acheter des crédits d'essayage virtuel supplémentaires à l'unité, et l'abonnement Premium débloque toutes les fonctionnalités en illimité. Dans tous les cas, nous sommes rémunérés par les marques partenaires lorsqu'un achat est conclu.",
    },
    {
      q: "Le styliste IA, c'est vraiment personnalisé ?",
      a: "Oui. Tu réponds à trois questions au début, puis chaque interaction affine ton profil de style. Le styliste connaît tes marques préférées, ta palette, ta morphologie et tes occasions habituelles (boulot, soirée, weekend).",
    },
    {
      q: "J'achète directement dans l'app ?",
      a: "Tu es redirigée vers le site officiel de la marque, avec ta taille pré-sélectionnée. Tu profites des promos et des points fidélité de la marque comme d'habitude. Myrrae ne prend aucun intermédiaire, ne stocke ni ne livre.",
    },
    {
      q: "Et si la pièce ne me va pas en vrai ?",
      a: "Ça arrivera moins souvent — nos utilisateurs retournent jusqu'à 70 % de pièces en moins qu'avant. Mais si ça arrive, tu retournes la pièce directement à la marque selon ses conditions habituelles (Myrrae n'intervient pas).",
    },
  ];

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

  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div>
            <div className="section-meta">
              <div className="section-num"><em style={{fontStyle:'italic'}}>vii</em></div>
              <div className="section-label">Questions<span className="dot"></span>Souvent posées</div>
            </div>
            <h2>
              Tout ce que tu veux savoir,
              <br />
              <em>avant</em> de cliquer.
            </h2>
            <p className="lede">
              Si tu as une question plus précise, écris-nous. Une vraie personne
              te répond en moins de 24 h.
            </p>
            <a className="contact" href="contact.html">
              Nous contacter
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
          </div>

          <div className="faq-list">
            {items.map((it, i) => (
              <details
                key={i}
                className="faq-item"
                open={i === open}
                onToggle={(e) => { if (e.target.open) setOpen(i); }}
              >
                <summary>
                  {it.q}
                  <span className="plus">+</span>
                </summary>
                <div className="body">{it.a}</div>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;