/* global React, WIIN_COPY */

// Lightweight placeholder pages for the secondary routes
// (mission, pillars, impact, contact)

function PageShell({ eyebrow, title, lede, children, lang, go }) {
  return (
    <main role="main">
      <section style={{ background: "var(--gradient-hero)", paddingTop: "clamp(56px, 8vw, 96px)", paddingBottom: "clamp(40px, 6vw, 72px)" }}>
        <div className="wrap">
          <button className="btn btn-link" onClick={() => go("home")} style={{ marginBottom: 22 }}>
            {lang === "fr" ? "← Retour à l'accueil" : "← Back to home"}
          </button>
          <span className="eyebrow">{eyebrow}</span>
          <h1 className="display-h1" style={{ marginTop: 18, marginBottom: 22, maxWidth: "20ch" }}>{title}</h1>
          <p className="lede" style={{ maxWidth: "62ch" }}>{lede}</p>
        </div>
      </section>
      {children}
    </main>
  );
}

function MissionPage({ lang, go }) {
  const isFr = lang === "fr";
  const c = WIIN_COPY[lang].home;
  return (
    <PageShell
      lang={lang} go={go}
      eyebrow={isFr ? "Mission · Vision · Valeurs" : "Mission · Vision · Values"}
      title={isFr ? "Un réseau au service de l'impact." : "A network in service of impact."}
      lede={c.mission}
    >
      <section>
        <div className="wrap">
          <div className="tagline" style={{ marginBottom: 40, fontSize: "clamp(1.4rem, 2.4vw, 2rem)" }}>
            {c.tagline}
          </div>
          <div style={{ marginBottom: 56 }}>
            {window.MissionCarousel ? (
              <MissionCarousel lang={lang} slotKey="mission-hero" ariaLabel={isFr ? "Carrousel emblématique de la mission WIIN" : "WIIN mission emblematic carousel"} />
            ) : (
              <div className="image-placeholder-card image-placeholder-hero" data-slot="mission-hero" role="img"
                aria-label={isFr ? "Carrousel mission en cours de chargement" : "Mission carousel loading"}>
                <span className="iph-icon" aria-hidden="true">📷</span>
                <span className="iph-label">{isFr ? "Carrousel en chargement…" : "Carousel loading…"}</span>
              </div>
            )}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
            {[
              { t: isFr ? "Mission" : "Mission", b: isFr ? "Bâtir des programmes mesurables qui renforcent l'autonomie des femmes, des jeunes, des personnes en situation de handicap et des communautés diasporiques." : "Build measurable programs that strengthen the autonomy of women, youth, persons with disabilities and diaspora communities." },
              { t: isFr ? "Vision" : "Vision", b: isFr ? "Un monde où le patrimoine, l'innovation et le développement durable deviennent un levier de prospérité partagée du Nord au Sud global." : "A world where heritage, innovation and sustainable development become a lever for shared prosperity from the Global North to the Global South." },
              { t: isFr ? "Valeurs" : "Values", b: isFr ? "Communauté, transparence, rigueur, action ancrée. Pas de slogans creux — des résultats traçables." : "Community, transparency, rigour, grounded action. No empty slogans — traceable results." },
            ].map((p, i) => (
              <article key={i} className="card card-pad">
                <h3 className="section-h3" style={{ color: "var(--green-dark)", marginBottom: 12 }}>{p.t}</h3>
                <p style={{ margin: 0, lineHeight: 1.6, color: "var(--text-secondary)" }}>{p.b}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section-alt">
        <div className="wrap">
          <div style={{ marginBottom: 36 }}>
            <span className="eyebrow">{c.sdgEyebrow}</span>
            <h2 className="section-h2" style={{ marginTop: 18 }}>{c.sdgTitle}</h2>
            <p className="lede" style={{ marginTop: 14, maxWidth: 640 }}>{c.sdgLede}</p>
          </div>
          <div className="sdg-grid">
            {c.sdgNumbers.map((n) => {
              const m = (window.WIIN_SDG_META && window.WIIN_SDG_META[n]) || {};
              const label = m[lang] || "";
              const desc = m[lang === "fr" ? "descFr" : "descEn"] || "";
              return (
                <a
                  key={n}
                  href={m.link || "#"}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="sdg-card"
                  style={{ background: m.hex || "var(--green-dark)" }}
                  title={`${isFr ? "ODD" : "SDG"} ${n} · ${label}\n${desc}`}
                  aria-label={`${isFr ? "Objectif de développement durable" : "Sustainable Development Goal"} ${n} — ${label}`}>
                  <span className="sdg-card-num">{n}</span>
                  <span className="sdg-card-tag">{isFr ? "ODD" : "SDG"}</span>
                  <span className="sdg-card-label">{label}</span>
                </a>
              );
            })}
          </div>
        </div>
      </section>
    </PageShell>
  );
}

function ContactForm({ lang, go }) {
  const isFr = lang === "fr";
  const { useState } = React;
  const [form, setForm] = useState({ nom: "", courriel: "", organisation: "", type: "", message: "" });
  const [consent, setConsent] = useState(false);
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const types = isFr
    ? ["Bailleur de fonds", "Partenaire", "Journaliste", "Bénévole", "Autre"]
    : ["Funder", "Partner", "Journalist", "Volunteer", "Other"];

  const valid = form.nom.trim() && form.courriel.trim() && form.type && form.message.trim() && consent;

  const submit = (e) => {
    e.preventDefault();
    if (!valid) return;
    const subject = isFr
      ? `Site WIIN — ${form.type} — ${form.nom}`
      : `WIIN site — ${form.type} — ${form.nom}`;
    const body = isFr
      ? `Nom : ${form.nom}\nCourriel : ${form.courriel}\nOrganisation : ${form.organisation || "—"}\nType de demande : ${form.type}\n\nMessage :\n${form.message}\n\n— Envoyé via le formulaire de contact de wiincanada.org`
      : `Name: ${form.nom}\nEmail: ${form.courriel}\nOrganization: ${form.organisation || "—"}\nRequest type: ${form.type}\n\nMessage:\n${form.message}\n\n— Sent via the wiincanada.org contact form`;
    window.location.href = buildMailto("info@wiincanada.org", subject, body);
    setSent(true);
  };

  const labelStyle = { display: "block", fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 600, color: "var(--text-secondary)", marginBottom: 6, textAlign: "left" };
  const fieldStyle = { width: "100%", boxSizing: "border-box", padding: "12px 14px", border: "1px solid var(--border, #e7e3d8)", borderRadius: 10, fontFamily: "'Inter', sans-serif", fontSize: 15, color: "var(--text-primary, #1c1c1c)", background: "#fff" };
  const groupStyle = { marginBottom: 16 };

  return (
    <div style={{ width: "100%", maxWidth: 560, margin: "0 auto", display: "flex", flexDirection: "column", gap: 20 }}>
      <form onSubmit={submit} style={{ padding: "32px 36px", background: "rgba(0,137,123,0.05)", border: "1px solid var(--border, #e7e3d8)", borderRadius: 16, textAlign: "left" }}>
        <div style={groupStyle}>
          <label style={labelStyle} htmlFor="cf-nom">{isFr ? "Nom complet *" : "Full name *"}</label>
          <input id="cf-nom" style={fieldStyle} value={form.nom} onChange={set("nom")} required />
        </div>
        <div style={groupStyle}>
          <label style={labelStyle} htmlFor="cf-courriel">{isFr ? "Courriel *" : "Email *"}</label>
          <input id="cf-courriel" type="email" style={fieldStyle} value={form.courriel} onChange={set("courriel")} required />
        </div>
        <div style={groupStyle}>
          <label style={labelStyle} htmlFor="cf-org">{isFr ? "Organisation (optionnel)" : "Organization (optional)"}</label>
          <input id="cf-org" style={fieldStyle} value={form.organisation} onChange={set("organisation")} />
        </div>
        <div style={groupStyle}>
          <label style={labelStyle} htmlFor="cf-type">{isFr ? "Type de demande *" : "Request type *"}</label>
          <select id="cf-type" style={fieldStyle} value={form.type} onChange={set("type")} required>
            <option value="">{isFr ? "— Choisir —" : "— Select —"}</option>
            {types.map((t) => <option key={t} value={t}>{t}</option>)}
          </select>
        </div>
        <div style={groupStyle}>
          <label style={labelStyle} htmlFor="cf-msg">{isFr ? "Message *" : "Message *"}</label>
          <textarea id="cf-msg" rows={5} style={{ ...fieldStyle, resize: "vertical" }} value={form.message} onChange={set("message")} required />
        </div>
        <label style={{ display: "flex", gap: 10, alignItems: "flex-start", fontFamily: "'Inter', sans-serif", fontSize: 13, lineHeight: 1.55, color: "var(--text-secondary)", marginBottom: 18, cursor: "pointer" }}>
          <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} style={{ marginTop: 3, flexShrink: 0 }} />
          <span>{isFr
            ? "J'accepte que le Réseau WIIN Canada utilise ces renseignements pour répondre à ma demande (Loi 25). Votre message est composé puis envoyé depuis votre propre application courriel — aucun serveur ne le reçoit avant vous."
            : "I agree that the WIIN Canada Network may use this information to respond to my request (Law 25). Your message is composed and sent from your own email app — no server receives it before you do."}</span>
        </label>
        <button type="submit" className="cta-magnet" disabled={!valid}
          style={{ background: "var(--green-dark)", color: "#fff", border: "none", borderRadius: 999, padding: "14px 28px", fontWeight: 700, cursor: valid ? "pointer" : "not-allowed", opacity: valid ? 1 : 0.5, width: "100%" }}>
          {isFr ? "Envoyer le message →" : "Send message →"}
        </button>
        {sent && (
          <p style={{ marginTop: 14, marginBottom: 0, fontFamily: "'Inter', sans-serif", fontSize: 13.5, color: "var(--green-dark)", textAlign: "center" }}>
            {isFr ? "Votre application courriel devrait s'ouvrir avec le message pré-rempli." : "Your email app should open with the pre-filled message."}
          </p>
        )}
      </form>

      <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 13.5, lineHeight: 1.6, color: "var(--text-secondary)", textAlign: "center" }}>
        {isFr ? "Si rien ne s'ouvre, écrivez-nous directement à " : "If nothing opens, write to us directly at "}
        <a href="mailto:info@wiincanada.org" style={{ color: "var(--teal-dark, #00695C)", fontWeight: 600 }}>info@wiincanada.org</a>
      </div>

      <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, lineHeight: 1.6, color: "var(--text-secondary)", textAlign: "center" }}>
        800 rue du Square-Victoria, suite 2624<br />Montréal QC H3C 0B4, Canada
      </div>

      <div style={{ textAlign: "center" }}>
        <a onClick={() => go("gouvernance")} style={{ fontSize: 13, color: "var(--teal-dark, #00695C)", textDecoration: "underline", cursor: "pointer" }}>{isFr ? "Gouvernance et transparence →" : "Governance & transparency →"}</a>
      </div>
    </div>
  );
}

