// pages.jsx — inner pages (Approche, Fonds, Solutions, Ressources, À propos, Contact)
const { useState: useStateP } = React;

// ---------- generic page header ----------
function PageHeader({ eyebrow, title, sub }) {
  return (
    <section style={{ paddingTop: 180, paddingBottom: 60 }}>
      <div className="container">
        <InView delay={60}>
          <h1 style={{ fontSize: "clamp(44px, 6vw, 92px)", maxWidth: 1100 }}>{title}</h1>
        </InView>
        {sub && <InView delay={140}><p className="lead" style={{ marginTop: 36, maxWidth: 720 }}>{sub}</p></InView>}
      </div>
    </section>);

}


// ---------- Coproprietaire page ----------
function CoproprietairePage({ lang, go }) {
  const t = window.I18N[lang];
  const p = t.pages.copropriete;
  const proc = t.process;
  return (
    <div className="page" data-screen-label="02 Copropriete">
      <PageHeader eyebrow={t.nav.copropriete} title={p.hero} sub={p.sub} />
      {p.kpis && (
      <section style={{ paddingTop: 0, paddingBottom: 60 }}>
        <div className="container">
          <div className="page-kpi-band">
            {p.kpis.map((k, i) => (
              <InView key={i} delay={i * 60} style={{ padding: 32, paddingLeft: i === 0 ? 0 : 32, borderRight: i < 2 ? "1px solid var(--line)" : "none" }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(36px, 4vw, 56px)", lineHeight: 1, letterSpacing: "-0.02em", marginBottom: 16, color: "var(--ink)" }}>{k.value}</div>
                <div className="kpi-label" style={{ color: "var(--ink-soft)" }}>{k.label}</div>
              </InView>
            ))}
          </div>
          {p.kpiNote && <div style={{ marginTop: 16, fontFamily: "var(--mono)", fontSize: 10, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 720 }}>{p.kpiNote}</div>}
        </div>
      </section>
      )}
      <section style={{ paddingTop: 80 }}>
        <div className="container">
          <div className="section-head">
            <div className="label">
              <InView><div className="eyebrow"><span className="dot"></span>{p.valueEyebrow}</div></InView>
            </div>
            <InView delay={80}><h2>{p.valueTitle}</h2></InView>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
            {p.values.map((v, i) =>
            <InView key={i} delay={i * 80} style={{ padding: 32, paddingLeft: i === 0 ? 0 : 32, borderTop: "1px solid var(--ink)", borderRight: i < 2 ? "1px solid var(--line)" : "none" }}>
                <div className="kpi-label" style={{ marginBottom: 24, color: "var(--gold-2)" }}>{`0${i + 1}`}</div>
                <h3 style={{ marginBottom: 14, fontSize: "clamp(22px, 2vw, 28px)" }}>{v.t}</h3>
                <p style={{ fontSize: 15 }}>{v.d}</p>
              </InView>
            )}
          </div>
        </div>
      </section>
      <HomeCalc lang={lang} go={go} />
      <section style={{ background: "var(--bone)" }}>
        <div className="container">
          <div className="section-head">
            <div className="label">
              <InView><div className="eyebrow"><span className="dot"></span>{p.forWhomEyebrow}</div></InView>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
            {p.forWhom.map((it, i) =>
            <InView key={i} delay={i * 60} style={{ padding: "36px 36px 36px 0", paddingLeft: i === 1 ? 36 : 0, borderTop: "1px solid var(--line)", borderRight: i === 0 ? "1px solid var(--line)" : "none" }}>
                <h3 style={{ marginBottom: 14, fontSize: "clamp(22px, 2vw, 28px)" }}>{it.t}</h3>
                <p style={{ fontSize: 15 }}>{it.d}</p>
              </InView>
            )}
          </div>
        </div>
      </section>
      <section>
        <div className="container">
          <div className="section-head">
            <div className="label">
              <InView><div className="eyebrow"><span className="dot"></span>{p.howEyebrow}</div></InView>
            </div>
            <InView delay={80}><h2>{p.howTitle}</h2></InView>
          </div>
          <div style={{ display: "grid", gap: 0 }}>
            {proc.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>
      <section style={{ background: "var(--ink)", color: "var(--bone)" }} data-comment-anchor="copro-edge">
        <div className="container">
          <div className="section-head">
            <div className="label">
              <InView><div className="eyebrow" style={{ color: "var(--gold-2)" }}><span className="dot" style={{ background: "var(--gold-2)" }}></span>{p.edgeEyebrow}</div></InView>
            </div>
            <InView delay={80}><h2 style={{ color: "var(--bone)" }}>{p.edgeTitle}</h2></InView>
          </div>
          <InView delay={140} style={{ maxWidth: 760, marginBottom: 56 }}>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "rgba(244,239,230,0.78)" }}>{p.edgeBody}</p>
          </InView>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
            {p.edgePoints.map((pt, i) =>
            <InView key={i} delay={i * 80} style={{ padding: 32, paddingLeft: i === 0 ? 0 : 32, borderTop: "1px solid rgba(244,239,230,0.18)", borderRight: i < 2 ? "1px solid rgba(244,239,230,0.12)" : "none" }}>
                <div className="kpi-label" style={{ marginBottom: 24, color: "var(--gold-2)" }}>{`0${i + 1}`}</div>
                <h3 style={{ marginBottom: 14, fontSize: "clamp(20px, 1.7vw, 24px)", color: "var(--bone)" }}>{pt.t}</h3>
                <p style={{ fontSize: 14.5, color: "rgba(244,239,230,0.72)" }}>{pt.d}</p>
              </InView>
            )}
          </div>
        </div>
      </section>
      <HomeContactCTA lang={lang} go={go} />
    </div>);
}

