// cas-page.jsx — Études de cas anonymisées
const { useState: useStateCas } = React;

const CAS_DATA = {
  fr: {
    eyebrow: "Études de cas",
    hero: "Trois copropriétés. Trois fonds. Une approche.",
    sub: "Cas réels d'analyses préparées par Invia, anonymisés. Les chiffres proviennent directement des études de fonds de prévoyance fournies par les syndicats et de nos projections nettes de frais.",
    note: "Tous les noms, adresses, identifiants, années de construction et chiffres pouvant permettre l'identification d'un syndicat ont été retirés ou arrondis. Les profils décrits sont représentatifs de mandats réellement réalisés par Invia.",
    cases: [
      {
        id: "A",
        label: "Cas A",
        type: "Copropriété résidentielle multi-bâtiments",
        loc: "Grand Montréal",
        units: "Quelques dizaines d'unités",
        horizon: "25 ans",
        soldeInit: "≈ 130 k $",
        cotisInit: "≈ 85 k $ / an",
        cotisGrowth: "Indexée selon l'étude",
        decaiss: "Plus de quinze décaissements échelonnés sur l'horizon, totalisant environ 1,4 M $",
        rendementEtude: "≈ 2,3 %",
        rendementInvia: "≈ 4,6 %",
        soldeEtude: "≈ 2,4 M $",
        soldeInvia: "≈ 3,2 M $",
        gain: "≈ +825 k $",
        gainLabel: "Valeur additionnelle nette de frais sur l'horizon",
        ecart: "≈ +2 % par année · composé sur 25 ans",
        takeaway: "Mêmes cotisations. Mêmes décaissements. Aucune hausse de charge pour les copropriétaires. La seule différence : la façon dont l'argent est investi.",
      },
      {
        id: "B",
        label: "Cas B",
        type: "Copropriété mixte de petite taille",
        loc: "Grand Montréal",
        units: "Une vingtaine d'unités · immeuble récent",
        horizon: "25 ans",
        soldeInit: "≈ 80 k $",
        cotisInit: "≈ 32 k $ / an",
        cotisGrowth: "Cotisation moyenne sur l'horizon : ≈ 58 k $",
        decaiss: "Un décaissement majeur d'environ 565 k $ vers le milieu de l'horizon",
        rendementEtude: "≈ 1,5 %",
        rendementInvia: "≈ 4,5 %",
        soldeEtude: "≈ 605 k $",
        soldeInvia: "≈ 940 k $",
        gain: "≈ +330 k $",
        gainLabel: "Surplus projeté en fin d'horizon, net de frais",
        ecart: "≈ +3 % par année · sur un fonds initialement modeste",
        takeaway: "Sur un fonds plus jeune et plus petit, l'écart de rendement composé permet de couvrir le décaissement majeur sans cotisation spéciale ponctuelle.",
      },
      {
        id: "C",
        label: "Cas C",
        type: "Tour résidentielle de grande envergure",
        loc: "Région de Québec",
        units: "Plusieurs centaines d'unités",
        horizon: "25 ans",
        soldeInit: "≈ 350 k $",
        cotisInit: "≈ 155 k $ / an",
        cotisGrowth: "Cotisation moyenne sur l'horizon : ≈ 215 k $",
        decaiss: "Coût total des travaux planifiés : ≈ 5,7 M $",
        rendementEtude: "≈ 0,5 %",
        rendementInvia: "≈ 4,5 %",
        soldeEtude: "≈ 1,1 M $",
        soldeInvia: "≈ 2,5 M $",
        gain: "≈ +1,4 M $",
        gainLabel: "Écart projeté en fin d'horizon, net de frais",
        ecart: "≈ +4 % par année · sur un fonds à fort volume",
        takeaway: "Sur un fonds à plus fort volume, l'effet du rendement composé devient massif : la stratégie passive laisse plus de 1,4 M $ sur la table.",
      },
    ],
    summary: {
      eyebrow: "Vue d'ensemble",
      title: "Ce que ces trois cas démontrent",
      points: [
        { k: "01", t: "L'écart est structurel, pas spéculatif", d: "Dans les trois cas, l'écart de rendement (+2 à +4 %) provient de la même mécanique : capital constamment investi, instruments à capital protégé, échéances appariées aux décaissements de l'étude. Aucun pari de marché." },
        { k: "02", t: "L'effet d'échelle joue dans les deux sens", d: "Le Cas C montre qu'un fonds à fort volume amplifie l'écart de rendement composé. Le Cas B montre qu'à plus petite échelle, l'écart reste suffisant pour absorber les décaissements majeurs sans cotisation spéciale." },
        { k: "03", t: "Mêmes cotisations, mêmes décaissements", d: "Dans tous les cas, les hypothèses de cotisation et le calendrier de travaux de l'étude sont préservés à l'identique. Seul le rendement du capital change. Aucune hausse de charge pour les copropriétaires." },
        { k: "04", t: "Conformité 1071 C.c.Q. et Loi 16", d: "Tous les instruments retenus respectent l'article 1071 du Code civil et le cadre du Projet de loi 16 : capital garanti à 100 % à l'échéance, diversification par émetteur, liquidité couvrant les décaissements planifiés." },
      ],
    },
    discDisclaimer: "Les rendements futurs dépendent des conditions de marché au moment de chaque renouvellement et ne constituent pas une promesse de rendement. Les scénarios de référence (étude) reprennent le taux implicite de l'étude du fonds de prévoyance fournie par le syndicat. Les projections Invia sont basées sur l'historique des produits utilisés dans le portefeuille modèle, nettes de frais.",
    cta: {
      title: "Vous voulez la même analyse pour votre fonds ?",
      body: "Nous préparons une projection identique à partir de votre étude du fonds de prévoyance. Sans engagement.",
      btn: "Demander une analyse gratuite",
    },
  },
  en: {
    eyebrow: "Case studies",
    hero: "Three condominiums. Three reserve funds. One approach.",
    sub: "Real analyses prepared by Invia, anonymized. Numbers come directly from the reserve-fund studies provided by the syndicates and from our projections, net of fees.",
    note: "All names, addresses, identifiers, construction years and figures that could allow identification of a syndicate have been removed or rounded. The profiles described are representative of mandates actually carried out by Invia.",
    cases: [
      {
        id: "A",
        label: "Case A",
        type: "Multi-building residential condominium",
        loc: "Greater Montreal",
        units: "A few dozen units",
        horizon: "25 years",
        soldeInit: "≈ $130k",
        cotisInit: "≈ $85k / yr",
        cotisGrowth: "Indexed per the study",
        decaiss: "More than fifteen disbursements over the horizon, totaling ≈ $1.4M",
        rendementEtude: "≈ 2.3%",
        rendementInvia: "≈ 4.6%",
        soldeEtude: "≈ $2.4M",
        soldeInvia: "≈ $3.2M",
        gain: "≈ +$825k",
        gainLabel: "Net additional value over the horizon",
        ecart: "≈ +2% per year · compounded over 25 years",
        takeaway: "Same contributions. Same disbursements. No additional burden on co-owners. The only difference: how the money is invested.",
      },
      {
        id: "B",
        label: "Case B",
        type: "Small mixed-use condominium",
        loc: "Greater Montreal",
        units: "Around twenty units · recent building",
        horizon: "25 years",
        soldeInit: "≈ $80k",
        cotisInit: "≈ $32k / yr",
        cotisGrowth: "Average contribution: ≈ $58k",
        decaiss: "One major disbursement of about $565k mid-horizon",
        rendementEtude: "≈ 1.5%",
        rendementInvia: "≈ 4.5%",
        soldeEtude: "≈ $605k",
        soldeInvia: "≈ $940k",
        gain: "≈ +$330k",
        gainLabel: "Projected surplus at end of horizon, net of fees",
        ecart: "≈ +3% per year · on a small starting fund",
        takeaway: "On a younger and smaller fund, the compounded yield gap absorbs the major disbursement without a one-off special assessment.",
      },
      {
        id: "C",
        label: "Case C",
        type: "Large-scale residential tower",
        loc: "Quebec City area",
        units: "Several hundred units",
        horizon: "25 years",
        soldeInit: "≈ $350k",
        cotisInit: "≈ $155k / yr",
        cotisGrowth: "Average contribution: ≈ $215k",
        decaiss: "Total planned works: ≈ $5.7M",
        rendementEtude: "≈ 0.5%",
        rendementInvia: "≈ 4.5%",
        soldeEtude: "≈ $1.1M",
        soldeInvia: "≈ $2.5M",
        gain: "≈ +$1.4M",
        gainLabel: "Projected gap at end of horizon, net of fees",
        ecart: "≈ +4% per year · on a high-volume fund",
        takeaway: "On a high-volume fund, the compounding effect becomes massive: the passive strategy leaves more than $1.4M on the table.",
      },
    ],
    summary: {
      eyebrow: "Big picture",
      title: "What these three cases demonstrate",
      points: [
        { k: "01", t: "The gap is structural, not speculative", d: "In all three cases, the yield gap (+2% to +4%) comes from the same mechanics: capital constantly invested, principal-protected instruments, maturities matched to disbursements in the study. No market bets." },
        { k: "02", t: "Scale cuts both ways", d: "Case C shows that a high-volume fund amplifies compounded yield gap. Case B shows that even at smaller scale, the gap is enough to absorb major disbursements without a special assessment." },
        { k: "03", t: "Same contributions, same disbursements", d: "In every case, the contribution assumptions and the works calendar of the study are preserved as-is. Only the yield on capital changes. No additional burden on co-owners." },
        { k: "04", t: "Compliance with art. 1071 C.C.Q. and Bill 16", d: "All instruments selected comply with article 1071 of the Civil Code and the Bill 16 framework: capital 100% guaranteed at maturity, diversification by issuer, liquidity covering planned disbursements." },
      ],
    },
    discDisclaimer: "Future returns depend on market conditions at each renewal and do not constitute a return guarantee. Reference scenarios use the implicit yield of the syndicate's reserve-fund study. Invia projections are based on the historical performance of the products used in the model portfolio, net of fees.",
    cta: {
      title: "Want the same analysis for your fund?",
      body: "We prepare an identical projection from your reserve-fund study. No commitment.",
      btn: "Request a free analysis",
    },
  },
};

