/* ===== Home (marketing) — Québec · étudiants vérifiés ===== */

const tiers = [
  {
    id: 'compagnie',
    label: "Compagnie & répit",
    subtitle: "Présence, conversation, sorties accompagnées, répit pour proche aidant.",
    gross: "29,50 $",
    credit: "11,80 $",
    net: "17,70 $",
    featured: false,
    // Note : la compagnie pure n'est pas admissible au CMD ; seul le répit
    // et l'accompagnement aux sorties de soins le sont. On le précise.
    bullets: ["Étudiant vérifié", "Min. 2 h / visite", "Pas d'engagement à long terme"],
    creditNote: "Répit et accompagnement aux rendez-vous admissibles au CMD"
  },
  {
    id: 'aide',
    label: "Aide à la vie quotidienne",
    subtitle: "Ménage léger, lessive, préparation de repas, courses, transport accompagné.",
    gross: "39,08 $",
    credit: "15,63 $",
    net: "23,45 $",
    featured: true,
    bullets: ["Étudiant vérifié + formation AVQ", "Suivi hebdomadaire", "Coordonnateur dédié"],
    creditNote: "Services pleinement admissibles au CMD"
  },
  {
    id: 'pab',
    label: "Aide personnelle avec PAB",
    subtitle: "Aide à l'hygiène, aux transferts, accompagnement troubles cognitifs — réservée à un préposé diplômé (AEP-SAD / DEP SASI), jamais à un étudiant en formation.",
    gross: "44,83 $",
    credit: "17,93 $",
    net: "26,90 $",
    featured: false,
    // On retire toute référence à la médication (acte infirmier réservé OIIQ)
    // et on précise qu'il s'agit d'un PAB diplômé, pas d'un étudiant.
    bullets: ["Préposé diplômé (AEP-SAD / PAB)", "Accompagnement 7 j / 7", "Coordination avec le CLSC"],
    creditNote: "Aide à la personne admissible au CMD"
  },
];

const testimonials = [
  {
    quote: "Une étudiante vérifiée en soins infirmiers (université québécoise) assure des visites régulières. Même intervenante, continuité des soins. Nous respirons.",
    name: "Proche aidant, 54 ans", role: "Famille — Capitale-Nationale"
  },
  {
    quote: "Je n’aurais jamais pensé pouvoir rester chez moi après ma chute. Grâce aux étudiants du programme, j’ai de la compagnie chaque jour — et ma famille peut suivre à distance.",
    name: "Bénéficiaire, 81 ans", role: "Client — Chaudière-Appalaches"
  },
  {
    quote: "Après chaque visite, une facture détaillée arrive automatiquement. Je les garde pour l'annexe J de la déclaration : Revenu Québec nous a remis 40 % l'an dernier. C'est clair et documenté.",
    name: "Proche aidant, 47 ans", role: "Famille — région métropolitaine"
  },
];

const Hero = () => (
  <section
    style={{
      position: 'relative',
      overflow: 'hidden',
      minHeight: 'min(720px, 92vh)',
      display: 'flex',
      alignItems: 'stretch',
      isolation: 'isolate',
    }}
  >
    {/* Image en plein arrière-plan — sujet cadré à droite pour libérer la colonne de gauche. */}
    <img
      src="assets/hero-vibrante.jpg"
      alt="Étudiante de l'Université Laval offrant de la compagnie bienveillante à une aînée — Maison Sereine"
      className="hero-bg-img"
      loading="eager"
      decoding="async"
      style={{
        position: 'absolute',
        inset: 0,
        width: '100%',
        height: '100%',
        objectFit: 'cover',
        objectPosition: '80% 35%',
        display: 'block',
        zIndex: 0,
      }}
      onError={(e) => {
        e.currentTarget.style.display = 'none';
        const ph = document.getElementById('hero-img-fallback');
        if (ph) ph.style.display = 'flex';
      }}
    />
    {/* Placeholder discret si l'image ne charge pas. */}
    <div
      id="hero-img-fallback"
      aria-hidden="true"
      style={{
        display: 'none',
        position: 'absolute', inset: 0, zIndex: 0,
        alignItems: 'center', justifyContent: 'center',
        textAlign: 'center', padding: 24,
        color: 'var(--ink-2)', fontFamily: 'var(--font-display)', fontSize: 16,
        background: 'linear-gradient(160deg, var(--accent-soft) 0%, var(--primary-soft) 100%)',
      }}
    >
      Déposez l'image officielle dans <code>assets/hero-vibrante.jpg</code>
    </div>

    {/* Voile à gauche pour la lisibilité du texte (sans assombrir tout le visuel). */}
    <div
      aria-hidden="true"
      className="hero-bg-veil"
      style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background:
          'linear-gradient(100deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.32) 28%, rgba(0,0,0,0.10) 52%, rgba(0,0,0,0) 72%)',
        pointerEvents: 'none',
      }}
    />

    {/* Bloc de texte en superposition (relative z-10) — limité à la moitié gauche sur desktop. */}
    <div
      className="hero-text-col"
      style={{
        position: 'relative',
        zIndex: 10,
        padding: '96px 24px 140px',
        paddingLeft: 'clamp(24px, 5vw, 56px)',
        width: '100%',
        marginLeft: 0,
        marginRight: 'auto',
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr)',
        alignItems: 'center',
      }}
    >
      <div style={{ maxWidth: 560, color: '#fff' }}>
        <div className="eyebrow" style={{ marginBottom: 20, color: '#F4D8B8' }}>
          Maintien à domicile · Québec
        </div>
        <h1 style={{ color: '#fff' }}>
          Des étudiants <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>vérifiés</em>,
          chez vos proches.
        </h1>
        <p style={{ fontSize: 20, color: 'rgba(255,255,255,0.88)', marginTop: 24, maxWidth: 560, lineHeight: 1.5 }}>
          Une nouvelle génération d’aidants — étudiants des programmes de santé et
          de service social, soigneusement sélectionnés
          <span
            className="tip"
            style={{ position: 'relative', display: 'inline-block' }}
            tabIndex={0}
            onMouseEnter={e => { const b = e.currentTarget.querySelector('.tip-b'); if (b) { b.style.opacity = 1; b.style.transform = 'translateX(-50%) translateY(0)'; } }}
            onMouseLeave={e => { const b = e.currentTarget.querySelector('.tip-b'); if (b) { b.style.opacity = 0; b.style.transform = 'translateX(-50%) translateY(4px)'; } }}
            onFocus={e => { const b = e.currentTarget.querySelector('.tip-b'); if (b) { b.style.opacity = 1; b.style.transform = 'translateX(-50%) translateY(0)'; } }}
            onBlur={e => { const b = e.currentTarget.querySelector('.tip-b'); if (b) { b.style.opacity = 0; b.style.transform = 'translateX(-50%) translateY(4px)'; } }}
          >
            <sup style={{ color: 'var(--accent)', fontWeight: 600, marginLeft: 2, cursor: 'help' }}>*</sup>
            {' '}
            <a
              href="#faq?tab=famille"
              style={{
                fontSize: 14, color: '#F4D8B8', textDecoration: 'underline',
                textDecorationThickness: 1, textUnderlineOffset: 3, whiteSpace: 'nowrap',
              }}
            >
              En savoir plus
            </a>
            <span
              className="tip-b"
              style={{
                position: 'absolute', left: '50%', bottom: 'calc(100% + 10px)',
                transform: 'translateX(-50%) translateY(4px)',
                background: 'var(--ink)', color: '#fff',
                padding: '10px 14px', borderRadius: 10,
                fontSize: 13, lineHeight: 1.45, fontFamily: 'var(--font-ui)',
                width: 280, textAlign: 'left',
                boxShadow: 'var(--shadow-2)',
                opacity: 0, pointerEvents: 'none',
                transition: 'opacity .15s ease, transform .15s ease',
                zIndex: 20,
              }}
            >
              Crédit d'impôt pour maintien à domicile des aînés (CMD) : jusqu'à 40 % des dépenses admissibles récupérables auprès de Revenu Québec. Taux réduit si revenu familial &gt; 72 465 $ (2026).
              <span
                style={{
                  position: 'absolute', left: '50%', top: '100%',
                  transform: 'translateX(-50%)',
                  width: 0, height: 0,
                  borderLeft: '6px solid transparent',
                  borderRight: '6px solid transparent',
                  borderTop: '6px solid var(--ink)',
                }}
              />
            </span>
          </span>.
        </p>
        <div className="row" style={{ marginTop: 32, gap: 12, flexWrap: 'wrap' }}>
          <a href="#booking" className="btn btn-primary">
            Trouver un étudiant <Icon name="arrow-right" size={18} />
          </a>
          <a
            href="#booking?role=student"
            className="btn btn-ghost"
            style={{
              background: 'rgba(255,255,255,0.10)',
              border: '1px solid rgba(255,255,255,0.45)',
              color: '#fff',
              backdropFilter: 'blur(6px)',
              WebkitBackdropFilter: 'blur(6px)',
            }}
          >
            Je suis étudiant
          </a>
        </div>
        <div
          style={{
            marginTop: 40, display: 'flex', gap: 24,
            color: 'rgba(255,255,255,0.85)', fontSize: 14, flexWrap: 'wrap'
          }}
        >
          <div className="row"><Icon name="shield" size={18} style={{ color: '#F4D8B8' }} /> Vérification d’antécédents</div>
          <div className="row"><Icon name="check"  size={18} style={{ color: '#F4D8B8' }} /> Factures détaillées pour l'annexe J</div>
          <div className="row"><Icon name="map-pin" size={18} style={{ color: '#F4D8B8' }} /> Sainte‑Foy · Sillery · Montcalm</div>
        </div>
      </div>
    </div>
  </section>
);

