// FAQ.jsx — accordéon de questions fréquentes.

const faqStyles = {
  section: { padding: '96px 0', background: 'var(--paper-200)', position: 'relative', overflow: 'hidden' },
  pattern: {
    position: 'absolute',
    inset: 0,
    backgroundImage: 'url("08_assets-marque/design-system/assets/section-FAQ-background.jpeg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    opacity: 0.10,
    pointerEvents: 'none',
  },
  grid: {
    position: 'relative',
    display: 'grid',
    gridTemplateColumns: '1fr 1.4fr',
    gap: 80,
    alignItems: 'flex-start',
  },
  h2: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontWeight: 600,
    fontSize: 'clamp(36px, 4.2vw, 52px)',
    lineHeight: 1.05,
    letterSpacing: '-0.022em',
    margin: '0 0 16px',
    color: 'var(--ink-900)',
  },
  intro: { fontSize: 16, lineHeight: 1.55, color: 'var(--mist-700)' },
  list: {
    display: 'flex',
    flexDirection: 'column',
    borderTop: '1px solid rgba(42, 26, 7,.14)',
  },
  item: {
    borderBottom: '1px solid rgba(42, 26, 7,.14)',
    padding: '22px 0',
  },
  q: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: 24,
    cursor: 'pointer',
    background: 'none',
    border: 'none',
    width: '100%',
    padding: 0,
    textAlign: 'left',
    fontFamily: "'Space Grotesk', sans-serif",
    fontSize: 19,
    fontWeight: 500,
    color: 'var(--ink-900)',
    letterSpacing: '-0.005em',
  },
  a: {
    fontSize: 15.5,
    lineHeight: 1.6,
    color: 'var(--mist-700)',
    marginTop: 14,
    maxWidth: 640,
  },
  toggle: {
    width: 36,
    height: 36,
    border: '1px solid var(--ink-900)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
    background: 'transparent',
    color: 'var(--ink-900)',
  },
};

const FAQS = [
  {
    q: 'Combien ça coûte ?',
    a: 'Trois forfaits : Pilote (1 500 – 3 500 $, 1-2 semaines) pour valider la valeur sur un processus précis ; Réalisation (6 000 – 12 000 $, 2-4 semaines) pour le système complet ; Abonnement (1 500 – 4 000 $/mois) pour la maintenance et l\'amélioration continue. Devis personnalisé après l\'appel de découverte.',
  },
  {
    q: 'À qui appartient le code ?',
    a: 'À vous. À la livraison, vous recevez le code source complet, la documentation et une formation pour votre équipe. Vous pouvez l\'héberger vous-même, le faire évoluer en interne, ou nous confier la maintenance via un abonnement — sans dépendance forcée.',
  },
  {
    q: 'Sur quels modèles d\'IA travaillez-vous ?',
    a: 'Principalement l\'API Claude d\'Anthropic, pour sa fiabilité et son rapport qualité-coût. On s\'adapte selon vos contraintes de budget, de confidentialité ou d\'infrastructure existante.',
  },
  {
    q: 'Sommes-nous admissibles aux subventions IA du Québec ?',
    a: 'Plusieurs de nos projets sont potentiellement admissibles à des programmes de soutien à l\'adoption du numérique et de l\'IA au Québec, pouvant couvrir une part importante du coût. On évalue votre admissibilité gratuitement et on vous accompagne dans la démarche — sans garantie de pourcentage avant validation.',
  },
  {
    q: 'Travaillez-vous avec des entreprises qui ne sont pas dans la tech ?',
    a: 'Oui — c\'est notre cœur de cible : services professionnels, construction, agences, manufacturiers sur devis. Si une tâche est répétitive et qu\'elle pourrait se résumer en checklist, un agent peut probablement la faire.',
  },
  {
    q: 'Combien de temps avant de voir des résultats ?',
    a: 'Le Pilote livre un prototype fonctionnel en 1-2 semaines. La Réalisation complète est livrée en 2-4 semaines. Vous mesurez les heures récupérées avant et après — pas des promesses, des chiffres.',
  },
];

const FAQItem = ({ q, a, open, onToggle, idx }) => (
  <div style={faqStyles.item}>
    <button
      style={faqStyles.q}
      onClick={onToggle}
      aria-expanded={open}
      aria-controls={`faq-panel-${idx}`}
      id={`faq-button-${idx}`}
    >
      <span>{q}</span>
      <span style={faqStyles.toggle} aria-hidden="true"><Icon name={open ? 'minus' : 'plus'} size={16} /></span>
    </button>
    <div
      className={'b2a-faq-panel' + (open ? ' open' : '')}
      id={`faq-panel-${idx}`}
      role="region"
      aria-labelledby={`faq-button-${idx}`}
    >
      <div><div style={faqStyles.a}>{a}</div></div>
    </div>
  </div>
);

const FAQ = () => {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section style={faqStyles.section} id="faq">
      <div style={faqStyles.pattern} />
      <div className="b2a-container b2a-grid-2" style={faqStyles.grid}>
        <div>
          <p className="b2a-eyebrow">// 04 — FAQ</p>
          <h2 style={faqStyles.h2}>Questions fréquentes.</h2>
          <p style={faqStyles.intro}>
            Vous ne trouvez pas votre réponse ? Écrivez à{' '}
            <a className="b2a-link" href="mailto:hello@theb2atek.com">hello@theb2atek.com</a> — réponse généralement le jour même.
          </p>
        </div>
        <div style={faqStyles.list} className="b2a-reveal">
          {FAQS.map((f, i) => (
            <FAQItem
              key={i}
              idx={i}
              q={f.q}
              a={f.a}
              open={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;