// methodo-page.jsx — Méthodologie Invia (page référence, lien footer uniquement)
function MethodoSection({ n, title, children }) {
  return (
    <InView style={{ borderTop: "1px solid var(--line)", padding: "40px 0" }}>
      <div style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 24, alignItems: "start" }}>
        <div className="kpi-label" style={{ color: "var(--gold)", paddingTop: 4 }}>{String(n).padStart(2, "0")}</div>
        <div>
          <h2 style={{
            fontFamily: "var(--serif)", fontSize: "clamp(22px, 1.9vw, 28px)",
            lineHeight: 1.2, letterSpacing: "-0.01em", marginBottom: 18, color: "var(--ink)",
          }}>{title}</h2>
          <div style={{ fontSize: 15, lineHeight: 1.7, color: "var(--ink-soft)", maxWidth: 760 }}>
            {children}
          </div>
        </div>
      </div>
    </InView>
  );
}

function MethodoPage({ lang, go }) {
  const t = window.I18N[lang];
  return (
    <div className="page" data-screen-label="Méthodologie">
      <PageHeader
        eyebrow={lang === "fr" ? "Cadre méthodologique" : "Methodology"}
        title={lang === "fr" ? "Méthodologie Invia." : "Invia methodology."}
        sub={lang === "fr"
          ? "Taux de référence pour les études de fonds de prévoyance. Document de référence pour firmes d'ingénierie, gestionnaires et conseils d'administration."
          : "Reference yields for reserve-fund studies. Reference document for engineering firms, managers and boards of directors."}
      />

      <section style={{ paddingTop: 8, paddingBottom: 80 }}>
        <div className="container">

          <MethodoSection n="1" title={lang === "fr" ? "Objectif" : "Objective"}>
            <p style={{ marginBottom: 12 }}>
              {lang === "fr"
                ? "Cette méthodologie vise à définir un taux de rendement de référence standardisé et réaliste à utiliser dans les études de fonds de prévoyance au Québec."
                : "This methodology aims to define a standardized, realistic reference yield for use in reserve-fund studies in Quebec."}
            </p>
            <p>
              {lang === "fr"
                ? "Elle présente également un taux optimisé Invia, qui illustre la différence de rendement possible lorsque la gestion du fonds est confiée à des professionnels du placement."
                : "It also presents an Invia optimized yield, which illustrates the potential yield difference when fund management is entrusted to investment professionals."}
            </p>
          </MethodoSection>

          <MethodoSection n="2" title={lang === "fr" ? "Portefeuille de référence (taux standard)" : "Reference portfolio (standard yield)"}>
            <p style={{ marginBottom: 16 }}>
              {lang === "fr"
                ? "Le taux standard représente le rendement attendu d'un fonds de prévoyance géré de façon prudente et conservatrice, sans stratégie d'optimisation du rendement."
                : "The standard yield represents the expected return of a reserve fund managed prudently and conservatively, without yield optimization."}
            </p>
            <p style={{ fontWeight: 600, color: "var(--ink)", marginBottom: 8 }}>
              {lang === "fr" ? "Composition du portefeuille :" : "Portfolio composition:"}
            </p>
            <ul style={{ paddingLeft: 20, marginBottom: 16 }}>
              <li>{lang === "fr" ? "25 % Compte épargne entreprise" : "25% business savings account"}</li>
              <li>{lang === "fr" ? "75 % Certificats de placement garanti (CPG) répartis également entre les termes de 1 an, 3 ans et 5 ans" : "75% Guaranteed Investment Certificates (GICs) split equally between 1-yr, 3-yr and 5-yr terms"}</li>
            </ul>
            <p style={{ fontWeight: 600, color: "var(--ink)", marginBottom: 8 }}>
              {lang === "fr" ? "Sources de données :" : "Data sources:"}
            </p>
            <ul style={{ paddingLeft: 20, marginBottom: 16 }}>
              <li>{lang === "fr" ? "Le taux du compte épargne entreprise provient du Compte Épargne entreprise Avantage Desjardins, pour les dépôts de moins de 100 000 $." : "The savings account rate comes from the Desjardins Avantage business savings account, for deposits under $100,000."}</li>
              <li>{lang === "fr" ? "Les taux des CPG sont obtenus à partir du site de la Banque du Canada, section Taux de rendement sur les certificats de placement garanti (CPG)." : "GIC rates are obtained from the Bank of Canada, GIC yield section."}</li>
              <li>{lang === "fr" ? "On utilise la moyenne nationale des taux affichés pour les CPG de 1 an, 3 ans et 5 ans." : "The national average of posted rates for 1-yr, 3-yr and 5-yr GICs is used."}</li>
              <li>{lang === "fr" ? "Chacun de ces trois termes est pondéré à un tiers (1/3 – 1/3 – 1/3) pour obtenir le taux CPG moyen." : "Each of the three terms is equally weighted (1/3 – 1/3 – 1/3) to obtain the average GIC rate."}</li>
            </ul>
            <div style={{ background: "var(--cream-2)", padding: "16px 20px", border: "1px solid var(--line)", fontFamily: "var(--mono)", fontSize: 13, lineHeight: 1.6 }}>
              <div style={{ fontWeight: 600, color: "var(--ink)", marginBottom: 6, fontFamily: "var(--sans)" }}>
                {lang === "fr" ? "Formule du taux standard :" : "Standard yield formula:"}
              </div>
              {lang === "fr"
                ? "Taux standard = (25 % × taux compte épargne entreprise) + (75 % × moyenne [CPG 1 an, CPG 3 ans, CPG 5 ans])"
                : "Standard yield = (25% × savings account rate) + (75% × average [1-yr GIC, 3-yr GIC, 5-yr GIC])"}
            </div>
          </MethodoSection>

          <MethodoSection n="3" title={lang === "fr" ? "Portefeuille optimisé (taux optimisé Invia)" : "Optimized portfolio (Invia optimized yield)"}>
            <p style={{ marginBottom: 16 }}>
              {lang === "fr"
                ? "Le taux optimisé Invia illustre le rendement potentiel qu'une copropriété peut atteindre lorsqu'elle confie la gestion de son fonds à une équipe spécialisée. Cette approche permet d'utiliser des produits à capital garanti offrant une exposition aux marchés financiers."
                : "The Invia optimized yield illustrates the potential return a syndicate can achieve when entrusting management to a specialized team. This approach uses principal-protected products with exposure to financial markets."}
            </p>
            <p style={{ fontWeight: 600, color: "var(--ink)", marginBottom: 8 }}>
              {lang === "fr" ? "Composition du portefeuille optimisé :" : "Optimized portfolio composition:"}
            </p>
            <ul style={{ paddingLeft: 20, marginBottom: 16 }}>
              <li>{lang === "fr" ? "10 % Fonds du marché monétaire" : "10% Money market fund"}</li>
              <li>{lang === "fr" ? "30 % CPG (moyenne des termes 1 an, 3 ans, 5 ans – Offres du moment)" : "30% GICs (average of 1, 3, 5-yr terms – current offers)"}</li>
              <li>{lang === "fr" ? "60 % Billets à capital protégé (série F, CAD)" : "60% Principal-protected notes (F-series, CAD)"}</li>
            </ul>
            <p style={{ fontWeight: 600, color: "var(--ink)", marginBottom: 8 }}>
              {lang === "fr" ? "Sources de données et hypothèses :" : "Data sources and assumptions:"}
            </p>
            <ul style={{ paddingLeft: 20, marginBottom: 16 }}>
              <li>{lang === "fr" ? "Les taux des CPG et des fonds du marché monétaire sont obtenus à partir des offres disponibles aux courtiers via notre plateforme de courtage (Dataphile)." : "GIC and money market rates are obtained from broker-available offers via our brokerage platform (Dataphile)."}</li>
              <li>{lang === "fr" ? "Les billets à capital protégé proviennent des grandes institutions canadiennes (BMO, RBC, Desjardins, CIBC, TD, Scotia, BNC)." : "Principal-protected notes come from major Canadian institutions (BMO, RBC, Desjardins, CIBC, TD, Scotia, NBC)."}</li>
              <li>{lang === "fr" ? "Seuls les produits série F libellés en dollars canadiens et 100 % à capital garanti sont retenus." : "Only F-series products in Canadian dollars and 100% capital-guaranteed are selected."}</li>
              <li>{lang === "fr" ? "Comme le rendement des billets à capital protégé n'est pas garanti, Invia a effectué une analyse interne sur l'historique des produits offerts. Selon ces études, les billets à capital protégé ont généré un rendement moyen équivalent à celui des CPG majoré de 2 %, net de frais." : "As principal-protected note returns are not guaranteed, Invia conducted internal analysis of the historical products offered. These studies show that principal-protected notes have generated an average return equivalent to GICs plus 2%, net of fees."}</li>
              <li>{lang === "fr" ? "Pour les besoins des projections, nous assumons donc un rendement égal au taux moyen des CPG + 2 %, ce qui reflète un scénario prudent et conservateur." : "For projection purposes, we assume a return equal to the average GIC rate + 2%, reflecting a prudent and conservative scenario."}</li>
            </ul>
            <div style={{ background: "var(--cream-2)", padding: "16px 20px", border: "1px solid var(--line)", fontFamily: "var(--mono)", fontSize: 13, lineHeight: 1.6 }}>
              <div style={{ fontWeight: 600, color: "var(--ink)", marginBottom: 6, fontFamily: "var(--sans)" }}>
                {lang === "fr" ? "Formule du taux optimisé :" : "Optimized yield formula:"}
              </div>
              {lang === "fr"
                ? "Taux optimisé = (10 % × taux fonds de marché monétaire) + (30 % × moyenne [CPG 1 an, CPG 3 ans, CPG 5 ans]) + (60 % × (moyenne [CPG 1 an, CPG 3 ans, CPG 5 ans] + 2 %))"
                : "Optimized yield = (10% × money market rate) + (30% × average [1-yr, 3-yr, 5-yr GIC]) + (60% × (average [1-yr, 3-yr, 5-yr GIC] + 2%))"}
            </div>
          </MethodoSection>

          <MethodoSection n="4" title={lang === "fr" ? "Exemple de calcul" : "Sample calculation"}>
            <div style={{ overflowX: "auto", marginTop: 8 }}>
              <table style={{ borderCollapse: "collapse", width: "100%", fontSize: 13, minWidth: 640 }}>
                <thead>
                  <tr style={{ background: "var(--cream-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
                    <th style={{ padding: "10px 12px", textAlign: "left", fontWeight: 600 }}>{lang === "fr" ? "Type de taux" : "Yield type"}</th>
                    <th style={{ padding: "10px 12px", textAlign: "right", fontWeight: 600 }}>{lang === "fr" ? "Liquidité" : "Liquidity"}</th>
                    <th style={{ padding: "10px 12px", textAlign: "right", fontWeight: 600 }}>{lang === "fr" ? "CPG 1 an" : "1-yr GIC"}</th>
                    <th style={{ padding: "10px 12px", textAlign: "right", fontWeight: 600 }}>{lang === "fr" ? "CPG 3 ans" : "3-yr GIC"}</th>
                    <th style={{ padding: "10px 12px", textAlign: "right", fontWeight: 600 }}>{lang === "fr" ? "CPG 5 ans" : "5-yr GIC"}</th>
                    <th style={{ padding: "10px 12px", textAlign: "right", fontWeight: 600 }}>{lang === "fr" ? "Rend. BCP" : "PPN yield"}</th>
                    <th style={{ padding: "10px 12px", textAlign: "right", fontWeight: 600, color: "var(--gold-deep)" }}>{lang === "fr" ? "Taux global" : "Global rate"}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr style={{ borderBottom: "1px solid var(--line)" }}>
                    <td style={{ padding: "12px" }}>{lang === "fr" ? "Taux standard" : "Standard yield"}</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)" }}>1,50 %</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)" }}>2,50 %</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)" }}>2,65 %</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)" }}>2,90 %</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)", color: "var(--ink-soft)" }}>—</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)", fontWeight: 600 }}>2,36 %</td>
                  </tr>
                  <tr style={{ borderBottom: "1px solid var(--line)", background: "var(--cream-2)" }}>
                    <td style={{ padding: "12px" }}>{lang === "fr" ? "Taux optimisé Invia" : "Invia optimized yield"}</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)" }}>2,50 %</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)" }}>3,00 %</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)" }}>3,25 %</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)" }}>3,50 %</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)" }}>5,25 %</td>
                    <td style={{ padding: "12px", textAlign: "right", fontFamily: "var(--mono)", fontWeight: 600, color: "var(--gold-deep)" }}>4,38 %</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 12, fontStyle: "italic" }}>
              {lang === "fr" ? "Rendement BCP estimé = moyenne des CPG + 2 %." : "Estimated PPN yield = average GIC + 2%."}
            </p>
          </MethodoSection>

          <MethodoSection n="5" title={lang === "fr" ? "Fréquence de mise à jour" : "Update frequency"}>
            <p style={{ marginBottom: 12 }}>
              {lang === "fr"
                ? "Les taux sont mis à jour sur une base mensuelle ou hebdomadaire, selon la disponibilité des données :"
                : "Rates are updated monthly or weekly, depending on data availability:"}
            </p>
            <ul style={{ paddingLeft: 20 }}>
              <li>{lang === "fr" ? "Banque du Canada (CPG)" : "Bank of Canada (GICs)"}</li>
              <li>{lang === "fr" ? "Desjardins (compte épargne entreprise)" : "Desjardins (business savings)"}</li>
              <li>{lang === "fr" ? "Documentation offerte par les institutions financières" : "Documentation provided by financial institutions"}</li>
              <li>{lang === "fr" ? "Dataphile (taux CPG courtier)" : "Dataphile (broker GIC rates)"}</li>
            </ul>
          </MethodoSection>

          <MethodoSection n="6" title={lang === "fr" ? "Jugement et contexte économique" : "Judgment and economic context"}>
            <p style={{ marginBottom: 12 }}>
              {lang === "fr"
                ? "Les taux présentés dans cette méthodologie reposent sur les moyennes actuellement observées sur le marché. Bien qu'ils ne soient pas adaptés à chaque copropriété, ils permettent de donner une vision réaliste et cohérente à long terme, notamment pour les projections sur 25 ans."
                : "The rates in this methodology rely on currently observed market averages. While not tailored to each syndicate, they provide a realistic, coherent long-term view, particularly for 25-year projections."}
            </p>
            <p>
              {lang === "fr"
                ? "Invia reconnaît que la conjoncture économique évolue et que les taux d'intérêt peuvent varier. Toutefois, le taux directeur de la Banque du Canada étant actuellement proche de sa cible de long terme, nous jugeons que les taux utilisés reflètent de façon raisonnable les rendements moyens attendus pour les prochaines décennies au Québec."
                : "Invia acknowledges that economic conditions evolve and interest rates may vary. However, since the Bank of Canada's policy rate is currently near its long-term target, we judge the rates used to reasonably reflect average expected returns for the coming decades in Quebec."}
            </p>
          </MethodoSection>

          <MethodoSection n="7" title={lang === "fr" ? "Conformité légale" : "Legal compliance"}>
            <p style={{ marginBottom: 16, fontStyle: "italic", borderLeft: "2px solid var(--gold)", paddingLeft: 18, color: "var(--ink)" }}>
              {lang === "fr"
                ? "« Le syndicat constitue, en fonction du coût estimatif des réparations majeures et du coût de remplacement des parties communes, un fonds de prévoyance affecté uniquement à ces réparations et remplacements. Ce fonds doit être en partie liquide, disponible à court terme et son capital doit être garanti. Il est la propriété du syndicat et son utilisation est déterminée par le conseil d'administration. »"
                : '"The syndicate establishes, based on the estimated cost of major repairs and the replacement cost of common portions, a contingency fund used only for those repairs and replacements. The fund must be partly liquid, available short-term, and its capital must be guaranteed. It is the property of the syndicate and its use is determined by the board of directors."'}
              <br/><span style={{ fontFamily: "var(--mono)", fontSize: 12, fontStyle: "normal" }}>— {lang === "fr" ? "Article 1071, Code civil du Québec" : "Article 1071, Civil Code of Quebec"}</span>
            </p>
            <p>
              {lang === "fr"
                ? "Les produits de placement utilisés dans le cadre de cette méthodologie respectent pleinement ces exigences. Invia limite volontairement ses placements aux produits admissibles selon cet article, soit ceux entièrement garantis en capital, disponibles à court terme et émis par des institutions financières reconnues. Ainsi, il est confirmé que tous les produits utilisés par Invia sont conformes aux conditions prévues à l'article 1071 du Code civil du Québec."
                : "The investment products used in this methodology fully respect these requirements. Invia voluntarily limits investments to products eligible under this article: those fully capital-guaranteed, available short-term, and issued by recognized financial institutions. All products used by Invia are confirmed compliant with article 1071 of the Civil Code of Quebec."}
            </p>
          </MethodoSection>

          <MethodoSection n="8" title={lang === "fr" ? "Utilisation" : "Intended use"}>
            <p style={{ marginBottom: 12 }}>
              {lang === "fr" ? "Le présent cadre méthodologique est conçu pour :" : "This methodological framework is designed for:"}
            </p>
            <ul style={{ paddingLeft: 20 }}>
              <li>{lang === "fr" ? "Les firmes d'ingénierie qui réalisent des études de fonds de prévoyance au Québec;" : "Engineering firms conducting reserve-fund studies in Quebec;"}</li>
              <li>{lang === "fr" ? "Les gestionnaires de copropriétés qui souhaitent disposer d'une base de référence objective;" : "Condominium managers who want an objective reference;"}</li>
              <li>{lang === "fr" ? "Les syndicats de copropriété qui désirent comparer la performance potentielle d'une gestion optimisée." : "Syndicates wishing to compare the potential performance of optimized management."}</li>
            </ul>
          </MethodoSection>

        </div>
      </section>

      <HomeContactCTA lang={lang} go={go}/>
    </div>
  );
}

Object.assign(window, { MethodoPage });
