// home.jsx — homepage sections

// ---------- Animated KPI value (counts up the first numeric run when in view) ----------
const AnimatedKpi = ({ value }) => {
  const ref = React.useRef(null);
  const [display, setDisplay] = React.useState(value);
  const ranRef = React.useRef(false);
  React.useEffect(() => {
    if (!ref.current || ranRef.current) return;
    // Find a numeric run (with optional comma/period decimals)
    const match = String(value).match(/(-?\d{1,3}(?:[ \u202F]?\d{3})*(?:[.,]\d+)?)/);
    if (!match) { setDisplay(value); return; }
    const raw = match[1].replace(/[ \u202F]/g, "").replace(",", ".");
    const target = parseFloat(raw);
    if (!isFinite(target)) { setDisplay(value); return; }
    const decimals = (raw.split(".")[1] || "").length;
    const usesComma = match[1].includes(",");
    const prefix = value.slice(0, match.index);
    const suffix = value.slice(match.index + match[1].length);
    const fmt = (n) => {
      const s = decimals > 0 ? n.toFixed(decimals) : Math.round(n).toString();
      return prefix + (usesComma ? s.replace(".", ",") : s) + suffix;
    };
    setDisplay(fmt(0));
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting && !ranRef.current) {
          ranRef.current = true;
          const dur = 1100;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / dur);
            const eased = 1 - Math.pow(1 - t, 3);
            setDisplay(fmt(target * eased));
            if (t < 1) requestAnimationFrame(tick);
            else setDisplay(value);
          };
          requestAnimationFrame(tick);
          observer.disconnect();
        }
      });
    }, { threshold: 0.4 });
    observer.observe(ref.current);
    return () => observer.disconnect();
  }, [value]);
  return <span ref={ref}>{display}</span>;
};

const HomeHero = ({ lang, go }) => {
  const t = window.I18N[lang].hero;
  const ticker = window.I18N[lang].ticker;
  return (
    <section style={{ paddingTop: 120, paddingBottom: 0, background: "var(--cream)" }}>
      <div className="container">
        <div className="fade-up in" style={{ maxWidth: 1100 }}>
          <h1 className="hero-h1">
            {t.title.map((line, i) => {
              const isSecondary = i >= 2;
              const isItalic = i === 1 || i === 3;
              return (
                <span key={i} className={isSecondary ? "hero-line hero-line-secondary" : "hero-line hero-line-primary"} style={{ display: "block", opacity: 0, animation: `pagein .9s cubic-bezier(.2,.7,.2,1) ${0.1 + i * 0.12}s forwards`, fontStyle: isItalic ? "italic" : "normal", fontWeight: isItalic ? 300 : 400 }}>
                  {line}
                </span>);

            })}
          </h1>
          <p className="lead" style={{ marginTop: 36, maxWidth: 620 }}>{t.subtitle}</p>
          <div className="row" style={{ marginTop: 40 }}>
            <a className="btn btn-primary" onClick={() => go("contact")}>{t.ctaPrimary}<span className="arr">→</span></a>
            <a className="btn btn-ghost" onClick={() => go("contact")}>{t.ctaSecondary}</a>
          </div>
        </div>
        <InView className="grid-stats" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginTop: 100 }}>
          {[
          { n: t.stat1, l: t.stat1Label },
          { n: t.stat2, l: t.stat2Label },
          { n: t.stat3, l: t.stat3Label },
          { n: t.stat4, l: t.stat4Label }].
          map((k, i) =>
          <div key={i} className="kpi" style={{ paddingRight: 24, borderTop: "1px solid var(--line)", borderRight: i < 3 ? "1px solid var(--line)" : "none", paddingLeft: i > 0 ? 24 : 0 }}>
              <div className="kpi-num"><AnimatedKpi value={k.n} /></div>
              <div className="kpi-label">{k.l}</div>
            </div>
          )}
        </InView>
      </div>
      <div style={{ marginTop: 100 }}>
        <Ticker items={ticker} />
      </div>
    </section>);

};

