/* Pages — per-page assemblies. window.PageHero + window.{Home|Clubs|Missions|Projects|Membership|News|Contact}Page */
(function () {
  const Icon = window.Icon, RiverFlow = window.RiverFlow;

  // ---- shared page hero (non-home pages) ----
  window.PageHero = function PageHero({ eyebrow, title, lede, breadcrumb }) {
    return (
      <section style={{ background: "var(--navy-900)", color: "#fff", position: "relative", overflow: "hidden", padding: "clamp(80px,11vw,150px) 0 clamp(56px,7vw,100px)" }}>
        <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(125deg, rgba(255,255,255,.02) 0 22px, rgba(255,255,255,.04) 22px 44px)" }}></div>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(80% 80% at 85% 10%, rgba(184,144,47,.18), transparent 55%)" }}></div>
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 220, opacity: .4 }}><RiverFlow opacity={.4} /></div>
        <div className="wrap" style={{ position: "relative" }} data-reveal>
          <nav aria-label="Breadcrumb" style={{ marginBottom: 26, fontFamily: "var(--mono)", fontSize: 11.5, letterSpacing: ".12em", textTransform: "uppercase" }}>
            <a href="index.html" style={{ color: "rgba(255,255,255,.55)" }}>EMA</a>
            <span style={{ margin: "0 10px", color: "rgba(255,255,255,.35)" }}>/</span>
            <span style={{ color: "var(--gold-300)" }}>{breadcrumb}</span>
          </nav>
          {eyebrow && (
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <span className="kicker-rule"></span>
              <span className="eyebrow" style={{ color: "var(--gold-300)" }}>{eyebrow}</span>
            </div>
          )}
          <h1 className="display" style={{ fontSize: "clamp(40px,5.4vw,84px)", lineHeight: 1.06, margin: 0, color: "#fff", textWrap: "balance", maxWidth: 980 }}>{title}</h1>
          {lede && <p className="lede" style={{ marginTop: 24, color: "rgba(255,255,255,.78)", maxWidth: 640 }}>{lede}</p>}
        </div>
      </section>
    );
  };

  // ============== HOME ==============
  window.HomePage = function HomePage({ C, mark, logoWhite, t, lang }) {
    return (
      <React.Fragment>
        <window.Hero C={C} mark={mark} logoWhite={logoWhite} variant={t.heroVariant} />
        <window.AboutLetter C={C} />
        <window.Pillars C={C} />
        <window.Context C={C} />
        <window.Value C={C} />
        <window.Governance C={C} />
        <window.PlaceholderSection id="council" lang={lang} {...C.placeholders.council} type="cards" count={4} alt />
        <window.Ethics C={C} />
        <window.Partners C={C} />
        <window.FinalCTA C={C} logoWhite={logoWhite} />
      </React.Fragment>
    );
  };

  // ============== CLUBS ==============
  window.ClubsPage = function ClubsPage({ C, t, lang, logoWhite }) {
    return (
      <React.Fragment>
        <window.PageHero
          eyebrow={C.clubs.eyebrow}
          breadcrumb={C.nav.clubs}
          title={lang === "fr" ? "Sept clubs sectoriels au cœur de la coopération" : "Seven sector clubs at the heart of cooperation"}
          lede={C.clubs.lede}
        />
        <window.Clubs C={C} variant={t.clubsVariant} hideHead />
        <window.FinalCTA C={C} logoWhite={logoWhite} />
      </React.Fragment>
    );
  };

  // ============== MISSIONS ==============
  window.MissionsPage = function MissionsPage({ C, lang, logoWhite }) {
    return (
      <React.Fragment>
        <window.PageHero
          eyebrow={C.missions.eyebrow}
          breadcrumb={C.nav.missions}
          title={lang === "fr" ? "Missions économiques, institutionnelles et événements" : "Economic missions, institutional missions & events"}
          lede={lang === "fr"
            ? "Plénières, missions sur le terrain, forum annuel : les temps forts qui ancrent l'Alliance dans le réel."
            : "Plenaries, on-the-ground missions, the annual forum: the milestones that anchor the Alliance in the real world."}
        />
        <window.Missions C={C} hideHead />
        <window.Agenda C={C} />
        <window.Forum C={C} />
        <window.PlaceholderSection id="reports" lang={lang} alt {...C.placeholders.reports} type="cards" count={3} />
        <window.FinalCTA C={C} logoWhite={logoWhite} />
      </React.Fragment>
    );
  };

  // ============== PROJECTS ==============
  window.ProjectsPage = function ProjectsPage({ C, lang, logoWhite }) {
    return (
      <React.Fragment>
        <window.PageHero
          eyebrow={lang === "fr" ? "Projets" : "Projects"}
          breadcrumb={C.nav.projects}
          title={lang === "fr" ? "Les projets qui structurent notre action" : "The projects that shape our action"}
          lede={lang === "fr"
            ? "Un projet phare et un pipeline alimenté par les besoins des deux espaces."
            : "A flagship project and a pipeline fed by the needs of both areas."}
        />
        <window.Project C={C} />
        <window.PlaceholderSection id="pipeline" lang={lang} alt {...C.placeholders.pipeline} type="cards" count={3} />
        <window.FinalCTA C={C} logoWhite={logoWhite} />
      </React.Fragment>
    );
  };

  // ============== MEMBERSHIP ==============
  window.MembershipPage = function MembershipPage({ C, t, lang, logoWhite }) {
    return (
      <React.Fragment>
        <window.PageHero
          eyebrow={C.membership.eyebrow}
          breadcrumb={C.nav.membership}
          title={C.membership.title}
          lede={C.membership.lede}
        />
        <window.WhyJoinReasons C={C} />
        <window.Membership C={C} variant={t.membershipVariant} hideHead />
        <window.AdhesionForm C={C} lang={lang} />
        <window.FAQ C={C} />
      </React.Fragment>
    );
  };

  // ============== NEWS ==============
  window.NewsPage = function NewsPage({ C, lang, logoWhite }) {
    return (
      <React.Fragment>
        <window.PageHero
          eyebrow={C.news.eyebrow}
          breadcrumb={C.nav.news}
          title={lang === "fr" ? "Actualités, publications & espace presse" : "News, publications & press room"}
          lede={lang === "fr"
            ? "Toute la vie institutionnelle de l'Alliance et de ses clubs : communiqués, prises de parole, livres blancs."
            : "All the institutional life of the Alliance and its clubs: releases, op-eds, white papers."}
        />
        <window.News C={C} data={C.publications} id="publications" bg="var(--bg-alt)" showCta={false} poster />
        <window.PressSection C={C} />
      </React.Fragment>
    );
  };

  // ============== ARTICLE — TOTALENERGIES ==============
  const TOTAL_ARTICLE = {
    tag: "Énergie",
    date: "Septembre 2025",
    img: "assets/media/TotalEnergies-en -rak.png",
    title: "TotalEnergies en Irak : un pont énergétique entre deux rives",
    subtitle: "Un investissement, deux rives, un même avenir.",
    podcast: "Cet article accompagne l'épisode du podcast « Le Pont », présenté par Sarmad Al Saffar — les conversations qui relient l'Europe et l'Irak.",
    signature: "European Mesopotamia Alliance — Bâtir des ponts, ouvrir des avenirs.",
    stats: [
      ["TotalEnergies", "45 % — opérateur"],
      ["Basra Oil Company", "30 %"],
      ["QatarEnergy", "25 %"],
      ["Ratawi phase 1", "120 000 b/j — début 2026"],
      ["Ratawi phase 2", "210 000 b/j — 2028"],
      ["Usine eau de mer", "5 M barils/jour — Um Qasr"],
    ],
    body: [
      { type: "p", t: "En septembre 2025, TotalEnergies et QatarEnergy ont lancé la construction des deux derniers grands volets de leur projet phare en Irak : une usine de traitement d'eau de mer et la phase 2 du redéveloppement du champ pétrolier de Ratawi. Avec ces signatures, l'ensemble du Gas Growth Integrated Project (GGIP) entre en phase d'exécution. Derrière les chiffres, c'est une certaine idée de la coopération entre l'Europe et l'Irak qui prend forme — concrète, durable, et profitable aux deux rives." },
      { type: "h2", t: "Le projet en bref" },
      { type: "p", t: "Le GGIP est l'un des plus importants investissements occidentaux jamais engagés en Irak. Il est porté par un consortium réunissant TotalEnergies (45 %, opérateur), la Basra Oil Company (30 %) et QatarEnergy (25 %). Sa logique est celle d'une stratégie multi-énergies : valoriser durablement les ressources naturelles du pays pour améliorer sa fourniture en électricité, renforcer son indépendance énergétique et réduire ses émissions de gaz à effet de serre." },
      { type: "p", t: "Le programme repose sur quatre piliers complémentaires, désormais tous en construction :" },
      { type: "ul", items: [
        { label: "Le gaz naturel", t: "récupérer le gaz aujourd'hui brûlé à la torche sur plusieurs champs pétroliers du sud du pays pour le réinjecter dans le réseau et alimenter des centrales électriques, au lieu de le gaspiller." },
        { label: "Le pétrole", t: "le redéveloppement du champ de Ratawi, cœur productif du projet." },
        { label: "Le solaire", t: "une centrale solaire de grande capacité près de Bassorah, qui inscrit le projet dans la transition énergétique." },
        { label: "L'eau", t: "une usine de traitement d'eau de mer pour soutenir durablement la production des réservoirs." },
      ]},
      { type: "h2", t: "Les deux derniers volets lancés en septembre 2025" },
      { type: "p", t: "L'usine de traitement d'eau de mer sera construite sur la côte, à proximité de la ville d'Um Qasr. Elle traitera et acheminera jusqu'à 5 millions de barils d'eau de mer par jour vers les principaux champs pétroliers du sud de l'Irak. Cette eau, injectée dans les réservoirs, permet de maintenir la pression et donc la production des gisements — tout en préservant les rares ressources en eau douce du pays, un enjeu vital dans une région exposée au stress hydrique." },
      { type: "p", t: "Le redéveloppement du champ de Ratawi, lancé en septembre 2023, monte en puissance par étapes. La phase 1 vise à porter la production jusqu'à 120 000 barils par jour, avec une entrée en production attendue début 2026. La phase 2, qui correspond au développement complet du champ, permettra d'atteindre 210 000 barils par jour à compter de 2028." },
      { type: "h2", t: "Pourquoi c'est un pont entre l'Europe et l'Irak" },
      { type: "p", t: "Ce projet est emblématique de ce que peut produire une coopération euro-irakienne bien conçue. TotalEnergies, acteur énergétique européen majeur, apporte capitaux, technologie et standards internationaux à un pays qui en a besoin pour moderniser son secteur. En retour, l'Europe gagne un ancrage stratégique dans une grande nation pétrolière et gazière." },
      { type: "p", t: "L'intérêt dépasse largement le seul cadre énergétique. En aidant l'Irak à valoriser son propre gaz et à produire davantage d'électricité, le projet contribue à réduire sa dépendance aux importations de ses voisins — un facteur de souveraineté pour Bagdad et de stabilité régionale pour tous. Le volet solaire, lui, rejoint directement les priorités européennes de transition et de décarbonation. Énergie fossile valorisée plus proprement, énergie renouvelable déployée, gestion de l'eau maîtrisée : le GGIP réunit, sur un même territoire, les grands défis que l'Europe et l'Irak ont en partage." },
      { type: "p", t: "C'est précisément la conviction qui anime European Mesopotamia Alliance : le rapprochement entre les deux rives n'est pas un horizon lointain, il crée déjà de la valeur. Le pont n'est pas une métaphore — il se construit, projet après projet." },
      { type: "h2", t: "La valeur partagée : un modèle gagnant-gagnant" },
      { type: "p", t: "Pour l'Irak, les bénéfices sont multiples et tangibles :" },
      { type: "ul", items: [
        { t: "Monétiser un gaz aujourd'hui parti en fumée, qui représente chaque année des milliards de dollars perdus." },
        { t: "Renforcer une production électrique chroniquement insuffisante, au bénéfice direct des habitants et des entreprises." },
        { t: "Réduire la facture des importations d'énergie." },
        { t: "Créer des emplois, des compétences et des infrastructures durables." },
        { t: "Diminuer les émissions liées au torchage." },
        { t: "Amorcer une diversification vers le renouvelable." },
      ]},
      { type: "p", t: "Pour TotalEnergies et l'Europe, le projet sécurise un accès de long terme à des ressources stratégiques, génère un retour attendu sur un investissement majeur, et diversifie les revenus entre pétrole, gaz et solaire — contribuant à la résilience de l'approvisionnement énergétique européen." },
      { type: "p", t: "Chacun y trouve son compte : l'Irak gagne en autonomie énergétique et en développement, l'Europe en accès et en stabilité. C'est la définition même d'un partenariat équilibré — et la meilleure illustration du message que porte EMA." },
      { type: "h2", t: "Ce que cela signifie pour EMA" },
      { type: "p", t: "Le GGIP montre la voie. Là où l'on parle souvent de distance entre l'Europe et l'Irak, des acteurs bâtissent au contraire des liens concrets, créateurs d'emplois, d'énergie et d'avenir. C'est cette dynamique qu'EMA entend accompagner et amplifier : faire dialoguer les acteurs, ouvrir des portes et soutenir les projets qui laissent une empreinte durable, sur les deux rives." },
    ],
  };

  const TOTAL_ARTICLE_EN = {
    tag: "Energy",
    date: "September 2025",
    img: "assets/media/TotalEnergies-en -rak.png",
    title: "TotalEnergies in Iraq: an energy bridge between two shores",
    subtitle: "One investment, two shores, one shared future.",
    podcast: "This article accompanies the episode of the podcast \u201CLe Pont\u201D, hosted by Sarmad Al Saffar \u2014 the conversations that connect Europe and Iraq.",
    signature: "European Mesopotamia Alliance \u2014 Building bridges, opening futures.",
    stats: [
      ["TotalEnergies", "45% \u2014 operator"],
      ["Basra Oil Company", "30%"],
      ["QatarEnergy", "25%"],
      ["Ratawi phase 1", "120,000 b/d \u2014 early 2026"],
      ["Ratawi phase 2", "210,000 b/d \u2014 2028"],
      ["Seawater plant", "5M barrels/day \u2014 Um Qasr"],
    ],
    body: [
      { type: "p", t: "In September 2025, TotalEnergies and QatarEnergy launched construction of the two final major components of their flagship project in Iraq: a seawater treatment plant and phase 2 of the redevelopment of the Ratawi oil field. With these signatures, the entire Gas Growth Integrated Project (GGIP) enters its execution phase. Behind the figures, a certain idea of cooperation between Europe and Iraq is taking shape \u2014 concrete, durable, and profitable for both shores." },
      { type: "h2", t: "The project in brief" },
      { type: "p", t: "The GGIP is one of the largest Western investments ever committed in Iraq. It is led by a consortium bringing together TotalEnergies (45%, operator), the Basra Oil Company (30%) and QatarEnergy (25%). Its logic is that of a multi-energy strategy: sustainably developing the country's natural resources to improve its electricity supply, strengthen its energy independence and reduce its greenhouse gas emissions." },
      { type: "p", t: "The programme rests on four complementary pillars, now all under construction:" },
      { type: "ul", items: [
        { label: "Natural gas", t: "recovering the gas currently flared at several oil fields in the south of the country to reinject it into the grid and power electricity plants, instead of wasting it." },
        { label: "Oil", t: "the redevelopment of the Ratawi field, the productive heart of the project." },
        { label: "Solar", t: "a large-capacity solar plant near Basra, which embeds the project in the energy transition." },
        { label: "Water", t: "a seawater treatment plant to sustainably support production from the reservoirs." },
      ]},
      { type: "h2", t: "The two final components launched in September 2025" },
      { type: "p", t: "The seawater treatment plant will be built on the coast, near the city of Um Qasr. It will treat and deliver up to 5 million barrels of seawater per day to the main oil fields of southern Iraq. This water, injected into the reservoirs, maintains pressure and therefore production from the deposits \u2014 while preserving the country's scarce freshwater resources, a vital issue in a region exposed to water stress." },
      { type: "p", t: "The redevelopment of the Ratawi field, launched in September 2023, is ramping up in stages. Phase 1 aims to raise production to 120,000 barrels per day, with start-up expected in early 2026. Phase 2, corresponding to the full development of the field, will reach 210,000 barrels per day from 2028." },
      { type: "h2", t: "Why it is a bridge between Europe and Iraq" },
      { type: "p", t: "This project is emblematic of what well-designed Euro-Iraqi cooperation can produce. TotalEnergies, a major European energy player, brings capital, technology and international standards to a country that needs them to modernise its sector. In return, Europe gains a strategic foothold in a major oil and gas nation." },
      { type: "p", t: "The interest goes far beyond energy alone. By helping Iraq develop its own gas and produce more electricity, the project helps reduce its dependence on imports from its neighbours \u2014 a factor of sovereignty for Baghdad and of regional stability for all. The solar component directly aligns with European priorities of transition and decarbonisation. Fossil energy developed more cleanly, renewable energy deployed, water management mastered: the GGIP brings together, on a single territory, the great challenges that Europe and Iraq share." },
      { type: "p", t: "This is precisely the conviction that drives European Mesopotamia Alliance: rapprochement between the two shores is not a distant horizon, it is already creating value. The bridge is not a metaphor \u2014 it is being built, project after project." },
      { type: "h2", t: "Shared value: a win-win model" },
      { type: "p", t: "For Iraq, the benefits are multiple and tangible:" },
      { type: "ul", items: [
        { t: "Monetising gas that today goes up in smoke, representing billions of dollars lost every year." },
        { t: "Strengthening a chronically insufficient electricity supply, to the direct benefit of residents and businesses." },
        { t: "Reducing the energy import bill." },
        { t: "Creating jobs, skills and lasting infrastructure." },
        { t: "Cutting emissions linked to flaring." },
        { t: "Kick-starting diversification towards renewables." },
      ]},
      { type: "p", t: "For TotalEnergies and Europe, the project secures long-term access to strategic resources, generates an expected return on a major investment, and diversifies revenues across oil, gas and solar \u2014 contributing to the resilience of Europe's energy supply." },
      { type: "p", t: "Everyone benefits: Iraq gains energy autonomy and development, Europe gains access and stability. This is the very definition of a balanced partnership \u2014 and the best illustration of the message EMA carries." },
      { type: "h2", t: "What this means for EMA" },
      { type: "p", t: "The GGIP shows the way. Where distance between Europe and Iraq is so often invoked, actors are instead building concrete ties that create jobs, energy and a future. It is this momentum that EMA intends to support and amplify: bringing actors into dialogue, opening doors and backing the projects that leave a lasting mark, on both shores." },
    ],
  };

  window.NewsTotalEnergiesPage = function NewsTotalEnergiesPage({ C, lang }) {
    const a = lang === "en" ? TOTAL_ARTICLE_EN : TOTAL_ARTICLE;
    const MONO = "var(--mono)";
    const DISPLAY = "var(--display)";
    return (
      <React.Fragment>
        {/* Hero */}
        <section style={{ background: "var(--navy-900)", color: "#fff", position: "relative", overflow: "hidden", padding: "clamp(80px,11vw,140px) 0 clamp(48px,6vw,80px)" }}>
          <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(125deg, rgba(255,255,255,.02) 0 22px, rgba(255,255,255,.04) 22px 44px)" }}></div>
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(80% 80% at 85% 10%, rgba(184,144,47,.18), transparent 55%)" }}></div>
          <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 220, opacity: .4 }}><RiverFlow opacity={.4} /></div>
          <div className="wrap" style={{ position: "relative", maxWidth: 840 }} data-reveal>
            <nav aria-label="Breadcrumb" style={{ marginBottom: 26, fontFamily: MONO, fontSize: 11.5, letterSpacing: ".12em", textTransform: "uppercase" }}>
              <a href="index.html" style={{ color: "rgba(255,255,255,.55)" }}>EMA</a>
              <span style={{ margin: "0 10px", color: "rgba(255,255,255,.35)" }}>/</span>
              <a href="news.html" style={{ color: "rgba(255,255,255,.55)" }}>{C.nav.news}</a>
              <span style={{ margin: "0 10px", color: "rgba(255,255,255,.35)" }}>/</span>
              <span style={{ color: "rgba(255,255,255,.8)" }}>{a.tag}</span>
            </nav>
            <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 22 }}>
              <span style={{ fontFamily: MONO, fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", background: "var(--gold-500)", color: "var(--navy-900)", padding: "4px 12px", borderRadius: 99, fontWeight: 600 }}>{a.tag}</span>
              <span style={{ fontFamily: MONO, fontSize: 12, color: "rgba(255,255,255,.55)", letterSpacing: ".08em" }}>{a.date}</span>
            </div>
            <h1 className="display" style={{ fontSize: "clamp(32px,4vw,58px)", lineHeight: 1.1, margin: "0 0 20px" }}>{a.title}</h1>
            <p style={{ fontFamily: DISPLAY, fontStyle: "italic", fontSize: "clamp(18px,1.6vw,22px)", color: "rgba(255,255,255,.8)", margin: 0, lineHeight: 1.45 }}>{a.subtitle}</p>
          </div>
        </section>

        {/* Article body */}
        <article style={{ background: "var(--bg)", padding: "clamp(48px,6vw,88px) 0" }}>
          <div className="wrap" style={{ maxWidth: 760 }}>

            {/* Cover image — top of article, full column width */}
            <img
              src={a.img}
              alt={a.title}
              style={{ width: "min(400px, 100%)", aspectRatio: "1 / 1", objectFit: "fill", display: "block", borderRadius: 10, boxShadow: "0 4px 12px rgba(14,31,58,.08)", marginBottom: "clamp(36px,4vw,56px)", marginInline: "auto" }}
            />

            {a.body.map((block, i) => {
              if (block.type === "h2") return (
                <h2 key={i} className="display" style={{ fontSize: "clamp(26px,2.4vw,36px)", margin: "52px 0 18px", color: "var(--navy-900)", lineHeight: 1.15, paddingTop: 8, borderTop: "2px solid var(--gold-500)" }}>{block.t}</h2>
              );
              if (block.type === "p") return (
                <p key={i} style={{ fontSize: 17, lineHeight: 1.75, color: "var(--ink)", margin: "0 0 22px" }}>{block.t}</p>
              );
              if (block.type === "ul") return (
                <ul key={i} style={{ margin: "0 0 24px", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
                  {block.items.map((it, j) => (
                    <li key={j} style={{ display: "flex", gap: 16, fontSize: 16, lineHeight: 1.6, color: "var(--ink)", padding: "14px 18px", background: "var(--surface)", border: "1px solid var(--hairline)", borderLeft: "3px solid var(--gold-500)", borderRadius: 6 }}>
                      {it.label && <span style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--gold-600)", flex: "none", paddingTop: 3 }}>{it.label}</span>}
                      <span>{it.t}</span>
                    </li>
                  ))}
                </ul>
              );
              return null;
            })}

            {/* Key figures */}
            <div style={{ margin: "52px 0 0", background: "var(--navy-900)", borderRadius: 10, padding: "clamp(28px,3vw,40px)", color: "#fff", position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", inset: 0, opacity: .3 }}><RiverFlow opacity={.3} /></div>
              <div style={{ position: "relative" }}>
                <div style={{ fontFamily: MONO, fontSize: 10.5, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--gold-300)", marginBottom: 24 }}>{lang === "fr" ? "Chiffres clés" : "Key figures"}</div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }} className="ema-3col">
                  {a.stats.map(([k, v], i) => (
                    <div key={i} style={{ borderTop: "1px solid rgba(255,255,255,.18)", paddingTop: 14 }}>
                      <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: "rgba(255,255,255,.5)", marginBottom: 6 }}>{k}</div>
                      <div style={{ fontFamily: DISPLAY, fontSize: 17, color: "var(--gold-300)", lineHeight: 1.3 }}>{v}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Podcast note */}
            <div style={{ margin: "40px 0 0", padding: "20px 24px", background: "var(--blue-wash)", border: "1px solid var(--hairline)", borderLeft: "3px solid var(--navy-700)", borderRadius: 6 }}>
              <p style={{ margin: 0, fontFamily: DISPLAY, fontStyle: "italic", fontSize: 15.5, lineHeight: 1.6, color: "var(--navy-700)" }}>{a.podcast}</p>
            </div>

            {/* Signature */}
            <div style={{ marginTop: 48, paddingTop: 28, borderTop: "1px solid var(--hairline)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <span style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--gold-600)" }}>{a.signature}</span>
              <a href="news.html" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: MONO, fontSize: 11.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--navy-700)", textDecoration: "none" }}>
                <span style={{ display:"inline-flex", transform:"rotate(180deg)" }}><Icon name="arrow" size={14} /></span> {lang === "fr" ? "Retour aux actualités" : "Back to news"}
              </a>
            </div>
          </div>
        </article>

        <window.FinalCTA C={C} logoWhite="assets/ema_logo_cutout.png" />
      </React.Fragment>
    );
  };

  // ============== ARTICLE — L'HEURE DES ALLIANCES ==============
  const ALLIANCES_ARTICLE = {
    tag: "Éditorial",
    date: "Juin 2026",
    img: "assets/media/Lheure-des-alliances.png",
    title: "L'heure des alliances",
    subtitle: "Pourquoi l'instabilité du Golfe rend le rapprochement entre l'Europe et l'Irak plus nécessaire que jamais",
    type: "Éditorial — European Mesopotamia Alliance",
    attribution: "Karouby — Présidence du Bureau",
    signature: "European Mesopotamia Alliance — Bâtir des ponts, ouvrir des avenirs.",
    body: [
      { type: "p", t: "Il aura suffi de quelques jours. Un conflit régional, plus de deux cents navires à l'ancre autour du détroit d'Ormuz, et les prix de l'énergie se sont aussitôt tendus : le baril repart à la hausse, le gaz bondit, les banques centrales révisent leurs scénarios. L'Europe, une fois encore, découvre à quel point sa prospérité dépend de routes lointaines et de fournisseurs sur lesquels elle n'a pas la main." },
      { type: "p", t: "Cette fois, les économistes se veulent rassurants : le choc serait bien moindre qu'en 2022. L'offre est abondante, l'euro solide, l'inflation contenue. Soit. Mais derrière le soulagement de court terme se cache une vérité que nous ne devons pas esquiver. En se détournant de l'énergie russe, l'Europe a réduit une dépendance — pour en créer une autre. Elle dépend désormais davantage du Golfe, et donc d'un unique point de passage, le détroit d'Ormuz, par lequel transite près d'un cinquième du pétrole mondial. Le risque n'a pas disparu. Il a changé d'adresse." },
      { type: "p", t: "C'est précisément cette leçon qui doit nous mobiliser. Car la réponse à une vulnérabilité de ce type n'est ni le repli ni l'attente : c'est la diversification. Et la diversification, en matière stratégique, porte un autre nom — celui d'alliance." },
      { type: "h2", t: "L'Irak, partenaire de la résilience européenne" },
      { type: "p", t: "Dans cette équation, l'Irak occupe une place que l'on sous-estime trop souvent. Grande nation pétrolière et gazière, voisine immédiate des foyers de tension, le pays est à la fois exposé aux crises et porteur de solutions. Aider l'Irak à valoriser ses propres ressources — capter le gaz aujourd'hui brûlé à la torche, moderniser ses champs, développer le solaire, sécuriser son eau — ce n'est pas seulement servir le développement irakien. C'est renforcer la souveraineté énergétique de Bagdad, réduire son recours aux importations de ses voisins, et offrir à l'Europe un partenaire plus stable et plus fiable." },
      { type: "p", t: "Les grands projets industriels déjà en cours dans le sud du pays montrent que ce rapprochement n'est pas une vue de l'esprit : il crée des emplois, de l'énergie, des infrastructures, et de la valeur pour les deux rives. Ce que nous voyons à l'œuvre, ce sont des ponts concrets. Notre conviction, à EMA, est qu'il faut en bâtir davantage, et plus vite." },
      { type: "h2", t: "Pourquoi maintenant" },
      { type: "p", t: "Les alliances ne se décrètent pas en temps calme ; elles se nouent quand les lignes bougent. Un conflit aux portes de l'Irak place le pays, comme l'Europe, devant des choix d'ancrage. C'est dans ces moments que l'on mesure la valeur d'un partenaire qui propose autre chose qu'une transaction : un investissement de long terme, un transfert de savoir-faire, un accès au marché, une présence dans la durée." },
      { type: "p", t: "Et l'énergie n'est qu'un commencement. La fragilité des routes maritimes — Ormuz hier, la mer Rouge et Suez aujourd'hui — relance l'intérêt de corridors terrestres reliant le Golfe à l'Europe à travers l'Irak. La transition écologique appelle des coopérations où l'Europe apporte la technologie et l'Irak l'ensoleillement et le besoin. La reconstruction, l'eau, la sécurité alimentaire ouvrent autant de terrains où nos intérêts convergent. Ce sont des domaines stratégiques au plein sens du terme, et ils attendent des bâtisseurs." },
      { type: "h2", t: "Lucides, pas opportunistes" },
      { type: "p", t: "Que l'on ne s'y trompe pas : nous ne plaidons pas pour un enthousiasme aveugle. L'Irak demeure exposé à l'instabilité, et une partie de ses propres exportations dépend encore du Golfe. C'est justement pourquoi les alliances que nous appelons de nos vœux doivent être pensées pour durer et pour résister : des routes multiples plutôt qu'un passage unique, des partenariats institutionnels plutôt que des coups d'opportunité, un horizon de long terme plutôt que la réaction au dernier soubresaut des marchés. La résilience ne s'improvise pas. Elle se construit." },
      { type: "p", t: "C'est le rôle que s'est donné European Mesopotamia Alliance : faire dialoguer les acteurs, réduire la part d'inconnu qui freine les engagements, ouvrir les portes et accompagner les projets qui laissent une empreinte durable, en Irak comme en Europe. La volatilité que révèle l'actualité n'est pas un argument pour attendre. C'est l'argument le plus fort pour agir." },
      { type: "p", t: "L'Europe et l'Irak partagent bien plus qu'une histoire : ils partagent un avenir à bâtir. À l'heure où les certitudes se fissurent, le moment est venu de tendre des ponts plutôt que de les laisser à d'autres." },
    ],
  };

  const ALLIANCES_ARTICLE_EN = {
    tag: "Editorial",
    date: "June 2026",
    img: "assets/media/Lheure-des-alliances.png",
    title: "The hour of alliances",
    subtitle: "Why Gulf instability makes the rapprochement between Europe and Iraq more necessary than ever",
    type: "Editorial \u2014 European Mesopotamia Alliance",
    attribution: "Karouby \u2014 Chair of the Board",
    signature: "European Mesopotamia Alliance \u2014 Building bridges, opening futures.",
    body: [
      { type: "p", t: "It took only a few days. A regional conflict, more than two hundred ships anchored around the Strait of Hormuz, and energy prices immediately tightened: oil rose again, gas jumped, central banks revised their scenarios. Europe, once again, discovered how much its prosperity depends on distant routes and on suppliers it does not control." },
      { type: "p", t: "This time, economists want to be reassuring: the shock would be far smaller than in 2022. Supply is abundant, the euro solid, inflation contained. So be it. But behind the short-term relief lies a truth we must not dodge. By turning away from Russian energy, Europe reduced one dependence \u2014 only to create another. It now depends more heavily on the Gulf, and therefore on a single chokepoint, the Strait of Hormuz, through which nearly a fifth of the world's oil passes. The risk has not disappeared. It has changed address." },
      { type: "p", t: "It is precisely this lesson that must mobilise us. For the answer to a vulnerability of this kind is neither retreat nor waiting: it is diversification. And diversification, in strategic terms, goes by another name \u2014 alliance." },
      { type: "h2", t: "Iraq, a partner in European resilience" },
      { type: "p", t: "In this equation, Iraq holds a place that is too often underestimated. A major oil and gas nation, an immediate neighbour of the region's flashpoints, the country is both exposed to crises and a bearer of solutions. Helping Iraq develop its own resources \u2014 capturing the gas currently flared, modernising its fields, developing solar, securing its water \u2014 does not only serve Iraqi development. It strengthens Baghdad's energy sovereignty, reduces its reliance on imports from its neighbours, and offers Europe a more stable and reliable partner." },
      { type: "p", t: "The major industrial projects already under way in the south of the country show that this rapprochement is not wishful thinking: it creates jobs, energy, infrastructure, and value for both shores. What we are seeing at work are concrete bridges. Our conviction, at EMA, is that we must build more of them, and faster." },
      { type: "h2", t: "Why now" },
      { type: "p", t: "Alliances are not decreed in calm times; they are forged when the lines move. A conflict at Iraq's doorstep places the country, like Europe, before choices of anchorage. It is in such moments that one measures the value of a partner offering something other than a transaction: a long-term investment, a transfer of know-how, market access, a lasting presence." },
      { type: "p", t: "And energy is only a beginning. The fragility of maritime routes \u2014 Hormuz yesterday, the Red Sea and Suez today \u2014 revives the interest of land corridors linking the Gulf to Europe through Iraq. The ecological transition calls for cooperation where Europe brings technology and Iraq brings sunshine and need. Reconstruction, water, food security open up as many fields where our interests converge. These are strategic domains in the full sense of the term, and they await builders." },
      { type: "h2", t: "Clear-eyed, not opportunistic" },
      { type: "p", t: "Let there be no mistake: we are not arguing for blind enthusiasm. Iraq remains exposed to instability, and part of its own exports still depend on the Gulf. That is precisely why the alliances we call for must be designed to last and to withstand: multiple routes rather than a single passage, institutional partnerships rather than opportunistic moves, a long-term horizon rather than reaction to the latest market jolt. Resilience is not improvised. It is built." },
      { type: "p", t: "This is the role European Mesopotamia Alliance has given itself: bringing actors into dialogue, reducing the share of the unknown that holds back commitments, opening doors and supporting projects that leave a lasting mark, in Iraq as in Europe. The volatility revealed by current events is not an argument for waiting. It is the strongest argument for acting." },
      { type: "p", t: "Europe and Iraq share far more than a history: they share a future to build. At a time when certainties are cracking, the moment has come to extend bridges rather than leave them to others." },
    ],
  };

  window.NewsAlliancesPage = function NewsAlliancesPage({ C, lang }) {
    const a = lang === "en" ? ALLIANCES_ARTICLE_EN : ALLIANCES_ARTICLE;
    const MONO = "var(--mono)";
    const DISPLAY = "var(--display)";
    return (
      <React.Fragment>
        {/* Hero */}
        <section style={{ background: "var(--navy-900)", color: "#fff", position: "relative", overflow: "hidden", padding: "clamp(80px,11vw,140px) 0 clamp(48px,6vw,80px)" }}>
          <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(125deg, rgba(255,255,255,.02) 0 22px, rgba(255,255,255,.04) 22px 44px)" }}></div>
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(80% 80% at 85% 10%, rgba(184,144,47,.18), transparent 55%)" }}></div>
          <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 220, opacity: .4 }}><RiverFlow opacity={.4} /></div>
          <div className="wrap" style={{ position: "relative", maxWidth: 840 }} data-reveal>
            <nav aria-label="Breadcrumb" style={{ marginBottom: 26, fontFamily: MONO, fontSize: 11.5, letterSpacing: ".12em", textTransform: "uppercase" }}>
              <a href="index.html" style={{ color: "rgba(255,255,255,.55)" }}>EMA</a>
              <span style={{ margin: "0 10px", color: "rgba(255,255,255,.35)" }}>/</span>
              <a href="news.html" style={{ color: "rgba(255,255,255,.55)" }}>{C.nav.news}</a>
              <span style={{ margin: "0 10px", color: "rgba(255,255,255,.35)" }}>/</span>
              <span style={{ color: "rgba(255,255,255,.8)" }}>{a.tag}</span>
            </nav>
            <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 22 }}>
              <span style={{ fontFamily: MONO, fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", background: "var(--gold-500)", color: "var(--navy-900)", padding: "4px 12px", borderRadius: 99, fontWeight: 600 }}>{a.tag}</span>
              <span style={{ fontFamily: MONO, fontSize: 12, color: "rgba(255,255,255,.55)", letterSpacing: ".08em" }}>{a.date}</span>
            </div>
            <h1 className="display" style={{ fontSize: "clamp(32px,4vw,58px)", lineHeight: 1.1, margin: "0 0 16px" }}>{a.title}</h1>
            <p style={{ fontFamily: DISPLAY, fontStyle: "italic", fontSize: "clamp(17px,1.5vw,21px)", color: "rgba(255,255,255,.75)", margin: "0 0 20px", lineHeight: 1.45, maxWidth: 680 }}>{a.subtitle}</p>
            <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--gold-300)" }}>{a.type}</div>
          </div>
        </section>

        {/* Article body */}
        <article style={{ background: "var(--bg)", padding: "clamp(48px,6vw,88px) 0" }}>
          <div className="wrap" style={{ maxWidth: 760 }}>

            {/* Cover image */}
            <img
              src={a.img}
              alt={a.title}
              style={{ width: "min(400px, 100%)", aspectRatio: "1 / 1", objectFit: "fill", display: "block", borderRadius: 10, boxShadow: "0 4px 12px rgba(14,31,58,.08)", marginBottom: "clamp(36px,4vw,52px)", marginInline: "auto" }}
            />

            {a.body.map((block, i) => {
              if (block.type === "h2") return (
                <h2 key={i} className="display" style={{ fontSize: "clamp(26px,2.4vw,36px)", margin: "52px 0 18px", color: "var(--navy-900)", lineHeight: 1.15, paddingTop: 8, borderTop: "2px solid var(--gold-500)" }}>{block.t}</h2>
              );
              if (block.type === "p") return (
                <p key={i} style={{ fontSize: 17, lineHeight: 1.75, color: "var(--ink)", margin: "0 0 22px" }}>{block.t}</p>
              );
              return null;
            })}

            {/* Signature */}
            <div style={{ marginTop: 52, paddingTop: 28, borderTop: "1px solid var(--hairline)" }}>
              <div style={{ display: "flex", flexDirection: "column", gap: 6, marginBottom: 28 }}>
                <span style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--gold-600)" }}>{a.signature}</span>
                <span style={{ fontFamily: DISPLAY, fontStyle: "italic", fontSize: 17, color: "var(--navy-700)" }}>{a.attribution}</span>
              </div>
              <a href="news.html" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: MONO, fontSize: 11.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--navy-700)", textDecoration: "none" }}>
                <span style={{ display:"inline-flex", transform:"rotate(180deg)" }}><Icon name="arrow" size={14} /></span>
                {lang === "fr" ? "Retour aux actualités" : "Back to news"}
              </a>
            </div>
          </div>
        </article>

        <window.FinalCTA C={C} logoWhite="assets/ema_logo_cutout.png" />
      </React.Fragment>
    );
  };

  // ============== ARTICLE — AU-DELÀ DU PÉTROLE ==============
  const PETROLE_ARTICLE = {
    tag: "Analyse",
    date: "Janvier 2026",
    img: "assets/media/Au-dela-du-petrole.png",
    title: "Au-delà du pétrole : l'accord Bpifrance–Irak et le temps de la diversification",
    subtitle: "Analyse économique d'un partenariat qui dépasse l'énergie — et le rôle qu'EMA entend y jouer",
    type: "European Mesopotamia Alliance",
    signature: "European Mesopotamia Alliance — Bâtir des ponts, ouvrir des avenirs.",
    highlights: [
      "Protocole Bpifrance × Fonds Irakien de Développement, signé le 16 janvier 2026",
      "Cap sur les secteurs non pétroliers : renouvelables, numérique, logement, éducation, industrie intelligente",
      "La finance publique comme catalyseur de l'investissement privé",
      "Une dynamique à élargir à l'échelle européenne — le terrain d'action d'EMA",
    ],
    body: [
      { type: "p", t: "Le 16 janvier 2026 dernier, à Bagdad et à Paris simultanément, BPI FRANCE et le Fonds Irakien de Développement (IFD) ont signé un protocole d'accord destiné à promouvoir la diplomatie économique et à développer les opportunités d'affaires entre l'Irak et la France." },
      { type: "p", t: "L'annonce brève pouvait sembler protocolaire. Elle marque cependant un tournant majeur : pour la première fois et ce depuis longtemps, enfin le rapprochement économique entre l'Europe et l'Irak s'écrit ailleurs que dans les seuls champs pétroliers." },
      { type: "h2", t: "Ce que dit l'accord" },
      { type: "p", t: "Le Fonds Irakien de Développement, créé en 2023 et dirigé par S.E. Mohamed Al Najjar, a une feuille de route claire : améliorer l'environnement d'investissement du pays, développer des ressources économiques non pétrolières, attirer des financements privés vers des projets stratégiques et former les talents irakiens. En face, BPI FRANCE — la banque publique d'investissement française — apporte ce qu'elle sait faire de mieux : le financement, les garanties et assurances, le renforcement des fonds propres, l'appui à l'export et la mise en réseau." },
      { type: "p", t: "Les deux institutions ont ainsi identifié plusieurs secteurs prioritaires ambitieux et qui en disent long sur l'importance de cet accord : environnement et énergies renouvelables, transformation numérique, logement, éducation et industrie intelligente. Aucun baril à l'horizon. C'est là tout l'intérêt et l'originalité." },
      { type: "h2", t: "La lecture économique : sortir du piège mortifère de la rente" },
      { type: "p", t: "L'économie irakienne reste l'une des plus dépendantes au monde à ses hydrocarbures, qui contribuent pour l'essentiel à ses recettes publiques et à ses exportations." },
      { type: "p", t: "Cette mono-dépendance a un nom en économie — la malédiction des ressources — et des effets néfastes bien connus : budgets à la merci du cours du brut, secteurs non pétroliers étouffés ou inexistants, emplois insuffisants pour une population jeune, nombreuse et en forte croissance. La diversification n'est pas, pour l'Irak, un slogan : c'est une nécessité vitale de stabilité et de pérennité." },
      { type: "p", t: "Et c'est précisément ce que vise l'accord. En ciblant précisément le logement (où le déficit se chiffre en millions d'unités) ou l'éducation et la formation (pour former une démographie jeune), le numérique et l'industrie (pour créer de la valeur ajoutée locale) et les énergies renouvelables (pour répondre à des pénuries d'électricité chroniques) : les deux partenaires s'attaqueront aux besoins structurels du pays et non plus seulement à l'extraction de sa richesse souterraine." },
      { type: "h2", t: "Pourquoi la finance publique d'abord" },
      { type: "p", t: "On pourrait s'étonner que ce soit une banque publique, et non des entreprises privées, qui ouvre le bal. C'est au contraire la logique même de ce type d'accord. Le frein numéro un à l'investissement en Irak n'est pas le manque d'opportunités : c'est d'abord le risque perçu par les investisseurs. Or les institutions financières de développement, comme BPI FRANCE, jouent un rôle de catalyseur. Par leurs garanties et leurs cofinancements, elles abaissent le coût du capital, rassurent les acteurs privés et « entraînent » derrière elles des investissements qui, seuls, ne se feraient pas. Un protocole de ce type ne déplace pas immédiatement des milliards ; il crée un cadre rassurant qui rend ces financements possibles en transformant un terrain jugé incertain en pipeline de projets bancables." },
      { type: "p", t: "Les deux dirigeants de ces nobles établissements ne s'y trompent pas, et emploient presque les mêmes mots : un monde « où la géopolitique évolue rapidement », des « dynamiques mondiales » qui changent. Derrière la prudence diplomatique, une stratégie assumée : à l'heure où les routes commerciales se fragilisent et où chacun cherche à diversifier ses partenaires, l'Irak comme la France ont intérêt à multiplier les ancrages. Cet accord est un acte de résilience autant qu'un appel à promouvoir les affaires." },
      { type: "h2", t: "Une dynamique, pas un aboutissement" },
      { type: "p", t: "Il faut rester lucide sur la nature de l'instrument. Un protocole d'accord est une intention structurée, pas un carnet de commandes. Sa valeur se mesurera à ce qu'il produit : combien de projets concrets, combien d'entreprises effectivement accompagnées, combien d'emplois créés sur le terrain. L'environnement des affaires irakien — lourdeurs administratives, sécurité juridique, infrastructures — reste exigeant. Le mérite de cet accord est d'ouvrir une porte ; encore faut-il l'ouvrir et la franchir, projet après projet. C'est aussi pourquoi ce mouvement ne saurait rester franco-irakien. Ce que Paris engage aujourd'hui, d'autres capitales européennes ont tout intérêt à l'engager demain. La diversification de l'Irak appelle une réponse européenne large, et non une succession d'initiatives isolées." },
      { type: "h2", t: "Le rôle d'EMA" },
      { type: "p", t: "C'est exactement là que se situe la raison d'être d'European Mesopotamia Alliance. Les accords entre États et institutions financières posent le cadre ; mais les affaires, elles, se nouent entre des entreprises, des investisseurs et des experts. Entre les deux, il manque souvent un maillon essentiel : celui qui connaît les deux rives, réduit l'asymétrie d'information, identifie et qualifie les projets, met en relation les bons interlocuteurs et accompagne la confiance jusqu'à la décision. Ce maillon, EMA entend l'incarner." },
      { type: "p", t: "Notre valeur ajoutée est triple. D'abord, élargir la perspective au-delà du seul axe franco-irakien, en mobilisant un réseau européen — institutions, entreprises, investisseurs, experts. Ensuite, transformer le cadre en flux : repérer les opportunités concrètes dans les secteurs prioritaires (renouvelables, numérique, logement, éducation, industrie), les faire connaître et les accompagner. Enfin, réduire le risque perçu par la connaissance fine du terrain, la mise en réseau et un travail patient sur la confiance — la matière première de tout investissement de long terme." },
      { type: "p", t: "L'accord BPI FRANCE – IFD confirme ce que nous croyons : le rapprochement entre l'Europe et l'Irak n'est plus une affaire de pétrole, c'est une affaire d'avenir partagé. Les institutions tracent la route. À nous, acteurs du terrain, de faire circuler ceux qui l'emprunteront." },
    ],
  };

  const PETROLE_ARTICLE_EN = {
    tag: "Analysis",
    date: "January 2026",
    img: "assets/media/Au-dela-du-petrole.png",
    title: "Beyond oil: the Bpifrance\u2013Iraq agreement and the time for diversification",
    subtitle: "Economic analysis of a partnership that goes beyond energy \u2014 and the role EMA intends to play in it",
    type: "European Mesopotamia Alliance",
    signature: "European Mesopotamia Alliance \u2014 Building bridges, opening futures.",
    highlights: [
      "Bpifrance \u00D7 Iraqi Development Fund protocol, signed on 16 January 2026",
      "Focus on non-oil sectors: renewables, digital, housing, education, smart industry",
      "Public finance as a catalyst for private investment",
      "A momentum to widen to the European scale \u2014 EMA's field of action",
    ],
    body: [
      { type: "p", t: "On 16 January 2026, in Baghdad and Paris, Bpifrance and the Iraqi Development Fund (IDF) signed a memorandum of understanding aimed at promoting economic diplomacy and developing business opportunities between Iraq and France. The brief announcement may seem procedural. Yet it marks a turning point: for the first time in a long while, economic rapprochement between Europe and Iraq is being written somewhere other than in the oil fields alone." },
      { type: "h2", t: "What the agreement says" },
      { type: "p", t: "The Iraqi Development Fund, created in 2023 and led by H.E. Mohamed Al Najjar, has a clear roadmap: to improve the country's investment environment, develop non-oil economic resources, attract private financing towards strategic projects and train Iraqi talent. On the other side, Bpifrance \u2014 the French public investment bank \u2014 brings what it does best: financing, guarantees, equity, export support and networking." },
      { type: "p", t: "The two institutions have identified priority sectors that speak volumes: environment and renewable energy, digital transformation, housing, education and smart industry. Not a barrel in sight. That is the whole point." },
      { type: "h2", t: "The economic reading: escaping the rentier trap" },
      { type: "p", t: "The Iraqi economy remains one of the most dependent in the world on its hydrocarbons, which account for most of its public revenue and exports. This mono-dependence has a name in economics \u2014 the resource curse \u2014 and well-known effects: budgets at the mercy of crude prices, stifled non-oil sectors, jobs insufficient for a young and large population. For Iraq, diversification is not a slogan: it is a necessity for stability." },
      { type: "p", t: "This is precisely what the agreement targets. By focusing on housing (where the deficit runs into millions of units), education and training (to equip a young demographic), digital and industry (to create local added value) and renewables (to address chronic electricity shortages), the two partners tackle the country's structural needs, rather than merely extracting its underground wealth." },
      { type: "h2", t: "Why public finance first" },
      { type: "p", t: "One might be surprised that it is a public bank, rather than private companies, that opens the dance. On the contrary, that is the very logic of this type of agreement. The number-one brake on investment in Iraq is not a lack of opportunities: it is perceived risk. Development finance institutions, like Bpifrance, play a catalyst role. Through their guarantees and co-financing, they lower the cost of capital, reassure private actors and \u201Cpull along\u201D investments that, on their own, would not happen. A protocol of this kind does not immediately move billions; it creates the framework that makes those billions possible, turning ground deemed uncertain into a pipeline of bankable projects." },
      { type: "p", t: "The two leaders are well aware of this, and use almost the same words: a world \u201Cwhere geopolitics is evolving rapidly\u201D, \u201Cglobal dynamics\u201D that are changing. Behind the diplomatic prudence lies an assumed strategy: at a time when trade routes are becoming fragile and everyone is seeking to diversify their partners, both Iraq and France have an interest in multiplying their anchors. This agreement is an act of resilience as much as an act of business." },
      { type: "h2", t: "A momentum, not a culmination" },
      { type: "p", t: "We must remain clear-eyed about the nature of the instrument. A memorandum of understanding is a structured intention, not an order book. Its value will be measured by what it produces: how many concrete projects, how many companies effectively supported, how many jobs created on the ground. Iraq's business environment \u2014 administrative burdens, legal certainty, infrastructure \u2014 remains demanding. The merit of this agreement is to open a door; it still has to be walked through, project after project." },
      { type: "p", t: "This is also why this movement cannot remain Franco-Iraqi. What Paris commits today, other European capitals have every interest in committing tomorrow. Iraq's diversification calls for a broad European response, not a succession of isolated initiatives." },
      { type: "h2", t: "EMA's role" },
      { type: "p", t: "This is exactly where the raison d'\u00EAtre of European Mesopotamia Alliance lies. Agreements between states and financial institutions set the framework; but business is done between companies, investors and experts. Between the two, a link is often missing: the one who knows both shores, reduces information asymmetry, identifies and qualifies projects, connects the right counterparts and accompanies trust through to decision. This link is what EMA intends to embody." },
      { type: "p", t: "Our added value is threefold. First, broadening the perspective beyond the Franco-Iraqi axis alone, by mobilising a European network \u2014 institutions, companies, investors, experts. Second, turning the framework into flow: spotting concrete opportunities in the priority sectors (renewables, digital, housing, education, industry), making them known and supporting them. Finally, reducing perceived risk through fine knowledge of the ground, networking and patient work on trust \u2014 the raw material of any long-term investment." },
      { type: "p", t: "The Bpifrance\u2013IDF agreement confirms what we believe: rapprochement between Europe and Iraq is no longer a matter of oil, it is a matter of shared future. Institutions trace the road. It is up to us, actors on the ground, to keep moving those who will travel it." },
    ],
  };

  window.NewsAuDelaPage = function NewsAuDelaPage({ C, lang }) {
    const a = lang === "en" ? PETROLE_ARTICLE_EN : PETROLE_ARTICLE;
    const MONO = "var(--mono)";
    const DISPLAY = "var(--display)";
    return (
      <React.Fragment>
        {/* Hero */}
        <section style={{ background: "var(--navy-900)", color: "#fff", position: "relative", overflow: "hidden", padding: "clamp(80px,11vw,140px) 0 clamp(48px,6vw,80px)" }}>
          <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(125deg, rgba(255,255,255,.02) 0 22px, rgba(255,255,255,.04) 22px 44px)" }}></div>
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(80% 80% at 85% 10%, rgba(184,144,47,.18), transparent 55%)" }}></div>
          <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 220, opacity: .4 }}><RiverFlow opacity={.4} /></div>
          <div className="wrap" style={{ position: "relative", maxWidth: 840 }} data-reveal>
            <nav aria-label="Breadcrumb" style={{ marginBottom: 26, fontFamily: MONO, fontSize: 11.5, letterSpacing: ".12em", textTransform: "uppercase" }}>
              <a href="index.html" style={{ color: "rgba(255,255,255,.55)" }}>EMA</a>
              <span style={{ margin: "0 10px", color: "rgba(255,255,255,.35)" }}>/</span>
              <a href="news.html" style={{ color: "rgba(255,255,255,.55)" }}>{C.nav.news}</a>
              <span style={{ margin: "0 10px", color: "rgba(255,255,255,.35)" }}>/</span>
              <span style={{ color: "rgba(255,255,255,.8)" }}>{a.tag}</span>
            </nav>
            <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 22 }}>
              <span style={{ fontFamily: MONO, fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", background: "var(--gold-500)", color: "var(--navy-900)", padding: "4px 12px", borderRadius: 99, fontWeight: 600 }}>{a.tag}</span>
              <span style={{ fontFamily: MONO, fontSize: 12, color: "rgba(255,255,255,.55)", letterSpacing: ".08em" }}>{a.date}</span>
            </div>
            <h1 className="display" style={{ fontSize: "clamp(30px,3.8vw,54px)", lineHeight: 1.1, margin: "0 0 16px" }}>{a.title}</h1>
            <p style={{ fontFamily: DISPLAY, fontStyle: "italic", fontSize: "clamp(17px,1.5vw,21px)", color: "rgba(255,255,255,.75)", margin: "0 0 20px", lineHeight: 1.45, maxWidth: 680 }}>{a.subtitle}</p>
            <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--gold-300)" }}>{a.type}</div>
          </div>
        </section>

        {/* Article body */}
        <article style={{ background: "var(--bg)", padding: "clamp(48px,6vw,88px) 0" }}>
          <div className="wrap" style={{ maxWidth: 760 }}>

            {/* Cover image */}
            <img
              src={a.img}
              alt={a.title}
              style={{ width: "min(400px, 100%)", aspectRatio: "1 / 1", objectFit: "fill", display: "block", borderRadius: 10, boxShadow: "0 4px 12px rgba(14,31,58,.08)", marginBottom: "clamp(36px,4vw,52px)", marginInline: "auto" }}
            />

            {a.body.map((block, i) => {
              if (block.type === "h2") return (
                <h2 key={i} className="display" style={{ fontSize: "clamp(24px,2.2vw,34px)", margin: "48px 0 16px", color: "var(--navy-900)", lineHeight: 1.15, paddingTop: 8, borderTop: "2px solid var(--gold-500)" }}>{block.t}</h2>
              );
              if (block.type === "p") return (
                <p key={i} style={{ fontSize: 17, lineHeight: 1.75, color: "var(--ink)", margin: "0 0 22px" }}>{block.t}</p>
              );
              return null;
            })}

            {/* À retenir */}
            <div style={{ margin: "52px 0 0", background: "var(--surface)", border: "1px solid var(--hairline)", borderLeft: "3px solid var(--gold-500)", borderRadius: 8, padding: "clamp(24px,3vw,36px)" }}>
              <div style={{ fontFamily: MONO, fontSize: 10.5, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--gold-600)", marginBottom: 18 }}>{lang === "fr" ? "\u00C0 retenir" : "Key takeaways"}</div>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
                {a.highlights.map((h, i) => (
                  <li key={i} style={{ display: "flex", gap: 14, fontSize: 15.5, lineHeight: 1.55, color: "var(--ink)" }}>
                    <span style={{ color: "var(--gold-500)", flex: "none", marginTop: 3 }}><Icon name="arrow" size={14} /></span>
                    {h}
                  </li>
                ))}
              </ul>
            </div>

            {/* Signature */}
            <div style={{ marginTop: 48, paddingTop: 28, borderTop: "1px solid var(--hairline)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <span style={{ fontFamily: MONO, fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--gold-600)" }}>{a.signature}</span>
              <a href="news.html" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: MONO, fontSize: 11.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--navy-700)", textDecoration: "none" }}>
                <span style={{ display: "inline-flex", transform: "rotate(180deg)" }}><Icon name="arrow" size={14} /></span>
                {lang === "fr" ? "Retour aux actualités" : "Back to news"}
              </a>
            </div>
          </div>
        </article>

        <window.FinalCTA C={C} logoWhite="assets/ema_logo_cutout.png" />
      </React.Fragment>
    );
  };

  // ============== CONTACT ==============
  window.ContactPage = function ContactPage({ C, lang, logoWhite }) {
    return (
      <React.Fragment>
        <window.PageHero
          eyebrow={lang === "fr" ? "Nous contacter" : "Get in touch"}
          breadcrumb={C.nav.contact}
          title={lang === "fr" ? "Parlons de votre projet" : "Let's talk about your project"}
          lede={lang === "fr"
            ? "Adhésion, partenariat, mission, presse — un seul point d'entrée, des réponses rapides."
            : "Membership, partnership, mission, press — a single entry point, fast replies."}
        />
        <window.ContactForm C={C} lang={lang} />
        <window.FinalCTA C={C} logoWhite={logoWhite} />
      </React.Fragment>
    );
  };

  function ContactBlock({ C, lang }) {
    const FR = lang === "fr";
    const reasons = FR
      ? ["Adhésion", "Partenariat", "Mission / événement", "Presse", "Autre"]
      : ["Membership", "Partnership", "Mission / event", "Press", "Other"];
    return (
      <section className="section" style={{ background: "var(--bg)" }}>
        <div className="wrap ema-2col" style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.2fr)", gap: "clamp(32px,5vw,72px)" }}>
          <div data-reveal>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{FR ? "Coordonnées" : "Contact details"}</div>
            <h3 className="display" style={{ fontSize: 32, margin: "0 0 24px" }}>{FR ? "Bureau de l'Alliance" : "Alliance office"}</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 18, fontSize: 16 }}>
              <Line icon="pin" t={FR ? "Adresse" : "Address"} d={C.footer.address} />
              <Line icon="mail" t="E-mail" d={C.footer.email} href={"mailto:" + C.footer.email} />
              <Line icon="lock" t={FR ? "Conformité" : "Compliance"} d={FR ? "KYC à l'entrée · ISO 37001 en cours · Sapin II / AFA" : "KYC on entry · ISO 37001 in progress · Sapin II / AFA"} />
            </div>
            <div style={{ marginTop: 30, padding: "22px 24px", background: "var(--bg-alt)", borderRadius: 8, border: "1px solid var(--hairline)" }}>
              <div className="eyebrow" style={{ color: "var(--accent-ink)", marginBottom: 8 }}>{FR ? "Heures d'ouverture" : "Office hours"}</div>
              <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: 15 }}>{FR ? "Lundi – Vendredi · 9h – 18h (Paris)" : "Monday – Friday · 9am – 6pm (Paris)"}</p>
            </div>
          </div>
          <div data-reveal style={{ "--rd": "120ms", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 10, padding: "clamp(28px,3.5vw,40px)" }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>{FR ? "Formulaire" : "Form"}</div>
            <h3 className="display" style={{ fontSize: 26, margin: "0 0 24px" }}>{FR ? "Écrivez-nous" : "Send us a message"}</h3>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="ema-2col">
              <Field label={FR ? "Nom" : "Name"} />
              <Field label={FR ? "Organisation" : "Organization"} />
              <Field label="E-mail" full />
              <Field label={FR ? "Sujet" : "Topic"} full>
                <select style={{ width: "100%", padding: "12px 14px", border: "1px solid var(--hairline)", borderRadius: 6, background: "var(--bg)", fontSize: 14, fontFamily: "var(--sans)", color: "var(--ink)" }}>
                  {reasons.map(r => <option key={r}>{r}</option>)}
                </select>
              </Field>
              <Field label={FR ? "Message" : "Message"} full>
                <textarea rows={5} style={{ width: "100%", padding: "12px 14px", border: "1px solid var(--hairline)", borderRadius: 6, background: "var(--bg)", fontSize: 14, fontFamily: "var(--sans)", color: "var(--ink)", resize: "vertical" }}></textarea>
              </Field>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 22, flexWrap: "wrap", gap: 14 }}>
              <label style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 13, color: "var(--ink-soft)" }}>
                <input type="checkbox" /> {FR ? "J'accepte le traitement RGPD de mes données" : "I accept GDPR processing of my data"}
              </label>
              <button type="button" className="btn btn-gold" onClick={(e) => e.preventDefault()}>{FR ? "Envoyer" : "Send"} <Icon name="arrow" size={16} /></button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function Line({ icon, t, d, href }) {
    return (
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "flex-start" }}>
        <span style={{ width: 36, height: 36, borderRadius: 99, background: "var(--bg-alt)", color: "var(--accent-ink)", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={icon} size={17} /></span>
        <div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--slate-400)" }}>{t}</div>
          {href ? <a href={href} style={{ color: "var(--accent-ink)", fontSize: 16 }}>{d}</a> : <div style={{ color: "var(--ink)", fontSize: 16 }}>{d}</div>}
        </div>
      </div>
    );
  }

  function Field({ label, full, children }) {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 6, gridColumn: full ? "1/-1" : "auto" }}>
        <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--slate-400)" }}>{label}</span>
        {children || <input type="text" style={{ padding: "12px 14px", border: "1px solid var(--hairline)", borderRadius: 6, background: "var(--bg)", fontSize: 14, fontFamily: "var(--sans)", color: "var(--ink)" }} />}
      </div>
    );
  }
})();