const TrustBar = () => (
  <section style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
    <div className="container" style={{ padding: '22px 32px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
      <span className="row" style={{ gap: 8, color: 'var(--ink-2)', fontSize: 13, fontStyle: 'italic' }}>
        <Icon name="sparkle" size={14} style={{ color: 'var(--accent)' }} />
        Issus de la relève de&nbsp;:
      </span>
      <div style={{ color: 'var(--ink-2)', fontSize: 13, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>
        UNIVERSITÉ&nbsp;LAVAL &nbsp;·&nbsp; CÉGEP&nbsp;GARNEAU &nbsp;·&nbsp; CÉGEP&nbsp;DE&nbsp;SAINTE‑FOY &nbsp;·&nbsp; CÉGEP&nbsp;LIMOILOU
      </div>
    </div>
  </section>
);

const Tiers = () => (
  <section id="tarifs" style={{ padding: '112px 0' }}>
    <div className="container">
      <div style={{ maxWidth: 780, marginBottom: 56 }}>
        <div className="eyebrow">Tarifs & crédit d'impôt CMD</div>
        <h2 style={{ marginTop: 12 }}>
          La qualité professionnelle au prix net du marché.
        </h2>
        <p style={{ color: 'var(--ink-2)', marginTop: 18, fontSize: 18, lineHeight: 1.55, maxWidth: 640 }}>
          Grâce au <strong>Crédit d'impôt pour maintien à domicile (CMD)</strong>, jusqu'à
          40 % du tarif vous est remboursé par Revenu Québec. Votre coût réel après crédit
          est aligné sur les agences traditionnelles — pour un service nettement supérieur.
        </p>
      </div>

      {/* Bloc calculateur — transformation brut → net */}
      <div style={{
        background: 'linear-gradient(135deg, var(--bg-2) 0%, var(--accent-soft) 100%)',
        border: '1px solid var(--line)',
        borderRadius: 24,
        padding: 48,
        marginBottom: 56,
        position: 'relative',
        overflow: 'hidden'
      }} className="cmd-calc">
        <div className="cmd-eyebrow" style={{
          position: 'absolute', top: 20, right: 24,
          fontFamily: 'var(--font-mono)', fontSize: 11,
          color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.14em'
        }}>
          Exemple · Aide à la vie quotidienne
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr auto 1fr auto 1.1fr',
          gap: 32, alignItems: 'center'
        }} className="cmd-row">
          {/* Tarif brut */}
          <div className="cmd-brut">
            <div className="eyebrow" style={{ color: 'var(--ink-3)' }}>Tarif facturé</div>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 72, lineHeight: 1,
              color: 'var(--ink-3)', marginTop: 12,
              textDecoration: 'line-through', textDecorationThickness: 2,
              textDecorationColor: 'rgba(31,36,32,0.3)'
            }}>
              39,08&nbsp;$
            </div>
            <div style={{ fontSize: 14, color: 'var(--ink-3)', marginTop: 6 }}>par heure · brut</div>
          </div>

          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 40, color: 'var(--accent)'
          }} className="cmd-arrow">
            →
          </div>

          {/* Crédit CMD */}
          <div className="cmd-credit" style={{
            background: 'rgba(255,255,255,0.6)',
            border: '1px solid var(--line)',
            borderRadius: 16, padding: '20px 22px'
          }}>
            <div className="row" style={{ gap: 10 }}>
              <div style={{
                width: 40, height: 40, borderRadius: 999,
                background: 'var(--primary)', color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500
              }}>
                40<span style={{ fontSize: 12 }}>%</span>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, lineHeight: 1.15 }}>
                  Crédit d'impôt CMD
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>
                  Revenu Québec · annexe J
                </div>
              </div>
            </div>
            <div style={{
              marginTop: 14, fontFamily: 'var(--font-display)', fontSize: 28,
              color: 'var(--primary)'
            }}>
              −15,63&nbsp;$
            </div>
          </div>

          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 40, color: 'var(--accent)'
          }} className="cmd-arrow">
            =
          </div>

          {/* Prix net — dramatique */}
          <div className="cmd-net" style={{
            background: 'var(--primary)', color: '#fff',
            borderRadius: 20, padding: '28px 32px',
            boxShadow: '0 20px 50px -20px rgba(44,84,73,0.6)',
            position: 'relative'
          }}>
            <div style={{
              position: 'absolute', top: -12, left: 24,
              background: 'var(--accent)', color: '#fff', fontSize: 11,
              padding: '5px 12px', borderRadius: 999, fontWeight: 500,
              letterSpacing: '.08em', textTransform: 'uppercase',
              fontFamily: 'var(--font-mono)'
            }}>
              Votre prix net
            </div>
            <div className="eyebrow" style={{ color: '#BCCCC3' }}>Coût réel</div>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 88, lineHeight: 1,
              color: '#fff', marginTop: 10
            }}>
              23,45&nbsp;$
            </div>
            <div style={{ fontSize: 14, color: '#BCCCC3', marginTop: 8 }}>
              par heure · après crédit d'impôt
            </div>
          </div>
        </div>

        <div className="row" style={{
          marginTop: 36, gap: 28, flexWrap: 'wrap', fontSize: 14, color: 'var(--ink-2)',
          justifyContent: 'center'
        }}>
          <div className="row" style={{ gap: 8 }}>
            <Icon name="check" size={16} style={{ color: 'var(--primary)' }} /> Facture détaillée après chaque visite
          </div>
          <div className="row" style={{ gap: 8 }}>
            <Icon name="check" size={16} style={{ color: 'var(--primary)' }} /> Annexe J préremplie disponible
          </div>
          <div className="row" style={{ gap: 8 }}>
            <Icon name="check" size={16} style={{ color: 'var(--primary)' }} /> Versement direct par Revenu Québec
          </div>
        </div>
      </div>

      {/* 3 niveaux de service */}
      <div className="eyebrow" style={{ marginBottom: 18 }}>Nos trois niveaux de service</div>
      <div className="tiers-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'stretch' }}>
        {tiers.map((t, i) => {
          const featured = t.featured;
          return (
            <article key={t.id} style={{
              background: featured ? 'var(--primary)' : 'var(--surface)',
              color: featured ? '#fff' : 'var(--ink)',
              border: '1px solid ' + (featured ? 'var(--primary)' : 'var(--line)'),
              borderRadius: 20, padding: 28, display: 'flex', flexDirection: 'column',
              transform: featured ? 'translateY(-8px)' : 'none',
              boxShadow: featured ? 'var(--shadow-2)' : 'none',
              position: 'relative'
            }}>
              {featured && (
                <span style={{
                  position: 'absolute', top: -12, left: 24,
                  background: 'var(--accent)', color: '#fff', fontSize: 12,
                  padding: '4px 12px', borderRadius: 999, fontWeight: 500, letterSpacing: '.04em'
                }}>Le plus choisi</span>
              )}
              {t.id === 'pab' && (
                <span className="chip" style={{ alignSelf: 'flex-start', marginBottom: 10, background: 'var(--accent-soft)', color: 'var(--accent-2)', borderColor: 'var(--accent-soft)' }}>
                  <Icon name="shield" size={12} /> Préposé diplômé
                </span>
              )}
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, lineHeight: 1.15 }}>{t.label}</div>
              <p style={{ color: featured ? '#BCCCC3' : 'var(--ink-2)', marginTop: 10, fontSize: 14, minHeight: 52 }}>
                {t.subtitle}
              </p>

              {/* Price block */}
              <div style={{
                marginTop: 18, padding: 18, borderRadius: 14,
                background: featured ? 'rgba(255,255,255,0.08)' : 'var(--bg-2)',
                border: '1px solid ' + (featured ? 'rgba(255,255,255,0.14)' : 'var(--line)')
              }}>
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 13, color: featured ? '#BCCCC3' : 'var(--ink-3)' }}>Brut</span>
                  <span style={{
                    fontSize: 18, color: featured ? '#BCCCC3' : 'var(--ink-3)',
                    textDecoration: 'line-through', textDecorationThickness: 1
                  }}>{t.gross}/h</span>
                </div>
                <div className="row" style={{ justifyContent: 'space-between', fontSize: 13, color: featured ? '#BCCCC3' : 'var(--ink-3)', marginTop: 8 }}>
                  <span>Crédit CMD (40 %){t.id === 'compagnie' ? '*' : ''}</span>
                  <span>−{t.credit}/h</span>
                </div>
                <hr style={{ border: 0, height: 1, background: featured ? 'rgba(255,255,255,0.14)' : 'var(--line)', margin: '12px 0' }} />
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 13, fontWeight: 500 }}>Coût après crédit{t.id === 'compagnie' ? '*' : ''}</span>
                  <div>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 32, color: featured ? '#fff' : 'var(--primary)' }}>{t.net}</span>
                    <span style={{ fontSize: 13, marginLeft: 4, color: featured ? '#BCCCC3' : 'var(--ink-3)' }}>/h</span>
                  </div>
                </div>
                {t.id === 'compagnie' && (
                  <p style={{
                    fontSize: 11, lineHeight: 1.5, marginTop: 12, marginBottom: 0,
                    color: featured ? '#BCCCC3' : 'var(--ink-3)', fontStyle: 'italic'
                  }}>
                    * Crédit applicable si la visite est du répit ou de l'accompagnement
                    médical. La compagnie seule reste à {t.gross}/h.
                  </p>
                )}
              </div>

              <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'grid', gap: 10 }}>
                {t.bullets.map(b => (
                  <li key={b} className="row" style={{ gap: 10, fontSize: 14 }}>
                    <Icon name="check" size={16} style={{ color: featured ? '#9BD097' : 'var(--primary)' }} /> {b}
                  </li>
                ))}
              </ul>

              <a href="#booking" className={featured ? "btn btn-primary" : "btn btn-dark"}
                 style={{ marginTop: 24, background: featured ? 'var(--accent)' : undefined }}>
                Choisir ce niveau <Icon name="arrow-right" size={16} />
              </a>
            </article>
          );
        })}
      </div>

      <div className="row" style={{ justifyContent: 'center', gap: 8, marginTop: 32, fontSize: 13, color: 'var(--ink-3)' }}>
        <Icon name="shield" size={14} /> Estimations pour bénéficiaire 70 ans et + avec revenu familial sous 72 465 $ (2026). Taux réduit au-delà. Facture détaillée remise après chaque visite.
      </div>
    </div>
  </section>
);