// ---------- Reusable comparison table (placement options) ----------
function ComparisonTable({ lang }) {
  const compareRowsFr = [
  { label: "Capital garanti à l'échéance", a: true, b: true, c: true, d: true },
  { label: "Diversification multi-institutions canadiennes", a: false, b: false, c: "partiel", d: true },
  { label: "Accès aux billets à capital protégé", a: false, b: false, c: "partiel", d: true },
  { label: "Billets sur mesure structurés selon vos besoins", a: false, b: false, c: false, d: true },
  { label: "Stratégie alignée à votre étude du fonds", a: false, b: false, c: "partiel", d: true },
  { label: "Politique d'investissement formalisée pour le CA", a: false, b: false, c: "partiel", d: true },
  { label: "Spécialisation exclusive en fonds de prévoyance", a: false, b: false, c: false, d: true }];
  const compareRowsEn = [
  { label: "Capital protected at maturity", a: true, b: true, c: true, d: true },
  { label: "Diversification across Canadian institutions", a: false, b: false, c: "partial", d: true },
  { label: "Access to principal-protected notes", a: false, b: false, c: "partial", d: true },
  { label: "Custom-structured notes built around your needs", a: false, b: false, c: false, d: true },
  { label: "Strategy aligned with your reserve fund study", a: false, b: false, c: "partial", d: true },
  { label: "Documented investment policy for the board", a: false, b: false, c: "partial", d: true },
  { label: "Exclusive focus on reserve funds", a: false, b: false, c: false, d: true }];
  const rows = lang === "fr" ? compareRowsFr : compareRowsEn;
  const headerLabels = lang === "fr" ?
  ["Compte d'épargne", "CPG d'une banque", "Cabinet généraliste", "Invia"] :
  ["Savings account", "Single-bank GIC", "Generalist firm", "Invia"];
  const renderCell = (v) => {
    if (v === true) return <span className="check">●</span>;
    if (v === false) return <span className="cross">—</span>;
    return <span style={{ color: "var(--ink-soft)", fontSize: 11, fontFamily: "var(--mono)", letterSpacing: ".1em", textTransform: "uppercase" }}>{v}</span>;
  };
  return (
    <InView>
      <table className="compare">
        <thead>
          <tr>
            <th style={{ width: "34%" }}>{lang === "fr" ? "Critère" : "Criterion"}</th>
            {headerLabels.map((h, i) =>
            <th key={i} style={{ color: i === 3 ? "var(--gold-2)" : undefined, borderBottomColor: i === 3 ? "var(--gold)" : undefined }}>{h}</th>
            )}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) =>
          <tr key={i}>
              <td className="lose">{r.label}</td>
              <td>{renderCell(r.a)}</td>
              <td>{renderCell(r.b)}</td>
              <td>{renderCell(r.c)}</td>
              <td className="win" style={{ background: "rgba(184,148,92,0.06)" }}>{renderCell(r.d)}</td>
            </tr>
          )}
        </tbody>
      </table>
      <div style={{ marginTop: 16, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--ink-soft)", textTransform: "uppercase", whiteSpace: "pre-line" }}>
        {lang === "fr" ?
        "● disponible\nPartiel : selon le cabinet\n— non disponible" :
        "● available\nPartial: depending on the firm\n— not available"}
      </div>
    </InView>);
}

// ---------- Home: comparison section ----------
const HomeComparison = ({ lang }) => {
  return (
    <section style={{ background: "var(--bone)" }}>
      <div className="container">
        <div className="section-head">
          <div className="label">
            <InView><div className="eyebrow"><span className="dot"></span>{lang === "fr" ? "Comparatif" : "Comparison"}</div></InView>
          </div>
          <InView delay={80}><h2 style={{ maxWidth: 760 }}>{lang === "fr" ? "Comparatif des options de placement pour fonds de prévoyance." : "Reserve-fund placement options compared."}</h2></InView>
        </div>
        <ComparisonTable lang={lang} />
      </div>
    </section>);
};