function CaseCard({ c, lang }) {
  return (
    <InView style={{
      borderTop: "1px solid var(--line)",
      paddingTop: 56, paddingBottom: 56,
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.4fr)", gap: 56, alignItems: "start" }} className="case-grid">
        {/* Left: identity */}
        <div>
          <div className="kpi-label" style={{ color: "var(--gold)", marginBottom: 16 }}>
            {c.label}
          </div>
          <h3 style={{
            fontFamily: "var(--serif)", fontSize: "clamp(28px, 2.6vw, 40px)",
            lineHeight: 1.1, letterSpacing: "-0.015em", marginBottom: 24, color: "var(--ink)",
          }}>{c.type}</h3>
          <dl style={{ display: "grid", gridTemplateColumns: "auto 1fr", columnGap: 20, rowGap: 10, fontSize: 14, lineHeight: 1.5 }}>
            <dt style={{ color: "var(--ink-soft)" }}>{lang === "fr" ? "Localisation" : "Location"}</dt><dd>{c.loc}</dd>
            <dt style={{ color: "var(--ink-soft)" }}>{lang === "fr" ? "Profil" : "Profile"}</dt><dd>{c.units}</dd>
            <dt style={{ color: "var(--ink-soft)" }}>{lang === "fr" ? "Horizon" : "Horizon"}</dt><dd>{c.horizon}</dd>
            <dt style={{ color: "var(--ink-soft)" }}>{lang === "fr" ? "Solde initial" : "Initial balance"}</dt><dd>{c.soldeInit}</dd>
            <dt style={{ color: "var(--ink-soft)" }}>{lang === "fr" ? "Cotisation initiale" : "Initial contribution"}</dt><dd>{c.cotisInit}</dd>
            <dt style={{ color: "var(--ink-soft)" }}>{lang === "fr" ? "Décaissements" : "Disbursements"}</dt><dd>{c.decaiss}</dd>
          </dl>
        </div>

        {/* Right: comparison + gain */}
        <div>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
            border: "1px solid var(--line)", marginBottom: 24,
          }}>
            <div style={{ padding: "24px 24px 28px", borderRight: "1px solid var(--line)" }}>
              <div className="kpi-label" style={{ marginBottom: 10 }}>{lang === "fr" ? "Scénario étude" : "Study scenario"}</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(28px, 2.6vw, 38px)", letterSpacing: "-0.01em", color: "var(--ink-soft)", lineHeight: 1.05 }}>{c.soldeEtude}</div>
              <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 8, fontFamily: "var(--mono)", letterSpacing: "0.04em" }}>
                {lang === "fr" ? "Rendement implicite" : "Implicit yield"} {c.rendementEtude}
              </div>
            </div>
            <div style={{ padding: "24px 24px 28px", background: "var(--cream-2)" }}>
              <div className="kpi-label" style={{ marginBottom: 10, color: "var(--gold-deep)" }}>{lang === "fr" ? "Approche Invia" : "Invia approach"}</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(28px, 2.6vw, 38px)", letterSpacing: "-0.01em", color: "var(--ink)", lineHeight: 1.05 }}>{c.soldeInvia}</div>
              <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 8, fontFamily: "var(--mono)", letterSpacing: "0.04em" }}>
                {lang === "fr" ? "Net de frais" : "Net of fees"} {c.rendementInvia}
              </div>
            </div>
          </div>

          <div style={{
            display: "flex", alignItems: "baseline", gap: 16, flexWrap: "wrap",
            paddingTop: 4, marginBottom: 18,
          }}>
            <div style={{
              fontFamily: "var(--serif)", fontSize: "clamp(40px, 4.4vw, 64px)",
              letterSpacing: "-0.02em", lineHeight: 1, color: "var(--gold-deep)",
            }}>{c.gain}</div>
            <div style={{ fontSize: 13, color: "var(--ink-soft)", maxWidth: 280, lineHeight: 1.4 }}>
              {c.gainLabel} · {c.ecart}
            </div>
          </div>

          <p style={{
            fontFamily: "var(--serif)", fontStyle: "italic",
            fontSize: "clamp(15px, 1.2vw, 17px)", lineHeight: 1.55,
            color: "var(--ink-soft)", borderLeft: "2px solid var(--gold)",
            paddingLeft: 18, marginTop: 24, maxWidth: 560,
          }}>
            {c.takeaway}
          </p>
        </div>
      </div>
    </InView>
  );
}