// ---------- Professionnel page ----------
function ProfessionnelPage({ lang, go }) {
  const t = window.I18N[lang];
  const p = t.pages.professionnel;
  return (
    <div className="page" data-screen-label="03 Professionnel">
      <PageHeader eyebrow={t.nav.professionnel} title={p.hero} sub={p.sub} />
      {p.kpis && (
      <section style={{ paddingTop: 0, paddingBottom: 60 }}>
        <div className="container">
          <div className="page-kpi-band">
            {p.kpis.map((k, i) => (
              <InView key={i} delay={i * 60} style={{ padding: 32, paddingLeft: i === 0 ? 0 : 32, borderRight: i < 2 ? "1px solid var(--line)" : "none" }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(36px, 4vw, 56px)", lineHeight: 1, letterSpacing: "-0.02em", marginBottom: 16, color: "var(--ink)" }}>{k.value}</div>
                <div className="kpi-label" style={{ color: "var(--ink-soft)" }}>{k.label}</div>
              </InView>
            ))}
          </div>
        </div>
      </section>
      )}
      <section style={{ paddingTop: 80 }}>
        <div className="container">
          <div className="section-head">
            <div className="label">
              <InView><div className="eyebrow"><span className="dot"></span>{p.partnersEyebrow}</div></InView>
            </div>
            <InView delay={80}><h2>{p.partnersTitle}</h2></InView>
          </div>
          <div style={{ display: "grid", gap: 0 }}>
            {p.partners.map((it, i) =>
            <InView key={i} delay={i * 60} style={{ display: "grid", gridTemplateColumns: "60px 1fr 2.2fr", gap: 32, padding: "40px 0", borderTop: "1px solid var(--line)", alignItems: "start" }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 13, letterSpacing: "0.14em", color: "var(--ink-soft)" }}>{`0${i + 1}`}</div>
                <h3 style={{ fontSize: "clamp(22px, 2vw, 28px)" }}>{it.t}</h3>
                <p style={{ fontSize: 15, maxWidth: 640 }}>{it.d}</p>
              </InView>
            )}
          </div>
        </div>
      </section>
      <section style={{ background: "var(--bone)" }}>
        <div className="container">
          <div className="section-head">
            <div className="label">
              <InView><div className="eyebrow"><span className="dot"></span>{p.howEyebrow}</div></InView>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
            {p.howSteps.map((s, i) =>
            <InView key={i} delay={i * 80} style={{ padding: 32, paddingLeft: i === 0 ? 0 : 32, borderTop: "1px solid var(--ink)", borderRight: i < 2 ? "1px solid var(--line)" : "none" }}>
                <div className="kpi-label" style={{ marginBottom: 24, color: "var(--gold-2)" }}>{s.n}</div>
                <h3 style={{ marginBottom: 14, fontSize: "clamp(22px, 2vw, 28px)" }}>{s.t}</h3>
                <p style={{ fontSize: 15 }}>{s.d}</p>
              </InView>
            )}
          </div>
        </div>
      </section>
      {p.bulletin && <BulletinSection p={p.bulletin} />}
      <HomeContactCTA lang={lang} go={go} />
    </div>);
}