// ---------- Home: video section ----------
const HomeVideo = ({ lang }) => {
  return (
    <section style={{ background: "var(--ink)", color: "var(--cream)", paddingTop: 96, paddingBottom: 96 }}>
      <div className="container">
        <div className="section-head">
          <div className="label">
            <InView><div className="eyebrow"><span className="dot"></span>{lang === "fr" ? "En vidéo" : "On video"}</div></InView>
          </div>
          <InView delay={80}><h2 style={{ color: "var(--cream)" }}>{lang === "fr" ? "L'opportunité Invia en quelques minutes." : "The Invia opportunity in a few minutes."}</h2></InView>
        </div>
        <InView>
          <div style={{ position: "relative", aspectRatio: "16 / 9", background: "var(--ink-2, #1a1a1a)", borderRadius: 4, overflow: "hidden", border: "1px solid var(--on-ink-line)" }}>
            <video
              controls
              poster="assets/video-poster.jpg"
              preload="none"
              onError={(e) => { e.currentTarget.style.display = "none"; }}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", background: "url(assets/video-poster.jpg) center/cover no-repeat" }}>
              {/* La source vidéo sera ajoutée par l'utilisateur dans assets/hero-video.mp4 */}
              {lang === "fr" ?
              "Votre navigateur ne supporte pas la lecture vidéo." :
              "Your browser does not support video playback."}
            </video>
          </div>
          <div style={{ marginTop: 16, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", color: "rgba(244,239,230,0.5)", textTransform: "uppercase" }}>
            {lang === "fr" ? "Vidéo · Présentation Invia" : "Video · Invia introduction"}
          </div>
        </InView>
      </div>
    </section>);
};

const HomeAffiliations = ({ lang }) => {
  const aff = window.I18N[lang].affiliations;
  if (!aff) return null;
  return (
    <section style={{ paddingTop: 56, paddingBottom: 56, background: "var(--cream)" }}>
      <div className="container">
        <InView style={{ marginBottom: 36 }}>
          <div className="eyebrow"><span className="dot"></span>{aff.eyebrow}</div>
        </InView>
        <InView delay={80}>
          <div className="partners-row">
            {aff.items.map((it, i) =>
            <a
              className="partner"
              key={i}
              href={it.href}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={it.name}>
              
                <div className="partner-logo-wrap">
                  {it.logo ?
                <img loading="lazy" decoding="async" className="partner-logo" src={it.logo} alt={it.name} /> :
                <span style={{ fontFamily: "var(--serif)", fontSize: 22 }}>{it.name}</span>}
                </div>
                <div className="partner-url">{it.urlLabel} <span aria-hidden="true">↗</span></div>
              </a>
            )}
          </div>
        </InView>
        {aff.note && (
          <InView delay={140}>
            <p style={{ marginTop: 28, maxWidth: 760, fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.6 }}>{aff.note}</p>
          </InView>
        )}
      </div>
    </section>);

};

const HomeNewsletter = ({ lang }) => {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [nlError, setNlError] = useState("");
  const [nlSending, setNlSending] = useState(false);
  const fr = lang === "fr";
  const submitNewsletter = async (e) => {
    e.preventDefault();
    if (!email) return;
    setNlError("");
    setNlSending(true);
    try {
      const fd = new FormData();
      fd.append("access_key", window.WEB3FORMS_KEY || "");
      fd.append("from_name", "Site Invia — Inscription bulletin");
      fd.append("subject", (fr ? "Nouvelle inscription au bulletin Invia" : "New Invia bulletin signup") + " — " + email);
      fd.append("email", email);
      fd.append("message", (fr ? "Inscription au bulletin mensuel : " : "Bulletin signup: ") + email);
      fd.append("replyto", email);
      fd.append("botcheck", "");
      const r = await fetch("https://api.web3forms.com/submit", { method: "POST", body: fd });
      const j = await r.json();
      if (j.success) { setSubmitted(true); }
      else { setNlError(j.message || (fr ? "L'envoi a échoué. Réessayez plus tard." : "Sending failed. Try again later.")); }
    } catch (err) {
      setNlError(fr ? "Connexion impossible. Réessayez plus tard." : "Connection failed. Try again later.");
    } finally {
      setNlSending(false);
    }
  };
  return (
    <section style={{ background: "var(--bone)", paddingTop: 72, paddingBottom: 72 }}>
      <div className="container container-tight">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <InView>
            <div className="eyebrow" style={{ marginBottom: 28 }}><span className="dot"></span>{fr ? "Bulletin mensuel" : "Monthly bulletin"}</div>
            <h2 style={{ fontSize: "clamp(32px, 3.6vw, 52px)", marginBottom: 24 }}>
              {fr ? <>Les meilleurs taux du mois, <span className="italic-soft">livrés dans votre boîte.</span></> : <>This month's best rates, <span className="italic-soft">delivered to your inbox.</span></>}
            </h2>
            <p style={{ fontSize: 16, color: "var(--ink-soft)", maxWidth: 480, lineHeight: 1.6 }}>
              {fr ?
              "Chaque mois : meilleures offres CPG, billets à capital protégé, fonds du marché monétaire et lecture du contexte de marché. Pour tous." :
              "Every month: best GIC offers, principal-protected notes, money-market funds and market-context read. For everyone."}
            </p>
          </InView>
          <InView delay={120}>
            {!submitted ?
            <form onSubmit={submitNewsletter} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div className="field">
                  <label>{fr ? "Courriel professionnel" : "Work email"}</label>
                  <input className="input" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder={fr ? "marie@..." : "marie@..."} />
                </div>
                <button type="submit" className="btn btn-primary" style={{ alignSelf: "flex-start" }} disabled={nlSending}>{nlSending ? (fr ? "Envoi…" : "Sending…") : (fr ? "Recevoir le bulletin" : "Subscribe")}<span className="arr">→</span></button>
                {nlError && <p style={{ fontSize: 13, color: "#b54a3a", marginTop: 4 }}>{nlError}</p>}
                <p style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 8, lineHeight: 1.6 }}>
                  {fr ?
                "Mensuel. Désabonnement en un clic. Aucun partage de courriel." :
                "Monthly. One-click unsubscribe. We never share your email."}
                </p>
              </form> :

            <div style={{ padding: "32px 0", borderTop: "1px solid var(--gold)" }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 28, marginBottom: 12, letterSpacing: "-0.01em" }}>
                  {fr ? "Merci. " : "Thank you. "}<span style={{ fontStyle: "italic", color: "var(--gold-2)" }}>{fr ? "C'est noté." : "You're in."}</span>
                </div>
                <p style={{ fontSize: 15, color: "var(--ink-soft)", maxWidth: 420 }}>
                  {fr ?
                "Vous recevrez le prochain bulletin Invia dès sa parution." :
                "You'll receive the next Invia bulletin as soon as it's published."}
                </p>
              </div>
            }
          </InView>
        </div>
      </div>
    </section>);

};