function CasPage({ lang, go }) {
  const t = window.I18N[lang];
  const p = CAS_DATA[lang];
  return (
    <div className="page" data-screen-label="Cas clients">
      <PageHeader eyebrow={p.eyebrow} title={p.hero} sub={p.sub}/>

      <section style={{ paddingTop: 8, paddingBottom: 24 }}>
        <div className="container">
          <div style={{
            border: "1px solid var(--line)", padding: "16px 20px",
            fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.55,
            background: "var(--cream-2)", maxWidth: 880,
          }}>
            <strong style={{ color: "var(--ink)", fontWeight: 600 }}>
              {lang === "fr" ? "Note de confidentialité — " : "Confidentiality note — "}
            </strong>
            {p.note}
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 24, paddingBottom: 48 }}>
        <div className="container">
          {p.cases.map((c, i) => (
            <CaseCard key={i} c={c} lang={lang}/>
          ))}
        </div>
      </section>

      {/* Summary */}
      <section style={{ paddingTop: 64, paddingBottom: 80, borderTop: "1px solid var(--line)", background: "var(--cream-2)" }}>
        <div className="container">
          <div className="kpi-label" style={{ marginBottom: 20 }}>{p.summary.eyebrow}</div>
          <h2 style={{
            fontFamily: "var(--serif)", fontSize: "clamp(32px, 3vw, 48px)",
            lineHeight: 1.05, letterSpacing: "-0.02em", marginBottom: 56, maxWidth: 780,
          }}>{p.summary.title}</h2>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 0,
          }}>
            {p.summary.points.map((pt, i) => (
              <InView key={i} delay={i * 60} style={{
                padding: "32px 28px 32px 0",
                borderTop: "1px solid var(--line)",
              }}>
                <div className="kpi-label" style={{ color: "var(--gold)", marginBottom: 14 }}>{pt.k}</div>
                <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 12, color: "var(--ink)" }}>{pt.t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-soft)" }}>{pt.d}</p>
              </InView>
            ))}
          </div>
          <p style={{
            marginTop: 48, fontSize: 11.5, lineHeight: 1.55,
            color: "var(--ink-soft)", maxWidth: 880, fontStyle: "italic",
          }}>{p.discDisclaimer}</p>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "96px 0 120px", background: "var(--ink)", color: "var(--cream)" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <h2 style={{
            fontFamily: "var(--serif)", fontSize: "clamp(32px, 3.4vw, 56px)",
            lineHeight: 1.05, letterSpacing: "-0.02em", marginBottom: 20,
            color: "var(--cream)",
          }}>{p.cta.title}</h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--cream-2)", maxWidth: 580, margin: "0 auto 36px" }}>
            {p.cta.body}
          </p>
          <button onClick={() => go("contact")} className="btn-gold" style={{
            background: "var(--gold)", color: "var(--ink)", border: "none",
            padding: "18px 36px", fontSize: 14, fontFamily: "var(--mono)",
            letterSpacing: "0.08em", textTransform: "uppercase", cursor: "pointer",
            fontWeight: 600,
          }}>{p.cta.btn} →</button>
        </div>
      </section>
    </div>
  );
}

/* responsive: collapse the case grid on small screens */
(function injectCasCss(){
  if (document.getElementById("__cas_css")) return;
  const s = document.createElement("style");
  s.id = "__cas_css";
  s.textContent = `
    @media (max-width: 860px) {
      .case-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    }
  `;
  document.head.appendChild(s);
})();

Object.assign(window, { CasPage });