const HowItWorks = () => {
  const steps = [
    { n: '01', title: 'Dites-nous tout', desc: "En 5 minutes, on cerne les besoins, les habitudes, le budget. En ligne ou par téléphone." },
    { n: '02', title: "Étudiant matché", desc: "On vous présente un profil — formation, disponibilités, vérification d’antécédents déjà faite." },
    { n: '03', title: 'Démarrage sous 48 h', desc: "Planning souple. Après chaque visite, vous recevez une facture détaillée avec la part admissible au CMD — à conserver pour votre annexe J." },
  ];
  return (
    <section id="how" style={{ padding: '112px 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64 }}>
          <div>
            <div className="eyebrow">Comment ça marche</div>
            <h2 style={{ marginTop: 10 }}>Simple, humain, sans engagement.</h2>
            <p style={{ color: 'var(--ink-2)', marginTop: 16, fontSize: 17 }}>
              Trouver la bonne personne pour accompagner un parent ne devrait pas être un
              parcours du combattant.
            </p>
            <a href="#booking" className="btn btn-dark" style={{ marginTop: 24 }}>
              Commencer <Icon name="arrow-right" size={16} />
            </a>
          </div>
          <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            {steps.map((s, i) => (
              <li key={i} style={{
                display: 'grid', gridTemplateColumns: '88px 1fr', gap: 24, alignItems: 'start',
                padding: '28px 0', borderBottom: i < steps.length - 1 ? '1px solid var(--line)' : 'none'
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 40, color: 'var(--accent)', lineHeight: 1 }}>{s.n}</div>
                <div>
                  <h3>{s.title}</h3>
                  <p style={{ color: 'var(--ink-2)', marginTop: 6, maxWidth: 520 }}>{s.desc}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
};

const Concept = () => {
  const badges = [
    { prog: "Soins infirmiers",            uni: "Université Laval" },
    { prog: "Réadaptation",                uni: "Université Laval" },
    { prog: "Soins infirmiers",            uni: "Cégep Garneau" },
    { prog: "Soins préhospitaliers",       uni: "Cégep de Sainte‑Foy" },
    { prog: "Travail social",              uni: "Cégep Garneau" },
    { prog: "Soins infirmiers",            uni: "Cégep Limoilou" },
  ];
  return (
    <section id="concept" style={{ padding: '112px 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 72, alignItems: 'start' }} className="section-grid">
          <div style={{ position: 'sticky', top: 100 }}>
            <div className="eyebrow">Le concept Maison Sereine</div>
            <h2 style={{ marginTop: 12 }}>Plus qu'une aide, une présence qualifiée.</h2>
            <p style={{ color: 'var(--ink-2)', marginTop: 20, fontSize: 18, lineHeight: 1.55 }}>
              Maison Sereine n'est pas une agence d'aide ménagère. Nous confions votre proche
              à des <strong>étudiants en santé et service social</strong> — les infirmières,
              intervenantes en réadaptation et travailleurs sociaux de demain. Une génération qui
              a choisi de prendre soin, et qui apporte chez vous la rigueur de leur formation.
            </p>
            <div className="row" style={{ gap: 24, marginTop: 28, flexWrap: 'wrap' }}>
              <div className="row" style={{ gap: 8, fontSize: 14, color: 'var(--ink-2)' }}>
                <Icon name="check" size={16} style={{ color: 'var(--primary)' }} /> Formation en santé vérifiée
              </div>
              <div className="row" style={{ gap: 8, fontSize: 14, color: 'var(--ink-2)' }}>
                <Icon name="heart" size={16} style={{ color: 'var(--primary)' }} /> Jumelage par personnalité
              </div>
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Nos étudiants viennent de</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
              {badges.map((b, i) => (
                <div key={i} style={{
                  display: 'flex', gap: 14, alignItems: 'center',
                  padding: 18, background: 'var(--surface)',
                  border: '1px solid var(--line)', borderRadius: 14
                }}>
                  <div style={{
                    width: 44, height: 44, flexShrink: 0, borderRadius: 999,
                    background: 'var(--primary-soft)', color: 'var(--primary)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-display)', fontSize: 18
                  }}>
                    <Icon name="heart" size={18} />
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div className="chip" style={{
                      background: 'var(--accent-soft)', color: 'var(--accent-2)',
                      borderColor: 'var(--accent-soft)', fontSize: 11, padding: '2px 8px',
                      marginBottom: 4, textTransform: 'uppercase', letterSpacing: '.08em',
                      fontFamily: 'var(--font-mono)', fontWeight: 500
                    }}>
                      Étudiant en santé
                    </div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, lineHeight: 1.2 }}>{b.prog}</div>
                    <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 2 }}>{b.uni}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Caregivers = Concept;

/* —————————————————————————————————————————————————————
   La Relève de Québec — provenance des intervenants
   ————————————————————————————————————————————————————— */
const Releve = () => {
  const institutions = [
    {
      nom: "Université Laval",
      detail: "Pavillon Ferdinand-Vandry · Sciences infirmières, médecine, réadaptation",
      type: "Université",
    },
    {
      nom: "Cégep Garneau",
      detail: "Soins infirmiers, techniques de travail social",
      type: "Cégep",
    },
    {
      nom: "Cégep de Sainte-Foy",
      detail: "Soins infirmiers, soins préhospitaliers d'urgence",
      type: "Cégep",
    },
    {
      nom: "Cégep Limoilou",
      detail: "Soins infirmiers, éducation spécialisée",
      type: "Cégep",
    },
  ];
  return (
    <section id="releve" style={{ padding: '112px 0', background: 'var(--surface)' }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 80, alignItems: 'start',
        }} className="rel-grid">
          <div>
            <div className="eyebrow">La Relève de Québec</div>
            <h2 style={{ marginTop: 12 }}>
              Vos voisins, formés ici même.
            </h2>
            <p style={{ color: 'var(--ink-2)', marginTop: 18, fontSize: 18, lineHeight: 1.6 }}>
              Nos intervenants sont issus des grandes institutions d'enseignement de la
              Capitale-Nationale, principalement situés sur l'axe
              <strong> Sainte‑Foy / Sillery / Montcalm</strong>. Ce sont les jeunes que
              vous croisez tous les jours dans le quartier — au café Saint‑Henri, en
              vélo sur le chemin Sainte‑Foy, à la bibliothèque Monique‑Corriveau.
            </p>
            <p style={{ color: 'var(--ink-2)', marginTop: 14, fontSize: 16, lineHeight: 1.6 }}>
              Ils étudient la santé, le service social ou la réadaptation. Ils ne sont
              pas encore diplômés — mais ils sont sérieux, formés ici, et ils ont
              choisi ce métier.
            </p>

            <div style={{
              marginTop: 28, padding: '18px 22px', background: 'var(--accent-soft)',
              border: '1px solid var(--line)', borderRadius: 14,
              display: 'flex', gap: 14, alignItems: 'flex-start',
            }}>
              <Icon name="map-pin" size={20} style={{ color: 'var(--accent)', marginTop: 2, flexShrink: 0 }} />
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 16 }}>
                  Service lancé dans les quartiers Sainte‑Foy, Sillery & Montcalm
                </div>
                <div style={{ color: 'var(--ink-2)', fontSize: 14, marginTop: 4, lineHeight: 1.55 }}>
                  Nous démarrons à proximité des campus pour garantir une réponse rapide.
                  Extension graduelle vers les quartiers limitrophes au fil des inscriptions.
                </div>
              </div>
            </div>
          </div>

          {/* Liste institutions */}
          <div style={{ display: 'grid', gap: 12 }}>
            {institutions.map((inst) => (
              <article key={inst.nom} style={{
                background: 'var(--bg-2)', border: '1px solid var(--line)',
                borderRadius: 16, padding: '22px 26px',
                display: 'grid', gridTemplateColumns: '52px 1fr auto', gap: 18, alignItems: 'center',
              }}>
                <div style={{
                  width: 52, height: 52, borderRadius: 12,
                  background: 'var(--primary)', color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontSize: 22,
                }}>
                  {inst.nom.split(' ').filter(w => w[0] && w[0] === w[0].toUpperCase()).map(w => w[0]).slice(0, 2).join('')}
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--ink)' }}>
                    {inst.nom}
                  </div>
                  <div style={{ color: 'var(--ink-2)', fontSize: 13.5, marginTop: 3, lineHeight: 1.5 }}>
                    {inst.detail}
                  </div>
                </div>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--ink-3)',
                  textTransform: 'uppercase', letterSpacing: '.12em',
                  padding: '5px 9px', border: '1px solid var(--line)', borderRadius: 999,
                  background: 'var(--surface)',
                }}>
                  {inst.type}
                </span>
              </article>
            ))}

            <p style={{
              fontSize: 12.5, color: 'var(--ink-3)', marginTop: 6, lineHeight: 1.55,
              fontStyle: 'italic',
            }}>
              Liste représentative des établissements desservant nos intervenants actuels.
              D'autres parcours en santé et service social peuvent être admis sur dossier.
            </p>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .rel-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
};

const Security = () => {
  const steps = [
    {
      n: '01',
      icon: 'shield',
      t: "Enquête Sterling Backcheck",
      d: "Trois vérifications croisées avant activation : identité par reconnaissance faciale, enquête de casier judiciaire pour secteurs vulnérables, et confirmation de l'inscription académique auprès de l'établissement. Aucun raccourci, aucune exception.",
      badge: "Sterling Backcheck"
    },
    {
      n: '02',
      icon: 'check',
      t: "Validation académique & RCR",
      d: "Preuve d'inscription dans un programme de la santé confirmée auprès de l'établissement. Certification RCR / Premiers soins valide obligatoire.",
      badge: "Vérifié université"
    },
    {
      n: '03',
      icon: 'lock',
      t: "Formation Loi 25 & signature d'engagement",
      d: "Protection des données de santé, confidentialité, protocole d'incident. Signature du code de conduite Maison Sereine avant la première mission.",
      badge: "Conforme Loi 25"
    },
  ];
  return (
    <section id="securite" style={{ padding: '112px 0', background: 'var(--primary)', color: '#E7EDE8' }}>
      <div className="container">
        <div style={{ maxWidth: 780, marginBottom: 64 }}>
          <div className="eyebrow" style={{ color: '#BCCCC3' }}>Sécurité & conformité</div>
          <h2 style={{ marginTop: 12, color: '#fff' }}>
            La sécurité n'est pas une option, c'est notre standard.
          </h2>
          <p style={{ color: '#BCCCC3', fontSize: 18, lineHeight: 1.55, marginTop: 18 }}>
            Avant qu'un étudiant ne franchisse la porte de votre proche, il passe par
            un parcours d'accréditation en trois étapes. Aucune exception, aucun raccourci.
          </p>
        </div>

        {/* Timeline visuelle — 3 étapes liées */}
        <div style={{ position: 'relative' }}>
          {/* Ligne horizontale derrière */}
          <div style={{
            position: 'absolute', top: 44, left: '8%', right: '8%', height: 2,
            background: 'rgba(255,255,255,0.18)', zIndex: 0
          }} className="sec-line" />

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
            position: 'relative', zIndex: 1
          }} className="sec-grid">
            {steps.map((s, i) => (
              <article key={s.n} style={{
                background: 'rgba(255,255,255,0.05)',
                border: '1px solid rgba(255,255,255,0.16)',
                borderRadius: 20, padding: 32,
                display: 'flex', flexDirection: 'column'
              }}>
                {/* Pastille numéro */}
                <div style={{
                  width: 88, height: 88, borderRadius: 999,
                  background: 'var(--accent)', color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontSize: 34,
                  boxShadow: '0 0 0 8px rgba(201,110,74,0.22)',
                  marginTop: -76, marginBottom: 20, alignSelf: 'center'
                }}>
                  {s.n}
                </div>
                <div className="row" style={{ gap: 10, justifyContent: 'center', marginBottom: 14 }}>
                  <Icon name={s.icon} size={18} style={{ color: '#BCCCC3' }} />
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11, color: '#9BB5A8',
                    textTransform: 'uppercase', letterSpacing: '.12em'
                  }}>{s.badge}</span>
                </div>
                <h3 style={{ fontSize: 21, color: '#fff', textAlign: 'center' }}>{s.t}</h3>
                <p style={{ color: '#BCCCC3', marginTop: 14, fontSize: 14.5, lineHeight: 1.55, textAlign: 'center' }}>
                  {s.d}
                </p>
              </article>
            ))}
          </div>
        </div>

        <div style={{
          marginTop: 56, padding: '20px 28px', display: 'flex', alignItems: 'center',
          gap: 20, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)',
          borderRadius: 16, flexWrap: 'wrap', justifyContent: 'center'
        }}>
          <div className="row" style={{ gap: 10, color: '#BCCCC3', fontSize: 14 }}>
            <Icon name="shield" size={16} /> Audit annuel indépendant
          </div>
          <div style={{ width: 1, height: 20, background: 'rgba(255,255,255,0.14)' }} />
          <div className="row" style={{ gap: 10, color: '#BCCCC3', fontSize: 14 }}>
            <Icon name="lock" size={16} /> Données hébergées au Canada
          </div>
          <div style={{ width: 1, height: 20, background: 'rgba(255,255,255,0.14)' }} />
          <div className="row" style={{ gap: 10, color: '#BCCCC3', fontSize: 14 }}>
            <Icon name="check" size={16} /> 100 % des étudiants accrédités
          </div>
        </div>
      </div>
    </section>
  );
};

const Testimonials = () => (
  <section style={{ padding: '112px 0', background: 'var(--primary)', color: '#E7EDE8' }}>
    <div className="container">
      <div className="eyebrow" style={{ color: '#BCCCC3' }}>Familles accompagnées</div>
      <h2 style={{ color: '#fff', marginTop: 10, maxWidth: 700 }}>« Enfin, on respire. »</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 48 }}>
        {testimonials.map((t, i) => (
          <blockquote key={i} style={{
            margin: 0, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)',
            borderRadius: 16, padding: 28, display: 'flex', flexDirection: 'column'
          }}>
            <Icon name="quote" size={28} style={{ color: 'var(--accent)' }} />
            <p style={{ marginTop: 16, fontSize: 17, lineHeight: 1.5, color: '#EAEFEC', flex: 1 }}>{t.quote}</p>
            <footer style={{ marginTop: 20, fontSize: 14, color: '#BCCCC3' }}>
              <strong style={{ color: '#fff', fontWeight: 500 }}>{t.name}</strong><br/>
              {t.role}
            </footer>
          </blockquote>
        ))}
      </div>
    </div>
  </section>
);

const CreditInfo = () => (
  <section id="credit-info" style={{ padding: '112px 0', background: 'var(--bg-2)' }}>
    <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center' }}>
      <div>
        <div className="eyebrow">Crédit d’impôt pour maintien à domicile des aînés (CMD)</div>
        <h2 style={{ marginTop: 10 }}>Jusqu'à 40 % récupérables auprès de Revenu Québec.</h2>
        <p style={{ color: 'var(--ink-2)', marginTop: 16, fontSize: 17, maxWidth: 520 }}>
          Destiné aux personnes de 70 ans ou plus résidant au Québec.<br/>
          Vous payez vos visites au tarif facturé. À chaque visite, nous remettons une
          <strong> facture détaillée</strong> indiquant la part admissible au CMD.<br/>
          Vous (ou un proche mandaté) joignez l'<strong>annexe J</strong> à votre déclaration de revenus
          pour récupérer jusqu'à <strong>40 %</strong> des dépenses admissibles en 2026.
        </p>
        <ul style={{ marginTop: 22, padding: 0, listStyle: 'none', display: 'grid', gap: 10, fontSize: 15 }}>
          {[
            "Bénéficiaire de 70 ans ou plus au 31 décembre",
            "Résidence principale au Québec",
            "Services admissibles (aide à la personne, entretien, répit)",
            "Facture détaillée du fournisseur conservée",
          ].map(b => (
            <li key={b} className="row" style={{ gap: 10 }}>
              <Icon name="check" size={16} style={{ color: 'var(--primary)' }} /> {b}
            </li>
          ))}
        </ul>
        <div style={{ marginTop: 18, padding: 14, background: 'var(--bg-2)', borderRadius: 10, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>
          <strong>À savoir.</strong> Le taux de 40 % s'applique aux dépenses admissibles dans la limite
          d'un plafond annuel (19 500 $ pour personne autonome, 25 500 $ pour personne non autonome
          en 2025). Le crédit est réduit de 3 % par dollar de revenu familial au-delà de 72 465 $ (2026).
        </div>
        <a href="https://www.revenuquebec.ca/fr/citoyens/credits-dimpot/credit-dimpot-pour-maintien-a-domicile/"
           target="_blank" rel="noopener" style={{ display: 'inline-block', marginTop: 20, fontSize: 14 }}>
          Voir les conditions détaillées sur Revenu Québec ↗
        </a>
      </div>

      <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 20, padding: 32 }}>
        <div className="row" style={{ justifyContent: 'space-between' }}>
          <h3 style={{ fontSize: 22 }}>Exemple concret</h3>
          <Icon name="sparkle" size={20} style={{ color: 'var(--accent)' }} />
        </div>
        <p style={{ color: 'var(--ink-3)', fontSize: 13, marginTop: 4 }}>
          Exemple : personne accompagnée, 84 ans — 2 visites / semaine × 2 h, Aide à la vie quotidienne.
        </p>
        <div style={{ marginTop: 20, display: 'grid', gap: 10 }}>
          {[
            ['Heures par mois', '≈ 17 h'],
            ['Tarif facturé (payé)', '664 $'],
            ['Crédit d\'impôt CMD estimé (40 %)', '–266 $'],
          ].map(([k, v]) => (
            <div key={k} className="row" style={{ justifyContent: 'space-between', padding: '10px 14px', background: 'var(--surface)', borderRadius: 10, border: '1px solid var(--line)', fontSize: 14 }}>
              <span style={{ color: 'var(--ink-3)' }}>{k}</span>
              <span style={{ fontWeight: 500 }}>{v}</span>
            </div>
          ))}
        </div>
        <hr className="hr" style={{ margin: '22px 0' }} />
        <div className="row" style={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span style={{ color: 'var(--ink-2)' }}>Coût effectif estimé après CMD</span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 36, color: 'var(--primary)' }}>398 $</span>
        </div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>/ mois — facture détaillée remise après chaque visite. Estimation pour revenu familial sous 72 465 $.</div>
        <a href="#booking" className="btn btn-primary" style={{ width: '100%', marginTop: 20 }}>Obtenir ma soumission <Icon name="arrow-right" size={16} /></a>
      </div>
    </div>
  </section>
);