const HomeProblem = ({ lang }) => {
  const t = window.I18N[lang].problem;
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="label">
            <InView><div className="eyebrow"><span className="dot"></span>{t.eyebrow}</div></InView>
          </div>
          <InView delay={80}><h2>{t.title}</h2></InView>
        </div>
        <InView><p className="lead" style={{ marginBottom: 80, maxWidth: 720 }}>{t.body}</p></InView>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
          {t.points.map((p, i) =>
          <InView key={i} delay={i * 100} className="card" style={{ background: "transparent", border: "none", borderTop: "1px solid var(--ink)", paddingLeft: i === 0 ? 0 : 32, paddingRight: 32, paddingTop: 28, paddingBottom: 0, borderRadius: 0 }}>
              <div className="kpi-label" style={{ marginBottom: 24 }}>{p.k}</div>
              <h3 style={{ marginBottom: 16, fontSize: "clamp(22px, 2vw, 28px)" }}>{p.t}</h3>
              <p style={{ fontSize: 15 }}>{p.d}</p>
            </InView>
          )}
        </div>
      </div>
    </section>);

};

const HomeSolution = ({ lang, go }) => {
  const t = window.I18N[lang].solution;
  return (
    <section className="dark-section">
      <div className="container">
        <div className="section-head">
          <div className="label">
            <InView><div className="eyebrow"><span className="dot"></span>{t.eyebrow}</div></InView>
          </div>
          <InView delay={80}><h2>{t.title}</h2></InView>
        </div>
        <InView><p className="lead" style={{ color: "rgba(244,239,230,0.75)", marginBottom: 80, maxWidth: 720 }}>{t.body}</p></InView>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "60px 80px" }}>
          {t.pillars.map((p, i) =>
          <InView key={i} delay={i * 80} style={{ display: "flex", gap: 32, paddingTop: 32, borderTop: "1px solid var(--on-ink-line)" }}>
              <div style={{ fontFamily: "var(--serif)", fontSize: 28, fontStyle: "italic", color: "var(--gold)", minWidth: 32 }}>{p.n}</div>
              <div>
                <h3 style={{ marginBottom: 12, fontSize: "clamp(20px, 1.8vw, 26px)" }}>{p.t}</h3>
                <p style={{ color: "rgba(244,239,230,0.7)", fontSize: 15 }}>{p.d}</p>
              </div>
            </InView>
          )}
        </div>
      </div>
    </section>);

};

