// FAQ — accordion
const { useState: useStateF } = React;

const faqStyles = {
  wrap: { padding: '140px 0', borderBottom: '1px solid var(--line)' },
  inner: { display: 'grid', gridTemplateColumns: '.8fr 1.2fr', gap: 80 },
  left: { position: 'sticky', top: 120, alignSelf: 'start' },
  title: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 72, lineHeight: 0.95, letterSpacing: '-0.02em',
    margin: 0, marginBottom: 24,
  },
  sub: { fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.55, maxWidth: 360 },
  list: { borderTop: '1px solid var(--line)' },
  item: { borderBottom: '1px solid var(--line)' },
  q: {
    width: '100%', textAlign: 'left',
    padding: '22px 0',
    display: 'flex', justifyContent: 'space-between', gap: 24, alignItems: 'flex-start',
    fontSize: 19, lineHeight: 1.35,
    color: 'var(--ink)', fontFamily: "'Instrument Serif', serif", letterSpacing: '-0.01em',
  },
  icon: {
    flexShrink: 0,
    width: 28, height: 28, borderRadius: 999,
    border: '1px solid var(--line-2)',
    display: 'grid', placeItems: 'center',
    transition: 'transform .3s ease, background .3s ease, color .3s ease',
    fontFamily: "'JetBrains Mono', monospace", fontSize: 14,
    color: 'var(--ink-2)', marginTop: 4,
  },
  iconOpen: { background: 'var(--accent)', color: 'var(--accent-fg)', borderColor: 'var(--accent)', transform: 'rotate(45deg)' },
  a: {
    overflow: 'hidden', transition: 'max-height .35s ease, padding .35s ease',
    fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)',
  },
};

const FAQS = [
  { q: 'Qu\'est-ce qu\'un modèle PPL (Pay Per Lead) ?', a: 'Vous ne payez que pour un prospect qualifié : il a manifesté un intérêt pour votre service, se trouve dans votre zone de chalandise et a rempli un formulaire complet pour être recontacté. Pas de clics, pas d\'impressions, pas de leads fantômes.' },
  { q: 'Y a-t-il un volume minimum ou un engagement ?', a: 'Non. Vous démarrez avec le volume que vous voulez, vous pouvez baisser, monter ou arrêter chaque mois. Le tarif dégressif se recalcule automatiquement selon le volume commandé.' },
  { q: 'Comment sont livrés les leads ?', a: 'Par webhook dans votre CRM (Hubspot, Salesforce, Pipedrive…), par Zapier, par API dédiée, ou tout simplement dans une Google Sheet partagée. Mise en place sous 48h en moyenne.' },
  { q: 'Que se passe-t-il si un lead est de mauvaise qualité ?', a: 'Vous disposez de 72h pour signaler un lead non conforme (coordonnées fausses, hors zone, hors intérêt). Il est recrédité sans discussion.' },
  { q: 'Vos leads sont-ils exclusifs ?', a: 'Oui. Chaque lead est livré à un seul client. Aucun partage avec des concurrents, aucune revente.' },
  { q: 'Quels sont les secteurs couverts ?', a: 'BTP, immobilier, assurance, santé, éducation/formation, énergie, automobile. Pour un secteur non listé, on étudie la faisabilité sous 48h.' },
  { q: 'Combien de temps pour démarrer une campagne ?', a: 'Généralement 5 jours ouvrés entre l\'onboarding et les premiers leads livrés : brief secteur, validation du formulaire qualifiant, mise en place des intégrations, test de livraison.' },
];

function FAQ() {
  const [open, setOpen] = useStateF(0);
  return (
    <section id="faq" style={faqStyles.wrap} className="section-pad">
      <div className="wrap faq-inner" style={faqStyles.inner}>
        <div style={faqStyles.left} className="faq-left">
          <div className="eyebrow" style={{marginBottom: 20}}>FAQ</div>
          <h2 style={faqStyles.title} className="h-display-2">
            Les questions<br/><span className="serif italic">récurrentes</span>.
          </h2>
          <p style={faqStyles.sub}>
            Si la réponse n'est pas ici, l'équipe répond par WhatsApp en moins d'une heure ouvrée.
          </p>
        </div>
        <div style={faqStyles.list}>
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={faqStyles.item}>
                <button style={faqStyles.q} onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span>{f.q}</span>
                  <span style={{...faqStyles.icon, ...(isOpen ? faqStyles.iconOpen : {})}}>+</span>
                </button>
                <div style={{...faqStyles.a, maxHeight: isOpen ? 200 : 0, paddingBottom: isOpen ? 22 : 0}}>
                  {f.a}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });