/* ===== Services (detailed catalog) — Québec · étudiants vérifiés ===== */

const serviceCategories = [
  {
    id: 'compagnie',
    label: 'Compagnie & répit',
    sub: "Présence et répit pour proches aidants, assurés par un étudiant vérifié.",
    gross: "29,50 $", net: "17,70 $",
    items: [
      { icon: 'home',   t: "Présence & conversation",   d: "Une visite qui rompt l’isolement : lecture, thé, discussions.", p: "29,50 $/h" },
      { icon: 'flower', t: "Répit proche aidant",       d: "Quelques heures pour vous permettre de souffler. Admissible au CMD.", p: "29,50 $/h" },
      { icon: 'sun',    t: "Sorties accompagnées",      d: "Promenade, marché, parc — au rythme de la personne.",             p: "29,50 $/h" },
    ]
  },
  {
    id: 'aide',
    label: 'Aide à la vie quotidienne',
    sub: "Soutien aux activités instrumentales (AIVQ), supervisé.",
    gross: "39,08 $", net: "23,45 $", featured: true,
    items: [
      { icon: 'heart',   t: "Ménage léger & lessive",   d: "Entretien courant, lavage, repassage, rangement.",                p: "39,08 $/h" },
      { icon: 'sun',     t: "Préparation de repas",      d: "Cuisine adaptée, collations, vaisselle. Courses incluses au besoin.", p: "39,08 $/h" },
      { icon: 'car',     t: "Transport accompagné",     d: "Aux rendez-vous médicaux, au CLSC, aux activités.",                p: "41,67 $/h" },
    ]
  },
  {
    id: 'pab',
    label: 'Aide personnelle avec PAB',
    sub: "Réservé aux préposés diplômés (AEP-SAD ou DEP SASI) — jamais aux étudiant·es en formation.",
    gross: "44,83 $", net: "26,90 $",
    items: [
      { icon: 'pill',    t: "Retour d’hôpital",          d: "Relais à la sortie du centre hospitalier — présence diplômée.",   p: "44,83 $/h" },
      { icon: 'shield',  t: "Troubles cognitifs",        d: "Préposés formés, coordination avec le CLSC et la famille.",       p: "44,83 $/h" },
      { icon: 'bed',     t: "Présence de nuit",          d: "Surveillance rassurante 22 h → 6 h — préposé diplômé.",           p: "39 $/h (min. 8 h)" },
    ]
  },
];

const ServicesPage = () => (
  <>
    <NavBar current="services" />

    <section style={{ padding: '72px 0 48px' }}>
      <div className="container" style={{ maxWidth: 820 }}>
        <div className="eyebrow">Catalogue complet · 3 niveaux de service</div>
        <h1 style={{ marginTop: 10, fontSize: 'clamp(36px, 4.4vw, 56px)' }}>
          Tout ce dont un proche peut avoir besoin, sous un même toit.
        </h1>
        <p style={{ marginTop: 18, fontSize: 19, color: 'var(--ink-2)' }}>
          Compagnie et aide à la vie quotidienne assurées par des étudiants vérifiés des
          programmes de santé et de service social. Aide personnelle confiée à un préposé
          diplômé (AEP-SAD ou DEP SASI). Après chaque visite, une facture détaillée indique
          la part admissible au crédit d'impôt pour maintien à domicile — à joindre à votre
          annexe J pour récupérer jusqu'à 40 % auprès de Revenu Québec.
        </p>
      </div>
    </section>

    {serviceCategories.map((cat, i) => (
      <section key={cat.id} style={{
        padding: '56px 0',
        background: cat.featured ? 'var(--primary)' : (i % 2 === 0 ? 'transparent' : 'var(--bg-2)'),
        color: cat.featured ? '#fff' : 'inherit',
        borderTop: '1px solid var(--line)'
      }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 56, alignItems: 'start' }}>
            <div style={{ position: 'sticky', top: 100 }}>
              <div className="eyebrow" style={{ color: cat.featured ? '#BCCCC3' : undefined }}>
                Niveau {String(i+1).padStart(2,'0')} {cat.featured && '· le plus choisi'}
              </div>
              <h2 style={{ marginTop: 10, fontSize: 34, color: cat.featured ? '#fff' : undefined }}>{cat.label}</h2>
              <p style={{ color: cat.featured ? '#BCCCC3' : 'var(--ink-2)', marginTop: 10, fontSize: 15, maxWidth: 280 }}>
                {cat.sub}
              </p>
              <div style={{
                marginTop: 20, padding: 16, borderRadius: 12,
                background: cat.featured ? 'rgba(255,255,255,0.08)' : 'var(--surface)',
                border: '1px solid ' + (cat.featured ? 'rgba(255,255,255,0.14)' : 'var(--line)')
              }}>
                <div style={{ fontSize: 11, opacity: 0.75, textTransform: 'uppercase', letterSpacing: '.08em' }}>Tarif facturé</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, marginTop: 2, color: cat.featured ? '#fff' : 'var(--primary)' }}>
                  {cat.gross}<span style={{ fontSize: 14, opacity: 0.7 }}> / h</span>
                </div>
                <div style={{ fontSize: 11, marginTop: 4, opacity: 0.75 }}>coût effectif estimé {cat.net}/h après crédit d'impôt CMD (jusqu'à 40 %)</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 16 }}>
              {cat.items.map(s => (
                <article key={s.t} style={{
                  background: cat.featured ? 'rgba(255,255,255,0.06)' : 'var(--surface)',
                  border: '1px solid ' + (cat.featured ? 'rgba(255,255,255,0.16)' : 'var(--line)'),
                  borderRadius: 16, padding: 22,
                  display: 'flex', flexDirection: 'column', minHeight: 220, minWidth: 0
                }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 10,
                    background: cat.featured ? 'rgba(255,255,255,0.12)' : 'var(--accent-soft)',
                    color: cat.featured ? '#fff' : 'var(--accent-2)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center'
                  }}>
                    <Icon name={s.icon} size={20} />
                  </div>
                  <h3 style={{ fontSize: 19, marginTop: 16, color: cat.featured ? '#fff' : undefined }}>{s.t}</h3>
                  <p style={{ color: cat.featured ? '#BCCCC3' : 'var(--ink-2)', marginTop: 6, fontSize: 15, flex: 1 }}>{s.d}</p>
                  <div className="row" style={{ justifyContent: 'space-between', marginTop: 14, fontSize: 14 }}>
                    <span style={{ color: cat.featured ? '#BCCCC3' : 'var(--ink-3)' }}>{s.p}</span>
                    <a href="#booking" style={{ fontWeight: 500, color: cat.featured ? '#fff' : undefined }}>Réserver →</a>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>
    ))}

    <section style={{ padding: '96px 0', textAlign: 'center' }}>
      <div className="container" style={{ maxWidth: 640 }}>
        <div className="eyebrow">Vous hésitez ?</div>
        <h2 style={{ marginTop: 10 }}>Parlons-en — c’est gratuit et sans engagement.</h2>
        <p style={{ color: 'var(--ink-2)', fontSize: 18, marginTop: 16 }}>
          Nos conseillers répondent du lundi au samedi, 8 h à 20 h (HE).
        </p>
        <div className="row" style={{ justifyContent: 'center', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
          <a href={`mailto:${(window.SiteConfig && window.SiteConfig.email) || 'contact@maisonsereine.ca'}`} className="btn btn-dark"><Icon name="mail" size={16} /> {((window.SiteConfig && window.SiteConfig.email) || 'contact@maisonsereine.ca')}</a>
          <a href="#booking" className="btn btn-primary">Obtenir une soumission <Icon name="arrow-right" size={16} /></a>
        </div>
      </div>
    </section>

    <Footer />
  </>
);

window.ServicesPage = ServicesPage;