const CalcChart = ({ trajectory, horizon, fmt, lang, t }) => {
  const W = 460, H = 180, P = { l: 8, r: 8, t: 16, b: 24 };
  const innerW = W - P.l - P.r;
  const innerH = H - P.t - P.b;
  const all = [...trajectory.std, ...trajectory.inv];
  const maxV = Math.max(...all);
  const minV = Math.min(...all);
  const range = maxV - minV || 1;
  const x = (i) => P.l + (i / horizon) * innerW;
  const y = (v) => P.t + innerH - ((v - minV) / range) * innerH;
  const path = (arr) => arr.map((v, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(" ");
  const areaInvia = `${path(trajectory.inv)} L${x(horizon).toFixed(1)},${y(trajectory.std[horizon]).toFixed(1)} ` +
    trajectory.std.slice().reverse().map((v, i) => `L${x(horizon - i).toFixed(1)},${y(v).toFixed(1)}`).join(" ") + " Z";
  const yearLabel = lang === "fr" ? "An" : "Yr";
  return (
    <div style={{ marginTop: 28 }}>
      <div className="kpi-label" style={{ color: "rgba(244,239,230,0.6)", marginBottom: 12 }}>
        {lang === "fr" ? "Trajectoire sur " : "Trajectory over "}{horizon} {t.yrs}
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: "auto", display: "block" }} aria-label="Comparison chart">
        <path d={areaInvia} fill="var(--gold)" fillOpacity="0.14" />
        <path d={path(trajectory.std)} fill="none" stroke="rgba(244,239,230,0.55)" strokeWidth="1.5" strokeDasharray="4 4" />
        <path d={path(trajectory.inv)} fill="none" stroke="var(--gold)" strokeWidth="2.2" />
        <circle cx={x(horizon)} cy={y(trajectory.inv[horizon])} r="3.5" fill="var(--gold)" />
        <circle cx={x(horizon)} cy={y(trajectory.std[horizon])} r="3" fill="rgba(244,239,230,0.7)" />
        <text x={P.l} y={H - 6} fontSize="9" fontFamily="var(--mono)" fill="rgba(244,239,230,0.5)" letterSpacing="0.08em">{yearLabel} 0</text>
        <text x={W - P.r} y={H - 6} fontSize="9" fontFamily="var(--mono)" fill="rgba(244,239,230,0.5)" letterSpacing="0.08em" textAnchor="end">{yearLabel} {horizon}</text>
      </svg>
      <div style={{ display: "flex", gap: 24, marginTop: 14, fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.06em", color: "rgba(244,239,230,0.65)" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 18, height: 2, background: "var(--gold)" }}></span>{t.labelInvia}
        </div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 18, height: 0, borderTop: "1.5px dashed rgba(244,239,230,0.55)" }}></span>{t.labelStandard}
        </div>
      </div>
    </div>
  );
};