const Urgence = () => (
  <section id="urgence" style={{ padding: '112px 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)' }}>
    <div className="container">
      <div style={{
        background: 'var(--surface)',
        border: '1px solid var(--line)',
        borderRadius: 24,
        padding: 56,
        display: 'grid',
        gridTemplateColumns: '1fr 1.2fr',
        gap: 56,
        alignItems: 'center',
        boxShadow: 'var(--shadow-1)'
      }} className="urg-grid">
        <div>
          <div className="row" style={{ gap: 12, marginBottom: 16 }}>
            <div style={{
              width: 56, height: 56, borderRadius: 999,
              background: 'var(--accent-soft)', color: 'var(--accent-2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 0 0 6px rgba(201,110,74,0.12)'
            }}>
              <Icon name="shield" size={26} />
            </div>
            <div className="eyebrow" style={{ color: 'var(--accent-2)' }}>Notre engagement de relève</div>
          </div>
          <h2 style={{ marginTop: 4 }}>Quand l'imprévu arrive, on est là.</h2>
          <p style={{ color: 'var(--ink-2)', marginTop: 20, fontSize: 17, lineHeight: 1.55 }}>
            Si un intervenant ne peut pas se présenter, on prévient tout de suite les
            personnes disponibles autour de chez vous et on fait notre possible pour
            organiser la relève. Une petite équipe à Québec suit chaque dossier — pas
            un robot, pas un centre d'appel à l'autre bout du monde.
          </p>
          <div className="row" style={{ gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
            <a href={`mailto:${(window.SiteConfig && window.SiteConfig.email) || 'contact@maisonsereine.ca'}`} className="btn btn-primary">
              <Icon name="mail" size={16} /> Nous écrire
            </a>
            <a href="#dashboard" className="btn btn-ghost">
              Voir mon espace famille <Icon name="arrow-right" size={16} />
            </a>
          </div>
        </div>

        <div style={{ display: 'grid', gap: 14 }}>
          {[
            { stat: 'Réponse', label: "Réaction prioritaire — alerte instantanée envoyée aux intervenants disponibles", icon: 'clock' },
            { stat: 'Profils', label: "Vérification rigoureuse — identité, études en santé et antécédents validés", icon: 'shield' },
            { stat: 'Direct',  label: "Support local — une équipe humaine à Québec pour vous épauler", icon: 'phone' },
            { stat: 'Soutien', label: "Engagement de relève — en cas d'imprévu, nous cherchons activement une solution", icon: 'check' },
          ].map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '140px 1fr auto', gap: 20,
              alignItems: 'center', padding: '20px 24px',
              background: 'var(--bg-2)', borderRadius: 14,
              border: '1px solid var(--line)'
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 22,
                color: 'var(--primary)', lineHeight: 1.1, fontWeight: 500,
                letterSpacing: '-0.01em'
              }}>{r.stat}</div>
              <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.4 }}>{r.label}</div>
              <Icon name={r.icon} size={20} style={{ color: 'var(--ink-3)' }} />
            </div>
          ))}
        </div>
      </div>

      {/* Mention juridique — obligation de moyens */}
      <p style={{
        marginTop: 28, fontSize: 12, lineHeight: 1.6,
        color: 'var(--ink-3)', maxWidth: 880, margin: '28px auto 0',
        textAlign: 'center', fontStyle: 'italic'
      }}>
        On est en lancement et on construit notre réseau au Québec. Maison Sereine fait son
        maximum pour organiser une relève, mais ne peut pas garantir un remplacement à
        100 % — c'est une obligation de moyens, pas de résultat. On reste transparents
        là-dessus.
      </p>
    </div>
  </section>
);