function GenericPage({ lang, go, route }) {
  const isFr = lang === "fr";
  const map = {
    pillars: {
      eyebrow: isFr ? "Six piliers stratégiques" : "Six strategic pillars",
      title: isFr ? "Six axes, onze ODD, un horizon." : "Six axes, eleven SDGs, one horizon.",
      lede: isFr ? "Chaque pilier est conçu avec ses partenaires terrain, financé par cohorte et évalué annuellement par un comité indépendant." : "Each pillar is co-designed with field partners, funded by cohort, and reviewed yearly by an independent committee.",
    },
    impact: {
      eyebrow: isFr ? "Impact · Reddition de comptes" : "Impact · Accountability",
      title: isFr ? "Des chiffres, des récits, des rapports publics." : "Numbers, stories, public reports.",
      lede: isFr ? "Tous nos rapports annuels et états financiers sont publiés en libre accès, conformément aux exigences fédérales de transparence (CNCA Soliciting Corporation)." : "All annual reports and financial statements are published in open access, per federal transparency requirements (CNCA Soliciting Corporation).",
    },
    contact: {
      eyebrow: isFr ? "Contact" : "Contact",
      title: isFr ? "Parlons-nous." : "Let's talk.",
      lede: isFr ? "Que vous soyez bailleur, partenaire, journaliste ou bénévole, nous répondons à toutes les sollicitations sous 72 h ouvrées. Siège social : 800 rue du Square-Victoria, suite 2624, Montréal QC H3C 0B4, Canada." : "Whether you're a funder, partner, journalist or volunteer, we reply to all inquiries within 72 business hours. Head office: 800 rue du Square-Victoria, suite 2624, Montréal QC H3C 0B4, Canada.",
    },
  };
  const p = map[route] || map.contact;
  return (
    <PageShell lang={lang} go={go} eyebrow={p.eyebrow} title={p.title} lede={p.lede}>
      <section>
        <div className="wrap" style={{ textAlign: "center", padding: "40px 0" }}>
          {route === "contact" ? (
            <ContactForm lang={lang} go={go} />
          ) : (
            <div style={{ display: "inline-block", padding: "32px 40px", border: "1px dashed var(--border-strong)", borderRadius: 16, color: "var(--text-muted)", fontFamily: "'JetBrains Mono', monospace", fontSize: 13, letterSpacing: "0.08em" }}>
              {isFr ? "// Contenu détaillé en cours de rédaction" : "// Detailed content in progress"}
            </div>
          )}
        </div>
      </section>
    </PageShell>
  );
}

/* =============================================================================
 * Landing routes — /demande-invitation + /dossier (S141 v17, Round-7-bis)
 * Ariel consensus Option A: static landing pages now, Phase H (CRM dual-write)
 * deferred to S142. CTAs are LIVE actions (mailto + dossier preview) — never
 * "coming soon" dead ends (Opus dissenter mitigation).
 * ===========================================================================*/

const DOSSIER_MAILTO_SUBJECT_FR = "JCM 2026 — Demande du dossier complet";
const DOSSIER_MAILTO_SUBJECT_EN = "JCM 2026 — Full deck request";
const INVITE_MAILTO_SUBJECT_FR = "JCM 2026 — Demande d'invitation à la cohorte fondatrice";
const INVITE_MAILTO_SUBJECT_EN = "JCM 2026 — Founding-cohort invitation request";

// JCM 2026 contact mailbox — CEO confirmed PROVISIONED 2026-05-15 (S141 v21).
// Variant (c) hybrid per Q-CONSENSUS-A: live on Digigle tenant now; migrates to
// contact@journees-culinaires-manioc.org when the dedicated domain (Phase B of
// DGL-ARC-JCM-DOMAIN-001) is live. To migrate later, swap THIS one constant.
const JCM_CONTACT_EMAIL = "contact.jcm@digiglesolutions.com";