const HomeCalc = ({ lang, go }) => {
  const t = window.I18N[lang].calc;
  const [amount, setAmount] = useState(1000000);
  const [contrib, setContrib] = useState(50000);
  const [horizon, setHorizon] = useState(15);

  // Compounded balance with annually-indexed contributions.
  // Year n (1..H): balance = balance*(1+r) + contrib*(1+infl)^(n-1)
  const project = (rate, infl = 0.025) => {
    let bal = amount;
    let c = contrib;
    for (let y = 0; y < horizon; y++) {
      bal = bal * (1 + rate) + c;
      c = c * (1 + infl);
    }
    return bal;
  };
  const standard = project(0.025);
  const invia = project(0.048);

  // Year-by-year trajectory for the chart
  const trajectory = React.useMemo(() => {
    const std = [amount];
    const inv = [amount];
    let bs = amount, bi = amount, c = contrib;
    for (let y = 0; y < horizon; y++) {
      bs = bs * 1.025 + c;
      bi = bi * 1.048 + c;
      c = c * 1.025;
      std.push(bs);
      inv.push(bi);
    }
    return { std, inv };
  }, [amount, contrib, horizon]);

  const fmt = (n) => (lang === "fr" ?
  new Intl.NumberFormat("fr-CA", { style: "currency", currency: "CAD", maximumFractionDigits: 0 }) :
  new Intl.NumberFormat("en-CA", { style: "currency", currency: "CAD", maximumFractionDigits: 0 })).
  format(n);

  return (
    <section style={{ background: "var(--bone)" }}>
      <div className="container">
        <div className="section-head">
          <div className="label">
            <InView><div className="eyebrow"><span className="dot"></span>{t.eyebrow}</div></InView>
          </div>
          <InView delay={80}><h2>{t.title}</h2></InView>
        </div>
        <InView><p className="lead" style={{ marginBottom: 60, maxWidth: 680 }}>{t.body}</p></InView>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 60, alignItems: "start" }}>
          <InView style={{ display: "flex", flexDirection: "column", gap: 36 }}>
            <div className="field">
              <label>{t.labelAmount}</label>
              <div style={{ fontFamily: "var(--serif)", fontSize: 32, marginTop: 8, marginBottom: 12, letterSpacing: "-0.02em" }}>{fmt(amount)}</div>
              <input type="range" min="0" max="10000000" step="50000" value={amount} onChange={(e) => setAmount(+e.target.value)} style={{ accentColor: "var(--gold)" }} />
              <div className="kpi-label" style={{ display: "flex", justifyContent: "space-between", marginTop: 4 }}>
                <span>{lang === "fr" ? "0\u202F$" : "$0"}</span><span>{lang === "fr" ? "10\u202FM\u202F$" : "$10M"}</span>
              </div>
            </div>
            <div className="field">
              <label>{t.labelContrib}</label>
              <div style={{ fontFamily: "var(--serif)", fontSize: 32, marginTop: 8, marginBottom: 12, letterSpacing: "-0.02em" }}>
                {fmt(contrib)}
                <span style={{ fontFamily: "var(--sans)", fontSize: 13, color: "var(--ink-soft)", marginLeft: 10, fontStyle: "italic" }}>{lang === "fr" ? "/ an" : "/ yr"}</span>
              </div>
              <input type="range" min="0" max="1000000" step="10000" value={contrib} onChange={(e) => setContrib(+e.target.value)} style={{ accentColor: "var(--gold)" }} />
              <div className="kpi-label" style={{ display: "flex", justifyContent: "space-between", marginTop: 4 }}>
                <span>{lang === "fr" ? "0\u202F$" : "$0"}</span><span>{lang === "fr" ? "1\u202FM\u202F$" : "$1M"}</span>
              </div>
              <div style={{ fontSize: 11, fontFamily: "var(--mono)", color: "var(--ink-soft)", marginTop: 10, letterSpacing: "0.04em" }}>
                {t.labelContribHint}
              </div>
            </div>
            <div className="field">
              <label>{t.labelHorizon}</label>
              <div style={{ fontFamily: "var(--serif)", fontSize: 32, marginTop: 8, marginBottom: 12, letterSpacing: "-0.02em" }}>{horizon} {t.yrs}</div>
              <input type="range" min="3" max="25" step="1" value={horizon} onChange={(e) => setHorizon(+e.target.value)} style={{ accentColor: "var(--gold)" }} />
              <div className="kpi-label" style={{ display: "flex", justifyContent: "space-between", marginTop: 4 }}>
                <span>3 {t.yrs}</span><span>25 {t.yrs}</span>
              </div>
            </div>
          </InView>
          <InView delay={120} style={{ background: "var(--ink)", color: "var(--cream)", padding: 40, borderRadius: 4 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
              <div className="kpi-label" style={{ color: "rgba(244,239,230,0.6)" }}>{t.labelStandard}</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "rgba(244,239,230,0.4)", letterSpacing: "0.06em" }}>{t.labelStdRate}</div>
            </div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 36, marginBottom: 24, color: "rgba(244,239,230,0.7)", letterSpacing: "-0.02em" }}>{fmt(standard)}</div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
              <div className="kpi-label" style={{ color: "var(--gold)" }}>{t.labelInvia}</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--gold)", opacity: 0.7, letterSpacing: "0.06em" }}>{t.labelInviaRate}</div>
            </div>
            <div className="calc-result-num" style={{ fontFamily: "var(--serif)", fontSize: 56, marginBottom: 24, color: "var(--cream)", letterSpacing: "-0.025em" }}>{fmt(invia)}</div>
            <div style={{ height: 1, background: "var(--on-ink-line)", margin: "20px 0" }}></div>
            <div className="kpi-label" style={{ color: "rgba(244,239,230,0.6)", marginBottom: 6 }}>{t.labelGap}</div>
            <div className="calc-result-num" style={{ fontFamily: "var(--serif)", fontSize: 44, color: "var(--gold)", letterSpacing: "-0.02em" }}>+ {fmt(invia - standard)}</div>
            <CalcChart trajectory={trajectory} horizon={horizon} fmt={fmt} lang={lang} t={t} />
            <a className="btn btn-primary" onClick={() => go("contact")} style={{ marginTop: 32 }}>{t.cta}<span className="arr">→</span></a>
            <p style={{ fontSize: 10.5, color: "rgba(244,239,230,0.55)", marginTop: 24, fontFamily: "var(--sans)", lineHeight: 1.55 }}>{t.disclaimer}</p>
          </InView>
        </div>
      </div>
    </section>);

};