const StudentCTA = () => {
  // Taux BRUT versés à l'étudiant (travailleur autonome) — pas de retenue à la source.
  // Ne pas confondre avec le prix net famille (= brut famille − crédit CMD 40 %).
  const tiers = [
    {
      level: '01',
      name: 'Accompagnement & Social',
      rate: '20,65',
      desc: 'Idéal pour débuter ou pour des missions légères.',
      examples: 'Présence, sorties, lecture, courses',
      tone: 'soft',
    },
    {
      level: '02',
      name: 'Aide à la Vie Quotidienne',
      rate: '27,36',
      desc: 'Notre standard pour les étudiants en santé.',
      examples: 'Repas, ménage léger, courses, transferts assistés',
      tone: 'highlight',
    },
  ];

  return (
  <section id="espace-etudiant" style={{ padding: '96px 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)' }}>
    <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'flex-start' }}>
      <div>
        <div className="eyebrow">Espace étudiant · Québec</div>
        <h2 style={{ marginTop: 10 }}>Une paye, un horaire qui suit ton semestre.</h2>
        <p style={{ color: 'var(--ink-2)', marginTop: 14, fontSize: 17, maxWidth: 520 }}>
          Maison Sereine s'adresse aux étudiantes et étudiants de
          l'<strong>Université Laval</strong>, du <strong>Cégep Garneau</strong> et
          du <strong>Cégep Limoilou</strong> inscrits dans un programme de santé ou de
          service social. Tu choisis tes missions, ton horaire reste 100 % flexible.
        </p>

        {/* Trio de réassurances — flexibilité, paie hebdo, programmes reconnus */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 10, marginTop: 24
        }}>
          {[
            { icon: 'clock',  t: '100 % flexible', d: "Tu acceptes les missions qui collent à ta semaine." },
            { icon: 'sparkle', t: 'Paye le vendredi', d: "Virement bancaire chaque semaine, sans délai." },
            { icon: 'shield', t: 'Programmes reconnus', d: "ULaval · Garneau · Limoilou · Sainte-Foy." },
          ].map(b => (
            <div key={b.t} style={{
              padding: '14px 14px',
              background: 'var(--surface)', border: '1px solid var(--line)',
              borderRadius: 12,
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 999,
                background: 'var(--accent-soft)', color: 'var(--accent-2)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 8
              }}>
                <Icon name={b.icon} size={14} />
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, lineHeight: 1.2 }}>{b.t}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 3, lineHeight: 1.4 }}>{b.d}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 28 }}>
          <div className="eyebrow" style={{ color: 'var(--primary)' }}>3 étapes d'accréditation Élite</div>
          <ol style={{ listStyle: 'none', padding: 0, margin: '16px 0 0', display: 'grid', gap: 14 }}>
            {[
              { n: '01', icon: 'check',  t: 'Validation académique', d: "Télécharge ta preuve d'inscription dans un programme de santé ou de service social (ex. Soins infirmiers ULaval, Cégep Garneau)." },
              { n: '02', icon: 'shield', t: 'Vérification Sterling Backcheck', d: "100 % numérique depuis ton téléphone, ~5 minutes. Tu avances les frais à l'inscription — ils te sont intégralement remboursés après tes 10 premières heures de service." },
              { n: '03', icon: 'heart',  t: 'Preuve de compétences', d: "Fournis ta certification RCR / Premiers soins valide." },
            ].map(s => (
              <li key={s.n} style={{
                display: 'grid', gridTemplateColumns: '44px 1fr', gap: 14,
                padding: 16, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: 'var(--primary-soft)', color: 'var(--primary)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={s.icon} size={18} />
                </div>
                <div>
                  <div className="row" style={{ gap: 8, alignItems: 'baseline' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)' }}>{s.n}</span>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 17 }}>{s.t}</span>
                  </div>
                  <div style={{ color: 'var(--ink-2)', fontSize: 14, marginTop: 3 }}>{s.d}</div>
                </div>
              </li>
            ))}
          </ol>
          <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 18, lineHeight: 1.55, maxWidth: 520 }}>
            <strong style={{ color: 'var(--ink)' }}>Pas de formation inutile.</strong> Nous valorisons ton parcours.
            Une fois ces 3 critères validés, ton profil est activé pour accepter tes premières missions à Québec.
          </p>
        </div>

        <a href="#booking?role=student" className="btn btn-dark" style={{ marginTop: 24 }}>
          Devenir Étudiant Serein <Icon name="arrow-right" size={16} />
        </a>
      </div>

      {/* TABLEAU DE BORD DES GAINS */}
      <div className="student-revenue">
        <div className="row" style={{ gap: 10, marginBottom: 8 }}>
          <Icon name="sparkle" size={16} style={{ color: 'var(--accent-2)' }} />
          <span className="eyebrow" style={{ color: 'var(--accent-2)' }}>Tes Revenus Maison Sereine</span>
        </div>
        <h3 style={{ fontSize: 26, marginTop: 4, marginBottom: 6, lineHeight: 1.2 }}>
          Deux niveaux étudiants. Tu gardes 70 % du tarif client.
        </h3>
        <p style={{ color: 'var(--ink-2)', fontSize: 14, marginBottom: 16, lineHeight: 1.5 }}>
          Les missions Compagnie et Aide à la vie quotidienne sont confiées aux étudiant·es
          vérifié·es. Le niveau PAB côté familles (44,83 $/h) est assuré par un réseau de
          préposé·es diplômé·es — hors parcours étudiant. Maison Sereine conserve{' '}
          <strong>30 %</strong> ; le reste — <strong>70 %</strong> — t'est versé chaque vendredi.
        </p>

        {/* Mini-barre de répartition 70 / 30 */}
        <div style={{
          display: 'flex', height: 8, borderRadius: 999, overflow: 'hidden',
          marginBottom: 6, background: 'var(--line)'
        }}>
          <div style={{ flex: 70, background: 'var(--accent)' }} />
          <div style={{ flex: 30, background: 'var(--primary-soft)' }} />
        </div>
        <div className="row" style={{
          justifyContent: 'space-between', fontSize: 11,
          color: 'var(--ink-3)', fontFamily: 'var(--font-mono)',
          letterSpacing: '0.06em', textTransform: 'uppercase',
          marginBottom: 20
        }}>
          <span>70 % · Étudiant</span>
          <span>30 % · Plateforme</span>
        </div>

        <div className="tier-stack" style={{ display: 'grid', gap: 14 }}>
          {tiers.map(t => {
            const featured = t.tone === 'highlight';
            return (
              <div key={t.level} className="tier-card" style={{
                position: 'relative',
                padding: '20px 22px',
                background: featured ? 'var(--surface)' : 'var(--surface)',
                border: featured ? '2px solid var(--accent)' : '1px solid var(--line)',
                borderRadius: 16,
                boxShadow: featured ? 'var(--shadow-1)' : 'none',
              }}>
                {featured && (
                  <div style={{
                    position: 'absolute', top: -10, right: 16,
                    background: 'var(--accent)', color: '#fff',
                    padding: '4px 10px', borderRadius: 999,
                    fontSize: 10, fontFamily: 'var(--font-mono)',
                    letterSpacing: '0.06em', textTransform: 'uppercase'
                  }}>
                    Le standard
                  </div>
                )}

                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div className="row" style={{ gap: 8, alignItems: 'baseline' }}>
                      <span style={{
                        fontFamily: 'var(--font-mono)', fontSize: 11,
                        color: 'var(--ink-3)', letterSpacing: '0.08em'
                      }}>NIVEAU {t.level}</span>
                    </div>
                    <div style={{
                      fontFamily: 'var(--font-display)', fontSize: 18,
                      marginTop: 2, lineHeight: 1.25
                    }}>{t.name}</div>
                  </div>
                  <div style={{ textAlign: 'right', flexShrink: 0 }}>
                    <div className="tier-rate" style={{
                      fontFamily: 'var(--font-display)',
                      fontSize: 'clamp(26px, 4.5vw, 32px)',
                      color: 'var(--primary)',
                      lineHeight: 1,
                      fontWeight: 600,
                      letterSpacing: '-0.01em'
                    }}>
                      {t.rate} $<span style={{ fontSize: '0.5em', color: 'var(--ink-3)', fontWeight: 400 }}> / h</span>
                    </div>
                    <div style={{
                      fontSize: 10, color: 'var(--ink-3)',
                      fontFamily: 'var(--font-mono)', marginTop: 4,
                      letterSpacing: '0.06em', textTransform: 'uppercase'
                    }}>NET ÉTUDIANT · 70 % · VIRÉ VENDREDI</div>
                  </div>
                </div>

                <div style={{
                  fontSize: 13, color: 'var(--ink-2)',
                  marginTop: 12, lineHeight: 1.5
                }}>
                  {t.desc}
                </div>

                <div className="row" style={{ gap: 8, marginTop: 12, flexWrap: 'wrap' }}>
                  <span style={{
                    fontSize: 11, padding: '4px 10px',
                    background: 'var(--accent-soft)', color: 'var(--accent-2)',
                    borderRadius: 999, fontFamily: 'var(--font-mono)',
                    letterSpacing: '0.04em'
                  }}>+ Bonus Relève</span>
                  <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>
                    {t.examples}
                  </span>
                </div>

                <a href="#booking?role=student" className="tier-cta" style={{
                  display: 'none',
                  width: '100%', textAlign: 'center',
                  padding: '12px 14px', marginTop: 14,
                  background: featured ? 'var(--accent)' : 'transparent',
                  color: featured ? '#fff' : 'var(--accent-2)',
                  border: featured ? 'none' : '1px solid var(--accent)',
                  borderRadius: 10, fontSize: 13, fontWeight: 500,
                  textDecoration: 'none', minHeight: 44,
                  alignItems: 'center', justifyContent: 'center'
                }}>
                  Vérifier mon éligibilité →
                </a>
              </div>
            );
          })}
        </div>

        {/* Réassurance — Zéro paperasse */}
        <div style={{
          marginTop: 18, padding: '14px 16px',
          background: 'var(--primary-soft)',
          border: '1px solid var(--primary)',
          borderRadius: 12,
          display: 'flex', gap: 12, alignItems: 'flex-start'
        }}>
          <div style={{
            width: 28, height: 28, borderRadius: 999, flexShrink: 0,
            background: 'var(--primary)', color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}>
            <Icon name="check" size={14} />
          </div>
          <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.5 }}>
            <strong>Viré chaque vendredi.</strong> Le montant affiché est
            ce que tu reçois — <strong>70 % du tarif client</strong>. En tant que travailleur autonome, tu gères toi-même
            tes cotisations RRQ, RQAP et impôt. On te fournit un récapitulatif annuel
            pour simplifier tes déclarations.
          </div>
        </div>

        <p style={{
          marginTop: 14, fontSize: 11, color: 'var(--ink-3)',
          lineHeight: 1.5, fontStyle: 'italic'
        }}>
          Un bonus relève peut s'ajouter lorsque tu acceptes un remplacement
          d'urgence. Taux indicatifs — peuvent varier selon le mandat.
        </p>
      </div>
    </div>

    {/* Mobile-only: stack & show CTA buttons */}
    <style>{`
      @media (max-width: 860px) {
        .student-revenue .tier-card .tier-cta { display: flex !important; }
      }
    `}</style>
  </section>
  );
};

