import { Eyebrow } from "@rubis/ui";

const FAQS: Array<{ q: string; a: React.ReactNode }> = [
  {
    q: "Et si mon client paie hors plateforme — comment Rubis le sait ?",
    a: (
      <>
        Avant chaque relance, Rubis vous envoie un email rapide :{" "}
        <i>« Avez-vous été payé pour la facture F-2024-0042 ? »</i> avec deux boutons. Vous
        cliquez "Oui" en 3 secondes, le plan s'arrête. Vous cliquez "Non" (ou ne répondez pas),
        la relance part comme prévu. Vous configurez la cadence et le timing de ces
        vérifications dans vos plans.
      </>
    ),
  },
  {
    q: "Mes factures et données restent-elles privées ?",
    a: (
      <>
        Évidemment. Hébergement français, conforme RGPD. Vos PDF sont stockés chiffrés. Aucune
        donnée n'est partagée avec des tiers. Vous pouvez exporter ou supprimer vos données à
        tout moment.
      </>
    ),
  },
  {
    q: "Puis-je personnaliser le contenu des emails ?",
    a: (
      <>
        Oui, dès le plan Pro. Tous les emails sont des templates avec variables (
        <code className="bg-cream-2 px-1.5 py-0.5 rounded text-[13px]">{"{{prenom_client}}"}</code>,{" "}
        <code className="bg-cream-2 px-1.5 py-0.5 rounded text-[13px]">{"{{numero}}"}</code>,{" "}
        <code className="bg-cream-2 px-1.5 py-0.5 rounded text-[13px]">{"{{montant}}"}</code>…).
        Vous pouvez réécrire chaque étape, ajuster le ton, ajouter votre signature email et
        votre logo.
      </>
    ),
  },
  {
    q: "Mes clients verront-ils que j'utilise Rubis ?",
    a: (
      <>
        Pas vraiment. En plan <b>Pro</b>, vos clients voient <b>votre nom</b> en grand comme
        expéditeur, et quand ils cliquent « Répondre », leur message revient directement sur{" "}
        <b>votre email</b>. Aucun pied de page ne mentionne Rubis. Suffisant pour 95 % des
        freelances et TPE.
        <br />
        <br />
        En plan <b>Business</b>, on va plus loin : vos emails partent vraiment depuis{" "}
        <b>votre propre adresse</b> (
        <code className="bg-cream-2 px-1.5 py-0.5 rounded text-[13px]">
          compta@votre-entreprise.fr
        </code>
        ). Personne ne devine que vous utilisez un outil, et vos relances atterrissent{" "}
        <b>mieux en boîte principale</b> plutôt qu'en spam ou en promotions — gain typique de 10
        à 15 % sur le taux d'ouverture.
      </>
    ),
  },
  {
    q: "Et si je veux relancer manuellement, sans plan ?",
    a: (
      <>
        Toujours possible. Sur n'importe quelle facture, vous avez un bouton "Relancer
        maintenant" qui envoie un email immédiat. Pratique quand vous venez d'avoir le client au
        téléphone et qu'il vous a demandé un récapitulatif.
      </>
    ),
  },
  {
    q: "Et la mise en demeure, elle part toute seule ?",
    a: (
      <>
        Non. Jamais. C'est une décision produit forte : la mise en demeure a des conséquences
        légales et relationnelles importantes. Rubis prépare le brouillon à l'étape prévue de
        votre plan, vous notifie, et c'est <b>vous</b> qui cliquez "Envoyer" sur une modale de
        confirmation. Vous gardez la main sur le moment où le ton change vraiment.
      </>
    ),
  },
  {
    q: "Combien de temps pour démarrer ?",
    a: (
      <>
        Inscription en 30 secondes. Configuration de votre signature email et de votre première
        facture en 5 minutes. La première relance peut partir dans la foulée. Si vous avez un
        plan par défaut bien configuré, créer une nouvelle facture en relance prend{" "}
        <b>2 clics</b>.
      </>
    ),
  },
  {
    q: 'Pourquoi cette histoire de "rubis" ?',
    a: (
      <>
        Parce que les chiffres comptables (DSO, taux de recouvrement, AR aging) ne réveillent
        personne le matin. Le temps gagné, oui. <b>1 rubis = 10 minutes libérées</b> = 1 relance
        que vous n'avez pas eu à écrire. À la fin du mois, vous voyez "124 rubis ≈ 24 h 48".
        C'est concret. Et c'est plus fun que de regarder un graphique de courbes.
      </>
    ),
  },
];

export function FAQ() {
  return (
    <section id="faq" className="bg-cream-2 border-y border-line">
      <div className="max-w-[760px] mx-auto px-5 sm:px-8 py-20 lg:py-24">
        <div className="text-center mb-12">
          <Eyebrow>Questions fréquentes</Eyebrow>
          <h2 className="mt-4 font-display font-bold text-ink leading-[1.1] tracking-[-0.025em] text-[34px] sm:text-[44px]">
            Vous vous demandez sûrement…
          </h2>
        </div>

        <div className="space-y-2">
          {FAQS.map(({ q, a }, i) => (
            <details
              key={i}
              className="group bg-white border border-line rounded-card overflow-hidden hover:border-ink-3 transition-colors"
            >
              <summary className="px-6 py-5 cursor-pointer list-none flex items-start justify-between gap-4 font-display font-semibold text-[16.5px] text-ink tracking-[-0.012em] leading-snug select-none [&::-webkit-details-marker]:hidden">
                {q}
                <span
                  aria-hidden
                  className="flex-shrink-0 size-7 rounded-full bg-cream-2 border border-line flex items-center justify-center text-ink-2 group-open:rotate-45 transition-transform"
                >
                  +
                </span>
              </summary>
              <div className="px-6 pb-6 -mt-1 text-[15.5px] leading-relaxed text-ink-2">{a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}