const HomeProcess = ({ lang }) => {
  const t = window.I18N[lang].process;
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="label">
            <InView><div className="eyebrow"><span className="dot"></span>{t.eyebrow}</div></InView>
          </div>
          <InView delay={80}><h2>{t.title}</h2></InView>
        </div>
        <div style={{ display: "grid", gap: 0 }}>
          {t.steps.map((s, i) =>
          <InView key={i} delay={i * 60} style={{ display: "grid", gridTemplateColumns: "60px 1fr 1.8fr 110px", gap: 32, padding: "36px 0", borderTop: "1px solid var(--line)", alignItems: "start" }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 13, letterSpacing: "0.14em", color: "var(--ink-soft)" }}>{s.n}</div>
              <h3 style={{ fontSize: "clamp(20px, 1.6vw, 26px)" }}>{s.t}</h3>
              <p style={{ fontSize: 15, maxWidth: 540 }}>{s.d}</p>
              <div className="kpi-label" style={{ textAlign: "right", color: "var(--gold-2)", fontSize: 11, lineHeight: 1.4, whiteSpace: "normal" }}>{s.time}</div>
            </InView>
          )}
        </div>
      </div>
    </section>);

};

const HomeProof = ({ lang }) => {
  const t = window.I18N[lang].proof;
  return (
    <section style={{ background: "var(--bone)" }}>
      <div className="container">
        <div className="section-head">
          <div className="label">
            <InView><div className="eyebrow"><span className="dot"></span>{t.eyebrow}</div></InView>
          </div>
          <InView delay={80}><h2>{t.title}</h2></InView>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "start" }}>
          <InView>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {t.items.map((it, i) =>
              <div key={i} style={{ padding: "32px 0", borderTop: "1px solid var(--line)" }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 24, fontStyle: "italic", color: "var(--gold-2)", marginBottom: 14 }}>{it.k}</div>
                  <p style={{ fontSize: 16, maxWidth: 560 }}>{it.v}</p>
                </div>
              )}
            </div>
          </InView>
          <InView delay={120} style={{ position: "sticky", top: 100 }}>
            <div style={{ background: "var(--cream-2)", padding: "32px 28px", borderRadius: 4 }}>
              <div className="kpi-label" style={{ marginBottom: 16 }}>{lang === "fr" ? "10\u202Fans · CPG vs Invia" : "10 yrs · GIC vs Invia"}</div>
              <GrowthChart height={240} />
              <div style={{ display: "flex", gap: 18, marginTop: 16, fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 16, height: 1, borderTop: "1.5px dashed var(--ink-soft)" }}></span>{lang === "fr" ? "CPG 2,50\u202F%" : "GIC 2.50%"}</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 16, height: 2, background: "var(--gold)" }}></span>{lang === "fr" ? "Invia 4,80\u202F%" : "Invia 4.80%"}</span>
              </div>
            </div>
          </InView>
        </div>
      </div>
    </section>);

};

const HomePortail = ({ lang }) => {
  const t = window.I18N[lang].portail;
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="label">
            <InView><div className="eyebrow"><span className="dot"></span>{t.eyebrow}</div></InView>
          </div>
          <InView delay={80}><h2>{t.title}</h2></InView>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 60, alignItems: "start" }}>
          <InView style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <p className="lead">{t.body}</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 12 }}>
              {t.features.map((f, i) =>
              <div key={i} style={{ borderTop: "1px solid var(--line)", paddingTop: 18 }}>
                  <h4 style={{ marginBottom: 8 }}>{f.t}</h4>
                  <p style={{ fontSize: 14 }}>{f.d}</p>
                </div>
              )}
            </div>
          </InView>
          <InView delay={120} style={{ background: "var(--ink)", borderRadius: 12, padding: 28, color: "var(--cream)", aspectRatio: "9/14", maxWidth: 360, justifySelf: "end", display: "flex", flexDirection: "column", gap: 22 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", color: "rgba(244,239,230,0.6)" }}>
              <span>INVIA · APP</span>
              <span>●●●</span>
            </div>
            <div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(244,239,230,0.5)", marginBottom: 8 }}>{lang === "fr" ? "Solde du fonds" : "Fund balance"}</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 32, letterSpacing: "-0.02em", color: "var(--cream)" }}>{lang === "fr" ? "675\u202F400,00\u202F$" : "$675,400.00"}</div>
              <div style={{ fontSize: 13, color: "var(--gold)", marginTop: 4 }}>{lang === "fr" ? "+ 4,82\u202F% cum." : "+ 4.82% YTD"}</div>
            </div>
            <div style={{ flex: 1, position: "relative", borderTop: "1px solid var(--on-ink-line)", paddingTop: 18 }}>
              <svg viewBox="0 0 200 80" style={{ width: "100%", height: 80 }}>
                <path d="M0,60 Q40,55 60,45 T120,30 T200,12" stroke="#B8945C" strokeWidth="1.5" fill="none" />
                <path d="M0,60 Q40,55 60,45 T120,30 T200,12 L200,80 L0,80 Z" fill="rgba(184,148,92,0.12)" />
              </svg>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {(lang === "fr" ?
              [["Rapport T2 2026", "Disponible"], ["Échéance dépôt", "12 sept."], ["Rendement net", "4,82\u202F%"]] :
              [["Q2 2026 report", "Available"], ["Maturity", "Sept 12"], ["Net return", "4.82%"]]).
              map(([k, v], i) =>
              <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 12, paddingBottom: 8, borderBottom: i < 2 ? "1px solid var(--on-ink-line)" : "none" }}>
                  <span style={{ color: "rgba(244,239,230,0.6)" }}>{k}</span>
                  <span style={{ color: "var(--cream)" }}>{v}</span>
                </div>
              )}
            </div>
          </InView>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 60 }}>
          <div></div>
          <div style={{ justifySelf: "end", maxWidth: 360, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.08em", color: "var(--ink-soft)", marginTop: 12, textTransform: "uppercase" }}>
            {lang === "fr" ? "Aperçu illustratif" : "Illustrative preview"}
          </div>
        </div>
      </div>
    </section>);

};