const FAQ = () => {
  const items = [
    {
      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 70 ans et plus.
            Il rembourse jusqu'à <strong>40 % des dépenses admissibles</strong>.
          </p>
          <p>
            Concrètement&nbsp;: l'aide à la vie quotidienne est facturée
            <strong> 39,08 $/h</strong>. Après application du crédit (−15,63 $/h),
            votre <strong>coût réel est de 23,45 $/h</strong>.
            Après chaque visite, nous remettons une facture détaillée indiquant
            la part admissible — vous (ou un proche mandaté) la joignez à
            l'<strong>annexe J</strong> de la déclaration de revenus.
          </p>
          <p style={{ fontSize: 14, color: 'var(--ink-3)' }}>
            Le taux est réduit de 3 % par dollar de revenu familial au-delà
            de 72 465 $ (barème 2026).
          </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 [open, setOpen] = React.useState(0); // première question ouverte par défaut

  return (
    <section id="faq" style={{ padding: '112px 0', background: 'var(--bg)' }}>
      <div className="container" style={{ maxWidth: 820 }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow">Questions fréquentes</div>
          <h2 style={{ marginTop: 12 }}>Vous vous demandez&nbsp;?</h2>
          <p style={{ color: 'var(--ink-2)', marginTop: 14, fontSize: 17, maxWidth: 580, margin: '14px auto 0' }}>
            Les trois questions que les familles nous posent le plus souvent
            avant de réserver leur première visite.
          </p>
        </div>

        <div className="faq-list">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <article key={i} className={"faq-item" + (isOpen ? ' is-open' : '')}>
                <button
                  className="faq-trigger"
                  aria-expanded={isOpen}
                  aria-controls={`faq-panel-${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-${i}`}
                  className="faq-panel"
                  role="region"
                  hidden={!isOpen}
                >
                  <div className="faq-panel-inner">{it.a}</div>
                </div>
              </article>
            );
          })}
        </div>

        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <a href="#booking" className="btn btn-primary" style={{ padding: '16px 28px', fontSize: 17 }}>
            Démarrer ma réservation <Icon name="arrow-right" size={18} />
          </a>
          <div style={{ marginTop: 14, fontSize: 13, color: 'var(--ink-3)' }}>
            Sans engagement · Soumission gratuite en 5 minutes
          </div>
        </div>
      </div>
    </section>
  );
};

