/* ===== FAQ — Page dédiée · sections Famille + Étudiant ===== */

const FAQPage = () => {
  // Lecture de l'onglet initial depuis l'URL : #faq?tab=etudiants
  const initialTab = (() => {
    const raw = (location.hash || '').slice(1);
    const q = raw.split('?')[1] || '';
    const tab = new URLSearchParams(q).get('tab');
    return tab === 'etudiants' ? 'etudiants' : 'famille';
  })();

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

  // Re-syncroniser si l'URL change (clic sur le banner depuis Home)
  React.useEffect(() => {
    const onHash = () => {
      const raw = (location.hash || '').slice(1);
      const q = raw.split('?')[1] || '';
      const t = new URLSearchParams(q).get('tab');
      if (t === 'etudiants' || t === 'famille') {
        setTab(t);
        setOpen(0);
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Quand on change d'onglet, ouvrir la 1re question, mettre à jour l'URL
  const switchTab = (t) => {
    setTab(t);
    setOpen(0);
    history.replaceState(null, '', `#faq?tab=${t}`);
  };

  const itemsFamille = [
    {
      cat: "Sécurité",
      q: "Est-ce sécuritaire de laisser un étudiant seul avec mon parent ?",
      a: (
        <>
          <p>
            Nous prenons cette question très au sérieux. Nos intervenants sont des
            étudiants en <strong>santé ou service social</strong> (soins infirmiers,
            réadaptation, travail social, soins préhospitaliers) issus des
            établissements de la Capitale-Nationale&nbsp;: <strong>Université Laval</strong>
            (Pavillon Ferdinand-Vandry), <strong>Cégep Garneau</strong>,
            <strong> Cégep de Sainte-Foy</strong> et <strong>Cégep Limoilou</strong>.
            Ils ont déjà <strong>choisi de prendre soin</strong> comme métier.
          </p>
          <p>
            Avant la première visite, chaque étudiant passe par un parcours
            d'accréditation en 3 étapes&nbsp;: <strong>vérification Sterling
            Backcheck</strong> (identité par reconnaissance faciale, casier
            judiciaire pour secteurs vulnérables, validation académique auprès de
            l'établissement), certification RCR / Premiers soins valide, et
            formation Loi 25 sur la confidentialité. Aucun étudiant n'est activé
            tant que ces étapes ne sont pas validées.
          </p>
        </>
      )
    },
    {
      cat: "Finances",
      q: "Comment fonctionne le crédit d'impôt de 40 % ?",
      a: (
        <>
          <p>
            Le <strong>Crédit d'impôt pour maintien à domicile (CMD)</strong> est
            un programme de Revenu Québec destiné aux personnes de <strong>70 ans
            et plus</strong> résidant au Québec. Il rembourse jusqu'à
            <strong> 40 % des dépenses admissibles</strong>.
          </p>

          {/* ————— Calcul concret par niveau ————— */}
          <div style={{
            border: '1px solid var(--line)', borderRadius: 12,
            overflow: 'hidden', marginTop: 18, background: 'var(--surface)'
          }}>
            <div style={{
              padding: '12px 18px', background: 'var(--bg-2)',
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: 'var(--ink-3)', borderBottom: '1px solid var(--line)'
            }}>
              Coût réel après crédit · 3 niveaux
            </div>
            {[
              { lvl: '01', name: 'Compagnie & répit',         brut: '29,50 $', credit: '−11,80 $', net: '17,70 $' },
              { lvl: '02', name: 'Aide à la vie quotidienne', brut: '39,08 $', credit: '−15,63 $', net: '23,45 $', featured: true },
              { lvl: '03', name: 'Aide personnelle PAB*',     brut: '44,83 $', credit: '−17,93 $', net: '26,90 $' },
            ].map((r, i, arr) => (
              <div key={r.lvl} style={{
                display: 'grid',
                gridTemplateColumns: '52px 1fr auto auto auto',
                gap: 12, alignItems: 'center',
                padding: '14px 18px',
                background: r.featured ? 'var(--accent-soft)' : 'transparent',
                borderBottom: i < arr.length - 1 ? '1px solid var(--line)' : 'none'
              }}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  color: 'var(--accent-2)', letterSpacing: '0.06em',
                  textTransform: 'uppercase'
                }}>Niv. {r.lvl}</span>
                <span style={{
                  fontFamily: 'var(--font-display)', fontSize: 14, lineHeight: 1.2
                }}>{r.name}</span>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 13,
                  color: 'var(--ink-3)', textDecoration: 'line-through'
                }}>{r.brut}</span>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 13,
                  color: 'var(--accent-2)'
                }}>{r.credit}</span>
                <span style={{
                  fontFamily: 'var(--font-display)', fontSize: 19,
                  color: 'var(--primary)', fontWeight: 600,
                  textAlign: 'right', lineHeight: 1, whiteSpace: 'nowrap'
                }}>
                  {r.net}<span style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 400 }}>&nbsp;/h</span>
                </span>
              </div>
            ))}
          </div>
          <p style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 10, lineHeight: 1.55 }}>
            * Le niveau PAB (44,83 $/h) est réservé aux préposé·es diplômé·es (AEP-SAD / DEP SASI).
            Les étudiant·es en formation interviennent aux niveaux 01 et 02 seulement.
          </p>

          {/* ————— Frais d'adhésion ————— */}
          <div style={{
            marginTop: 22, padding: 18,
            background: 'var(--bg-2)', borderRadius: 12, border: '1px solid var(--line)'
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: 'var(--accent-2)', marginBottom: 8
            }}>
              Frais d'adhésion · 45 $
            </div>
            <ul style={{
              margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.65,
              color: 'var(--ink-2)'
            }}>
              <li>Facturés <strong>une seule fois</strong>, à la première visite (jamais reconduits).</li>
              <li>Couvrent l'évaluation à domicile (~1 h, coordo clinique) et l'ouverture du dossier.</li>
              <li><strong>Admissibles au crédit CMD</strong> — ils figurent sur la facture détaillée.</li>
              <li><strong>Non remboursables</strong> par Maison Sereine dès que la vérification Sterling Backcheck est lancée pour le dossier (voir section Adhésion).</li>
            </ul>
          </div>

          {/* ————— Documents fournis ————— */}
          <div style={{
            marginTop: 14, padding: 18,
            background: 'var(--bg-2)', borderRadius: 12, border: '1px solid var(--line)'
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: 'var(--accent-2)', marginBottom: 8
            }}>
              Documents fournis par Maison Sereine
            </div>
            <ul style={{
              margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.65,
              color: 'var(--ink-2)'
            }}>
              <li><strong>Facture détaillée</strong> après chaque visite — montant brut, services rendus, part admissible CMD.</li>
              <li><strong>Annexe J pré-remplie</strong> à joindre à votre déclaration de revenus (TP-1.D.J).</li>
              <li><strong>Récapitulatif annuel</strong> (sommaire fiscal) envoyé en février pour la déclaration.</li>
            </ul>
          </div>

          {/* ————— Plafond annuel ————— */}
          <div style={{
            marginTop: 14, padding: 18,
            background: 'var(--primary)', color: '#E7EDE8',
            borderRadius: 12
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: 'var(--accent)', marginBottom: 8
            }}>
              Plafond annuel des dépenses admissibles
            </div>
            <ul style={{
              margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.65,
              color: 'rgba(231,237,232,0.92)'
            }}>
              <li><strong style={{ color: '#fff' }}>19 500 $/an</strong> pour une personne <strong>autonome</strong> → crédit max 7 800 $.</li>
              <li><strong style={{ color: '#fff' }}>25 500 $/an</strong> pour une personne <strong>non autonome</strong> → crédit max 10 200 $.</li>
              <li>Taux réduit de <strong>3 %</strong> par dollar de revenu familial au-delà de <strong>72 465 $</strong> (barème Revenu Québec 2026).</li>
            </ul>
          </div>

          <p style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 14, fontStyle: 'italic' }}>
            Vous (ou un proche mandaté) joignez l'annexe J à la déclaration de
            revenus. Le crédit peut être versé en <strong>avances mensuelles</strong>
            ou en remboursement annuel — au choix.
          </p>
        </>
      )
    },
    {
      cat: "Adhésion",
      q: "Pourquoi des frais d'adhésion de 45 $ ?",
      a: (
        <>
          <p>
            Les <strong>45 $</strong> couvrent la <strong>visite d'évaluation à
            domicile</strong> (~1 h, par une coordonnatrice clinique), le pairage
            avec un intervenant validé et l'ouverture du dossier.
          </p>
          <p>
            C'est un <strong>paiement unique</strong>, jamais reconduit, facturé
            uniquement après la rencontre. Aucun engagement de durée par la suite.
          </p>
          <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 12, padding: '14px 16px', background: 'var(--bg-2)', borderRadius: 10, border: '1px solid var(--line)' }}>
            <strong>Politique de remboursement.</strong> Les frais d'adhésion ne sont <strong>pas remboursables</strong> dès que la vérification des antécédents (Sterling Backcheck) est lancée pour votre dossier, les honoraires du prestataire de confiance étant alors engagés.
          </p>
        </>
      )
    },
    {
      cat: "Fiabilité",
      q: "Que se passe-t-il si l'étudiant a un empêchement ?",
      a: (
        <>
          <p>
            Quand un intervenant prévoit un empêchement, on s'organise pour
            mobiliser quelqu'un d'autre dans son secteur. Vous êtes prévenu·e dès
            qu'on a une solution — ou avant, pour vous tenir au courant.
          </p>
          <p>
            Si malgré nos efforts la séance ne peut être honorée, elle ne vous est
            <strong> pas facturée</strong>. Vous pouvez nous joindre par téléphone
            pendant nos heures d'ouverture, ou laisser un message&nbsp;: nous
            rappelons rapidement.
          </p>
          <p style={{ fontSize: 13, color: 'var(--ink-3)', fontStyle: 'italic' }}>
            On est en lancement et notre réseau s'agrandit chaque mois. Maison
            Sereine déploie tous les moyens pour assurer un remplacement, mais
            ne peut pas garantir un remplacement à 100 %&nbsp;— c'est une
            obligation de moyens, pas de résultat.
          </p>
        </>
      )
    },
  ];

  const itemsEtudiants = [
    {
      cat: "Rémunération",
      q: "Combien je gagne par heure ? Comment fonctionne la répartition 70 / 30 ?",
      a: (
        <>
          <p>
            La famille fixe le tarif client en choisissant le niveau de mission.
            Maison Sereine conserve une <strong>marge de plateforme de 30 %</strong>
            qui couvre la coordination, l'assurance responsabilité, le pairage et
            la facturation détaillée. Le reste — <strong>70 %</strong> — t'est
            versé directement chaque vendredi.
          </p>

          {/* Tableau de répartition par niveau */}
          <div style={{
            border: '1px solid var(--line)', borderRadius: 12,
            overflow: 'hidden', marginTop: 16, background: 'var(--surface)'
          }}>
            {[
              { lvl: '01', name: 'Compagnie & Répit',          client: '29,50 $', net: '20,65 $' },
              { lvl: '02', name: 'Aide à la vie quotidienne',  client: '39,08 $', net: '27,36 $' },
            ].map((r, i, arr) => (
              <div key={r.lvl} style={{
                display: 'grid', gridTemplateColumns: '64px 1fr auto auto',
                gap: 14, alignItems: 'center',
                padding: '14px 16px',
                borderBottom: i < arr.length - 1 ? '1px solid var(--line)' : 'none'
              }}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  color: 'var(--accent-2)', letterSpacing: '0.06em',
                  textTransform: 'uppercase'
                }}>Niv. {r.lvl}</span>
                <span style={{
                  fontFamily: 'var(--font-display)', fontSize: 15, lineHeight: 1.2
                }}>{r.name}</span>
                <span style={{
                  fontSize: 12, color: 'var(--ink-3)',
                  textAlign: 'right', fontFamily: 'var(--font-mono)'
                }}>{r.client}<br/><span style={{ fontSize: 9, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Client</span></span>
                <span style={{
                  fontFamily: 'var(--font-display)', fontSize: 22,
                  color: 'var(--primary)', fontWeight: 600,
                  textAlign: 'right', lineHeight: 1
                }}>
                  {r.net}<span style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 400 }}>&nbsp;/h</span>
                  <div style={{
                    fontSize: 9, color: 'var(--accent-2)', fontWeight: 500,
                    fontFamily: 'var(--font-mono)', letterSpacing: '0.06em',
                    textTransform: 'uppercase', marginTop: 2
                  }}>Toi · 70 %</div>
                </span>
              </div>
            ))}
          </div>

          <p style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 12, lineHeight: 1.55 }}>
            Les missions PAB (44,83 $/h côté client) sont assignées à un réseau de préposé·es
            diplômé·es — hors parcours étudiant. Seuls les niveaux 01 et 02 sont ouverts aux
            étudiant·es vérifié·es.
          </p>
        </>
      )
    },
    {
      cat: "Admission",
      q: "Quels sont les critères pour devenir Étudiant Serein ?",
      a: (
        <>
          <p>Trois critères, pas de formation interne inutile :</p>
          <ol style={{ paddingLeft: 20, marginTop: 8 }}>
            <li>
              <strong>Validation académique.</strong> Tu es inscrit·e dans un
              programme de santé ou service social — Université Laval, Cégep
              Garneau, Cégep Limoilou, Cégep de Sainte-Foy. Une simple preuve
              d'inscription suffit.
            </li>
            <li>
              <strong>Vérification Sterling Backcheck.</strong> 100 % numérique
              depuis ton téléphone, ~5 minutes. Frais avancés à l'inscription,
              <strong> intégralement remboursés</strong> après tes 10 premières
              heures de service.
            </li>
            <li>
              <strong>Certification RCR / Premiers soins valide.</strong> Si tu
              ne l'as pas encore, on t'oriente vers une formation reconnue.
            </li>
          </ol>
        </>
      )
    },
    {
      cat: "Horaire",
      q: "Mon horaire est-il vraiment 100 % flexible ?",
      a: (
        <>
          <p>
            Oui. Tu reçois les missions disponibles dans ton secteur via l'app —
            tu acceptes ou tu refuses, sans obligation de quota minimal. Tu peux
            t'absenter une semaine, un mois, ou geler ton compte pendant les
            examens et les stages.
          </p>
          <p>
            Quand tu acceptes une mission récurrente, on te demande seulement
            de la respecter ou de prévenir 48 h à l'avance pour un remplacement.
            La famille compte sur toi&nbsp;; on compte sur ton sérieux.
          </p>
        </>
      )
    },
    {
      cat: "Paie",
      q: "Quand et comment suis-je payé ?",
      a: (
        <>
          <p>
            Virement bancaire <strong>chaque vendredi</strong>, pour toutes les
            visites complétées du <strong>vendredi précédent au jeudi 23 h 59</strong>.
            Détail des heures et des bonus visible en temps réel dans ton espace.
          </p>
          <p>
            Tu es <strong>travailleur autonome</strong> — pas de retenue à la
            source. Tu déclares tes revenus aux impôts en fin d'année. On te
            fournit un <strong>récapitulatif annuel</strong> et un guide simple
            pour t'aider avec la première déclaration (RRQ, RQAP, TPS / TVQ si
            applicable).
          </p>
        </>
      )
    },
    {
      cat: "Sécurité",
      q: "Suis-je couvert·e en cas d'incident chez un client ?",
      a: (
        <>
          <p>
            Oui. Maison Sereine maintient une <strong>assurance responsabilité
            civile professionnelle</strong> couvrant l'ensemble des intervenants
            actifs, pour tous les actes posés dans le cadre de ton niveau de
            mission validé.
          </p>
          <p>
            En cas d'incident, tu nous appelles immédiatement&nbsp;: une
            coordonnatrice clinique prend le relais et accompagne la famille.
            Tu n'es jamais seul·e à gérer.
          </p>
        </>
      )
    },
  ];

  const items = tab === 'famille' ? itemsFamille : itemsEtudiants;

  return (
    <>
      <NavBar current="faq" />

      {/* Hero — titre + sous-titre */}
      <section style={{ padding: '88px 0 32px' }}>
        <div className="container" style={{ maxWidth: 820, textAlign: 'center' }}>
          <div className="eyebrow">Questions fréquentes</div>
          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(40px, 5vw, 64px)',
            lineHeight: 1.05, letterSpacing: '-0.02em',
            margin: '14px 0 20px', textWrap: 'balance'
          }}>
            Tout ce que vous voulez <em style={{ color: 'var(--primary)' }}>vraiment</em> savoir.
          </h1>
          <p style={{
            color: 'var(--ink-2)', fontSize: 18, lineHeight: 1.55,
            maxWidth: 580, margin: '0 auto'
          }}>
            Deux espaces — un pour les familles qui cherchent un accompagnement,
            un pour les étudiants qui veulent rejoindre Maison Sereine.
          </p>
        </div>
      </section>

      {/* ============================================================
         Modèle Équitable & Transparence Totale
         Flux visuel à 3 zones — Famille → Maison Sereine → Étudiant
         ============================================================ */}
      <section style={{
        padding: '80px 0 88px',
        background: 'linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%)',
        borderTop: '1px solid var(--line)',
        borderBottom: '1px solid var(--line)'
      }}>
        <div className="container">

          {/* En-tête */}
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <div className="eyebrow">Notre modèle économique</div>
            <h2 style={{ fontSize: 'clamp(32px, 4.2vw, 48px)', marginTop: 14, lineHeight: 1.1 }}>
              Modèle Équitable & <em style={{ color: 'var(--primary)' }}>Transparence Totale</em>.
            </h2>
            <p style={{
              color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.55,
              marginTop: 18, maxWidth: 580, margin: '18px auto 0'
            }}>
              Pour chaque dollar facturé, vous voyez exactement où il va.
              Aucun frais caché, aucune commission obscure — juste une répartition claire
              entre la famille, la plateforme et l'intervenant.
            </p>
          </div>

          {/* ====== Flux à 3 zones ====== */}
          <div className="ts-flow">
            {/* ZONE 1 — Famille */}
            <div className="ts-zone ts-zone-fam">
              <div className="ts-tag">Côté famille</div>
              <div className="ts-rate-block">
                <div className="ts-rate ts-rate-primary">23,45 <span>$</span></div>
                <div className="ts-rate-unit">/ heure · net</div>
              </div>
              <div className="ts-zone-label">Ce que vous payez réellement</div>
              <p className="ts-zone-desc">
                Tarif client brut <strong>39,08 $/h</strong>, réduit par le
                <strong> crédit d'impôt CMD&nbsp;40 %</strong> de Revenu Québec.
              </p>
              <div className="ts-zone-foot">
                <Icon name="check" size={13} /> Annexe J prérenseignée
              </div>
            </div>

            {/* Flèche 1 → */}
            <div className="ts-arrow ts-arrow-1" aria-hidden="true">
              <svg viewBox="0 0 60 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <line x1="2" y1="12" x2="52" y2="12" strokeDasharray="3 4" />
                <polyline points="46 5 56 12 46 19" />
              </svg>
            </div>

            {/* ZONE 2 — Maison Sereine (hexagone) */}
            <div className="ts-zone ts-zone-hub">
              <div className="ts-hex">
                <div className="ts-hex-inner">
                  <BrandLogo size={42} color="#fff" />
                  <div className="ts-hex-label">Maison Sereine</div>
                  <div className="ts-hex-margin">Marge 30 %</div>
                </div>
              </div>

              <ul className="ts-hub-list">
                {[
                  { icon: 'shield',  t: 'Vérification Sterling Backcheck' },
                  { icon: 'sparkle', t: 'Marketing & coordination' },
                  { icon: 'phone',   t: 'Support 24 / 7' },
                  { icon: 'check',   t: 'Assurance responsabilité' },
                ].map(it => (
                  <li key={it.t}>
                    <Icon name={it.icon} size={13} />
                    <span>{it.t}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Flèche 2 → */}
            <div className="ts-arrow ts-arrow-2" aria-hidden="true">
              <svg viewBox="0 0 60 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <line x1="2" y1="12" x2="52" y2="12" strokeDasharray="3 4" />
                <polyline points="46 5 56 12 46 19" />
              </svg>
            </div>

            {/* ZONE 3 — Étudiant */}
            <div className="ts-zone ts-zone-stud">
              <div className="ts-tag ts-tag-accent">Côté étudiant</div>
              <div className="ts-rate-block">
                <div className="ts-rate ts-rate-accent">27,36 <span>$</span></div>
                <div className="ts-rate-unit">/ heure · 70 %</div>
              </div>
              <div className="ts-zone-label">Ce que l'étudiant reçoit</div>
              <p className="ts-zone-desc">
                Versement direct chaque <strong>vendredi</strong>, en tant que
                travailleur autonome — récapitulatif annuel pour les impôts.
              </p>
              <div className="ts-zone-foot">
                <Icon name="check" size={13} /> Bonus relève en remplacement
              </div>
            </div>
          </div>

          {/* ====== Tableau récap des 3 niveaux ====== */}
          <div className="ts-recap">
            <div className="ts-recap-head">
              <span>Niveau</span>
              <span>Tarif client brut</span>
              <span>Coût net famille</span>
              <span>Gain net étudiant</span>
            </div>
            {[
              { lvl: '01', name: 'Compagnie & répit',         brut: '29,50 $', fam: '17,70 $', etu: '20,65 $' },
              { lvl: '02', name: 'Aide à la vie quotidienne', brut: '39,08 $', fam: '23,45 $', etu: '27,36 $', featured: true },
              { lvl: '03', name: 'Aide personnelle PAB*',     brut: '44,83 $', fam: '26,90 $', etu: '—', etuNote: 'Préposé diplômé' },
            ].map(r => (
              <div key={r.lvl} className={"ts-recap-row" + (r.featured ? ' is-featured' : '')}>
                <span>
                  <span className="ts-recap-lvl">Niv. {r.lvl}</span>
                  <span className="ts-recap-name">{r.name}</span>
                </span>
                <span className="ts-recap-num ts-recap-num-muted">
                  {r.brut}<small>/ h</small>
                </span>
                <span className="ts-recap-num ts-recap-num-fam">
                  {r.fam}<small>/ h</small>
                </span>
                <span className="ts-recap-num ts-recap-num-etu">
                  {r.etu}{r.etuNote ? (
                    <small style={{ display: 'block', fontSize: 10, marginTop: 2 }}>{r.etuNote}</small>
                  ) : (
                    <small>/ h</small>
                  )}
                </span>
              </div>
            ))}
            <div className="ts-recap-foot">
              Estimations pour bénéficiaire 70 ans et + au Québec.
              Crédit CMD 40 % appliqué sous le seuil familial de 72 465 $ (barème 2026).
              * PAB : préposé·e diplômé·e uniquement — pas de gain étudiant à ce niveau.
            </div>
          </div>

          {/* ====== CTAs duaux ====== */}
          <div className="ts-ctas">
            <a href="#booking" className="btn btn-primary ts-cta">
              Réserver une visite <Icon name="arrow-right" size={16} />
            </a>
            <a href="#booking?role=student" className="btn btn-dark ts-cta">
              Devenir intervenant <Icon name="arrow-right" size={16} />
            </a>
          </div>
        </div>

        {/* ===== Styles ===== */}
        <style>{`
          /* ---- Flux à 3 zones ---- */
          .ts-flow {
            display: grid;
            grid-template-columns: 1fr 56px 1.05fr 56px 1fr;
            gap: 0;
            align-items: stretch;
            max-width: 1180px;
            margin: 0 auto 56px;
          }

          .ts-zone {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 28px 26px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            box-shadow: var(--shadow-1);
            position: relative;
          }
          .ts-zone-fam  { border-top: 3px solid var(--primary); }
          .ts-zone-hub  {
            background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
            align-items: center;
            text-align: center;
          }
          .ts-zone-stud { border-top: 3px solid var(--accent); }

          .ts-tag {
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--primary);
            font-weight: 500;
          }
          .ts-tag-accent { color: var(--accent-2); }

          .ts-rate-block {
            display: flex;
            align-items: baseline;
            gap: 8px;
            flex-wrap: wrap;
          }
          .ts-rate {
            font-family: var(--font-display);
            font-size: clamp(40px, 4.5vw, 56px);
            line-height: 1;
            letter-spacing: -0.02em;
            font-weight: 600;
          }
          .ts-rate span { font-size: 0.55em; font-weight: 400; }
          .ts-rate-primary { color: var(--primary); }
          .ts-rate-accent  { color: var(--accent-2); }
          .ts-rate-unit {
            font-size: 13px;
            color: var(--ink-3);
            font-family: var(--font-mono);
            letter-spacing: 0.04em;
          }

          .ts-zone-label {
            font-family: var(--font-display);
            font-size: 18px;
            line-height: 1.25;
            color: var(--ink);
            margin-top: 4px;
          }
          .ts-zone-desc {
            font-size: 14px;
            color: var(--ink-2);
            line-height: 1.55;
            margin: 0;
            flex: 1;
          }
          .ts-zone-foot {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--primary);
            font-family: var(--font-mono);
            letter-spacing: 0.04em;
            padding-top: 10px;
            border-top: 1px dashed var(--line);
          }
          .ts-zone-stud .ts-zone-foot { color: var(--accent-2); }

          /* ---- Hexagone central ---- */
          .ts-hex {
            width: 132px;
            height: 152px;
            position: relative;
            margin: 0 auto;
          }
          .ts-hex::before {
            content: '';
            position: absolute;
            inset: -8px;
            background: var(--accent-soft);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            opacity: 0.55;
          }
          .ts-hex-inner {
            position: relative;
            width: 100%;
            height: 100%;
            background: linear-gradient(160deg, var(--primary) 0%, var(--primary-2) 100%);
            color: #fff;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px;
          }
          .ts-hex-label {
            font-family: var(--font-display);
            font-size: 13px;
            line-height: 1.1;
            letter-spacing: 0.01em;
          }
          .ts-hex-margin {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--accent);
            background: rgba(255,255,255,0.10);
            padding: 3px 10px;
            border-radius: 999px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
          }

          .ts-hub-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 8px;
            text-align: left;
            width: 100%;
          }
          .ts-hub-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--ink-2);
            padding: 6px 10px;
            background: var(--bg);
            border-radius: 8px;
          }
          .ts-hub-list li svg { color: var(--accent); flex-shrink: 0; }

          /* ---- Flèches ---- */
          .ts-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ink-3);
          }
          .ts-arrow svg { width: 100%; height: auto; max-width: 56px; }

          /* ---- Tableau récap ---- */
          .ts-recap {
            max-width: 1080px;
            margin: 0 auto 48px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: var(--shadow-1);
          }
          .ts-recap-head, .ts-recap-row {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 16px;
            padding: 16px 24px;
            align-items: center;
          }
          .ts-recap-head {
            background: var(--bg-2);
            font-family: var(--font-mono);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--ink-3);
            border-bottom: 1px solid var(--line);
          }
          .ts-recap-head > span:not(:first-child) { text-align: right; }
          .ts-recap-row {
            border-bottom: 1px solid var(--line);
            transition: background .2s;
          }
          .ts-recap-row:last-of-type { border-bottom: 0; }
          .ts-recap-row.is-featured {
            background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 70%);
          }
          .ts-recap-lvl {
            display: inline-block;
            font-family: var(--font-mono);
            font-size: 10px;
            color: var(--accent-2);
            background: var(--accent-soft);
            padding: 3px 8px;
            border-radius: 999px;
            letter-spacing: 0.06em;
            margin-right: 10px;
            vertical-align: middle;
          }
          .ts-recap-name {
            font-family: var(--font-display);
            font-size: 16px;
            color: var(--ink);
          }
          .ts-recap-num {
            font-family: var(--font-display);
            font-size: 22px;
            text-align: right;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;
          }
          .ts-recap-num small {
            font-size: 12px;
            color: var(--ink-3);
            font-weight: 400;
            margin-left: 2px;
          }
          .ts-recap-num-muted { color: var(--ink-3); }
          .ts-recap-num-fam   { color: var(--primary); }
          .ts-recap-num-etu   { color: var(--accent-2); }
          .ts-recap-foot {
            padding: 12px 24px;
            background: var(--bg);
            border-top: 1px solid var(--line);
            font-size: 12px;
            color: var(--ink-3);
            text-align: center;
            line-height: 1.5;
          }

          /* ---- CTAs ---- */
          .ts-ctas {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
          }
          .ts-cta { padding: 14px 28px; font-size: 15px; }

          /* ---- Mobile ---- */
          @media (max-width: 880px) {
            .ts-flow {
              grid-template-columns: 1fr;
              gap: 0;
            }
            .ts-arrow { transform: rotate(90deg); padding: 8px 0; }
            .ts-zone { gap: 12px; padding: 24px 22px; }
            .ts-recap-head { display: none; }
            .ts-recap-row {
              grid-template-columns: 1fr;
              gap: 8px;
              padding: 18px 20px;
            }
            .ts-recap-row > span:not(:first-child) {
              display: flex;
              justify-content: space-between;
              align-items: baseline;
              text-align: left;
            }
            .ts-recap-row > span:not(:first-child)::before {
              content: attr(data-label);
              font-family: var(--font-mono);
              font-size: 10px;
              letter-spacing: 0.08em;
              text-transform: uppercase;
              color: var(--ink-3);
            }
            .ts-recap-num { font-size: 20px; }
          }
        `}</style>
      </section>

      {/* Onglets segmentés Famille / Étudiant */}
      <section style={{ padding: '12px 0 0' }}>
        <div className="container" style={{ maxWidth: 820 }}>
          <div role="tablist" aria-label="Sections de la FAQ" style={{
            display: 'inline-flex', gap: 4, padding: 4,
            background: 'var(--surface)', border: '1px solid var(--line)',
            borderRadius: 999, margin: '0 auto', boxShadow: 'var(--shadow-1)'
          }}>
            {[
              { id: 'famille',   label: 'Familles',  icon: 'home'    },
              { id: 'etudiants', label: 'Étudiants', icon: 'sparkle' },
            ].map(t => {
              const active = tab === t.id;
              return (
                <button
                  key={t.id}
                  role="tab"
                  aria-selected={active}
                  onClick={() => switchTab(t.id)}
                  style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    padding: '10px 22px', borderRadius: 999, border: 'none',
                    cursor: 'pointer',
                    background: active ? 'var(--primary)' : 'transparent',
                    color: active ? '#fff' : 'var(--ink-2)',
                    fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
                    transition: 'background .2s, color .2s',
                    minHeight: 40
                  }}
                >
                  <Icon name={t.icon} size={15} />
                  {t.label}
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* Section ancrée pour /faq#famille et /faq#etudiants */}
      <section
        id={tab}
        style={{ padding: '40px 0 80px' }}
      >
        <div className="container" style={{ maxWidth: 820 }}>
          <div className="faq-list">
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <article key={`${tab}-${i}`} className={"faq-item" + (isOpen ? ' is-open' : '')}>
                  <button
                    className="faq-trigger"
                    aria-expanded={isOpen}
                    aria-controls={`faq-panel-${tab}-${i}`}
                    onClick={() => setOpen(isOpen ? -1 : i)}
                  >
                    <div className="faq-trigger-text">
                      <span className="faq-cat">{it.cat}</span>
                      <span className="faq-q">{it.q}</span>
                    </div>
                    <span className="faq-icon" aria-hidden="true">
                      <span className="faq-bar faq-bar-h"></span>
                      <span className="faq-bar faq-bar-v"></span>
                    </span>
                  </button>
                  <div
                    id={`faq-panel-${tab}-${i}`}
                    className="faq-panel"
                    role="region"
                    hidden={!isOpen}
                  >
                    <div className="faq-panel-inner">{it.a}</div>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA bas de page — adapté au public */}
      <section style={{
        padding: '64px 0 96px',
        background: 'var(--surface)',
        borderTop: '1px solid var(--line)'
      }}>
        <div className="container" style={{ maxWidth: 720, textAlign: 'center' }}>
          {tab === 'famille' ? (
            <>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontSize: 30,
                lineHeight: 1.2, letterSpacing: '-0.01em', marginBottom: 14
              }}>
                Une autre question avant de réserver ?
              </h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 16, marginBottom: 24 }}>
                Notre équipe répond par téléphone ou par courriel sous 24 h ouvrables.
              </p>
              <div className="row" style={{ justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
                <a href="#booking" className="btn btn-primary">
                  Démarrer ma réservation <Icon name="arrow-right" size={16} />
                </a>
                <a href={`mailto:${(window.SiteConfig && window.SiteConfig.email) || 'contact@maisonsereine.ca'}`} className="btn btn-ghost">
                  <Icon name="mail" size={16} /> {(window.SiteConfig && window.SiteConfig.email) || 'contact@maisonsereine.ca'}
                </a>
              </div>
            </>
          ) : (
            <>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontSize: 30,
                lineHeight: 1.2, letterSpacing: '-0.01em', marginBottom: 14
              }}>
                Prêt·e à rejoindre Maison Sereine ?
              </h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 16, marginBottom: 24 }}>
                Inscription en 5 minutes — sans frais, sans engagement.
              </p>
              <div className="row" style={{ justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
                <a href="#booking?role=student" className="btn btn-dark">
                  Devenir Étudiant Serein <Icon name="arrow-right" size={16} />
                </a>
                <a href="mailto:contact@maisonsereine.ca" className="btn btn-ghost">
                  <Icon name="mail" size={16} /> Une question ?
                </a>
              </div>
            </>
          )}
        </div>
      </section>

      <Footer />
    </>
  );
};

window.FAQPage = FAQPage;