function buildMailto(to, subject, body) {
  return `mailto:${to}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
}

function DemandeInvitationPage({ lang, go }) {
  const isFr = lang === "fr";
  const inviteBody = isFr
    ? "Bonjour,\n\nJe souhaite demander une invitation pour la cohorte fondatrice JCM 2026 à Montréal (7-10 juillet 2026).\n\nNom complet :\nOrganisation :\nRôle (Chef · Partenaire · Bailleur · Presse · Communauté) :\nTéléphone :\n\nMerci,"
    : "Hello,\n\nI'd like to request an invitation for the JCM 2026 founding cohort in Montréal (July 7-10, 2026).\n\nFull name:\nOrganization:\nRole (Chef · Partner · Funder · Press · Community):\nPhone:\n\nThank you,";
  const inviteMailto = buildMailto(
    JCM_CONTACT_EMAIL,
    isFr ? INVITE_MAILTO_SUBJECT_FR : INVITE_MAILTO_SUBJECT_EN,
    inviteBody
  );
  return (
    <PageShell
      lang={lang} go={go}
      eyebrow={isFr ? "Cohorte fondatrice · sur invitation" : "Founding cohort · invitation only"}
      title={isFr ? "Demander une invitation." : "Request an invitation."}
      lede={isFr
        ? "La cohorte fondatrice du démonstrateur pilote JCM 2026 est sur invitation. 4-6 chefs canadiens en binôme avec Cheffe Katia Christophe, du 7 au 10 juillet 2026 à Montréal."
        : "The founding cohort of the JCM 2026 pilot demonstrator is invitation only. 4-6 Canadian chefs paired with Chef Katia Christophe, July 7-10, 2026 in Montréal."}
    >
      <section>
        <div className="wrap" style={{ maxWidth: 720 }}>
          <div className="card card-pad" style={{ marginBottom: 28 }}>
            <h2 className="section-h3" style={{ color: "var(--green-dark)", marginTop: 0, marginBottom: 12 }}>
              {isFr ? "Étape 1 · écrire à contact.jcm@" : "Step 1 · email contact.jcm@"}
            </h2>
            <p style={{ margin: "0 0 18px", lineHeight: 1.6, color: "var(--text-secondary)" }}>
              {isFr
                ? "Le bouton ci-dessous ouvre un courriel pré-rempli vers notre équipe partenariats. Nous répondons sous 72 h ouvrées avec le dossier complet et la lettre de convocation."
                : "The button below opens a pre-filled email to our partnerships team. We reply within 72 business hours with the full deck and convocation letter."}
            </p>
            <a href={inviteMailto} className="cta-magnet" style={{ background: "var(--green-dark)", color: "#fff", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10, padding: "14px 26px", borderRadius: 999 }}>
              {isFr ? "Ouvrir le courriel pré-rempli →" : "Open the pre-filled email →"}
            </a>
            <p style={{ marginTop: 12, fontSize: 13, color: "var(--text-muted)" }}>
              {JCM_CONTACT_EMAIL}
            </p>
          </div>

          <div className="card card-pad" style={{ marginBottom: 28 }}>
            <h2 className="section-h3" style={{ color: "var(--green-dark)", marginTop: 0, marginBottom: 12 }}>
              {isFr ? "Étape 2 · télécharger le dossier" : "Step 2 · download the deck"}
            </h2>
            <p style={{ margin: "0 0 18px", lineHeight: 1.6, color: "var(--text-secondary)" }}>
              {isFr
                ? "Pour préparer votre demande, consultez d'abord le dossier complet — positionnement, programme, écosystème et modèle de financement."
                : "To prepare your request, review the full deck first — positioning, programme, ecosystem and funding model."}
            </p>
            <button className="cta-ghost-magnet" onClick={() => go("dossier")} style={{ borderColor: "var(--green-dark)", color: "var(--green-dark)" }}>
              {isFr ? "Consulter le dossier →" : "View the deck →"}
            </button>
          </div>

          <div style={{ marginTop: 36, padding: "18px 22px", background: "rgba(0,137,123,0.06)", border: "1px solid rgba(0,137,123,0.20)", borderRadius: 14, fontSize: 13.5, color: "var(--text-secondary)", lineHeight: 1.55 }}>
            <strong style={{ color: "var(--teal-dark)" }}>{isFr ? "À venir · Q3 2026" : "Coming · Q3 2026"} —</strong>{" "}
            {isFr
              ? "un formulaire d'inscription officiel sera intégré ici, avec consentement Loi 25, reCAPTCHA et confirmation automatique. D'ici là, le courriel direct reste la voie privilégiée."
              : "an official signup form will be embedded here, with Law 25 consent, reCAPTCHA and automated confirmation. Until then, direct email remains the preferred path."}
          </div>
        </div>
      </section>
    </PageShell>
  );
}

function DossierPage({ lang, go }) {
  const isFr = lang === "fr";
  const dossierMailto = buildMailto(
    JCM_CONTACT_EMAIL,
    isFr ? DOSSIER_MAILTO_SUBJECT_FR : DOSSIER_MAILTO_SUBJECT_EN,
    isFr
      ? "Bonjour,\n\nJe souhaite recevoir le dossier complet JCM 2026 (PDF).\n\nNom complet :\nOrganisation :\nRôle (Chef · Partenaire · Bailleur · Presse) :\n\nMerci,"
      : "Hello,\n\nI'd like to receive the full JCM 2026 deck (PDF).\n\nFull name:\nOrganization:\nRole (Chef · Partner · Funder · Press):\n\nThank you,"
  );
  const sections = isFr
    ? [
        { t: "Positionnement", b: "JCM 2026 n'est pas un événement culinaire grand public. C'est un démonstrateur professionnel et culturel autour des savoir-faire afro-caribéens et du manioc au Québec." },
        { t: "Pourquoi le manioc", b: "Le manioc nourrit plus de 800 millions de personnes à travers les Amériques, l'Afrique et l'Asie. Pour la diaspora africaine et caribéenne du Québec, c'est un fil culturel qui relie ici à là-bas." },
        { t: "Programme · 7-10 juillet 2026", b: "Mardi 7 + Mercredi 8 — Masterclass · Cheffe Katia Christophe × cohorte fondatrice de 4-6 chefs canadiens. Vendredi 10 — Cocktail dînatoire solidaire · soirée prestige accueillie par Collectif MTL (salle Carnegie, 200 places debout, sous réserve confirmation acompte 25 mai) · redistribution partielle aux coopératives agricoles partenaires." },
        { t: "Cheffe en résidence", b: "Cheffe Katia Christophe · La Maniocrie de Germaine (Guadeloupe → Montréal) · experte du manioc et du métissage culinaire afro-caribéen." },
        { t: "Écosystème pilote", b: "Le démonstrateur pilote JCM 2026 réunit une cohorte fondatrice à Montréal autour de Cheffe Katia Christophe (La Maniocrie de Germaine, Guadeloupe → Montréal) et de chefs canadiens. Une initiative co-fondée — sur un pied d'égalité — par le Réseau WIIN Canada, le Pont Numérique Canada, Digigle Solutions et La Maniocrie de Germaine. Le cocktail dînatoire solidaire est accueilli par Collectif MTL (salle Carnegie). L'édition complète 2027+ ouvrira la porte aux institutions hôtelières et acteurs montréalais du patrimoine alimentaire qui se joignent au mouvement." },
        { t: "Modèle de financement", b: "1 financeur = 1 objectif. Bailleurs publics, fondations, entreprises sociales et coopératives agricoles co-financent par cohorte et par pilier. Reddition de comptes publique annuelle." },
      ]
    : [
        { t: "Positioning", b: "JCM 2026 is not a public culinary event. It is a professional and cultural demonstrator around Afro-Caribbean know-how and cassava in Quebec." },
        { t: "Why cassava", b: "Cassava feeds more than 800 million people across the Americas, Africa and Asia. For Quebec's African and Caribbean diaspora, it's a cultural thread that links here to over there." },
        { t: "Programme · July 7-10, 2026", b: "Tuesday 7 + Wednesday 8 — Masterclass · Chef Katia Christophe × founding cohort of 4-6 Canadian chefs. Friday 10 — Solidarity dinner cocktail · prestige evening hosted by Collectif MTL (Carnegie hall, 200-person standing, subject to deposit confirmation May 25) · partial redistribution to partner agricultural cooperatives." },
        { t: "Chef in residence", b: "Chef Katia Christophe · La Maniocrie de Germaine (Guadeloupe → Montréal) · cassava and Afro-Caribbean culinary métissage expert." },
        { t: "Pilot ecosystem", b: "The JCM 2026 pilot demonstrator convenes a founding cohort in Montréal around Chef Katia Christophe (La Maniocrie de Germaine, Guadeloupe → Montréal) paired with Canadian chefs. An initiative co-founded — as equal partners — by the Réseau WIIN Canada, Pont Numérique Canada, Digigle Solutions and La Maniocrie de Germaine. The solidarity dinner cocktail is hosted by Collectif MTL (Carnegie hall). The full 2027+ edition will open the door to hospitality institutions and Montréal food-heritage organizations joining the movement." },
        { t: "Funding model", b: "1 funder = 1 goal. Public funders, foundations, social enterprises and agricultural cooperatives co-fund by cohort and by pillar. Annual public accountability reporting." },
      ];
  return (
    <PageShell
      lang={lang} go={go}
      eyebrow={isFr ? "Dossier JCM 2026 · démonstrateur pilote" : "JCM 2026 deck · pilot demonstrator"}
      title={isFr ? "Le dossier, en clair." : "The deck, at a glance."}
      lede={isFr
        ? `Synthèse du dossier complet remis aux chefs, partenaires, bailleurs et presse. Pour la version PDF intégrale, écrivez à ${JCM_CONTACT_EMAIL}.`
        : `Synthesis of the full deck shared with chefs, partners, funders and press. For the full PDF version, email ${JCM_CONTACT_EMAIL}.`}
    >
      <section>
        <div className="wrap" style={{ maxWidth: 760 }}>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 36 }}>
            <a href={dossierMailto} className="cta-magnet" style={{ background: "var(--amber-dark)", color: "#fff", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10, padding: "14px 26px", borderRadius: 999 }}>
              {isFr ? "Recevoir le PDF par courriel →" : "Receive the PDF by email →"}
            </a>
            <button className="cta-ghost-magnet" onClick={() => go("demande-invitation")} style={{ borderColor: "var(--amber-dark)", color: "var(--amber-dark)" }}>
              {isFr ? "Demander une invitation →" : "Request an invitation →"}
            </button>
          </div>

          {sections.map((s, i) => (
            <article key={i} className="card card-pad" style={{ marginBottom: 18 }}>
              <h2 className="section-h3" style={{ color: "var(--green-dark)", marginTop: 0, marginBottom: 10 }}>{s.t}</h2>
              <p style={{ margin: 0, lineHeight: 1.6, color: "var(--text-secondary)" }}>{s.b}</p>
            </article>
          ))}

          <div style={{ marginTop: 28, padding: "18px 22px", background: "rgba(216,67,21,0.05)", border: "1px solid rgba(216,67,21,0.20)", borderRadius: 14, fontSize: 13.5, color: "var(--text-secondary)", lineHeight: 1.55 }}>
            <strong style={{ color: "var(--amber-dark)" }}>{isFr ? "PDF complet · sur demande" : "Full PDF · on request"} —</strong>{" "}
            {isFr
              ? "Le dossier PDF intégral (positionnement détaillé, budget, calendrier opérationnel, biographies, médias) est partagé sous NDA léger pour les bailleurs, partenaires et presse. Demande via le bouton ci-dessus."
              : "The full PDF deck (detailed positioning, budget, operational schedule, bios, media kit) is shared under light NDA with funders, partners and press. Request via the button above."}
          </div>
        </div>
      </section>
    </PageShell>
  );
}

/* =============================================================================
 * Pillars page — full detail per pillar with SDG alignment + Year 2+ expansion
 * (S141 v17 follow-up — CEO Round-7-bis "Contenu en cours" was unacceptable)
 * ===========================================================================*/

function PillarsPage({ lang, go }) {
  const isFr = lang === "fr";
  const c = WIIN_COPY[lang].home;
  return (
    <PageShell
      lang={lang} go={go}
      eyebrow={c.pillarsEyebrow}
      title={isFr ? "Trois piliers de lancement, onze ODD, un horizon." : "Three launch pillars, eleven SDGs, one horizon."}
      lede={c.pillarsLede}
    >
      <section>
        <div className="wrap" style={{ maxWidth: 960 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32 }}>
            {c.pillars.map((p, i) => {
              const accent = p.color === "green" ? "var(--green-dark)" : p.color === "amber" ? "var(--amber-dark)" : "var(--teal-dark)";
              const tint = p.color === "green" ? "rgba(46,125,50,0.06)" : p.color === "amber" ? "rgba(216,67,21,0.06)" : "rgba(0,137,123,0.06)";
              return (
                <article key={i} className="card card-pad" style={{ borderLeft: `4px solid ${accent}`, background: tint }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 14 }}>
                    <span style={{ fontFamily: "'Playfair Display', Georgia, serif", fontWeight: 800, fontSize: "clamp(1.6rem, 2.6vw, 2.2rem)", color: accent, lineHeight: 1 }}>{p.num}</span>
                    <span style={{ fontSize: "1.7rem" }} aria-hidden="true">{p.icon}</span>
                    <h2 className="section-h2" style={{ margin: 0, color: "var(--text-primary)", flex: 1 }}>{p.title}</h2>
                  </div>
                  <p style={{ margin: "0 0 22px", lineHeight: 1.65, color: "var(--text-secondary)", fontSize: 15.5 }}>{p.body}</p>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center" }}>
                    <span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-muted)", marginRight: 6 }}>
                      {isFr ? "ODD alignés" : "Aligned SDGs"}
                    </span>
                    {p.sdg.map((n) => {
                      const meta = window.WIIN_SDG_META && window.WIIN_SDG_META[n];
                      return (
                        <a
                          key={n}
                          href={meta?.link || "#"}
                          target="_blank"
                          rel="noopener noreferrer"
                          title={`${isFr ? "ODD" : "SDG"} ${n} · ${meta ? meta[lang] : ""}`}
                          style={{
                            display: "inline-flex", alignItems: "center", gap: 8,
                            padding: "6px 12px", borderRadius: 999,
                            background: meta?.hex || accent, color: "#fff",
                            fontSize: 12.5, fontWeight: 700, letterSpacing: "0.02em",
                            textDecoration: "none",
                          }}>
                          {isFr ? "ODD" : "SDG"} {String(n).padStart(2, "0")}
                          <span style={{ opacity: 0.85, fontWeight: 500 }}>· {meta ? meta[lang] : ""}</span>
                        </a>
                      );
                    })}
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section-alt">
        <div className="wrap" style={{ maxWidth: 960 }}>
          <span className="eyebrow">{c.pillarsPhase2Eyebrow}</span>
          <h2 className="section-h2" style={{ marginTop: 14, marginBottom: 16 }}>
            {isFr ? "Six axes complémentaires en 2027+" : "Six complementary axes in 2027+"}
          </h2>
          <p className="lede" style={{ maxWidth: 720, marginBottom: 24 }}>{c.pillarsPhase2}</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {c.pillarsPhase2.split(" · ").map((axis, i) => (
              <span key={i} style={{
                padding: "8px 14px", borderRadius: 999,
                background: "rgba(0,137,123,0.10)", color: "var(--teal-dark)",
                fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 13.5, letterSpacing: "0.01em",
                border: "1px solid rgba(0,137,123,0.25)",
              }}>{axis}</span>
            ))}
          </div>
          <p style={{ marginTop: 32, fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.55, maxWidth: 720 }}>
            {isFr
              ? "Chaque pilier d'expansion sera co-conçu avec ses partenaires terrain, financé par cohorte et évalué annuellement par un comité indépendant. Les appels à projets seront ouverts à mesure que les besoins émergent."
              : "Each expansion pillar will be co-designed with field partners, funded by cohort, and evaluated yearly by an independent committee. Open calls for projects will be issued as needs arise."}
          </p>
          <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", gap: 14 }}>
            <button className="cta-magnet" onClick={() => go("jcm")} style={{ background: "var(--green-dark)", color: "#fff" }}>
              {isFr ? "Voir le pilote JCM 2026 →" : "View the JCM 2026 pilot →"}
            </button>
            <button className="cta-ghost-magnet" onClick={() => go("contact")} style={{ borderColor: "var(--green-dark)", color: "var(--green-dark)" }}>
              {isFr ? "Co-construire un pilier →" : "Co-build a pillar →"}
            </button>
          </div>
        </div>
      </section>
    </PageShell>
  );
}

/* ----- Confidentialite — Loi 25 privacy policy page (S141 v23.1, F2 blocker #2 closure)
 * Full Loi 25 compliance: 8 mandatory sections. FR primary (Bill 96), EN secondary.
 * Anchors from the deferred-state banner consent micro-line on JCM page. */
function ConfidentialitePage({ lang, go }) {
  const isFr = lang === "fr";
  const section = (titleFr, titleEn, bodyFr, bodyEn) => (
    <section style={{ paddingTop: 32, paddingBottom: 32 }}>
      <div className="wrap" style={{ maxWidth: "72ch" }}>
        <h2 className="section-h2" style={{ marginBottom: 14, fontSize: "clamp(1.5rem, 2.4vw, 1.9rem)" }}>{isFr ? titleFr : titleEn}</h2>
        <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 15, lineHeight: 1.7, color: "var(--text-primary, #1c1c1c)" }}>
          {isFr ? bodyFr : bodyEn}
        </div>
      </div>
    </section>
  );
  return (
    <PageShell
      lang={lang} go={go}
      eyebrow={isFr ? "Confidentialité · Loi 25 (Québec)" : "Privacy · Quebec Law 25"}
      title={isFr ? "Politique de protection des renseignements personnels" : "Personal Information Protection Policy"}
      lede={isFr
        ? "WIIN Canada s'engage à protéger vos renseignements personnels conformément à la Loi 25 (Loi modernisant des dispositions législatives en matière de protection des renseignements personnels) et à la LPRPDE fédérale. Cette politique décrit nos pratiques en toute transparence."
        : "WIIN Canada is committed to protecting your personal information in accordance with Quebec Law 25 (Act to modernize legislative provisions as regards the protection of personal information) and the federal PIPEDA. This policy describes our practices transparently."
      }
    >
      <div className="wrap" style={{ paddingTop: 32, paddingBottom: 8 }}>
        <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, color: "var(--text-muted)", marginBottom: 0 }}>
          {isFr ? "Dernière mise à jour : 15 mai 2026 · Version 1.0" : "Last updated: 2026-05-15 · Version 1.0"}
        </p>
      </div>

      {section(
        "1. Nature des renseignements collectés",
        "1. Nature of information collected",
        <>
          <p>Sur ce site, <strong>aucun renseignement personnel n'est collecté automatiquement</strong>. Nous ne déposons aucun témoin (cookie) de pistage, aucun pixel publicitaire, aucun outil d'analytique externe.</p>
          <p>Les seules informations que vous pourriez nous transmettre sont celles que vous choisissez de nous envoyer par courriel à <a href="mailto:info@wiincanada.org">info@wiincanada.org</a> : nom, adresse courriel, organisation, et tout contenu que vous incluez dans votre message. Le formulaire de contact de ce site <strong>pré-remplit simplement un courriel</strong> dans votre propre application — il ne transmet aucune donnée à un serveur ; c'est vous qui envoyez le courriel.</p>
        </>,
        <>
          <p>On this site, <strong>no personal information is collected automatically</strong>. We do not deposit any tracking cookies, advertising pixels, or external analytics tools.</p>
          <p>The only information you may transmit to us is what you choose to send by email to <a href="mailto:info@wiincanada.org">info@wiincanada.org</a>: name, email address, organization, and any content you include in your message. This site's contact form <strong>simply pre-fills an email</strong> in your own app — it sends no data to any server; you are the one who sends the email.</p>
        </>
      )}

      {section(
        "2. Finalités du traitement",
        "2. Purposes of processing",
        <>
          <p>Vos renseignements sont utilisés uniquement pour :</p>
          <ul>
            <li>répondre à votre demande transmise par courriel ou au moyen du formulaire de contact ;</li>
            <li>assurer le suivi de votre relation avec le Réseau WIIN Canada (partenariat, financement, bénévolat, presse) ;</li>
            <li>vous communiquer des mises à jour ponctuelles sur l'initiative WIIN Canada lorsque pertinentes pour votre relation avec nous.</li>
          </ul>
          <p>Nous n'utilisons jamais vos renseignements à des fins de marketing externe, de revente, ou de profilage automatisé.</p>
        </>,
        <>
          <p>Your information is used solely to:</p>
          <ul>
            <li>respond to your request submitted by email or via the contact form;</li>
            <li>follow up on your relationship with the WIIN Canada Network (partnership, funding, volunteering, press);</li>
            <li>send occasional updates about WIIN Canada when relevant to your relationship with us.</li>
          </ul>
          <p>We never use your information for external marketing, resale, or automated profiling.</p>
        </>
      )}

      {section(
        "3. Durée de conservation",
        "3. Retention period",
        <>
          <p>Vos renseignements sont conservés <strong>aussi longtemps que nécessaire</strong> à la finalité pour laquelle ils ont été recueillis, et au plus tard 24 mois après votre dernière interaction. Vous pouvez demander leur suppression à tout moment (voir section 7).</p>
        </>,
        <>
          <p>Your information is retained <strong>only as long as necessary</strong> for the purpose for which it was collected, and no later than 24 months after your last interaction. You may request deletion at any time (see section 7).</p>
        </>
      )}

      {section(
        "4. Transferts à l'extérieur du Québec",
        "4. Transfers outside Quebec",
        <>
          <p>Le Réseau WIIN Canada fait appel à des fournisseurs tiers réputés pour héberger et gérer son infrastructure de courriel et de site Web. Le formulaire de contact ouvre votre propre application courriel et transmet votre message directement à la boîte du Réseau WIIN Canada (<a href="mailto:info@wiincanada.org">info@wiincanada.org</a>) ; aucun renseignement n'est capté par les serveurs du site au moment de l'envoi.</p>
          <p>Si une finalité future devait nécessiter un transfert hors-Québec (par exemple, traduction professionnelle, hébergement spécifique à un événement), nous vous en informerions et obtiendrions votre consentement préalable conformément à l'article 17 de la Loi 25.</p>
        </>,
        <>
          <p>WIIN Canada relies on reputable third-party providers to host and manage its email and website infrastructure. The contact form opens your own email application and sends your message directly to WIIN Canada's mailbox (<a href="mailto:info@wiincanada.org">info@wiincanada.org</a>); no information is captured by the website's servers at the moment of submission.</p>
          <p>Should a future purpose require an out-of-Quebec transfer (e.g., professional translation, event-specific hosting), we would inform you and obtain your prior consent in accordance with article 17 of Law 25.</p>
        </>
      )}

      {section(
        "5. Mesures de sécurité",
        "5. Security measures",
        <>
          <p>Nous protégeons vos renseignements par :</p>
          <ul>
            <li>chiffrement TLS 1.2+ pour toute communication ;</li>
            <li>authentification multifacteur sur les comptes administratifs ;</li>
            <li>accès limité au strict personnel autorisé (principe du moindre privilège) ;</li>
            <li>recours à des fournisseurs tiers réputés disposant de certifications de sécurité reconnues (p. ex. SOC 2 Type II, ISO 27001).</li>
          </ul>
        </>,
        <>
          <p>We protect your information through:</p>
          <ul>
            <li>TLS 1.2+ encryption for all communications;</li>
            <li>multi-factor authentication on administrative accounts;</li>
            <li>strict need-to-know access (principle of least privilege);</li>
            <li>use of reputable third-party providers holding recognized security certifications (e.g., SOC 2 Type II, ISO 27001).</li>
          </ul>
        </>
      )}

      {section(
        "6. Vos droits",
        "6. Your rights",
        <>
          <p>Conformément à la Loi 25, vous disposez des droits suivants :</p>
          <ul>
            <li><strong>Droit d'accès</strong> à vos renseignements ;</li>
            <li><strong>Droit de rectification</strong> en cas d'erreur ou d'incomplétude ;</li>
            <li><strong>Droit à la portabilité</strong> (recevoir vos renseignements dans un format technologique structuré, couramment utilisé) ;</li>
            <li><strong>Droit de retrait de consentement</strong> et de suppression de vos renseignements ;</li>
            <li><strong>Droit à la désindexation</strong> sur les moteurs de recherche pour les renseignements vous concernant.</li>
          </ul>
        </>,
        <>
          <p>Under Law 25, you have the following rights:</p>
          <ul>
            <li><strong>Right of access</strong> to your information;</li>
            <li><strong>Right of rectification</strong> in case of error or incompleteness;</li>
            <li><strong>Right to portability</strong> (receive your information in a structured, commonly used technological format);</li>
            <li><strong>Right to withdraw consent</strong> and request deletion;</li>
            <li><strong>Right to de-indexing</strong> on search engines for information concerning you.</li>
          </ul>
        </>
      )}

      {section(
        "7. Responsable de la protection des renseignements personnels",
        "7. Privacy officer",
        <>
          <p>Pour exercer vos droits, poser une question, ou signaler une préoccupation, contactez le responsable de la protection des renseignements personnels de WIIN Canada :</p>
          <p style={{ paddingLeft: 16, borderLeft: "3px solid var(--teal-dark, #00695C)", margin: "12px 0" }}>
            <strong>Responsable de la protection des renseignements personnels</strong><br />
            le Réseau WIIN Canada<br />
            800 rue du Square-Victoria, suite 2624<br />
            Montréal (Québec) H3C 0B4<br />
            Courriel : <a href="mailto:info@wiincanada.org">info@wiincanada.org</a>
          </p>
          <p>Nous répondons à toute demande dans un délai maximal de <strong>30 jours</strong>.</p>
        </>,
        <>
          <p>To exercise your rights, ask a question, or report a concern, contact WIIN Canada's privacy officer:</p>
          <p style={{ paddingLeft: 16, borderLeft: "3px solid var(--teal-dark, #00695C)", margin: "12px 0" }}>
            <strong>Privacy Officer</strong><br />
            WIIN Canada Network<br />
            800 rue du Square-Victoria, suite 2624<br />
            Montréal (Québec) H3C 0B4<br />
            Email: <a href="mailto:info@wiincanada.org">info@wiincanada.org</a>
          </p>
          <p>We respond to all requests within a maximum of <strong>30 days</strong>.</p>
        </>
      )}

      {section(
        "8. Plainte à la Commission d'accès à l'information",
        "8. Complaint to the Commission d'accès à l'information",
        <>
          <p>Si vous estimez que vos droits n'ont pas été respectés, vous pouvez déposer une plainte auprès de la <strong>Commission d'accès à l'information du Québec (CAI)</strong> :</p>
          <p style={{ paddingLeft: 16, borderLeft: "3px solid var(--teal-dark, #00695C)", margin: "12px 0" }}>
            Commission d'accès à l'information du Québec<br />
            525, boulevard René-Lévesque Est, bureau 2.36<br />
            Québec (Québec) G1R 5S9<br />
            Téléphone : 418 528-7741 · Sans frais : 1 888 528-7741<br />
            Site Web : <a href="https://www.cai.gouv.qc.ca" target="_blank" rel="noopener noreferrer">www.cai.gouv.qc.ca</a>
          </p>
        </>,
        <>
          <p>If you believe your rights have not been respected, you may file a complaint with the <strong>Commission d'accès à l'information du Québec (CAI)</strong>:</p>
          <p style={{ paddingLeft: 16, borderLeft: "3px solid var(--teal-dark, #00695C)", margin: "12px 0" }}>
            Commission d'accès à l'information du Québec<br />
            525, boulevard René-Lévesque Est, suite 2.36<br />
            Québec (Québec) G1R 5S9<br />
            Phone: 418 528-7741 · Toll-free: 1 888 528-7741<br />
            Website: <a href="https://www.cai.gouv.qc.ca" target="_blank" rel="noopener noreferrer">www.cai.gouv.qc.ca</a>
          </p>
        </>
      )}

      {section(
        "Conditions d'utilisation",
        "Terms of use",
        <>
          <p>Ce site est fourni à titre informatif par Réseau WIIN Canada. Le contenu est offert « tel quel », sans garantie d'exhaustivité ni d'absence d'erreur, et peut être modifié sans préavis. En utilisant ce site, vous acceptez de ne pas en faire un usage illicite ou trompeur. Les présentes conditions sont régies par les lois applicables au Québec et au Canada. Pour toute question : <a href="mailto:info@wiincanada.org">info@wiincanada.org</a>.</p>
        </>,
        <>
          <p>This site is provided for informational purposes by Réseau WIIN Canada. Content is offered "as is," without warranty of completeness or accuracy, and may change without notice. By using this site you agree not to use it unlawfully or deceptively. These terms are governed by the laws applicable in Quebec and Canada. Questions: <a href="mailto:info@wiincanada.org">info@wiincanada.org</a>.</p>
        </>
      )}

      {section(
        "Accessibilité",
        "Accessibility",
        <>
          <p>Réseau WIIN Canada s'engage à rendre son site accessible au plus grand nombre. Nous nous inspirons des bonnes pratiques d'accessibilité Web (lignes directrices WCAG) et améliorons le site de façon continue ; <strong>aucun audit de conformité formel n'a encore été réalisé</strong>. Si vous rencontrez un obstacle d'accessibilité ou souhaitez obtenir un contenu dans un format adapté, écrivez-nous à <a href="mailto:info@wiincanada.org">info@wiincanada.org</a> — nous vous répondrons dans les meilleurs délais.</p>
        </>,
        <>
          <p>Réseau WIIN Canada is committed to making its website accessible to as many people as possible. We follow Web accessibility best practices (WCAG guidelines) and improve the site on an ongoing basis; <strong>no formal conformance audit has been completed yet</strong>. If you encounter an accessibility barrier or would like content in an adapted format, email us at <a href="mailto:info@wiincanada.org">info@wiincanada.org</a> and we will respond as soon as possible.</p>
        </>
      )}

      <section style={{ paddingTop: 16, paddingBottom: 48 }}>
        <div className="wrap" style={{ maxWidth: "72ch" }}>
          <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 12, color: "var(--text-muted)", marginTop: 24 }}>
            {isFr
              ? "Cette politique peut être mise à jour. Toute modification importante sera signalée via cette page. Date de la prochaine révision prévue : mai 2027."
              : "This policy may be updated. Any significant change will be posted on this page. Next planned revision: May 2027."}
          </p>
        </div>
      </section>
    </PageShell>
  );
}

/* ----- Gouvernance page (S141 v23.2 — D-V23.2-PUB-01 reversal of 2026-05-12 directive)
 * Publishes the 3-director board roster + legal identity + bylaws status + financial framework
 * + transparency commitments + Digigle co-portage relationship disclosure. NO Pascale / Marraine
 * mention for 2026 (D-V23.2-PUB-02 ban stays — Pascale out for 2026 per her own decision).
 * Sources: DGL-LEGAL-WIIN-CA-001..003, DGL-LOG-PNC-WIIN-Federal-Incorporation, DGL-WEB-WIIN-001 S134.
 * Per CONTROL DOC v13 amendment 2026-05-16. */
function GouvernancePage({ lang, go }) {
  const isFr = lang === "fr";
  const section = (titleFr, titleEn, bodyFr, bodyEn) => (
    <section style={{ paddingTop: 32, paddingBottom: 32 }}>
      <div className="wrap" style={{ maxWidth: "72ch" }}>
        <h2 className="section-h2" style={{ marginBottom: 14, fontSize: "clamp(1.5rem, 2.4vw, 1.9rem)" }}>{isFr ? titleFr : titleEn}</h2>
        <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 15, lineHeight: 1.7, color: "var(--text-primary, #1c1c1c)" }}>
          {isFr ? bodyFr : bodyEn}
        </div>
      </div>
    </section>
  );
  const director = (initials, name, roleFr, roleEn, bioFr, bioEn, linkedinUrl) => (
    <div style={{ display: "flex", gap: 16, marginBottom: 24, padding: 18, background: "rgba(0,137,123,0.04)", borderRadius: 10, borderLeft: "3px solid var(--teal-mid, #00897B)" }}>
      <div aria-hidden="true" style={{ flex: "0 0 auto", width: 56, height: 56, borderRadius: 10, background: "var(--teal-dark, #00695C)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'Playfair Display', serif", fontSize: 20, fontWeight: 800, letterSpacing: "0.03em" }}>{initials}</div>
      <div>
        <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 19, fontWeight: 700, color: "var(--text-primary, #080808)", marginBottom: 4 }}>{name}</div>
        <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, color: "var(--teal-dark, #00695C)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 10 }}>{isFr ? roleFr : roleEn}</div>
        <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, lineHeight: 1.6, color: "var(--text-primary, #1c1c1c)", margin: "0 0 8px" }}>{isFr ? bioFr : bioEn}</p>
        {linkedinUrl ? (
          <a href={linkedinUrl} target="_blank" rel="noopener noreferrer"
            style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 600, color: "var(--teal-dark, #00695C)", textDecoration: "none" }}
            aria-label={`${name} — ${isFr ? "profil LinkedIn (nouvel onglet)" : "LinkedIn profile (new tab)"}`}>
            {isFr ? "Profil LinkedIn ↗" : "LinkedIn profile ↗"}
          </a>
        ) : null}
      </div>
    </div>
  );
  const boardCards = (
    <>
      {director("ES", "Eyrich Samba", "Président · Co-fondateur", "President · Co-founder",
        "Préside le conseil d'administration et oriente la stratégie du Réseau WIIN Canada. Son mandat met l'accent sur le développement des partenariats et sur la mission de l'organisme : agriculture, éducation, autonomisation des femmes et patrimoine culturel.",
        "Chairs the board of directors and guides the strategy of WIIN Canada. His mandate emphasizes partnership development and the organization's mission: agriculture, education, women's empowerment, and cultural heritage.",
        "https://www.linkedin.com/in/eyrich-samba-510b9453/")}
      {director("BB", "Ben Babassana", "Trésorier · Co-fondateur", "Treasurer · Co-founder",
        "Trésorier de l'organisme. Il veille à la rigueur financière : tenue des comptes, exercice fiscal et préparation de l'examen comptable annuel.",
        "Treasurer of the organization. He oversees financial rigour: bookkeeping, the fiscal year, and preparation of the annual review engagement.")}
      {director("TK", "Théophile Kilo", "Secrétaire · Co-fondateur", "Secretary · Co-founder",
        "Secrétaire du conseil, responsable de la gouvernance et des résolutions. Professionnel des finances et des systèmes SAP (certifié SAP S/4HANA Finance · SKEMA Business School).",
        "Board secretary, responsible for governance and resolutions. Finance & SAP professional (SAP S/4HANA Finance certified · SKEMA Business School).",
        "https://www.linkedin.com/in/theophile-kilo-2b2a76107/")}
    </>
  );
  return (
    <PageShell
      lang={lang} go={go}
      eyebrow={isFr ? "Gouvernance · Réseau WIIN Canada" : "Governance · WIIN Canada"}
      title={isFr ? "Notre gouvernance, en transparence" : "Our governance, transparently"}
      lede={isFr
        ? "Le Réseau mondial d'impact et d'innovation Canada (le Réseau WIIN Canada) est un organisme fédéral à but non lucratif (Loi canadienne sur les organisations à but non lucratif). Cette page documente notre conseil d'administration, notre identité juridique, nos règlements, et notre cadre financier — pour les bailleurs, les donateurs, les partenaires et la presse."
        : "WIIN Canada is a federal not-for-profit organization (Canada Not-for-profit Corporations Act). This page documents our board of directors, legal identity, bylaws, and financial framework — for funders, donors, partners and the press."
      }
    >
      <div className="wrap" style={{ paddingTop: 32, paddingBottom: 8 }}>
        <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, color: "var(--text-muted)", marginBottom: 0 }}>
          {isFr ? "Dernière mise à jour : 16 mai 2026 · Version 1.0 · Mois 1 post-incorporation" : "Last updated: 2026-05-16 · Version 1.0 · Month 1 post-incorporation"}
        </p>
      </div>

      {section(
        "1. Identité juridique",
        "1. Legal identity",
        <>
          <ul style={{ paddingLeft: 22, lineHeight: 1.8 }}>
            <li><strong>Nom légal (EN) :</strong> World Impact &amp; Innovation Network Canada</li>
            <li><strong>Nom légal (FR) :</strong> Réseau mondial d'impact et d'innovation Canada</li>
            <li><strong>Nom d'opération :</strong> WIIN Canada</li>
            <li><strong>Type :</strong> OBNL fédéral (Loi canadienne sur les organisations à but non lucratif · « Soliciting Corporation »)</li>
            
            
            <li><strong>Siège social :</strong> 800 rue du Square-Victoria, suite 2624, Montréal QC H3C 0B4</li>
            <li><strong>Numéros d'enregistrement :</strong> sur demande</li>
            
          </ul>
        </>,
        <>
          <ul style={{ paddingLeft: 22, lineHeight: 1.8 }}>
            <li><strong>Legal name (EN):</strong> World Impact &amp; Innovation Network Canada</li>
            <li><strong>Legal name (FR):</strong> Réseau mondial d'impact et d'innovation Canada</li>
            <li><strong>Operating name:</strong> WIIN Canada</li>
            <li><strong>Type:</strong> Federal NFP (Canada Not-for-profit Corporations Act · "Soliciting Corporation")</li>
            
            
            <li><strong>Registered office:</strong> 800 rue du Square-Victoria, suite 2624, Montréal QC H3C 0B4</li>
            <li><strong>Registration numbers:</strong> available on request</li>
            
          </ul>
        </>
      )}

      {section(
        "2. Conseil d'administration",
        "2. Board of directors",
        <>
          <p>Le conseil d'administration du Réseau WIIN Canada réunit trois administrateurs co-fondateurs. Les statuts prévoient un minimum de 3 et un maximum de 10 administrateurs (Article 3).</p>
          {boardCards}
        </>,
        <>
          <p>WIIN Canada's board of directors brings together three co-founder directors. The articles provide for a minimum of 3 and a maximum of 10 directors (Article 3).</p>
          {boardCards}
        </>
      )}

      {section(
        "3. Règlements et politique de dissolution",
        "3. Bylaws and dissolution policy",
        <>
          <p><strong>Règlements internes (Bylaw No. 1) :</strong> version 1.0 (datée du 19 mars 2026, structure complète conforme à la Loi canadienne sur les organisations à but non lucratif). Adoption formelle par résolution écrite du conseil en cours · disponibles sur demande à <a href="mailto:info@wiincanada.org">info@wiincanada.org</a>.</p>
          <p><strong>Politique de dissolution (Article 8) :</strong> en cas de dissolution, les biens restants de la Personne morale, après acquittement de ses dettes, seront distribués à un ou plusieurs <em>donataires reconnus</em> au sens de la <em>Loi de l'impôt sur le revenu</em> (Canada). Cette clause préserve l'éligibilité future à l'enregistrement caritatif fédéral (T2050).</p>
        </>,
        <>
          <p><strong>Internal bylaws (Bylaw No. 1):</strong> version 1.0 (dated 2026-03-19, full structure compliant with the Canada Not-for-profit Corporations Act). Formal adoption by written board resolution in progress · available on request at <a href="mailto:info@wiincanada.org">info@wiincanada.org</a>.</p>
          <p><strong>Dissolution policy (Article 8):</strong> upon dissolution, after payment of all debts, the remaining assets of the Corporation shall be distributed to one or more <em>qualified donees</em> within the meaning of the <em>Income Tax Act</em> (Canada). This clause preserves future eligibility for federal charitable registration (T2050).</p>
        </>
      )}

      {section(
        "4. Cadre financier",
        "4. Financial framework",
        <>
          <ul style={{ paddingLeft: 22, lineHeight: 1.8 }}>
            <li><strong>Exercice fiscal :</strong> 31 décembre (alignement année civile)</li>
            <li><strong>Cadence d'examen comptable :</strong> examen externe annuel (Review Engagement) conforme au seuil CNCA s.188 pour OBNL Soliciting Corp dont les revenus se situent entre 50 000 $ et 250 000 $</li>
            
            
          </ul>
        </>,
        <>
          <ul style={{ paddingLeft: 22, lineHeight: 1.8 }}>
            <li><strong>Fiscal year:</strong> December 31 (calendar year alignment)</li>
            <li><strong>Annual external review cadence:</strong> annual review engagement consistent with the CNCA s.188 threshold for Soliciting Corp NFPs with annual revenues between $50,000 and $250,000</li>
            
            
          </ul>
        </>
      )}

      {section(
        "5. Statut caritatif (enregistrement ARC)",
        "5. Charitable status (CRA registration)",
        <>
          <p>Le Réseau WIIN Canada planifie le dépôt de sa demande d'enregistrement à titre d'organisme de bienfaisance auprès de l'ARC (demande en ligne, via « Mon dossier d'entreprise ») en <strong>septembre 2026</strong>, après la tenue du démonstrateur pilote des Journées Culinaires du Manioc 2026 (juillet) qui servira de preuve d'activité de programme. Le délai de traitement de l'ARC est variable et ne peut être garanti.</p>
          <p>Tant que le statut caritatif n'est pas obtenu, le Réseau WIIN Canada <strong>ne peut pas émettre de reçus officiels de don aux fins de l'impôt</strong>. Les contributions reçues seront utilisées pour le mandat de l'organisme; les contributeurs ne pourront pas réclamer de crédit d'impôt charitable avant que l'ARC confirme l'enregistrement.</p>
        </>,
        <>
          <p>WIIN Canada plans to file its federal charitable-registration application with the CRA (filed online via My Business Account) in <strong>September 2026</strong>, after the Journées Culinaires du Manioc 2026 pilot demonstrator (July) which will serve as proof of program activity. CRA processing times vary and cannot be guaranteed.</p>
          <p>Until charitable status is obtained, WIIN Canada <strong>cannot issue official donation receipts for tax purposes</strong>. Contributions received will be applied to the organization's mandate; contributors will not be able to claim a charitable tax credit until the CRA confirms registration.</p>
        </>
      )}

      {section(
        "6. Transparence et reddition de comptes",
        "6. Transparency and accountability",
        <>
          <ul style={{ paddingLeft: 22, lineHeight: 1.8 }}>
            <li><strong>États financiers annuels :</strong> publiés sur cette page après la clôture du premier exercice complet (Q1 2027) · accès anticipé sur demande à <a href="mailto:info@wiincanada.org">info@wiincanada.org</a></li>
            <li><strong>Rapport annuel d'activités :</strong> publié annuellement · bilan des programmes, partenariats, et impact mesuré</li>
            <li><strong>Mise à jour du statut caritatif :</strong> cette page reflète le statut ARC T2050 dès qu'il évolue</li>
            <li><strong>Documents internes (règlements, statuts, résolutions) :</strong> disponibles sur demande</li>
          </ul>
        </>,
        <>
          <ul style={{ paddingLeft: 22, lineHeight: 1.8 }}>
            <li><strong>Annual financial statements:</strong> published on this page after the first full fiscal year close (Q1 2027) · advance access on request at <a href="mailto:info@wiincanada.org">info@wiincanada.org</a></li>
            <li><strong>Annual activity report:</strong> published annually · summary of programs, partnerships, and measured impact</li>
            <li><strong>CRA status update:</strong> this page reflects the T2050 status as it evolves</li>
            <li><strong>Internal documents (bylaws, articles, resolutions):</strong> available on request</li>
          </ul>
        </>
      )}

      {section(
        "7. Notre relation avec Digigle Solutions",
        "7. Our relationship with Digigle Solutions",
        <>
          <p>Digigle Solutions LTD est le <strong>partenaire technique de co-portage</strong> du Réseau WIIN Canada. Digigle est une jeune entreprise en intelligence artificielle agentique qui fournit à WIIN : la plateforme web, l'infrastructure d'automation, la plateforme de communication, et le co-portage technique au démarrage de l'organisme.</p>
          <p>Il s'agit d'une <strong>relation commerciale standard sans dilution de l'indépendance de WIIN</strong>. Le Réseau WIIN Canada est une personne morale fédérale autonome avec son propre conseil d'administration, ses propres règlements, et son propre cadre financier. Digigle Solutions n'est ni administrateur, ni membre, ni parrain fiscal de WIIN Canada.</p>
        </>,
        <>
          <p>Digigle Solutions LTD is WIIN Canada's <strong>technical co-portage partner</strong>. Digigle is an agentic artificial intelligence startup that provides WIIN with: the website platform, automation infrastructure, communication platform, and start-up technical co-portage.</p>
          <p>This is a <strong>standard commercial relationship without diluting WIIN's independence</strong>. WIIN Canada is an autonomous federal legal person with its own board of directors, its own bylaws, and its own financial framework. Digigle Solutions is neither a director, nor a member, nor a fiscal sponsor of WIIN Canada.</p>
        </>
      )}

      {section(
        "8. Contact gouvernance",
        "8. Governance contact",
        <>
          <p>Pour toute question concernant la gouvernance, les règlements, les états financiers, ou l'enregistrement caritatif :</p>
          <p><a href="mailto:info@wiincanada.org" style={{ fontSize: 17, fontWeight: 600 }}>info@wiincanada.org</a></p>
        </>,
        <>
          <p>For any question regarding governance, bylaws, financial statements, or charitable registration:</p>
          <p><a href="mailto:info@wiincanada.org" style={{ fontSize: 17, fontWeight: 600 }}>info@wiincanada.org</a></p>
        </>
      )}
    </PageShell>
  );
}

window.MissionPage = MissionPage;
window.GenericPage = GenericPage;
window.DemandeInvitationPage = DemandeInvitationPage;
window.DossierPage = DossierPage;
window.PillarsPage = PillarsPage;
window.ConfidentialitePage = ConfidentialitePage;
window.GouvernancePage = GouvernancePage;
window.PageShell = PageShell;  // exposed for wiin-blog.jsx (S141 v19)