function BulletinSection({ p }) {
  const [state, setState] = React.useState({ name: "", email: "", org: "", role: "" });
  const [sent, setSent] = React.useState(false);
  const [bulletinError, setBulletinError] = React.useState("");
  const [bulletinSending, setBulletinSending] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (!state.email) return;
    setBulletinError("");
    setBulletinSending(true);
    try {
      const fd = new FormData();
      fd.append("access_key", window.WEB3FORMS_KEY || "");
      fd.append("from_name", "Site Invia — Bulletin Pros");
      fd.append("subject", "Nouvelle inscription bulletin Pros — " + (state.name || state.email));
      fd.append("name", state.name);
      fd.append("email", state.email);
      fd.append("organization", state.org);
      fd.append("role", state.role);
      fd.append("message", `Inscription bulletin Pros\nNom: ${state.name}\nCourriel: ${state.email}\nOrganisation: ${state.org}\nRôle: ${state.role}`);
      fd.append("replyto", state.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) { setSent(true); }
      else { setBulletinError(j.message || "L'envoi a échoué. Réessayez plus tard."); }
    } catch (err) {
      setBulletinError("Connexion impossible. Réessayez plus tard.");
    } finally {
      setBulletinSending(false);
    }
  };
  return (
    <section style={{ background: "var(--ink)", color: "var(--bone)" }} data-comment-anchor="pro-bulletin">
      <div className="container">
        <div className="bulletin-grid" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "start" }}>
          <InView>
            <div className="eyebrow" style={{ color: "var(--gold-2)", marginBottom: 24 }}>
              <span className="dot" style={{ background: "var(--gold-2)" }}></span>{p.eyebrow}
            </div>
            <h2 style={{ color: "var(--bone)", marginBottom: 28, fontSize: "clamp(32px, 3.4vw, 48px)" }}>{p.title}</h2>
            <p style={{ color: "rgba(246,244,239,0.78)", fontSize: 17, lineHeight: 1.6, marginBottom: 32, maxWidth: 560 }}>{p.body}</p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 14 }}>
              {p.bullets.map((b, i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "start", color: "rgba(246,244,239,0.88)", fontSize: 15, lineHeight: 1.5 }}>
                  <span style={{ color: "var(--gold-2)", fontFamily: "var(--mono)", fontSize: 13, marginTop: 3 }}>—</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </InView>
          <InView delay={120}>
            <div style={{ background: "rgba(246,244,239,0.06)", border: "1px solid rgba(246,244,239,0.14)", padding: 36 }}>
              <h3 style={{ color: "var(--bone)", fontSize: 22, marginBottom: 10 }}>{p.formTitle}</h3>
              <p style={{ color: "rgba(246,244,239,0.62)", fontSize: 13.5, lineHeight: 1.55, marginBottom: 24 }}>{p.formSub}</p>
              {sent ? (
                <div style={{ padding: "32px 0", color: "var(--gold-2)", fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.4 }}>{p.thanks}</div>
              ) : (
                <form onSubmit={submit} style={{ display: "grid", gap: 14 }}>
                  <BulletinField label={p.fieldName} value={state.name} onChange={(v) => setState({ ...state, name: v })} />
                  <BulletinField label={p.fieldEmail} type="email" required value={state.email} onChange={(v) => setState({ ...state, email: v })} />
                  <BulletinField label={p.fieldOrg} value={state.org} onChange={(v) => setState({ ...state, org: v })} />
                  <BulletinField label={p.fieldRole} value={state.role} onChange={(v) => setState({ ...state, role: v })} />
                  <button type="submit" disabled={bulletinSending} style={{ marginTop: 8, background: "var(--gold-2)", color: "var(--ink)", border: "none", padding: "16px 24px", fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", cursor: bulletinSending ? "not-allowed" : "pointer", opacity: bulletinSending ? 0.6 : 1 }}>{bulletinSending ? "Envoi…" : p.submit}</button>
                  {bulletinError && <p style={{ color: "#e8a99a", fontSize: 12, marginTop: 2 }}>{bulletinError}</p>}
                  <p style={{ color: "rgba(246,244,239,0.5)", fontSize: 11.5, lineHeight: 1.5, marginTop: 4 }}>{p.consent}</p>
                </form>
              )}
            </div>
          </InView>
        </div>
      </div>
    </section>
  );
}

function BulletinField({ label, type = "text", required, value, onChange }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(246,244,239,0.6)", marginBottom: 8 }}>{label}{required && <span style={{ color: "var(--gold-2)" }}> *</span>}</div>
      <input
        type={type}
        required={required}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        style={{ width: "100%", background: "transparent", border: "none", borderBottom: "1px solid rgba(246,244,239,0.25)", padding: "8px 0", color: "var(--bone)", fontSize: 15, fontFamily: "var(--sans)", outline: "none" }}
      />
    </label>
  );
}