const HomeFAQ = ({ lang }) => {
  const t = window.I18N[lang].faq;
  const [open, setOpen] = useState(0);
  return (
    <section style={{ background: "var(--bone)" }}>
      <div className="container container-tight">
        <div className="section-head">
          <div className="label">
            <InView><div className="eyebrow"><span className="dot"></span>{t.eyebrow}</div></InView>
          </div>
          <InView delay={80}><h2>{t.title}</h2></InView>
        </div>
        <div>
          {t.items.map((it, i) =>
          <InView key={i} delay={i * 40} style={{ borderTop: "1px solid var(--line)" }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: "100%", textAlign: "left", padding: "28px 0", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24 }}>
                <span style={{ fontFamily: "var(--serif)", fontSize: "clamp(20px, 1.7vw, 24px)", color: "var(--ink)" }}>{it.q}</span>
                <span style={{ fontSize: 24, color: "var(--gold-2)", transition: "transform .3s", transform: open === i ? "rotate(45deg)" : "none" }}>+</span>
              </button>
              <div style={{ maxHeight: open === i ? 400 : 0, overflow: "hidden", transition: "max-height .4s ease" }}>
                <p style={{ paddingBottom: 28, paddingRight: 60, maxWidth: 720 }}>{it.a}</p>
              </div>
            </InView>
          )}
          <div style={{ borderTop: "1px solid var(--line)" }}></div>
        </div>
      </div>
    </section>);

};

const HomeContactCTA = ({ lang, go }) => {
  const t = window.I18N[lang].contactCta;
  return (
    <section className="dark-section" style={{ paddingTop: 96, paddingBottom: 96 }}>
      <div className="container container-tight" style={{ textAlign: "center" }}>
        <InView><div className="eyebrow" style={{ justifyContent: "center", marginBottom: 28 }}><span className="dot"></span>{t.eyebrow}</div></InView>
        <InView delay={60}><h2 style={{ marginBottom: 32, fontSize: "clamp(40px, 5.5vw, 76px)" }}>{t.title}</h2></InView>
        <InView delay={120}><p className="lead" style={{ margin: "0 auto 48px", color: "rgba(244,239,230,0.75)" }}>{t.body}</p></InView>
        <InView delay={180} className="row" style={{ justifyContent: "center" }}>
          <a className="btn btn-primary" onClick={() => go("contact")}>{t.ctaPrimary}<span className="arr">→</span></a>
          <a className="btn btn-ghost" onClick={() => go("ressources")}>{t.ctaSecondary}</a>
        </InView>
      </div>
    </section>);

};

function HomePage({ lang, go }) {
  return (
    <div className="page" data-screen-label="01 Accueil">
      <HomeHero lang={lang} go={go} />
      <HomeProblem lang={lang} />
      <HomeComparison lang={lang} />
      <HomeSolution lang={lang} go={go} />
      <HomeCalc lang={lang} go={go} />
      <HomeProcess lang={lang} />
      <HomeAffiliations lang={lang} />
      <HomeNewsletter lang={lang} />
      <HomeContactCTA lang={lang} go={go} />
    </div>);

}

window.HomePage = HomePage;
window.ComparisonTable = ComparisonTable;