/* —————————————————————————————————————————————————————
   Serenity — bannière courte, renvoie vers FAQ pour les détails financiers
   ————————————————————————————————————————————————————— */
const Serenity = () => (
  <section id="serenite" style={{
    padding: '120px 0',
    background: 'var(--primary)',
    color: '#E7EDE8',
    position: 'relative',
    overflow: 'hidden'
  }}>
    {/* Arc décoratif terracotta */}
    <div aria-hidden="true" style={{
      position: 'absolute', right: -120, top: -120, width: 360, height: 360,
      borderRadius: '50%', background: 'var(--accent)', opacity: 0.18, filter: 'blur(2px)'
    }} />
    <div aria-hidden="true" style={{
      position: 'absolute', left: -80, bottom: -140, width: 280, height: 280,
      borderRadius: '50%', border: '1px solid rgba(231,237,232,0.18)'
    }} />

    <div className="container" style={{
      position: 'relative', textAlign: 'center', maxWidth: 760, margin: '0 auto'
    }}>
      <div className="eyebrow" style={{ color: 'var(--accent)' }}>Sérénité à domicile</div>
      <h2 style={{
        fontSize: 'clamp(36px, 5vw, 56px)', marginTop: 18, color: '#fff',
        lineHeight: 1.1, letterSpacing: '-0.01em'
      }}>
        Le calme retrouvé,<br/>
        <em style={{ color: 'var(--accent-soft)' }}>au prix juste.</em>
      </h2>
      <p style={{
        marginTop: 22, fontSize: 18, lineHeight: 1.6,
        color: 'rgba(231,237,232,0.85)', maxWidth: 560, margin: '22px auto 0'
      }}>
        Une présence humaine, vérifiée, payée équitablement.
        Et un coût réel allégé grâce au crédit d'impôt CMD du Québec.
      </p>
      <div className="row" style={{
        justifyContent: 'center', gap: 14, marginTop: 36, flexWrap: 'wrap'
      }}>
        <a href="#faq?tab=famille" className="btn btn-primary" style={{ padding: '14px 28px', fontSize: 15 }}>
          Voir le détail financier <Icon name="arrow-right" size={16} />
        </a>
        <a href="#booking" className="btn btn-ghost" style={{
          padding: '14px 28px', fontSize: 15, color: '#fff',
          borderColor: 'rgba(231,237,232,0.3)', background: 'transparent'
        }}>
          Réserver une visite
        </a>
      </div>
    </div>
  </section>
);

const StudentBanner = () => (
  <section style={{ padding: '64px 0', background: 'var(--bg)' }}>
    <div className="container">
      <div style={{
        position: 'relative',
        background: 'var(--primary)',
        color: '#fff',
        borderRadius: 24,
        padding: '36px 40px',
        display: 'grid',
        gridTemplateColumns: '1fr auto',
        gap: 24,
        alignItems: 'center',
        overflow: 'hidden',
        boxShadow: 'var(--shadow-2)'
      }} className="student-banner">
        {/* Décor — arc terracotta discret en arrière-plan */}
        <div aria-hidden="true" style={{
          position: 'absolute', right: -60, top: -60,
          width: 220, height: 220, borderRadius: '50%',
          background: 'var(--accent)', opacity: 0.18,
          pointerEvents: 'none'
        }} />
        <div aria-hidden="true" style={{
          position: 'absolute', right: 80, bottom: -40,
          width: 120, height: 120, borderRadius: '50%',
          background: 'var(--accent)', opacity: 0.10,
          pointerEvents: 'none'
        }} />

        <div style={{ position: 'relative', zIndex: 1 }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 12,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'var(--accent)', marginBottom: 10
          }}>
            Espace étudiant
          </div>
          <div style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(24px, 3vw, 32px)',
            lineHeight: 1.2, letterSpacing: '-0.01em',
            marginBottom: 8, textWrap: 'balance'
          }}>
            Étudiant à Québec ? <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>Rejoignez Maison Sereine.</em>
          </div>
          <div style={{
            color: '#BCCCC3', fontSize: 15, lineHeight: 1.5,
            maxWidth: 540
          }}>
            Découvrez vos avantages et revenus — paye chaque vendredi,
            horaire 100 % flexible, 70 % du tarif client conservé.
          </div>
        </div>

        <a href="#faq?tab=etudiants" className="btn btn-primary" style={{
          background: 'var(--accent)', color: '#fff',
          whiteSpace: 'nowrap', position: 'relative', zIndex: 1,
          flexShrink: 0
        }}>
          Consulter la FAQ Étudiante <Icon name="arrow-right" size={16} />
        </a>
      </div>
    </div>

    <style>{`
      @media (max-width: 720px) {
        .student-banner {
          grid-template-columns: 1fr !important;
          padding: 28px 24px !important;
        }
      }
    `}</style>
  </section>
);

const HomePage = () => (
  <>
    <NavBar current="home" />
    <Hero />
    <TrustBar />
    <HowItWorks />
    <Releve />
    <Security />
    <Serenity />
    <Urgence />
    <StudentBanner />
    <Footer />
  </>
);

window.HomePage = HomePage;