// ---------- Ressources page ----------
function RessourcesPage({ lang, go }) {
  const t = window.I18N[lang];
  const p = t.pages.ressources;
  return (
    <div className="page" data-screen-label="05 Ressources">
      <PageHeader eyebrow={t.nav.ressources} title={p.hero} sub={p.sub} />
      <section style={{ paddingTop: 24, paddingBottom: 56 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
            {p.articles.map((a, i) => {
              const isFeat = i === 0;
              const isExt = !!a.href;
              const Wrapper = isExt ? 'a' : 'div';
              const wrapperProps = isExt ? { href: a.href, target: "_blank", rel: "noopener noreferrer" } : {};
              return (
                <InView key={i} delay={i * 60} style={{ gridColumn: isFeat ? "span 3" : undefined, padding: isFeat ? "40px 32px" : 32, borderTop: "1px solid var(--line)", borderRight: !isFeat && i % 3 !== 0 ? "" : undefined, background: isFeat ? "var(--ink)" : "transparent", color: isFeat ? "var(--cream)" : "var(--ink)", display: "flex", flexDirection: "column", gap: 16, minHeight: 240, opacity: a.upcoming ? 0.5 : 1 }}>
                  <div className="kpi-label" style={{ color: isFeat ? "var(--gold)" : a.upcoming ? "var(--ink-soft)" : "var(--ink-soft)" }}>{a.tag}{a.time ? ` · ${a.time}` : ""}{a.upcoming ? ` · ${lang === "fr" ? "À paraître" : "Upcoming"}` : ""}</div>
                  <h3 style={{ color: isFeat ? "var(--cream)" : "var(--ink)", fontSize: isFeat ? "clamp(28px, 3vw, 44px)" : "clamp(20px, 1.6vw, 24px)", maxWidth: isFeat ? 700 : "auto" }}>{a.t}</h3>
                  <p style={{ color: isFeat ? "rgba(244,239,230,0.75)" : "var(--ink-soft)", fontSize: 15, flex: 1, maxWidth: isFeat ? 700 : "auto" }}>{a.d}</p>
                  {!a.upcoming && (
                  a.href ?
                  <a href={a.href} target="_blank" rel="noopener noreferrer" className="btn-link" style={{ color: isFeat ? "var(--cream)" : "var(--ink)", borderBottomColor: isFeat ? "var(--cream)" : "var(--ink)" }}>{a.cta || (lang === "fr" ? "Lire l'article" : "Read article")} →</a> :
                  <a className="btn-link" style={{ color: isFeat ? "var(--cream)" : "var(--ink)", borderBottomColor: isFeat ? "var(--cream)" : "var(--ink)" }}>{a.cta || (lang === "fr" ? "Accéder" : "Access")} →</a>)
                  }
                </InView>);

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

}

// ---------- A propos page ----------
function AproposPage({ lang, go }) {
  const t = window.I18N[lang];
  const p = t.pages.apropos;
  return (
    <div className="page" data-screen-label="06 A propos">
      <PageHeader eyebrow={t.nav.apropos} title={p.hero} sub={p.sub} />
      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
            <InView>
              <div style={{ aspectRatio: "4 / 5", overflow: "hidden", borderRadius: 4, background: "var(--cream-2)", position: "relative" }}>
                <img loading="lazy" decoding="async" src={p.founder.photo} alt={p.founder.name}
                onError={(e) => {e.currentTarget.style.display = "none";e.currentTarget.nextSibling.style.display = "flex";}}
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 18%", filter: "saturate(0.92) contrast(1.02)" }} />
                <div style={{ display: "none", position: "absolute", inset: 0, alignItems: "center", justifyContent: "center", background: "var(--ink)", color: "var(--cream)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase" }}>
                  Photo · {lang === "fr" ? "à fournir" : "to provide"}
                </div>
              </div>
              <div style={{ marginTop: 18, fontFamily: "var(--serif)", fontSize: 22, letterSpacing: "-0.01em" }}>{p.founder.name}</div>
              <div className="kpi-label" style={{ marginTop: 4 }}>{p.founder.role}</div>
            </InView>
            <InView delay={120}>
              <p className="lead" style={{ marginBottom: 32 }}>{p.founder.bio}</p>
              <div style={{ paddingLeft: 24, borderLeft: "2px solid var(--gold)" }}>
                <p style={{ fontFamily: "var(--serif)", fontSize: "clamp(22px, 2vw, 28px)", lineHeight: 1.4, color: "var(--ink)" }}>{p.founder.quote}</p>
              </div>
            </InView>
          </div>
        </div>
      </section>
      <section>
        <div className="container">
          <InView><div className="eyebrow" style={{ marginBottom: 32 }}><span className="dot"></span>{lang === "fr" ? "Valeurs" : "Values"}</div></InView>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
            {p.values.map((v, i) =>
            <InView key={i} delay={i * 60} style={{ padding: 24, paddingLeft: i === 0 ? 0 : 24, borderTop: "1px solid var(--ink)", borderRight: i < 3 ? "1px solid var(--line)" : "none" }}>
                <div className="kpi-label" style={{ marginBottom: 18, color: "var(--gold-2)" }}>{`0${i + 1}`}</div>
                <h4 style={{ marginBottom: 12 }}>{v.t}</h4>
                <p style={{ fontSize: 14 }}>{v.d}</p>
              </InView>
            )}
          </div>
        </div>
      </section>
      {p.memberships &&
      <section style={{ background: "var(--bone)" }}>
          <div className="container">
            <div className="section-head">
              <div className="label">
                <InView><div className="eyebrow"><span className="dot"></span>{p.memberships.eyebrow}</div></InView>
              </div>
              <InView delay={80}><h2 style={{ maxWidth: 820 }}>{p.memberships.title}</h2></InView>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, marginTop: 24 }}>
              {p.memberships.items.map((it, i) =>
            <InView key={i} delay={i * 80} style={{ padding: 32, paddingLeft: i === 0 ? 0 : 32, borderTop: "1px solid var(--ink)", borderRight: i === 0 ? "1px solid var(--line)" : "none" }}>
                  {it.logo ? (
                    <div style={{ height: 88, marginBottom: 22, display: "flex", alignItems: "center", justifyContent: "flex-start" }}>
                      <img loading="lazy" decoding="async" src={it.logo} alt={it.name} className="partner-logo" style={{ maxHeight: it.name === "RGCQ" ? 96 : 80, width: "auto", objectFit: "contain" }} />
                    </div>
                  ) : (
                    <div style={{ fontFamily: "var(--display)", fontSize: 56, lineHeight: 1, color: "var(--gold-2)", marginBottom: 18, letterSpacing: "-0.02em" }}>{it.name}</div>
                  )}
                  <div style={{ fontSize: 16, lineHeight: 1.5, marginBottom: 12, maxWidth: 360 }}>{it.full}</div>
                  <div className="kpi-label" style={{ color: "var(--ink-soft)" }}>{it.role}</div>
                  {it.href && <a href={it.href} target="_blank" rel="noopener" style={{ display: "inline-block", marginTop: 18, fontSize: 13, fontFamily: "var(--mono)", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink)", borderBottom: "1px solid var(--ink)", paddingBottom: 2 }}>{it.href.replace(/^https?:\/\//, "")} →</a>}
                </InView>
            )}
            </div>
          </div>
        </section>
      }
      {p.team &&
      <section style={{ background: "var(--bone)" }}>
          <div className="container">
            <div className="section-head">
              <div className="label">
                <InView><div className="eyebrow"><span className="dot"></span>{p.team.eyebrow}</div></InView>
              </div>
              <InView delay={80}>
                <h2>{p.team.title}</h2>
                <p className="lead" style={{ marginTop: 24 }}>{p.team.body}</p>
              </InView>
            </div>
            <div className="team-grid">
              {p.team.members.map((m, i) =>
            <InView key={i} delay={i * 40} className="team-card">
                  <div className="team-photo-wrap">
                    {m.img ?
                <img loading="lazy" decoding="async" src={m.img} alt={m.name} className="team-photo" /> :
                <Placeholder h={300} label={`MEMBRE ${i + 1}`} />
                }
                  </div>
                  <div>
                    <h4 style={{ marginBottom: 4 }}>{m.name}</h4>
                    <div className="kpi-label">{m.role}</div>
                  </div>
                </InView>
            )}
            </div>
          </div>
        </section>
      }
      {p.partners &&
      <section style={{ background: "var(--bone)" }}>
          <div className="container">
            <div className="section-head">
              <InView><div className="eyebrow"><span className="dot"></span>{p.partners.eyebrow}</div></InView>
              <InView delay={80}><h2 style={{ maxWidth: 760 }}>{p.partners.title}</h2></InView>
              <InView delay={120}><p className="lead" style={{ maxWidth: 720 }}>{p.partners.body}</p></InView>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, marginTop: 16 }}>
              {p.partners.members.map((m, i) =>
            <InView key={i} delay={i * 50}>
                  <div style={{ aspectRatio: "1 / 1", overflow: "hidden", borderRadius: 4, background: "var(--cream-2)", marginBottom: 16 }}>
                    <img loading="lazy" decoding="async" src={m.img} alt={m.name}
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 18%", filter: "saturate(0.92) contrast(1.02)" }}
                onError={(e) => {e.currentTarget.style.display = "none";}} />
                  </div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 18, letterSpacing: "-0.005em", lineHeight: 1.25, marginBottom: 6 }}>{m.name}</div>
                  <div className="kpi-label" style={{ whiteSpace: "pre-line", lineHeight: 1.5, fontSize: 10 }}>{m.role}</div>
                </InView>
            )}
            </div>
          </div>
        </section>
      }
      {p.network &&
      <section>
          <div className="container">
            <div className="section-head">
              <InView><div className="eyebrow"><span className="dot"></span>{p.network.eyebrow}</div></InView>
              <InView delay={80}><h2 style={{ maxWidth: 760 }}>{p.network.title}</h2></InView>
              <InView delay={120}><p className="lead" style={{ maxWidth: 720 }}>{p.network.body}</p></InView>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0 }}>
              {p.network.pillars.map((it, i) =>
            <InView key={i} delay={i * 60} style={{
              padding: "32px 32px 32px 0",
              paddingLeft: i % 2 === 1 ? 32 : 0,
              borderTop: "1px solid var(--line)",
              borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none"
            }}>
                  <h4 style={{ marginBottom: 10 }}>
                    {it.href ?
                <a href={it.href} target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none", borderBottom: "1px solid var(--gold)", paddingBottom: 1 }}>{it.t} <span aria-hidden="true" style={{ fontSize: 12, color: "var(--gold-2)" }}>↗</span></a> :
                it.t}
                  </h4>
                  <p style={{ fontSize: 15 }}>{it.d}</p>
                </InView>
            )}
            </div>
          </div>
        </section>
      }
      <HomeContactCTA lang={lang} go={go} />
    </div>);

}

// ---------- Contact page (multi-step form + options) ----------
function ContactPage({ lang, go }) {
  const t = window.I18N[lang];
  const p = t.pages.contact;
  const [step, setStep] = useStateP(1);
  const [data, setData] = useStateP({ name: "", email: "", phone: "", role: "", building: "", balance: "", file: null, message: "" });
  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const next = () => setStep((s) => Math.min(s + 1, 3));
  const back = () => setStep((s) => Math.max(s - 1, 1));
  const [diagError, setDiagError] = useStateP("");
  const [diagSending, setDiagSending] = useStateP(false);
  const submitDiagnostic = async () => {
    setDiagError("");
    setDiagSending(true);
    try {
      const fd = new FormData();
      fd.append("access_key", window.WEB3FORMS_KEY || "");
      fd.append("from_name", "Site Invia — Diagnostic");
      fd.append("subject", (lang === "fr" ? "Nouvelle demande de diagnostic — " : "New diagnostic request — ") + (data.building || data.name));
      fd.append("name", data.name);
      fd.append("email", data.email);
      fd.append("phone", data.phone);
      fd.append("role", data.role);
      fd.append("building", data.building);
      fd.append("balance", data.balance);
      fd.append("message", data.message);
      fd.append("replyto", data.email);
      fd.append("botcheck", "");
      if (data.file) fd.append("attachment", data.file, data.file.name);
      const r = await fetch("https://api.web3forms.com/submit", { method: "POST", body: fd });
      const j = await r.json();
      if (j.success) { setStep(3); } else {
        setDiagError(j.message || (lang === "fr" ? "L'envoi a échoué. Réessayez ou écrivez-nous à info@inviagf.ca." : "Sending failed. Try again or email us at info@inviagf.ca."));
      }
    } catch (e) {
      setDiagError(lang === "fr" ? "Connexion impossible. Réessayez ou écrivez-nous à info@inviagf.ca." : "Connection failed. Try again or email us at info@inviagf.ca.");
    } finally {
      setDiagSending(false);
    }
  };
  const scrollToForm = () => {const el = document.getElementById("diagnostic-form");if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" });};
  const scrollToQuick = () => {const el = document.getElementById("quick-message");if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" });};
  // option ctas (top of page)
  const optionAction = (i) => {
    if (i === 0) {window.open("https://outlook.office.com/bookwithme/user/1b3977aff8e7404a879d2d9302716e29@inviagf.ca?anonymous&ismsaljsauthenabled&ep=plink", "_blank", "noopener,noreferrer");}
    else if (i === 1) {scrollToForm();} else
    if (i === 2) {scrollToQuick();}
  };
  // quick message form
  const [qm, setQm] = useStateP({ name: "", email: "", subject: "", message: "", sent: false });
  const updateQm = (k, v) => setQm((d) => ({ ...d, [k]: v }));
  const [qmError, setQmError] = useStateP("");
  const [qmSending, setQmSending] = useStateP(false);
  const sendQuick = async () => {
    setQmError("");
    setQmSending(true);
    try {
      const fd = new FormData();
      fd.append("access_key", window.WEB3FORMS_KEY || "");
      fd.append("from_name", "Site Invia — Message direct");
      fd.append("subject", qm.subject || (lang === "fr" ? "Demande d'information : Invia" : "Information request: Invia"));
      fd.append("name", qm.name);
      fd.append("email", qm.email);
      fd.append("message", qm.message);
      fd.append("replyto", qm.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) {
        setQm((d) => ({ ...d, sent: true }));
      } else {
        setQmError(j.message || (lang === "fr" ? "L'envoi a échoué. Réessayez ou écrivez-nous à info@inviagf.ca." : "Sending failed. Try again or email us at info@inviagf.ca."));
      }
    } catch (e) {
      setQmError(lang === "fr" ? "Connexion impossible. Réessayez ou écrivez-nous à info@inviagf.ca." : "Connection failed. Try again or email us at info@inviagf.ca.");
    } finally {
      setQmSending(false);
    }
  };
  const ql = lang === "fr" ? {
    eyebrow: "Message direct", title: "Une question rapide ?",
    sub: "Pas besoin de l'étude du fonds. Écrivez-nous directement, nous répondons sous un jour ouvrable.",
    name: "Nom", email: "Courriel", subject: "Sujet (optionnel)", message: "Votre message",
    send: "Envoyer le message", sending: "Envoi en cours…", sent: "Merci. Votre message a bien été envoyé, nous vous revenons sous un jour ouvrable.",
    placeholder: "Bonjour, j'aimerais en savoir plus sur…"
  } : {
    eyebrow: "Direct message", title: "A quick question?",
    sub: "No need for the reserve-fund study. Write to us directly, we reply within one business day.",
    name: "Name", email: "Email", subject: "Subject (optional)", message: "Your message",
    send: "Send message", sending: "Sending…", sent: "Thanks. Your message has been sent, we'll get back to you within one business day.",
    placeholder: "Hi, I'd like to know more about…"
  };
  const labels = lang === "fr" ? {
    n: "Vos coordonnées", b: "Votre étude du fonds", d: "C'est envoyé.",
    name: "Nom complet", email: "Courriel", phone: "Téléphone", role: "Votre rôle",
    building: "Nom de l'immeuble", balance: "Solde approximatif du fonds",
    file: "Étude du fonds de prévoyance", fileHint: "Téléversez votre étude la plus récente (PDF, Excel ou Word). Elle contient déjà l'essentiel : flux de décaissement, horizon, hypothèses. C'est tout ce qu'il nous faut pour vous donner une lecture concrète.",
    fileChoose: "Choisir un fichier", fileChange: "Remplacer", fileNone: "Aucun fichier sélectionné",
    fileSkip: "Je n'ai pas l'étude sous la main", fileSkipNote: "Pas de problème, décrivez votre situation en quelques lignes ci-dessous et nous vous recontacterons pour la suite.",
    message: "Précisions (optionnel)",
    next: "Continuer", back: "Retour", submit: "Envoyer ma demande", thanks: "Nous accusons réception d'ici un jour ouvrable et revenons avec une lecture concrète sous 7 jours.",
    rolePlaceholder: "Ex : président de CA, gestionnaire"
  } : {
    n: "Your details", b: "Your reserve-fund study", d: "Sent.",
    name: "Full name", email: "Email", phone: "Phone", role: "Your role",
    building: "Building name", balance: "Approximate fund balance",
    file: "Reserve-fund study", fileHint: "Upload your most recent study (PDF, Excel or Word). It already contains what matters: cash-flow schedule, horizon, assumptions. That's all we need to give you a concrete read.",
    fileChoose: "Choose a file", fileChange: "Replace", fileNone: "No file selected",
    fileSkip: "I don't have the study at hand", fileSkipNote: "No problem, describe your situation in a few lines below and we'll follow up.",
    message: "Notes (optional)",
    next: "Continue", back: "Back", submit: "Send my request", thanks: "We'll acknowledge receipt within one business day and come back with a concrete read within 7 days.",
    rolePlaceholder: "E.g. board chair, manager"
  };
  return (
    <div className="page" data-screen-label="07 Contact">
      <PageHeader eyebrow={t.nav.contact} title={p.hero} sub={p.sub} />
      <section style={{ paddingTop: 40, paddingBottom: 60 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
            {p.options.map((o, i) =>
            <InView key={i} delay={i * 80} style={{ padding: 32, borderTop: "1px solid var(--ink)", borderRight: i < 2 ? "1px solid var(--line)" : "none", display: "flex", flexDirection: "column", gap: 18, minHeight: 280 }}>
                <div className="kpi-label">{`0${i + 1}`}</div>
                <h3 style={{ fontSize: "clamp(22px, 2vw, 28px)" }}>{o.t}</h3>
                <p style={{ fontSize: 15, flex: 1 }}>{o.d}</p>
                <a className="btn-link" href="#" onClick={(e) => {e.preventDefault();optionAction(i);}} style={{ alignSelf: "flex-start", cursor: "pointer" }}>{o.cta} →</a>
              </InView>
            )}
          </div>
        </div>
      </section>
      <section id="diagnostic-form" className="dark-section" style={{ paddingTop: 100, paddingBottom: 120 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80 }}>
            <InView>
              <div className="eyebrow" style={{ marginBottom: 24 }}><span className="dot"></span>{p.formTitle}</div>
              <h2 style={{ fontSize: "clamp(36px, 4.6vw, 60px)", marginBottom: 32 }}>
                {lang === "fr" ? <>Diagnostic gratuit. <span className="italic-soft">7 jours.</span></> : <>Free diagnostic. <span className="italic-soft">7 days.</span></>}
              </h2>
              <p style={{ color: "rgba(244,239,230,0.7)", maxWidth: 360, fontSize: 15 }}>{lang === "fr" ? "Trois étapes. Vos coordonnées, votre étude du fonds, c'est tout. On vous revient avec une lecture concrète sous 7 jours." : "Three steps. Your details, your reserve-fund study, that's it. We come back with a concrete read within 7 days."}</p>
              <div style={{ marginTop: 40, display: "flex", gap: 8 }}>
                {[1, 2, 3].map((n) =>
                <div key={n} style={{ flex: 1, height: 2, background: step >= n ? "var(--gold)" : "rgba(244,239,230,0.18)", transition: "background .3s" }}></div>
                )}
              </div>
              <div className="kpi-label" style={{ marginTop: 14, color: "rgba(244,239,230,0.6)" }}>
                {step < 3 ? p.formSub.replace("{n}", String(step)) : labels.d}
              </div>
            </InView>
            <InView delay={120}>
              {step === 1 &&
              <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
                  <h4 style={{ color: "var(--cream)", fontSize: 22 }}>{labels.n}</h4>
                  <div className="field"><label>{labels.name}</label><input className="input" value={data.name} onChange={(e) => update("name", e.target.value)} placeholder="Marie Lavoie" /></div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
                    <div className="field"><label>{labels.email}</label><input className="input" type="email" value={data.email} onChange={(e) => update("email", e.target.value)} placeholder="marie@..." /></div>
                    <div className="field"><label>{labels.phone}</label><input className="input" type="tel" value={data.phone} onChange={(e) => update("phone", e.target.value)} placeholder="514-555-0000" /></div>
                  </div>
                  <div className="field"><label>{labels.role}</label><input className="input" value={data.role} onChange={(e) => update("role", e.target.value)} placeholder={labels.rolePlaceholder} /></div>
                  <div style={{ marginTop: 20 }}>
                    <button className="btn btn-primary" onClick={next} disabled={!data.name || !data.email}>{labels.next} <span className="arr">→</span></button>
                  </div>
                </div>
              }
              {step === 2 &&
              <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
                  <h4 style={{ color: "var(--cream)", fontSize: 22 }}>{labels.b}</h4>
                  <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32 }}>
                    <div className="field"><label>{labels.building}</label><input className="input" value={data.building} onChange={(e) => update("building", e.target.value)} placeholder="Le Parc-des-Sources" /></div>
                    <div className="field"><label>{labels.balance}</label><input className="input" value={data.balance} onChange={(e) => update("balance", e.target.value)} placeholder="450 000 $" /></div>
                  </div>
                  <div className="field">
                    <label>{labels.file}</label>
                    <p style={{ fontSize: 13, color: "rgba(244,239,230,0.6)", marginTop: -6, marginBottom: 14, lineHeight: 1.6 }}>{labels.fileHint}</p>
                    <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "16px 18px", border: "1px dashed var(--on-ink-line)", borderRadius: 4, background: "rgba(244,239,230,0.03)" }}>
                      <label className="btn" style={{ border: "1px solid var(--gold)", color: "var(--cream)", padding: "10px 18px", cursor: "pointer", fontSize: 13, letterSpacing: "0.06em", textTransform: "uppercase" }}>
                        {data.file ? labels.fileChange : labels.fileChoose}
                        <input type="file" accept=".pdf,.xls,.xlsx,.doc,.docx" style={{ display: "none" }}
                      onChange={(e) => update("file", e.target.files && e.target.files[0] ? e.target.files[0] : null)} />
                      </label>
                      <div style={{ fontSize: 13, color: "rgba(244,239,230,0.85)", fontFamily: "var(--mono)", letterSpacing: "0.02em", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                        {data.file ? `${data.file.name} · ${(data.file.size / 1024).toFixed(0)} ko` : labels.fileNone}
                      </div>
                    </div>
                    <p style={{ fontSize: 12, color: "rgba(244,239,230,0.45)", marginTop: 10, fontStyle: "italic" }}>{labels.fileSkip} → {labels.fileSkipNote}</p>
                  </div>
                  <div className="field"><label>{labels.message}</label><textarea className="textarea" value={data.message} onChange={(e) => update("message", e.target.value)} placeholder="" /></div>
                  <div className="row" style={{ marginTop: 20 }}>
                    <button className="btn btn-ghost" onClick={back}>← {labels.back}</button>
                    <button className="btn btn-primary" onClick={submitDiagnostic} disabled={diagSending}>{diagSending ? (lang === "fr" ? "Envoi en cours…" : "Sending…") : labels.submit} <span className="arr">→</span></button>
                  </div>
                  {diagError && <p style={{ color: "#e8a99a", fontSize: 13 }}>{diagError}</p>}
                </div>
              }
              {step === 3 &&
              <div style={{ padding: "40px 0", borderTop: "1px solid var(--gold)", maxWidth: 520 }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(40px, 5vw, 64px)", color: "var(--cream)", marginBottom: 20, letterSpacing: "-0.02em" }}>
                    {lang === "fr" ? "Merci, " : "Thank you, "}<span style={{ fontStyle: "italic", color: "var(--gold)" }}>{data.name.split(" ")[0] || (lang === "fr" ? "à bientôt" : "talk soon")}</span>.
                  </div>
                  <p style={{ color: "rgba(244,239,230,0.75)", fontSize: 16, marginBottom: 32 }}>{labels.thanks}</p>
                  <div className="row">
                    <button className="btn btn-primary" onClick={() => go("home")}>{lang === "fr" ? "Retour à l'accueil" : "Back to home"} <span className="arr">→</span></button>
                    <button className="btn btn-ghost" onClick={() => {setStep(1);setData({ name: "", email: "", phone: "", role: "", building: "", balance: "", file: null, message: "" });}}>{lang === "fr" ? "Nouvelle demande" : "New request"}</button>
                  </div>
                </div>
              }
            </InView>
          </div>
        </div>
      </section>
      <section id="quick-message" style={{ paddingTop: 100, paddingBottom: 120, background: "var(--bone)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
            <InView>
              <div className="eyebrow" style={{ marginBottom: 20 }}><span className="dot"></span>{ql.eyebrow}</div>
              <h2 style={{ fontSize: "clamp(36px, 4.4vw, 56px)", marginBottom: 24, letterSpacing: "-0.02em", width: "520px" }}>{ql.title}</h2>
              <p className="lead" style={{ maxWidth: 380 }}>{ql.sub}</p>
              <div style={{ marginTop: 40, paddingTop: 32, borderTop: "1px solid var(--line)", fontFamily: "var(--mono)", fontSize: 13, letterSpacing: "0.04em", color: "var(--ink-soft)", display: "grid", gap: 16 }}>
                <div><a href={`mailto:${t.footer.email}`}>{t.footer.email}</a></div>
                <div>{t.footer.addrMtlTitle} · <a href={`tel:${t.footer.addrMtlPhone.replace(/\D/g, '')}`}>{t.footer.addrMtlPhone}</a></div>
                <div>{t.footer.addrQcTitle} · <a href={`tel:${t.footer.addrQcPhone.replace(/\D/g, '')}`}>{t.footer.addrQcPhone}</a></div>
              </div>
            </InView>
            <InView delay={120}>
              {!qm.sent ?
              <div style={{ display: "flex", flexDirection: "column", gap: 24, padding: 36, background: "var(--cream)", border: "1px solid var(--line)", borderRadius: 4 }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                  <div className="field"><label style={{ color: "var(--ink-soft)" }}>{ql.name}</label><input className="input" style={{ background: "transparent", color: "var(--ink)", borderColor: "var(--ink-soft)" }} value={qm.name} onChange={(e) => updateQm("name", e.target.value)} /></div>
                  <div className="field"><label style={{ color: "var(--ink-soft)" }}>{ql.email}</label><input className="input" style={{ background: "transparent", color: "var(--ink)", borderColor: "var(--ink-soft)" }} type="email" value={qm.email} onChange={(e) => updateQm("email", e.target.value)} /></div>
                </div>
                <div className="field"><label style={{ color: "var(--ink-soft)" }}>{ql.subject}</label><input className="input" style={{ background: "transparent", color: "var(--ink)", borderColor: "var(--ink-soft)" }} value={qm.subject} onChange={(e) => updateQm("subject", e.target.value)} /></div>
                <div className="field"><label style={{ color: "var(--ink-soft)" }}>{ql.message}</label><textarea className="textarea" style={{ background: "transparent", color: "var(--ink)", borderColor: "var(--ink-soft)", minHeight: 180 }} value={qm.message} onChange={(e) => updateQm("message", e.target.value)} placeholder={ql.placeholder} /></div>
                <div>
                  <button className="btn btn-primary" onClick={sendQuick} disabled={!qm.name || !qm.email || !qm.message || qmSending}>{qmSending ? ql.sending : ql.send} <span className="arr">→</span></button>
                  {qmError && <p style={{ marginTop: 14, color: "#b54a3a", fontSize: 13 }}>{qmError}</p>}
                </div>
              </div> :
              <div style={{ padding: 36, background: "var(--cream)", border: "1px solid var(--gold)", borderRadius: 4 }}>
                <p style={{ fontSize: 18, lineHeight: 1.6 }}>{ql.sent}</p>
              </div>
              }
            </InView>
          </div>
        </div>
      </section>
    </div>);

}

Object.assign(window, { CoproprietairePage, ProfessionnelPage, RessourcesPage, AproposPage, ContactPage });