/* MyAds. main React app */
const { useState, useEffect, useMemo, useRef } = React;

/* active country (module-level; App keeps it in sync each render) */
let __country =
  (typeof localStorage !== "undefined" &&
    localStorage.getItem("myads-country")) ||
  "be";
if (
  !window.MYADS_COUNTRIES ||
  !window.MYADS_COUNTRIES[__country] ||
  __country === "other"
)
  __country = "be";

const T = (lang) => {
  const base = window.MYADS_I18N[lang] || window.MYADS_I18N.fr;
  const co =
    window.MYADS_COUNTRY_OVERRIDES && window.MYADS_COUNTRY_OVERRIDES[__country];
  const ov = co && co[lang];
  if (!ov) return base;
  const merged = Object.assign({}, base);
  for (const k in ov) merged[k] = Object.assign({}, base[k], ov[k]);
  return merged;
};

/* simple flag glyphs (basic stripes / shapes) */
function Flag({ code }) {
  const p = {
    width: 22,
    height: 15,
    viewBox: "0 0 22 15",
    className: "flag-svg",
  };
  if (code === "be")
    return (
      <svg {...p}>
        <rect width="22" height="15" fill="#1a1a18" />
        <rect x="7.33" width="7.33" height="15" fill="#FAE042" />
        <rect x="14.66" width="7.34" height="15" fill="#ED2939" />
      </svg>
    );
  if (code === "fr")
    return (
      <svg {...p}>
        <rect width="7.33" height="15" fill="#0055A4" />
        <rect x="7.33" width="7.33" height="15" fill="#fff" />
        <rect x="14.66" width="7.34" height="15" fill="#EF4135" />
      </svg>
    );
  if (code === "es")
    return (
      <svg {...p}>
        <rect width="22" height="15" fill="#AA151B" />
        <rect y="3.75" width="22" height="7.5" fill="#F1BF00" />
      </svg>
    );
  // "other" — neutral globe
  return (
    <svg {...p}>
      <rect width="22" height="15" fill="#e6efea" />
      <circle
        cx="11"
        cy="7.5"
        r="5"
        fill="none"
        stroke="#5d7268"
        strokeWidth="1"
      />
      <line x1="6" y1="7.5" x2="16" y2="7.5" stroke="#5d7268" strokeWidth="1" />
      <ellipse
        cx="11"
        cy="7.5"
        rx="2.1"
        ry="5"
        fill="none"
        stroke="#5d7268"
        strokeWidth="1"
      />
    </svg>
  );
}

/* =============== Reveal hook =============== */
function useReveal(dep) {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 },
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [dep]);
}

const LANG_NAMES = {
  fr: "Français",
  nl: "Nederlands",
  en: "English",
  es: "Español",
};

/* =============== Nav =============== */
function Nav({ lang, setLang, onCta, country, onCountry }) {
  const t = T(lang);
  const langs = (window.MYADS_COUNTRIES[country] || window.MYADS_COUNTRIES.be)
    .langs;
  const [ddOpen, setDdOpen] = useState(false);
  const ddRef = useRef(null);
  useEffect(() => {
    if (!ddOpen) return;
    const onDoc = (e) => {
      if (ddRef.current && !ddRef.current.contains(e.target)) setDdOpen(false);
    };
    const onEsc = (e) => {
      if (e.key === "Escape") setDdOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onEsc);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onEsc);
    };
  }, [ddOpen]);
  const [langOpen, setLangOpen] = useState(false);
  const langRef = useRef(null);
  useEffect(() => {
    if (!langOpen) return;
    const onDoc = (e) => {
      if (langRef.current && !langRef.current.contains(e.target))
        setLangOpen(false);
    };
    const onEsc = (e) => {
      if (e.key === "Escape") setLangOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onEsc);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onEsc);
    };
  }, [langOpen]);
  const curName =
    (window.MYADS_COUNTRIES[country] || window.MYADS_COUNTRIES.be).label[
      lang
    ] || window.MYADS_COUNTRIES.be.label.en;
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    if (!mobileOpen) return;
    const onEsc = (e) => {
      if (e.key === "Escape") setMobileOpen(false);
    };
    document.addEventListener("keydown", onEsc);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onEsc);
      document.body.style.overflow = "";
    };
  }, [mobileOpen]);
  const navLinks = [
    {
      href: "#platform",
      label:
        lang === "fr"
          ? "Mode d'achat"
          : lang === "nl"
            ? "Aankoopmodellen"
            : lang === "es"
              ? "Modelos de compra"
              : "Buying models",
    },
    { href: "#solutions", label: t.nav.solutions },
    { href: "#inventory", label: t.nav.inventory },
    { href: "#data", label: t.nav.data },
    { href: "#blog", label: t.nav.blog },
    { href: "#faq", label: "FAQ" },
  ];
  return (
    <>
      <header className="nav">
        <div className="nav-inner">
          <a href="#top" className="nav-logo">
            <img
              src={
                (window.__resources && window.__resources.logoMark) ||
                "assets/logo-mark.png"
              }
              alt="MyAds"
              className="nav-logo-img"
            />
            MyAds
          </a>
          <nav className="nav-links" aria-label="primary">
            {navLinks.map((l) => (
              <a key={l.href} href={l.href}>
                {l.label}
              </a>
            ))}
          </nav>
          <div className="nav-cta">
            <div className="country-dd" ref={ddRef}>
              <button
                type="button"
                className="country-dd-toggle"
                aria-haspopup="listbox"
                aria-expanded={ddOpen}
                aria-label={curName}
                title={curName}
                onClick={() => setDdOpen((o) => !o)}
              >
                <Flag code={country} />
                <span className="cdd-caret" aria-hidden="true">
                  {ddOpen ? "\u25b4" : "\u25be"}
                </span>
              </button>
              {ddOpen && (
                <div className="country-dd-menu" role="listbox">
                  {["be", "fr", "es", "other"].map((code) => {
                    const c = window.MYADS_COUNTRIES[code];
                    const name = c.label[lang] || c.label.en;
                    return (
                      <button
                        key={code}
                        type="button"
                        role="option"
                        aria-selected={country === code}
                        className={
                          "country-dd-item" +
                          (country === code ? " active" : "")
                        }
                        onClick={() => {
                          setDdOpen(false);
                          onCountry(code);
                        }}
                      >
                        <Flag code={code} />
                        <span>{name}</span>
                        {code === "other" && (
                          <span className="cdd-ext" aria-hidden="true">
                            ↗
                          </span>
                        )}
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
            <div className="lang-dd" ref={langRef}>
              <button
                type="button"
                className="lang-dd-toggle"
                aria-haspopup="listbox"
                aria-expanded={langOpen}
                aria-label="language"
                onClick={() => setLangOpen((o) => !o)}
              >
                {lang}
                <span className="cdd-caret" aria-hidden="true">
                  {langOpen ? "\u25b4" : "\u25be"}
                </span>
              </button>
              {langOpen && (
                <div className="lang-dd-menu" role="listbox">
                  {langs.map((l) => (
                    <button
                      key={l}
                      type="button"
                      role="option"
                      aria-selected={lang === l}
                      className={"lang-dd-item" + (lang === l ? " active" : "")}
                      onClick={() => {
                        setLangOpen(false);
                        setLang(l);
                      }}
                    >
                      <span className="ld-code">{l}</span>
                      <span>{LANG_NAMES[l] || l}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
            <button className="btn btn-primary btn-sm" onClick={onCta}>
              {t.nav.demo} <span className="arrow">→</span>
            </button>
            <a
              href="https://be-fr.myadsplatform.tech/"
              target="_blank"
              rel="noopener"
              className="btn btn-secondary btn-sm nav-platform"
            >
              {lang === "nl"
                ? "Platform"
                : lang === "es"
                  ? "Plataforma"
                  : "Plateforme"}{" "}
              <span className="arrow">↗</span>
            </a>
            <button
              type="button"
              className={"nav-burger" + (mobileOpen ? " open" : "")}
              aria-label="Menu"
              aria-expanded={mobileOpen}
              aria-controls="nav-mobile-menu"
              onClick={() => setMobileOpen((o) => !o)}
            >
              <span></span>
              <span></span>
              <span></span>
            </button>
          </div>
        </div>
      </header>
      <div
        className={"nav-mobile" + (mobileOpen ? " open" : "")}
        aria-hidden={!mobileOpen}
      >
        <div
          className="nav-mobile-backdrop"
          onClick={() => setMobileOpen(false)}
        ></div>
        <nav
          id="nav-mobile-menu"
          className="nav-mobile-menu"
          aria-label="primary mobile"
        >
          {navLinks.map((l) => (
            <a key={l.href} href={l.href} onClick={() => setMobileOpen(false)}>
              {l.label}
            </a>
          ))}
          <div className="nav-mobile-group">
            <div className="nav-mobile-label">
              {lang === "fr"
                ? "Pays"
                : lang === "nl"
                  ? "Land"
                  : lang === "es"
                    ? "País"
                    : "Country"}
            </div>
            <div className="nav-mobile-chips">
              {["be", "fr", "es", "other"].map((code) => {
                const c = window.MYADS_COUNTRIES[code];
                const name = c.label[lang] || c.label.en;
                return (
                  <button
                    key={code}
                    type="button"
                    className={"nm-chip" + (country === code ? " active" : "")}
                    onClick={() => {
                      if (code !== "other") setMobileOpen(false);
                      onCountry(code);
                    }}
                  >
                    <Flag code={code} />
                    <span>{name}</span>
                    {code === "other" && (
                      <span className="cdd-ext" aria-hidden="true">
                        ↗
                      </span>
                    )}
                  </button>
                );
              })}
            </div>
          </div>
          <div className="nav-mobile-group">
            <div className="nav-mobile-label">
              {lang === "fr"
                ? "Langue"
                : lang === "nl"
                  ? "Taal"
                  : lang === "es"
                    ? "Idioma"
                    : "Language"}
            </div>
            <div className="nav-mobile-chips">
              {langs.map((l) => (
                <button
                  key={l}
                  type="button"
                  className={"nm-chip" + (lang === l ? " active" : "")}
                  onClick={() => setLang(l)}
                >
                  <span className="ld-code">{l}</span>
                  <span>{LANG_NAMES[l] || l}</span>
                </button>
              ))}
            </div>
          </div>
          <button
            className="btn btn-primary"
            onClick={() => {
              setMobileOpen(false);
              onCta();
            }}
          >
            {t.nav.demo} <span className="arrow">→</span>
          </button>
          <a
            href="https://be-fr.myadsplatform.tech/"
            target="_blank"
            rel="noopener"
            className="btn btn-secondary"
          >
            {lang === "nl"
              ? "Platform"
              : lang === "es"
                ? "Plataforma"
                : "Plateforme"}{" "}
            <span className="arrow">↗</span>
          </a>
        </nav>
      </div>
    </>
  );
}

/* =============== Hero =============== */
function Hero({ lang, onCta }) {
  const t = T(lang);
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <h1>
              {t.hero.title_a} <em>{t.hero.title_b}</em>
              <br />
              {t.hero.title_c}
            </h1>
          </div>
          <div>
            <p className="hero-sub" style={{ fontSize: "18px" }}>
              {t.hero.sub}
            </p>
            <div className="hero-meta">
              <button className="btn btn-primary" onClick={onCta}>
                {t.hero.cta_primary} <span className="arrow">→</span>
              </button>
              <a className="btn btn-secondary" href="#solutions">
                {t.hero.cta_secondary}
              </a>
            </div>
          </div>
        </div>
        <div className="hero-stats">
          {t.hero.stats.map((s, i) => (
            <div key={i} className="hero-stat">
              <div className="num">
                <em>{s.num}</em>
              </div>
              <div className="lbl">{s.lbl}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =============== Ribbon =============== */
function Ribbon({ lang }) {
  const t = T(lang);
  const items = t.ribbon.concat(t.ribbon);
  return (
    <div className="ribbon" aria-hidden="true">
      <div className="ribbon-inner">
        <span>
          {items.map((i, k) => (
            <span key={k}>{i}</span>
          ))}
        </span>
      </div>
    </div>
  );
}

/* =============== Solutions =============== */
function Solutions({ lang, onCta }) {
  const t = T(lang);
  const [filter, setFilter] = useState("all");
  const [open, setOpen] = useState(null);
  const filterMap = [
    "all",
    "traffic",
    "branding",
    "performance",
    "programmatic",
    "platform",
    "io",
  ];
  const visible = window.MYADS_SOLUTIONS.filter(
    (s) =>
      filter === "all" ||
      (filter === "io" ? (s.models || []).includes("IO") : s.cat === filter),
  );

  return (
    <section
      className="section-pad"
      id="solutions"
      data-screen-label="02 Solutions"
      style={{ background: "#f5f8f6" }}
    >
      <div className="container">
        <div className="section-head reveal">
          <h2>
            {t.sol.title_a} <em>{t.sol.title_em}</em> {t.sol.title_b}
          </h2>
          <div>
            <div className="eyebrow">{t.sol.eyebrow}</div>
            <p className="desc" style={{ marginTop: 14 }}>
              {t.sol.desc}
            </p>
          </div>
        </div>
        <div className="sol-filter reveal">
          {t.sol.filters.map((f, i) => (
            <button
              key={i}
              className={filter === filterMap[i] ? "active" : ""}
              onClick={() => setFilter(filterMap[i])}
              style={
                filterMap[i] === "programmatic" ||
                filterMap[i] === "platform" ||
                filterMap[i] === "io"
                  ? {
                      background: "var(--green)",
                      color: "#fff",
                      borderColor: "var(--green)",
                    }
                  : undefined
              }
            >
              {f}
            </button>
          ))}
        </div>
        <div className="sol-grid">
          {visible.map((s) => (
            <div
              key={s.id}
              className="card sol-card"
              onClick={() => setOpen(s)}
            >
              <div className="sol-head">
                <div>
                  <div className="sol-tag">{s.tag}</div>
                  <h3>{s.title[lang]}</h3>
                </div>
                <div className="expand-arrow">→</div>
              </div>
              <p
                className="sol-desc"
                style={{ fontSize: s.descSize || "15px" }}
              >
                {s.desc[lang]}
              </p>
              <div className="sol-kpi">
                <span>✦</span> {s.kpi[lang]}
              </div>
              <div className="sol-meta">
                {s.formats.map((f, i) => (
                  <span key={i} className="chip">
                    {f}
                  </span>
                ))}
                {s.models.map((m, i) => (
                  <span key={i} className="chip hl">
                    {lang === "fr"
                      ? m === "Platform"
                        ? "Plateforme"
                        : m === "IO"
                          ? "Gré à gré"
                          : m === "Programmatic"
                            ? "Programmatique"
                            : m
                      : lang === "es"
                        ? m === "Platform"
                          ? "Plataforma"
                          : m === "IO"
                            ? "Trato directo"
                            : m === "Programmatic"
                              ? "Programática"
                              : m
                        : m}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="models-cta reveal">
          <p>
            {lang === "fr"
              ? "Un objectif business, un produit pour l'atteindre."
              : lang === "nl"
                ? "Een businessdoel, een product om het te bereiken."
                : lang === "es"
                  ? "Un objetivo de negocio, un producto para alcanzarlo."
                  : "A business goal, a product to reach it."}
          </p>
          <button className="btn btn-primary" onClick={onCta}>
            {lang === "fr"
              ? "Parlons-en"
              : lang === "nl"
                ? "Vind nieuwe klanten"
                : lang === "es"
                  ? "Hablemos"
                  : "Find new customers"}{" "}
            <span className="arrow">→</span>
          </button>
        </div>
      </div>
      {open && (
        <SolutionModal
          s={open}
          lang={lang}
          onClose={() => setOpen(null)}
          onCta={onCta}
        />
      )}
    </section>
  );
}

function SolutionModal({ s, lang, onClose, onCta }) {
  useEffect(() => {
    const onEsc = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onEsc);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onEsc);
      document.body.style.overflow = "";
    };
  }, []);
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="close">
          ×
        </button>
        <div className="modal-tag">{s.tag}</div>
        <h3>{s.title[lang]}</h3>
        <p className="modal-desc">{s.desc[lang]}</p>
        <div className="modal-stats">
          {s.stats.map((st, i) => (
            <div key={i}>
              <div className="v">
                {typeof st.v === "string" ? st.v : st.v[__country] || st.v.be}
              </div>
              <div className="l">
                {typeof st.l === "string" ? st.l : st.l[lang]}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div className="modal-row">
            <span className="kbd">FORMATS</span>
            {s.formats.map((f, i) => (
              <span
                key={i}
                className="kbd"
                style={{ background: "var(--bg-2)" }}
              >
                {f}
              </span>
            ))}
          </div>
          <div className="modal-row">
            <span className="kbd">BUYING</span>
            {s.models.map((m, i) => (
              <span
                key={i}
                className="kbd"
                style={{
                  background: "var(--accent-soft)",
                  borderColor: "transparent",
                  color: "var(--accent-deep)",
                }}
              >
                {m}
              </span>
            ))}
          </div>
          <div className="modal-row">
            <span className="kbd">KPI</span>
            <span
              className="kbd"
              style={{
                background: "var(--ink)",
                color: "var(--bg)",
                borderColor: "var(--ink)",
              }}
            >
              {s.kpi[lang]}
            </span>
          </div>
        </div>
        <div style={{ display: "flex", gap: 10, marginTop: 24 }}>
          <button
            className="btn btn-primary"
            onClick={() => {
              onClose();
              onCta();
            }}
          >
            {lang === "fr"
              ? "Demander un plan média"
              : lang === "nl"
                ? "Vraag een mediaplan"
                : lang === "es"
                  ? "Solicitar un plan de medios"
                  : "Request a media plan"}{" "}
            <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </div>
  );
}

/* =============== Inventory marquee =============== */
function Inventory({ lang, onCta, country }) {
  const t = T(lang);
  const pubs = window.MYADS_PUBLISHERS;
  const [active, setActive] = useState(new Set()); // empty = all
  const [paused, setPaused] = useState(false);

  const chCount = (id) => pubs.filter((p) => p.ch.includes(id)).length;
  const supLbl =
    lang === "nl"
      ? "supports"
      : lang === "en"
        ? "supports"
        : lang === "es"
          ? "soportes"
          : "supports";
  const channelBase = [
    { id: "display", nm: "Display", ic: "▭" },
    { id: "native", nm: "Native", ic: "≡" },
    { id: "video", nm: "Video", ic: "▶" },
    { id: "audio", nm: "Audio", ic: "♪" },
    { id: "ctv", nm: "CTV", ic: "▣" },
    { id: "dooh", nm: "DOOH", ic: "⬚" },
  ];

  if (country && country !== "be") {
    const cinv =
      window.MYADS_COUNTRY_INVENTORY && window.MYADS_COUNTRY_INVENTORY[country];
    const cpubs =
      window.MYADS_COUNTRY_PUBLISHERS &&
      window.MYADS_COUNTRY_PUBLISHERS[country];
    const pick = (x) =>
      typeof x === "string" ? x : x ? x[lang] || x.fr || x.en : "";

    // Country with a NAMED marketplace (e.g. France native) → interactive grid.
    if (cpubs) {
      const cinvCount = (id) => {
        if (!cinv) return "";
        const c = cinv.channels.find((x) => x.id === id);
        return c ? pick(c.count) : "";
      };
      const chans = channelBase.map((c) => ({
        ...c,
        named: !!(cpubs[c.id] && cpubs[c.id].length),
        ct:
          cpubs[c.id] && cpubs[c.id].length
            ? cpubs[c.id].length + " " + supLbl
            : cinvCount(c.id),
      }));
      const toggleC = (id) => {
        const n = new Set(active);
        n.has(id) ? n.delete(id) : n.add(id);
        setActive(n);
      };
      const sel = [...active];
      const namedSel = sel.filter((id) => cpubs[id] && cpubs[id].length);
      const unnamedSel = sel.filter((id) => !(cpubs[id] && cpubs[id].length));
      const visibleC = (() => {
        const seen = new Set(),
          out = [];
        for (const id of namedSel)
          for (const name of cpubs[id]) {
            const k = name.toLowerCase();
            if (!seen.has(k)) {
              seen.add(k);
              out.push(name);
            }
          }
        return out;
      })();
      const ctaPn =
        lang === "fr"
          ? "Envie de diffuser sur ces environnements premium via un seul point de contact ?"
          : lang === "es"
            ? "¿Listo para difundir en estos entornos premium a través de un único punto de contacto?"
            : "Ready to run on these premium environments?";
      const ctaBn =
        lang === "fr"
          ? "Discutons-en"
          : lang === "es"
            ? "Hablemos"
            : "Let's talk";
      const unnamedNote =
        lang === "fr"
          ? "Inventaire détaillé disponible sur demande pour ce canal. Contactez-nous."
          : lang === "es"
            ? "Inventario detallado disponible bajo petición para este canal. Contáctanos."
            : "Detailed inventory available on request for this channel. Contact us.";
      return (
        <section
          className="inv"
          id="inventory"
          data-screen-label="03 Inventory"
        >
          <div className="container">
            <div className="section-head reveal" style={{ opacity: "1" }}>
              <h2>
                {t.inv.title_a} <em>{t.inv.title_em}</em> {t.inv.title_b}
              </h2>
              <div style={{ color: "rgb(255, 255, 255)" }}>
                <div
                  className="eyebrow"
                  style={{ color: "oklch(0.78 0.012 60)" }}
                >
                  {t.inv.eyebrow}
                </div>
                <p
                  className="desc"
                  style={{
                    marginTop: 14,
                    color: "rgb(255, 255, 255)",
                    whiteSpace: "pre-line",
                  }}
                >
                  {t.inv.desc}
                </p>
              </div>
            </div>

            <div className="inv-channels">
              {chans.map((c) => (
                <button
                  key={c.id}
                  type="button"
                  className={
                    "inv-channel inv-channel-btn" +
                    (active.has(c.id) ? " active" : "")
                  }
                  onClick={() => toggleC(c.id)}
                  aria-pressed={active.has(c.id)}
                >
                  <div className="ic">{c.ic}</div>
                  <div className="nm">{c.nm}</div>
                  {c.ct && <div className="ct">{c.ct}</div>}
                </button>
              ))}
            </div>

            {active.size > 0 && (
              <div className="inv-filter-bar">
                <div className="inv-filter-status">
                  <span>
                    <strong>{visibleC.length}</strong>{" "}
                    {lang === "fr"
                      ? "supports sur"
                      : lang === "es"
                        ? "supports en"
                        : "supports on"}{" "}
                    {sel
                      .map((id) => chans.find((c) => c.id === id).nm)
                      .join(" + ")}
                    <button
                      type="button"
                      className="inv-filter-clear"
                      onClick={() => {
                        setActive(new Set());
                      }}
                    >
                      ✕{" "}
                      {lang === "fr"
                        ? "Réinitialiser"
                        : lang === "es"
                          ? "Restablecer"
                          : "Reset"}
                    </button>
                  </span>
                </div>
              </div>
            )}

            {active.size === 0 ? (
              <div className="inv-empty">
                {lang === "fr"
                  ? "Sélectionnez un ou plusieurs canaux ci-dessus pour afficher les supports disponibles."
                  : lang === "es"
                    ? "Selecciona uno o varios canales arriba para mostrar los supports disponibles."
                    : "Select one or more channels above to reveal the available supports."}
              </div>
            ) : (
              <React.Fragment>
                {visibleC.length > 0 && (
                  <div className="inv-grid">
                    {visibleC.map((name, idx) => (
                      <div key={idx} className="inv-tile inv-tile-static">
                        <span className="pub-dot"></span>
                        {name}
                      </div>
                    ))}
                  </div>
                )}
                {unnamedSel.length > 0 && (
                  <div
                    className="inv-empty"
                    style={{ marginTop: visibleC.length ? 18 : 0 }}
                  >
                    {unnamedNote}
                  </div>
                )}
              </React.Fragment>
            )}

            <div className="models-cta models-cta-dark reveal">
              <p>{ctaPn}</p>
              <button className="btn btn-accent" onClick={onCta}>
                {ctaBn} <span className="arrow">→</span>
              </button>
            </div>
          </div>
        </section>
      );
    }

    if (cinv) {
      const ctaPc =
        lang === "es"
          ? "¿Listo para activar estos entornos premium?"
          : lang === "fr"
            ? "Envie de diffuser sur ces environnements premium ?"
            : "Ready to run on these premium environments?";
      const ctaBc =
        lang === "es"
          ? "Hablemos"
          : lang === "fr"
            ? "Discutons-en"
            : "Let's talk";
      return (
        <section
          className="inv"
          id="inventory"
          data-screen-label="03 Inventory"
        >
          <div className="container">
            <div className="section-head reveal" style={{ opacity: "1" }}>
              <h2>
                {t.inv.title_a} <em>{t.inv.title_em}</em> {t.inv.title_b}
              </h2>
              <div style={{ color: "rgb(255, 255, 255)" }}>
                <div
                  className="eyebrow"
                  style={{ color: "oklch(0.78 0.012 60)" }}
                >
                  {t.inv.eyebrow}
                </div>
                <p
                  className="desc"
                  style={{
                    marginTop: 14,
                    color: "rgb(255, 255, 255)",
                    whiteSpace: "pre-line",
                  }}
                >
                  {t.inv.desc}
                </p>
              </div>
            </div>
            <div className="inv-channels">
              {cinv.channels.map((c) => (
                <div key={c.id} className="inv-channel">
                  <div className="ic">{c.ic}</div>
                  <div className="nm">{c.nm}</div>
                  <div className="ct">{pick(c.count)}</div>
                  <div className="inv-kpi">{pick(c.kpi)}</div>
                </div>
              ))}
            </div>
            {cinv.coverage && (
              <div className="inv-coverage">{pick(cinv.coverage)}</div>
            )}
            {cinv.dooh && (
              <div className="inv-dooh-band reveal">
                <div className="inv-dooh-stat">
                  <div className="v">{pick(cinv.dooh.screens)}</div>
                  <div className="l">{pick(cinv.dooh.screensLbl)}</div>
                </div>
                <div className="inv-dooh-stat">
                  <div className="v">{cinv.dooh.impressions}</div>
                  <div className="l">{pick(cinv.dooh.impressionsLbl)}</div>
                </div>
                <div className="inv-places">
                  {cinv.dooh.places.map((p, i) => (
                    <span key={i} className="inv-place">
                      {p}
                    </span>
                  ))}
                </div>
              </div>
            )}
            <div className="models-cta models-cta-dark reveal">
              <p>{ctaPc}</p>
              <button className="btn btn-accent" onClick={onCta}>
                {ctaBc} <span className="arrow">→</span>
              </button>
            </div>
          </div>
        </section>
      );
    }
    const note =
      lang === "es"
        ? "Display, native, vídeo, audio, CTV y DOOH — un inventario premium y brand-safe, activado a través de un único punto de contacto. Contáctanos para el inventario detallado de tu mercado."
        : lang === "fr"
          ? "Display, native, video, audio, CTV et DOOH — un inventaire premium et brand-safe, activé via un seul point de contact. Contactez-nous pour l'inventaire détaillé de votre marché."
          : "Display, native, video, audio, CTV and DOOH — a premium, brand-safe inventory activated through a single point of contact. Contact us for the detailed inventory of your market.";
    const ctaP =
      lang === "es"
        ? "¿Listo para activar estos entornos premium?"
        : lang === "fr"
          ? "Envie de diffuser sur ces environnements premium via un seul point de contact ?"
          : "Ready to run on these premium environments?";
    const ctaB =
      lang === "es"
        ? "Hablemos"
        : lang === "fr"
          ? "Discutons-en"
          : "Let's talk";
    return (
      <section className="inv" id="inventory" data-screen-label="03 Inventory">
        <div className="container">
          <div className="section-head reveal" style={{ opacity: "1" }}>
            <h2>
              {t.inv.title_a} <em>{t.inv.title_em}</em> {t.inv.title_b}
            </h2>
            <div style={{ color: "rgb(255, 255, 255)" }}>
              <div
                className="eyebrow"
                style={{ color: "oklch(0.78 0.012 60)" }}
              >
                {t.inv.eyebrow}
              </div>
              <p
                className="desc"
                style={{
                  marginTop: 14,
                  color: "rgb(255, 255, 255)",
                  whiteSpace: "pre-line",
                }}
              >
                {t.inv.desc}
              </p>
            </div>
          </div>
          <div className="inv-channels">
            {channelBase.map((c) => (
              <div key={c.id} className="inv-channel">
                <div className="ic">{c.ic}</div>
                <div className="nm">{c.nm}</div>
              </div>
            ))}
          </div>
          <div className="inv-empty">{note}</div>
          <div className="models-cta models-cta-dark reveal">
            <p>{ctaP}</p>
            <button className="btn btn-accent" onClick={onCta}>
              {ctaB} <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </section>
    );
  }

  const channels = channelBase.map((c) => ({
    ...c,
    ct: chCount(c.id) + " " + supLbl,
  }));

  const isMatch = (p) => {
    if (active.size === 0) return true;
    return p.ch.some((c) => active.has(c));
  };

  const toggleCh = (id) => {
    const n = new Set(active);
    n.has(id) ? n.delete(id) : n.add(id);
    setActive(n);
    setPaused(n.size > 0);
  };

  const INV = window.MYADS_INVENTORY || {};
  const listFor = (id) =>
    INV[id] ? INV[id] : pubs.filter((p) => p.ch.includes(id)).map((p) => p.n);
  const visible =
    active.size === 0
      ? []
      : (() => {
          const seen = new Set();
          const out = [];
          for (const id of active)
            for (const name of listFor(id)) {
              const k = name.toLowerCase();
              if (!seen.has(k)) {
                seen.add(k);
                out.push(name);
              }
            }
          return out;
        })();
  const matchCount = visible.length;

  return (
    <section className="inv" id="inventory" data-screen-label="03 Inventory">
      <div className="container">
        <div className="section-head reveal" style={{ opacity: "1" }}>
          <h2>
            {t.inv.title_a} <em>{t.inv.title_em}</em> {t.inv.title_b}
          </h2>
          <div style={{ color: "rgb(255, 255, 255)" }}>
            <div className="eyebrow" style={{ color: "oklch(0.78 0.012 60)" }}>
              {t.inv.eyebrow}
            </div>
            <p
              className="desc"
              style={{
                marginTop: 14,
                color: "rgb(255, 255, 255)",
                whiteSpace: "pre-line",
              }}
            >
              {t.inv.desc}
            </p>
          </div>
        </div>

        <div className="inv-channels">
          {channels.map((c) => (
            <button
              key={c.id}
              type="button"
              className={
                "inv-channel inv-channel-btn" +
                (active.has(c.id) ? " active" : "")
              }
              onClick={() => toggleCh(c.id)}
              aria-pressed={active.has(c.id)}
            >
              <div className="ic">{c.ic}</div>
              <div className="nm">{c.nm}</div>
            </button>
          ))}
        </div>

        {active.size > 0 && (
          <div className="inv-filter-bar">
            <div className="inv-filter-status">
              <span>
                <strong>{matchCount}</strong>{" "}
                {lang === "fr"
                  ? "supports sur"
                  : lang === "nl"
                    ? "supports op"
                    : lang === "es"
                      ? "supports en"
                      : "supports on"}{" "}
                {[...active]
                  .map((id) => channels.find((c) => c.id === id).nm)
                  .join(" + ")}
                <button
                  type="button"
                  className="inv-filter-clear"
                  onClick={() => {
                    setActive(new Set());
                    setPaused(false);
                  }}
                >
                  ✕{" "}
                  {lang === "fr"
                    ? "Réinitialiser"
                    : lang === "nl"
                      ? "Wissen"
                      : lang === "es"
                        ? "Restablecer"
                        : "Reset"}
                </button>
              </span>
            </div>
          </div>
        )}

        {active.size === 0 ? (
          <div className="inv-empty">
            {lang === "fr"
              ? "Sélectionnez un ou plusieurs canaux ci-dessus pour afficher les supports disponibles."
              : lang === "nl"
                ? "Selecteer hierboven één of meer kanalen om de beschikbare supports te tonen."
                : lang === "es"
                  ? "Selecciona uno o varios canales arriba para mostrar los supports disponibles."
                  : "Select one or more channels above to reveal the available supports."}
          </div>
        ) : (
          <div className="inv-grid">
            {visible.map((name, idx) => (
              <div key={idx} className="inv-tile inv-tile-static">
                <span className="pub-dot"></span>
                {name}
              </div>
            ))}
          </div>
        )}
        <div className="models-cta models-cta-dark reveal">
          <p>
            {lang === "fr"
              ? "Envie de diffuser sur ces environnements premium via un seul point de contact ?"
              : lang === "nl"
                ? "Klaar om op deze premium omgevingen te adverteren?"
                : lang === "es"
                  ? "¿Listo para difundir en estos entornos premium a través de un único punto de contacto?"
                  : "Ready to run on these premium environments?"}
          </p>
          <button className="btn btn-accent" onClick={onCta}>
            {lang === "fr"
              ? "Discutons-en"
              : lang === "nl"
                ? "Praat met ons"
                : lang === "es"
                  ? "Hablemos"
                  : "Let's talk"}{" "}
            <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

/* =============== Persona Finder (Claude-powered) =============== */
function PersonaFinder({ lang, cats, onAddAll, onToggle, selected }) {
  const t = T(lang);
  const [persona, setPersona] = useState("");
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState(null);
  const [error, setError] = useState(null);

  // Build a flat list of all segments for matching
  const allSegments = useMemo(() => {
    const out = [];
    cats.forEach((c) =>
      c.segments.forEach((s) => out.push({ s, cat: c.id, catLabel: c[lang] })),
    );
    return out;
  }, [lang]);

  // Local keyword-based fallback (works without API)
  const localMatch = (text) => {
    const words = text
      .toLowerCase()
      .replace(/[.,!?;:()'"]/g, " ")
      .split(/\s+/)
      .filter((w) => w.length >= 3);
    const scored = allSegments.map(({ s, cat, catLabel }) => {
      const sl = s.toLowerCase();
      let score = 0;
      words.forEach((w) => {
        if (sl.includes(w)) score += 3;
        // Stem-ish: check 4+ char prefix
        else if (w.length >= 5 && sl.includes(w.slice(0, w.length - 1)))
          score += 1;
      });
      return { s, cat, catLabel, score };
    });
    return scored
      .filter((x) => x.score > 0)
      .sort((a, b) => b.score - a.score)
      .slice(0, 30);
  };

  const onFind = async () => {
    if (!persona.trim()) return;
    setLoading(true);
    setError(null);
    setResults(null);
    try {
      // Try Claude first for semantic matching
      let claudeMatches = null;
      if (window.claude && window.claude.complete) {
        const sample = allSegments.map((x) => x.s).join(" | ");
        const prompt = `You are a media-planning assistant. Given a persona description, return ONLY a JSON array of the most relevant segment names from the provided list. Maximum 25 segments. Match on demographics, interests, life stage, intent, and behaviours.

Persona: "${persona}"

Available segments (pipe-separated): ${sample}

Respond with ONLY a JSON array of strings, exactly matching segment names from the list. No explanation. Example: ["Segment one","Segment two"]`;
        try {
          const raw = await window.claude.complete(prompt);
          const m = raw.match(/\[[\s\S]*\]/);
          if (m) {
            const arr = JSON.parse(m[0]);
            if (Array.isArray(arr) && arr.length > 0) {
              const valid = new Set(allSegments.map((x) => x.s));
              claudeMatches = arr
                .filter((s) => valid.has(s))
                .map((s) => {
                  const found = allSegments.find((x) => x.s === s);
                  return {
                    s,
                    cat: found.cat,
                    catLabel: found.catLabel,
                    score: 10,
                  };
                });
            }
          }
        } catch (e) {
          // fall back silently
        }
      }
      const out =
        claudeMatches && claudeMatches.length > 0
          ? claudeMatches
          : localMatch(persona);
      setResults(out);
    } catch (e) {
      setError(String(e));
      setResults(localMatch(persona));
    } finally {
      setLoading(false);
    }
  };
  const examples = [
    t.data.persona_ex_1,
    t.data.persona_ex_2,
    t.data.persona_ex_3,
  ];
  return (
    <div className="persona-finder">
      <div className="persona-head">
        <div>
          <div className="eyebrow" style={{ color: "var(--accent)" }}>
            ✦ {t.data.persona_eyebrow}
          </div>
          <h3 className="persona-title">{t.data.persona_title}</h3>
          <p className="persona-intro">{t.data.persona_intro}</p>
        </div>
      </div>
      <div className="persona-body">
        <textarea
          className="persona-input"
          value={persona}
          onChange={(e) => setPersona(e.target.value)}
          placeholder={t.data.persona_ph}
          rows={4}
          aria-label="persona description"
        />

        <div className="persona-examples">
          <span className="persona-ex-label">{t.data.persona_examples}.</span>
          {examples.map((ex, i) => (
            <button
              key={i}
              type="button"
              className="persona-ex-chip"
              onClick={() => setPersona(ex)}
            >
              {ex}
            </button>
          ))}
        </div>
        <div className="persona-actions">
          <button
            className="btn btn-ink"
            onClick={onFind}
            disabled={loading || !persona.trim()}
          >
            {loading ? t.data.persona_loading : t.data.persona_btn}
            {!loading && <span className="arrow">→</span>}
          </button>
          {results && (
            <button
              className="btn btn-ghost"
              onClick={() => {
                setResults(null);
                setPersona("");
              }}
            >
              {t.data.persona_clear}
            </button>
          )}
        </div>
      </div>
      {results && (
        <div className="persona-results">
          {results.length === 0 ? (
            <div className="seg-empty">{t.data.persona_empty}</div>
          ) : (
            <>
              <div className="persona-results-head">
                <div>
                  <strong
                    style={{
                      fontSize: 18,
                      color: "var(--ink)",
                      fontWeight: 700,
                    }}
                  >
                    {results.length}
                  </strong>{" "}
                  {t.data.persona_match}
                  <span
                    style={{
                      color: "var(--ink-3)",
                      marginLeft: 8,
                      fontSize: 13,
                    }}
                  >
                    · {t.data.persona_results}
                  </span>
                </div>
                <button
                  className="btn btn-accent btn-sm"
                  onClick={() => onAddAll(results.map((r) => r.s))}
                >
                  {t.data.persona_add_all} <span className="arrow">→</span>
                </button>
              </div>
              <div className="seg-list">
                {results.map(({ s, catLabel }, i) => (
                  <span
                    key={i}
                    className={
                      "seg-chip persona-chip" +
                      (selected.has(s) ? " selected" : "")
                    }
                    onClick={() => onToggle(s)}
                    title={catLabel}
                  >
                    {s}
                    <span className="persona-cat">· {catLabel}</span>
                  </span>
                ))}
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}
/* =============== Data Explorer =============== */ function DataExplorer({
  lang,
  onCta,
}) {
  const t = T(lang);
  const cats = window.MYADS_DATA;
  const [active, setActive] = useState(cats[0].id);
  const [q, setQ] = useState("");
  const [selected, setSelected] = useState(new Set());
  const [mode, setMode] = useState("browse"); // browse
  const total = useMemo(
    () => cats.reduce((a, c) => a + c.segments.length, 0),
    [],
  );
  const activeCat = cats.find((c) => c.id === active);

  const filteredSegments = useMemo(() => {
    let segs;
    if (q.trim()) {
      const ql = q.toLowerCase();
      segs = cats.flatMap((c) =>
        c.segments
          .filter((s) => s.toLowerCase().includes(ql))
          .map((s) => ({ s, c })),
      );
    } else {
      segs = activeCat.segments.map((s) => ({ s, c: activeCat }));
    }
    return segs;
  }, [q, active]);

  const toggle = (s) => {
    const n = new Set(selected);
    n.has(s) ? n.delete(s) : n.add(s);
    setSelected(n);
  };

  const addAll = (list) => {
    const n = new Set(selected);
    list.forEach((s) => n.add(s));
    setSelected(n);
  };

  return (
    <section
      className="section-pad"
      id="data"
      data-screen-label="04 Data Explorer"
      style={{ background: "var(--bg-2)" }}
    >
      <div className="container">
        <div className="section-head reveal">
          <h2>
            {t.data.title_a} <em>{t.data.title_em}</em> {t.data.title_b}
          </h2>
          <div>
            <div className="eyebrow">{t.data.eyebrow}</div>
            <p className="desc" style={{ marginTop: 14 }}>
              {t.data.desc}
            </p>
          </div>
        </div>

        <div className="data-tools reveal">
          <div className="search">
            <span className="search-icon">⌕</span>
            <input
              value={q}
              onChange={(e) => {
                setQ(e.target.value);
                if (e.target.value) setMode("browse");
              }}
              placeholder={t.data.search}
              aria-label="search segments"
            />
          </div>
          <div className="data-stats">
            <span>
              <strong>{total}</strong> {t.data.total}
            </span>
            <span>·</span>
            <span>
              <strong>15</strong>{" "}
              {lang === "fr"
                ? "catégories"
                : lang === "nl"
                  ? "categorieën"
                  : lang === "es"
                    ? "categorías"
                    : "categories"}
            </span>
            <span>·</span>
            <span>
              <strong>{selected.size}</strong> {t.data.selected}
            </span>
          </div>
        </div>

        {mode === "browse" && (
          <div className="data-grid">
            <div className="data-cats" role="tablist">
              {cats.map((c) => (
                <div
                  key={c.id}
                  className={"data-cat" + (active === c.id ? " active" : "")}
                  onClick={() => {
                    setActive(c.id);
                    setQ("");
                  }}
                >
                  <span>{c[lang]}</span>
                  <span className="ct">{c.segments.length}</span>
                </div>
              ))}
            </div>
            <div className="data-segments">
              <h4>
                {q
                  ? lang === "fr"
                    ? "Résultats"
                    : lang === "nl"
                      ? "Resultaten"
                      : lang === "es"
                        ? "Resultados"
                        : "Results"
                  : activeCat[lang]}
              </h4>
              <p className="sub">
                {q
                  ? `${filteredSegments.length} ${t.data.selected.replace("selected", "").replace("sélectionnés", "").replace("geselecteerd", "").trim() || "results"}`
                  : activeCat.desc[lang]}
              </p>
              {filteredSegments.length === 0 ? (
                <div className="seg-empty">{t.data.empty}</div>
              ) : (
                <div className="seg-list">
                  {filteredSegments.map(({ s }, i) => (
                    <span
                      key={i}
                      className={
                        "seg-chip" + (selected.has(s) ? " selected" : "")
                      }
                      onClick={() => toggle(s)}
                    >
                      {s}
                    </span>
                  ))}
                </div>
              )}
              {selected.size > 0 && (
                <div className="seg-cart">
                  <div style={{ fontSize: 14, color: "var(--ink-2)" }}>
                    <strong
                      style={{
                        color: "var(--ink)",
                        fontFamily: "var(--serif)",
                        fontSize: 18,
                      }}
                    >
                      {selected.size}
                    </strong>{" "}
                    {t.data.cart}
                  </div>
                  <a className="btn btn-accent btn-sm" href="#contact">
                    {t.data.cart_cta} <span className="arrow">→</span>
                  </a>
                </div>
              )}
            </div>
          </div>
        )}
        <div className="models-cta reveal">
          <p>
            {lang === "fr"
              ? "Vous cherchez du ciblage intégré et sans surcoût ?"
              : lang === "nl"
                ? "First-party, contextuele en deterministische data — zonder meerkost."
                : lang === "es"
                  ? "Data first-party, contextual y determinística — incluida sin coste adicional."
                  : "First-party, contextual and deterministic data — included at no extra cost."}
          </p>
          <button className="btn btn-primary" onClick={onCta}>
            {lang === "fr"
              ? "Découvrez notre fonctionnement tout inclus"
              : lang === "nl"
                ? "Eindelijk all-in targeting"
                : lang === "es"
                  ? "Por fin, segmentación todo incluido"
                  : "Finally, all-inclusive targeting"}{" "}
            <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

/* =============== ROI Calculator =============== */
const ROI_PRODUCTS = {
  "CPC Traffic": { type: "cpc", cpc: 0.55, ctr: 0.018 },
  "CPM Display": {
    type: "cpm",
    cpm: 8.5,
    viewability: 0.82,
    vcr: null,
    freq: 4,
  },
  "CPM Video": { type: "cpm", cpm: 22, viewability: 0.86, vcr: 0.78, freq: 3 },
  "CPM Audio": {
    type: "cpm",
    cpm: 18,
    viewability: null,
    vcr: null,
    ltr: 0.92,
    freq: 3,
  },
  "CPM CTV": { type: "cpm", cpm: 38, viewability: 0.92, vcr: 0.95, freq: 2 },
  "CPM DOOH": { type: "cpm", cpm: 7.5, sot: 0.16, freq: 8 },
  "dCPM Perf.": { type: "dcpm", cpm: 6.5, ctr: 0.012, cvr: 0.022 },
};

function ROI({ lang, onCta }) {
  const t = T(lang);
  const [product, setProduct] = useState(t.roi.products[0]);
  const productKey = [
    "CPC Traffic",
    "CPM Display",
    "CPM Video",
    "CPM Audio",
    "CPM CTV",
    "CPM DOOH",
    "dCPM Perf.",
  ][t.roi.products.indexOf(product)];
  const config = ROI_PRODUCTS[productKey];
  const [budget, setBudget] = useState(20000);
  const [duration, setDuration] = useState(21);

  const fmt = (n) =>
    new Intl.NumberFormat(
      lang === "en" ? "en-GB" : lang === "nl" ? "nl-BE" : "fr-BE",
      { maximumFractionDigits: 0 },
    ).format(Math.round(n));
  const fmtMoney = (n) => "€" + fmt(n);

  let primary = { v: "", l: "" };
  let rows = [];
  if (config.type === "cpc") {
    const clicks = budget / config.cpc;
    const impressions = clicks / config.ctr;
    primary = {
      v: fmt(clicks),
      l:
        lang === "fr"
          ? "clics garantis"
          : lang === "nl"
            ? "gegarandeerde kliks"
            : lang === "es"
              ? "clics garantizados"
              : "guaranteed clicks",
    };
    rows = [
      { v: fmtMoney(config.cpc), l: "CPC" },
      {
        v: fmt(impressions),
        l:
          lang === "fr"
            ? "impressions est."
            : lang === "nl"
              ? "geschatte impressies"
              : lang === "es"
                ? "impresiones est."
                : "est. impressions",
      },
      {
        v: fmt(budget / duration),
        l:
          lang === "fr"
            ? "€ / jour"
            : lang === "nl"
              ? "€ / dag"
              : lang === "es"
                ? "€ / día"
                : "€ / day",
      },
    ];
  } else if (config.type === "cpm") {
    const impressions = (budget / config.cpm) * 1000;
    const reach = impressions / (config.freq || 3);
    primary = {
      v: fmt(impressions),
      l:
        lang === "fr"
          ? "impressions garanties"
          : lang === "nl"
            ? "gegarandeerde impressies"
            : lang === "es"
              ? "impresiones garantizadas"
              : "guaranteed impressions",
    };
    rows = [
      { v: fmtMoney(config.cpm), l: "CPM" },
      {
        v: fmt(reach),
        l:
          lang === "fr"
            ? "reach unique"
            : lang === "nl"
              ? "uniek bereik"
              : lang === "es"
                ? "alcance único"
                : "unique reach",
      },
    ];

    if (config.viewability)
      rows.push({
        v: Math.round(config.viewability * 100) + "%",
        l: "Viewability",
      });
    if (config.vcr)
      rows.push({ v: Math.round(config.vcr * 100) + "%", l: "VCR" });
    if (config.ltr)
      rows.push({ v: Math.round(config.ltr * 100) + "%", l: "LTR" });
    if (config.sot)
      rows.push({ v: Math.round(config.sot * 100) + "%", l: "SOT" });
  } else if (config.type === "dcpm") {
    const impressions = (budget / config.cpm) * 1000;
    const clicks = impressions * config.ctr;
    const conversions = clicks * config.cvr;
    const cpa = budget / conversions;
    primary = {
      v: fmt(conversions),
      l:
        lang === "fr"
          ? "conversions est."
          : lang === "nl"
            ? "geschatte conversies"
            : lang === "es"
              ? "conversiones est."
              : "est. conversions",
    };
    rows = [
      { v: fmtMoney(cpa), l: "CPA" },
      { v: fmt(clicks), l: "Clicks" },
      { v: fmt(impressions), l: "Impressions" },
    ];
  }

  return (
    <section className="section-pad roi" data-screen-label="05 ROI">
      <div className="container">
        <div className="section-head reveal">
          <h2>
            {t.roi.title_a} <em>{t.roi.title_em}</em>
            {t.roi.title_b}
          </h2>
          <div>
            <div className="eyebrow">{t.roi.eyebrow}</div>
            <p className="desc" style={{ marginTop: 14 }}>
              {t.roi.desc}
            </p>
          </div>
        </div>
        <div className="roi-grid reveal">
          <div className="roi-controls">
            <div className="roi-field">
              <label>{t.roi.product}</label>
              <div className="roi-products">
                {t.roi.products.map((p, i) => (
                  <button
                    key={i}
                    className={product === p ? "active" : ""}
                    onClick={() => setProduct(p)}
                  >
                    {p}
                  </button>
                ))}
              </div>
            </div>
            <div className="roi-field">
              <label>
                {t.roi.budget} <strong>{fmtMoney(budget)}</strong>
              </label>
              <input
                type="range"
                min="5000"
                max="250000"
                step="1000"
                value={budget}
                onChange={(e) => setBudget(+e.target.value)}
              />
            </div>
            <div className="roi-field">
              <label>
                {t.roi.duration}{" "}
                <strong>
                  {duration}{" "}
                  {lang === "fr"
                    ? "jours"
                    : lang === "nl"
                      ? "dagen"
                      : lang === "es"
                        ? "días"
                        : "days"}
                </strong>
              </label>
              <input
                type="range"
                min="7"
                max="90"
                step="1"
                value={duration}
                onChange={(e) => setDuration(+e.target.value)}
              />
            </div>
          </div>
          <div className="roi-result">
            <div className="lbl">
              {t.roi.result}. {product}
            </div>
            <div className="big">{primary.v}</div>
            <div
              style={{
                fontFamily: "var(--mono)",
                fontSize: 11,
                letterSpacing: "0.1em",
                textTransform: "uppercase",
                color: "oklch(0.72 0.012 60)",
              }}
            >
              {primary.l}
            </div>
            <div className="br"></div>
            <div className="roi-rows">
              {rows.map((r, i) => (
                <div key={i} className="roi-row">
                  <div className="l">{r.l}</div>
                  <div className="v">{r.v}</div>
                </div>
              ))}
            </div>
            <button
              className="btn btn-accent"
              style={{ alignSelf: "flex-start", marginTop: 8 }}
              onClick={onCta}
            >
              {t.roi.cta} <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =============== Models =============== */
function Models({ lang, onCta }) {
  const t = T(lang);
  const models = [
    {
      num: "01",
      title: {
        fr: "Gré à gré (Off-Platform)\n\n",
        nl: "Off-Platform (IO)",
        en: "Off-Platform (IO)",
        es: "Trato directo (Off-Platform)\n\n",
      },
      desc: {
        fr: "Service entièrement géré. Vos campagnes prises en charge par nos campaign managers seniors, de A à Z.",
        nl: "Volledig beheerde service. Uw campagnes van A tot Z gerund door onze senior campaign managers.",
        en: "Fully managed service. Your campaigns run end-to-end by our senior campaign managers.",
        es: "Servicio totalmente gestionado. Tus campañas gestionadas de principio a fin por nuestros campaign managers sénior.",
      },
      list: [
        {
          fr: "Insertion Order classique",
          nl: "Klassieke Insertion Order",
          en: "Standard Insertion Order",
          es: "Insertion Order clásica",
        },
        {
          fr: "Tous produits, tous formats",
          nl: "Alle producten, alle formats",
          en: "All products, all formats",
          es: "Todos los productos, todos los formatos",
        },
        {
          fr: "Reporting hebdomadaire",
          nl: "Wekelijkse rapportering",
          en: "Weekly reporting",
          es: "Reporting semanal",
        },
      ],
    },
    {
      num: "02",
      title: {
        fr: "Programmatique\n\n",
        nl: "Programmatic",
        en: "Programmatic",
        es: "Programática\n\n",
      },
      desc: {
        fr: "Activation Elite programmatique. Preferred Deals pré-optimisés directement dans la DSP de votre choix.",
        nl: "Elite programmatische activatie. Pre-geoptimaliseerde Preferred Deals rechtstreeks in de DSP van uw keuze.",
        en: "Elite programmatic activation. Pre-optimized Preferred Deals pushed straight to your chosen DSP.",
        es: "Activación programática Elite. Preferred Deals preoptimizados directamente en la DSP de tu elección.",
      },
      list: ["DV360", "The Trade Desk", "Adform", "Amazon DSP", "Hawk"],
    },
    {
      num: "03",
      title: {
        fr: "MyAds Platform (On-Platform)",
        nl: "MyAds Platform",
        en: "MyAds Platform",
        es: "MyAds Platform (On-Platform)",
      },
      desc: {
        fr: "Self-service ou managé via notre DSP propriétaire. Autonomie totale, optimisation automatisée.",
        nl: "Self-service of beheerd via onze eigen DSP. Volledige autonomie, automatische optimalisatie.",
        en: "Self-service or managed via our proprietary DSP. Total autonomy, automated optimization.",
        es: "Self-service o gestionado vía nuestra DSP propia. Autonomía total, optimización automatizada.",
      },
      list: [
        {
          fr: "0% de frais plateforme",
          nl: "0% platformkosten",
          en: "0% platform fee",
          es: "0% de comisión de plataforma",
        },
        {
          fr: "85% IA · 15% humain",
          nl: "85% AI · 15% mens",
          en: "85% AI · 15% human",
          es: "85% IA · 15% humano",
        },
        {
          fr: "CPC, CPM, C/GRP garantis",
          nl: "Gegarandeerde CPC, CPM, C/GRP",
          en: "Guaranteed CPC, CPM, C/GRP",
          es: "CPC, CPM, C/GRP garantizados",
        },
      ],
    },
  ];

  return (
    <section
      className="section-pad"
      id="platform"
      data-screen-label="06 Models"
    >
      <div className="container">
        <div className="section-head reveal">
          <h2>
            {t.models.title_a} <em>{t.models.title_em}</em>
            {t.models.title_b}
          </h2>
          <div>
            <div className="eyebrow">{t.models.eyebrow}</div>
            <p className="desc" style={{ marginTop: 14 }}>
              {t.models.desc}
            </p>
          </div>
        </div>
        <div className="models-grid">
          {models.map((m) => (
            <div key={m.num} className="model-card reveal">
              <div className="num">{m.num}</div>
              <h4 style={{ fontSize: "24px" }}>{m.title[lang]}</h4>
              <p>{m.desc[lang]}</p>
              <ul>
                {m.list.map((l, i) => (
                  <li key={i}>{typeof l === "string" ? l : l[lang]}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="models-cta reveal">
          <p>
            {lang === "fr"
              ? "Vous hésitez sur le mode d'achat à choisir pour votre campagne ?"
              : lang === "nl"
                ? "Niet zeker welk aankoopmodel het beste past?"
                : lang === "es"
                  ? "¿No sabes qué modelo de compra encaja con tu campaña?"
                  : "Not sure which buying model fits your campaign?"}
          </p>
          <button className="btn btn-primary" onClick={onCta}>
            {lang === "fr"
              ? "Demandez-nous"
              : lang === "nl"
                ? "Vind uw klanten"
                : lang === "es"
                  ? "Pregúntanos"
                  : "Let's find your customers"}{" "}
            <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

/* =============== Sustainability — CARE Program =============== */
function Sustainability({ lang, onCta }) {
  const t = T(lang);
  const pick = (o) => o[lang] || o.en;

  const acronym = [
    { l: "C", w: "arbon" },
    { l: "A", w: "bsorption" },
    { l: "R", w: "eduction", amp: true },
    { l: "E", w: "ndeavour" },
  ];

  const commitments = [
    {
      glyph: "❦",
      tag: {
        fr: "Engagement vert",
        nl: "Groen engagement",
        en: "Green commitment",
        es: "Compromiso verde",
      },
      title: {
        fr: "Un monde publicitaire vert & durable",
        nl: "Een groene & duurzame reclamewereld",
        en: "A green & sustainable advertising world",
        es: "Un mundo publicitario verde y sostenible",
      },
      body: {
        fr: "La responsabilité environnementale est intégrée au cœur des opérations de MyAds — un principe, pas un supplément.",
        nl: "Milieuverantwoordelijkheid zit verankerd in de kern van de activiteiten van MyAds — een principe, geen optie.",
        en: "Environmental responsibility is built into the core of MyAds operations — a principle, not an add-on.",
        es: "La responsabilidad medioambiental está integrada en el núcleo de las operaciones de MyAds — un principio, no un añadido.",
      },
    },
    {
      glyph: "✓",
      tag: {
        fr: "Certification",
        nl: "Certificering",
        en: "Certification",
        es: "Certificación",
      },
      title: {
        fr: "Green Business Bureau",
        nl: "Green Business Bureau",
        en: "Green Business Bureau",
        es: "Green Business Bureau",
      },
      body: {
        fr: "Officiellement audité et reconnu pour une action climatique crédible et des pratiques commerciales durables.",
        nl: "Officieel geauditeerd en erkend voor geloofwaardige klimaatactie en duurzame bedrijfspraktijken.",
        en: "Officially audited and recognised for credible climate action and sustainable business practices.",
        es: "Auditado y reconocido oficialmente por una acción climática creíble y prácticas empresariales sostenibles.",
      },
      badges: ["Silver", "Platinum"],
    },
    {
      glyph: "◐",
      tag: {
        fr: "Partenaire climat",
        nl: "Klimaatpartner",
        en: "Climate partner",
        es: "Partner climático",
      },
      title: {
        fr: "CO₂logic × South Pole",
        nl: "CO₂logic × South Pole",
        en: "CO₂logic × South Pole",
        es: "CO₂logic × South Pole",
      },
      body: {
        fr: "Le plus grand fournisseur mondial de solutions climatiques et développeur de projets carbone nous accompagne, de l'ambition à l'action.",
        nl: "'s Werelds grootste leverancier van klimaatoplossingen en ontwikkelaar van koolstofprojecten begeleidt ons, van ambitie tot actie.",
        en: "The world's largest climate-solutions provider and carbon-project developer guides us, from ambition to action.",
        es: "El mayor proveedor mundial de soluciones climáticas y desarrollador de proyectos de carbono nos acompaña, de la ambición a la acción.",
      },
      hash: "#credibleclimateaction",
    },
  ];

  const approaches = [
    {
      key: "myads",
      kicker: {
        fr: "Plateforme",
        nl: "Platform",
        en: "Platform",
        es: "Plataforma",
      },
      approach: {
        fr: "Approche MyAds",
        nl: "MyAds-aanpak",
        en: "MyAds approach",
        es: "Enfoque MyAds",
      },
      stat: "−85%",
      statLbl: {
        fr: "CO₂ jusqu'à",
        nl: "CO₂ tot",
        en: "CO₂ up to",
        es: "CO₂ hasta",
      },
      logic: {
        fr: "Logique CARE",
        nl: "CARE-logica",
        en: "CARE logic",
        es: "Lógica CARE",
      },
      intro: {
        fr: "Appliquée lorsque les créations sont importées dans MyAds.",
        nl: "Toegepast wanneer creatives in MyAds worden geïmporteerd.",
        en: "Applied when creatives are imported into MyAds.",
        es: "Aplicada cuando las creatividades se importan en MyAds.",
      },
      points: [
        {
          t: {
            fr: "Réduction du poids créa",
            nl: "Lichtere creatives",
            en: "Lighter creative weight",
            es: "Menor peso de las creatividades",
          },
          d: {
            fr: "Optimisation automatique des assets : qualité préservée, performances média intactes.",
            nl: "Automatische asset-optimalisatie: kwaliteit behouden, mediaprestaties intact.",
            en: "Automatic asset optimisation: quality preserved, media performance intact.",
            es: "Optimización automática de los assets: calidad preservada, rendimiento de medios intacto.",
          },
        },
        {
          t: {
            fr: "Efficience de diffusion",
            nl: "Efficiëntere levering",
            en: "Delivery efficiency",
            es: "Eficiencia de entrega",
          },
          d: {
            fr: "Supply paths optimisés : moins d'appels serveurs, moins d'énergie, partenaires triés sur le volet.",
            nl: "Geoptimaliseerde supply paths: minder servercalls, minder energie, zorgvuldig gekozen partners.",
            en: "Optimised supply paths: fewer server calls, less energy, hand-picked partners.",
            es: "Supply paths optimizados: menos llamadas a servidor, menos energía, partners seleccionados.",
          },
        },
        {
          t: {
            fr: "Reporting « Sustainable »",
            nl: "« Sustainable »-rapportering",
            en: "« Sustainable » reporting",
            es: "Reporting « Sustainable »",
          },
          d: {
            fr: "Section dédiée dans chaque rapport : impact environnemental et réductions carbone via la méthodologie CARE.",
            nl: "Aparte sectie in elk rapport: milieu-impact en CO₂-reducties via de CARE-methodologie.",
            en: "A dedicated section in every report: environmental impact and carbon reductions via the CARE methodology.",
            es: "Una sección dedicada en cada informe: impacto medioambiental y reducciones de carbono mediante la metodología CARE.",
          },
        },
      ],

      foot: {
        fr: "Optimisation avancée grâce à un accès direct aux créations.",
        nl: "Geavanceerde optimalisatie dankzij directe toegang tot de creatives.",
        en: "Advanced optimisation thanks to direct access to the creatives.",
        es: "Optimización avanzada gracias al acceso directo a las creatividades.",
      },
    },
    {
      key: "elite",
      kicker: {
        fr: "Programmatique",
        nl: "Programmatic",
        en: "Programmatic",
        es: "Programática",
      },
      approach: {
        fr: "Approche ELITE",
        nl: "ELITE-aanpak",
        en: "ELITE approach",
        es: "Enfoque ELITE",
      },
      badge: { fr: "Buy side", nl: "Buy side", en: "Buy side", es: "Buy side" },
      logic: {
        fr: "Optimisation des chaînes d'approvisionnement",
        nl: "Optimalisatie van de supply chains",
        en: "Supply-chain optimisation",
        es: "Optimización de las cadenas de suministro",
      },
      intro: {
        fr: "Focus exclusif sur une chaîne d'approvisionnement plus responsable.",
        nl: "Exclusieve focus op een meer verantwoorde supply chain.",
        en: "Exclusive focus on a more responsible supply chain.",
        es: "Foco exclusivo en una cadena de suministro más responsable.",
      },
      points: [
        {
          t: {
            fr: "Green PMPs & partenariats écoresponsables",
            nl: "Green PMP's & ecoverantwoorde partnerships",
            en: "Green PMPs & eco-responsible partnerships",
            es: "Green PMPs y partnerships ecorresponsables",
          },
          d: {
            fr: "Connexions directes annonceur–éditeur via Preferred Deals : moins d'enchères ouvertes, moins d'appels serveurs, serveurs verts.",
            nl: "Directe adverteerder–uitgever-connecties via Preferred Deals: minder open veilingen, minder servercalls, groene servers.",
            en: "Direct advertiser–publisher connections via Preferred Deals: fewer open auctions, fewer server calls, green servers.",
            es: "Conexiones directas anunciante–editor mediante Preferred Deals: menos subastas abiertas, menos llamadas a servidor, servidores verdes.",
          },
        },
        {
          t: {
            fr: "Moins d'intermédiaires, impressions ciblées",
            nl: "Minder tussenpersonen, gerichte impressies",
            en: "Fewer intermediaries, targeted impressions",
            es: "Menos intermediarios, impresiones segmentadas",
          },
          d: {
            fr: "Marketplace curatée et inventaire ciblé : baisse des émissions carbone et des redondances.",
            nl: "Gecureerde marketplace en gerichte inventaris: lagere CO₂-uitstoot en minder redundantie.",
            en: "Curated marketplace and targeted inventory: lower carbon emissions and redundancy.",
            es: "Marketplace curado e inventario segmentado: menos emisiones de carbono y redundancias.",
          },
        },
        {
          t: {
            fr: "Preferred Deals « verts » & classement durabilité",
            nl: "« Groene » Preferred Deals & duurzaamheidsranking",
            en: "« Green » Preferred Deals & sustainability ranking",
            es: "Preferred Deals « verdes » y ranking de sostenibilidad",
          },
          d: {
            fr: "Impact variable selon le mode d'achat — de l'Open Auction (élevé) à l'Elite Green PMP (le plus faible).",
            nl: "Variabele impact volgens aankoopmodel — van Open Auction (hoog) tot Elite Green PMP (laagst).",
            en: "Impact varies by buying model — from Open Auction (high) to Elite Green PMP (lowest).",
            es: "El impacto varía según el modelo de compra — de la Open Auction (alto) al Elite Green PMP (el más bajo).",
          },
        },
      ],

      foot: {
        fr: "Mesure simplifiée de l'impact carbone côté achat (buy side).",
        nl: "Vereenvoudigde meting van de CO₂-impact aan de aankoopzijde (buy side).",
        en: "Simplified carbon-impact measurement on the buy side.",
        es: "Medición simplificada del impacto de carbono en el lado de la compra (buy side).",
      },
    },
  ];

  return (
    <section
      className="section-pad care"
      id="sustainability"
      data-screen-label="07 Sustainability"
      style={{ background: "var(--bg-2)" }}
    >
      <div className="container">
        <div className="section-head reveal">
          <h2>
            {t.sust.title_a} <em>{t.sust.title_em}</em>
            {t.sust.title_b}
          </h2>
          <div>
            <div className="eyebrow" style={{ color: "var(--green)" }}>
              {t.sust.eyebrow}
            </div>
            <div className="care-acronym">
              {acronym.map((a, i) => (
                <span key={i} className="care-acro-word">
                  {a.amp && <span className="care-amp">&amp;&nbsp;</span>}
                  <span className="care-acro-cap">{a.l}</span>
                  {a.w}
                </span>
              ))}
            </div>
            <p className="desc" style={{ marginTop: 12 }}>
              {pick({
                fr: "La durabilité est intégrée dans la plateforme, pas ajoutée par-dessus. Une publicité bas-carbone, sans sacrifier les KPI garantis.",
                nl: "Duurzaamheid zit in het platform ingebouwd, niet erbovenop geplakt. Koolstofarme reclame, zonder de gegarandeerde KPI's op te offeren.",
                en: "Sustainability is built into the platform, not bolted on top. Low-carbon advertising, without sacrificing guaranteed KPIs.",
                es: "La sostenibilidad está integrada en la plataforma, no añadida por encima. Publicidad baja en carbono, sin sacrificar los KPIs garantizados.",
              })}
            </p>
          </div>
        </div>

        <div className="care-commit">
          {commitments.map((c, i) => (
            <div
              key={i}
              className="care-commit-card reveal"
              style={{ transitionDelay: `${i * 70}ms` }}
            >
              <div className="care-commit-top">
                <span className="care-glyph" aria-hidden="true">
                  {c.glyph}
                </span>
                <span className="care-commit-tag">{pick(c.tag)}</span>
              </div>
              <h4>{pick(c.title)}</h4>
              <p>{pick(c.body)}</p>
              {c.badges && (
                <div className="care-badges">
                  {c.badges.map((b, j) => (
                    <span
                      key={j}
                      className={
                        "care-badge" + (b === "Platinum" ? " plat" : "")
                      }
                    >
                      {b}
                    </span>
                  ))}
                </div>
              )}
              {c.hash && <div className="care-hash">{c.hash}</div>}
            </div>
          ))}
        </div>

        <div className="care-approaches-head reveal">
          <h3>
            {pick({
              fr: "Deux approches, une même exigence",
              nl: "Twee aanpakken, één lat",
              en: "Two approaches, one standard",
              es: "Dos enfoques, un mismo estándar",
            })}
          </h3>
          <p>
            {pick({
              fr: "Éco-responsabilité sur mesure selon votre modèle d'achat.",
              nl: "Eco-verantwoordelijkheid op maat van uw aankoopmodel.",
              en: "Eco-responsibility tailored to your buying model.",
              es: "Ecorresponsabilidad a medida según tu modelo de compra.",
            })}
          </p>
        </div>

        <div className="care-approaches">
          {approaches.map((a) => (
            <div key={a.key} className={"care-approach reveal " + a.key}>
              <div className="care-approach-head">
                <div className="care-approach-titles">
                  <div className="care-approach-kicker">{pick(a.kicker)}</div>
                  <div className="care-approach-name">{pick(a.approach)}</div>
                </div>
                {a.stat ? (
                  <div className="care-approach-stat">
                    <div className="v">{a.stat}</div>
                    <div className="l">{pick(a.statLbl)}</div>
                  </div>
                ) : (
                  <span className="care-approach-pill">{pick(a.badge)}</span>
                )}
              </div>
              <div className="care-logic">{pick(a.logic)}</div>
              <p className="care-intro">{pick(a.intro)}</p>
              <div className="care-points">
                {a.points.map((p, j) => (
                  <div key={j} className="care-point">
                    <span className="care-point-mark" aria-hidden="true"></span>
                    <div>
                      <div className="care-point-t">{pick(p.t)}</div>
                      <div className="care-point-d">{pick(p.d)}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="care-foot">{pick(a.foot)}</div>
            </div>
          ))}
        </div>

        <div className="care-tagline reveal">
          {pick({
            fr: "Nous œuvrons pour une publicité responsable, intégrée.",
            nl: "Wij werken aan verantwoorde reclame. Geïntegreerd, niet opgeplakt.",
            en: "We work towards responsible advertising. Integrated, not grafted on.",
            es: "Trabajamos por una publicidad responsable, integrada.",
          })}
        </div>
        <div className="models-cta reveal">
          <p>
            {lang === "fr"
              ? "Des campagnes performantes ET faibles en émissions carbones, c'est possible."
              : lang === "nl"
                ? "Performante én koolstofarme campagnes, het kan."
                : lang === "es"
                  ? "Campañas de alto rendimiento Y bajas en carbono — es posible."
                  : "High-performing AND low-carbon campaigns — it's possible."}
          </p>
          <button className="btn btn-primary" onClick={onCta}>
            {lang === "fr"
              ? "Engageons-nous ensemble"
              : lang === "nl"
                ? "Laten we ons samen engageren"
                : lang === "es"
                  ? "Comprometámonos juntos"
                  : "Let's commit together"}{" "}
            <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

/* =============== Testimonials =============== */
function Testimonials({ lang, onCta }) {
  const t = T(lang);
  const items = [
    {
      q: {
        fr: "On a ajouté MyAdsPlatform à notre stack de DSP classiques, ce qui nous a permis de gérer nos campagnes CPC en KPI garantis — et, en plus, sans frais de plateforme !",
        nl: "We hebben MyAdsPlatform toegevoegd aan onze stack klassieke DSP's, waardoor we onze CPC-campagnes met gegarandeerde KPI's konden beheren — en dat zonder platformkosten!",
        en: "We added MyAdsPlatform to our stack of classic DSPs, which let us run our CPC campaigns on guaranteed KPIs — and with no platform fee on top.",
        es: "Añadimos MyAdsPlatform a nuestro stack de DSPs clásicas, lo que nos permitió gestionar nuestras campañas CPC con KPIs garantizados y, además, ¡sin comisión de plataforma!",
      },
      n: "Élise V.",
      t: {
        fr: "Trading Director, agence indép. BE",
        nl: "Trading Director, Onafh. bureau BE",
        en: "Trading Director, Indep. agency BE",
        es: "Trading Director, agencia indep. BE",
      },
    },
    {
      q: {
        fr: "La promesse de KPI garantis n'est pas un argument marketing. Ils tiennent. C'est rare dans l'AdTech.",
        nl: "De belofte van gegarandeerde KPI's is geen marketingpraat. Ze houden zich eraan. Dat is zeldzaam in AdTech.",
        en: "The 'guaranteed KPI' pitch is not marketing fluff. They actually deliver. Rare in AdTech.",
        es: "La promesa de KPIs garantizados no es un argumento de marketing. Cumplen. Es algo raro en el AdTech.",
      },
      n: "Tom B.",
      t: {
        fr: "Head of Digital, annonceur FMCG",
        nl: "Head of Digital, FMCG-adverteerder",
        en: "Head of Digital, FMCG advertiser",
        es: "Head of Digital, anunciante FMCG",
      },
    },
    {
      q: {
        fr: "Le DOOH local + le data targeting cookieless nous permet d'orchestrer des plans qu'on ne pouvait pas faire avant.",
        nl: "Lokale DOOH + cookieloze datatargeting laat ons plannen orkestreren die voorheen onmogelijk waren.",
        en: "Local DOOH plus cookieless data targeting unlocks plans we couldn't run before.",
        es: "El DOOH local más el data targeting cookieless nos permite orquestar planes que antes no podíamos ejecutar.",
      },
      n: "Sarah K.",
      t: {
        fr: "Media Lead, agence internationale",
        nl: "Media Lead, internationaal bureau",
        en: "Media Lead, International agency",
        es: "Media Lead, agencia internacional",
      },
    },
  ];

  return (
    <section
      className="section-pad"
      data-screen-label="08 Testimonials"
      style={{ opacity: "1" }}
    >
      <div className="container">
        <div className="section-head reveal">
          <h2>
            {t.testi.title_a} <em>{t.testi.title_em}</em> {t.testi.title_b}
          </h2>
          <div>
            <div className="eyebrow">{t.testi.eyebrow}</div>
            <p className="desc" style={{ marginTop: 14 }}>
              {"\n"}
            </p>
          </div>
        </div>
        <div className="testi-grid">
          {items.map((it, i) => (
            <div key={i} className="testi reveal">
              <div className="quote">{it.q[lang]}</div>
              <div className="who">
                <div className="av">{it.n[0]}</div>
                <div>
                  <div className="nm">{it.n}</div>
                  <div className="ti">{it.t[lang]}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="models-cta reveal">
          <p>
            {lang === "fr"
              ? "Rejoignez les agences et annonceurs qui nous font confiance."
              : lang === "nl"
                ? "Sluit u aan bij de bureaus en adverteerders die ons vertrouwen."
                : lang === "es"
                  ? "Únete a las agencias y anunciantes que confían en nosotros."
                  : "Join the agencies and advertisers who trust us."}
          </p>
          <button className="btn btn-primary" onClick={onCta}>
            {lang === "fr"
              ? "Devenez partenaire"
              : lang === "nl"
                ? "Word partner"
                : lang === "es"
                  ? "Hazte partner"
                  : "Become a partner"}{" "}
            <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

/* =============== Cases =============== */
function Cases({ lang, onCta }) {
  const t = T(lang);
  const items = [
    {
      cl: "cl1",
      tag: {
        fr: "Automotive · CPC",
        nl: "Automotive · CPC",
        en: "Automotive · CPC",
        es: "Automotive · CPC",
      },
      cs: "+38%",
      cssub: {
        fr: "qualified traffic",
        nl: "qualified traffic",
        en: "qualified traffic",
        es: "tráfico cualificado",
      },
      title: {
        fr: "Recrutement leads concession",
        nl: "Leadwerving EV-dealer",
        en: "EV dealership lead recruitment",
        es: "Captación de leads de concesionario EV",
      },
      desc: {
        fr: "Native + Display CPC sur audience 'Electric or hybrid car aficionados'. Volume garanti à CPC fixe.",
        nl: "Native + Display CPC op 'Electric or hybrid car aficionados'. Gegarandeerd volume tegen vaste CPC.",
        en: "Native + Display CPC on 'Electric or hybrid car aficionados'. Guaranteed volume at fixed CPC.",
        es: "Native + Display CPC sobre la audiencia 'Electric or hybrid car aficionados'. Volumen garantizado a CPC fijo.",
      },
      results: [
        {
          v: "+38%",
          l: { fr: "trafic", nl: "verkeer", en: "traffic", es: "tráfico" },
        },
        { v: "−22%", l: "CPL" },
      ],
    },
    {
      cl: "cl2",
      tag: {
        fr: "Banking · CPM Video",
        nl: "Banking · CPM Video",
        en: "Banking · CPM Video",
        es: "Banking · CPM Video",
      },
      cs: "86%",
      cssub: {
        fr: "VCR atteint",
        nl: "behaalde VCR",
        en: "VCR achieved",
        es: "VCR alcanzado",
      },
      title: {
        fr: "Brand campaign retraite & investissement",
        nl: "Brand campagne pensioen & beleggen",
        en: "Retirement & investing brand campaign",
        es: "Campaña de marca jubilación e inversión",
      },
      desc: {
        fr: "Instream Video sur 'Pension & retirement planning' + 'Investors'. VCR garanti 80%+.",
        nl: "Instream Video op 'Pension & retirement planning' + 'Investors'. Gegarandeerde VCR 80%+, overtroffen.",
        en: "Instream Video on 'Pension & retirement planning' + 'Investors'. 80%+ VCR guarantee, exceeded.",
        es: "Vídeo Instream sobre 'Pension & retirement planning' + 'Investors'. VCR garantizado 80%+, superado.",
      },
      results: [
        { v: "86%", l: "VCR" },
        { v: "+19%", l: "Recall" },
      ],
    },
    {
      cl: "cl3",
      tag: {
        fr: "FMCG · DOOH",
        nl: "FMCG · DOOH",
        en: "FMCG · DOOH",
        es: "FMCG · DOOH",
      },
      cs: "5 600",
      cssub: {
        fr: "écrans actifs",
        nl: "actieve schermen",
        en: "active screens",
        es: "pantallas activas",
      },
      title: {
        fr: "Lancement produit hyperlocal",
        nl: "Hyperlokale productlancering",
        en: "Hyperlocal product launch",
        es: "Lanzamiento de producto hiperlocal",
      },
      desc: {
        fr: "DOOH géolocalisé sur zones de chalandise autour de 220 points de vente. Reach garanti, SOT premium.",
        nl: "Geolokaliseerd DOOH rond 220 verkooppunten. Gegarandeerd bereik, premium SOT.",
        en: "Geolocated DOOH around 220 retail points. Guaranteed reach, premium SOT.",
        es: "DOOH geolocalizado en zonas de influencia alrededor de 220 puntos de venta. Alcance garantizado, SOT premium.",
      },
      results: [
        { v: "+27%", l: "Sell-out" },
        { v: "5 600", l: "Screens" },
      ],
    },
  ];

  return (
    <section
      className="section-pad"
      id="cases"
      data-screen-label="09 Cases"
      style={{
        background: "var(--bg-2)",
        backgroundColor: "rgb(255, 255, 255)",
      }}
    >
      <div className="container">
        <div className="section-head reveal">
          <h2>
            {t.cases.title_a} <em>{t.cases.title_em}</em>
            {t.cases.title_b}
          </h2>
          <div>
            <div className="eyebrow">{t.cases.eyebrow}</div>
            <p className="desc" style={{ marginTop: 14 }}>
              {lang === "fr"
                ? "Études anonymisées. Résultats issus de campagnes 2024-2025 sur le marché belge."
                : lang === "nl"
                  ? "Geanonimiseerde studies. Resultaten van campagnes 2024-2025 op de Belgische markt."
                  : lang === "es"
                    ? "Estudios anonimizados. Resultados de campañas 2024-2025 en el mercado belga."
                    : "Anonymized studies. Results from 2024-2025 campaigns on the Belgian market."}
            </p>
          </div>
        </div>
        <div className="case-grid">
          {items.map((c, i) => (
            <a key={i} href="#contact" className={"case " + c.cl + " reveal"}>
              <div className="case-img">
                <div className="cs">
                  {c.cs}
                  <em>{c.cssub[lang]}</em>
                </div>
              </div>
              <div className="case-body">
                <div className="case-tag">{c.tag[lang]}</div>
                <h4>{c.title[lang]}</h4>
                <div className="case-desc">{c.desc[lang]}</div>
                <div className="case-results">
                  {c.results.map((r, j) => (
                    <div key={j}>
                      <div className="v">{r.v}</div>
                      <div className="l">
                        {typeof r.l === "string" ? r.l : r.l[lang]}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </a>
          ))}
        </div>
        <div className="models-cta reveal">
          <p>
            {lang === "fr"
              ? "Et si votre prochaine campagne devenait notre prochain case client ?"
              : lang === "nl"
                ? "En als uw volgende campagne onze volgende case wordt?"
                : lang === "es"
                  ? "¿Y si tu próxima campaña fuera nuestro próximo caso de éxito?"
                  : "What if your next campaign became our next case study?"}
          </p>
          <button className="btn btn-primary" onClick={onCta}>
            {lang === "fr"
              ? "Lancez votre campagne"
              : lang === "nl"
                ? "Start uw campagne"
                : lang === "es"
                  ? "Lanza tu campaña"
                  : "Launch your campaign"}{" "}
            <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

/* =============== FAQ =============== */
function FAQ({ lang }) {
  const t = T(lang);

  const backTxt =
    lang === "fr"
      ? "Retour à l'accueil"
      : lang === "nl"
        ? "Terug naar home"
        : lang === "es"
          ? "Volver al inicio"
          : "Back to home";
  const faqMsg =
    lang === "fr"
      ? "La page des FAQ se replie au fur et à mesure ; si vous avez une question, n'hésitez pas à nous contacter."
      : lang === "nl"
        ? "De FAQ-pagina wordt geleidelijk ingeklapt; hebt u een vraag, aarzel dan niet om ons te contacteren."
        : lang === "es"
          ? "La página de FAQ se va replegando poco a poco; si tienes una pregunta, no dudes en contactarnos."
          : "The FAQ page is being folded back over time; if you have a question, don't hesitate to contact us.";
  const contactTxt =
    lang === "fr"
      ? "Nous contacter"
      : lang === "nl"
        ? "Contacteer ons"
        : lang === "es"
          ? "Contáctanos"
          : "Contact us";
  const faqSub =
    lang === "fr"
      ? "Tout ce qu'il faut savoir sur nos KPI garantis, notre data, nos modes d'achat et notre façon de travailler."
      : lang === "nl"
        ? "Alles wat u moet weten over onze gegarandeerde KPI's, onze data, onze aankoopmodellen en onze werkwijze."
        : lang === "es"
          ? "Todo lo que necesitas saber sobre nuestros KPIs garantizados, nuestra data, nuestros modelos de compra y nuestra forma de trabajar."
          : "Everything you need to know about our guaranteed KPIs, our data, our buying models and how we work.";
  return (
    <main className="blog-page faq-page">
      <section className="blog-hero" data-screen-label="01 FAQ hero">
        <div className="container">
          <a href="#top" className="blog-back">
            ← {backTxt}
          </a>
          <div className="kicker">{t.faq.eyebrow}</div>
          <h1 className="blog-h1">
            {t.faq.title_a} <em>{t.faq.title_em}</em> {t.faq.title_b}
          </h1>
          <p className="blog-sub">{faqSub}</p>
        </div>
      </section>
      <section className="section-pad" data-screen-label="02 FAQ message">
        <div className="container">
          <div
            style={{
              maxWidth: "640px",
              margin: "0 auto",
              textAlign: "center",
              padding: "32px 0 24px",
            }}
          >
            <p
              style={{
                fontFamily: "var(--serif)",
                fontSize: "26px",
                lineHeight: 1.45,
                color: "var(--ink)",
                marginBottom: "30px",
                textWrap: "pretty",
              }}
            >
              {faqMsg}
            </p>
            <a href="#contact" className="btn btn-primary">
              {contactTxt} <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

/* =============== Contact / Lead form =============== */
function Contact({ lang, openSignal }) {
  const t = T(lang);
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    role: "",
    goal: "",
    budget: "",
    name: "",
    email: "",
    company: "",
    msg: "",
  });
  const [done, setDone] = useState(false);

  const ref = useRef(null);
  useEffect(() => {
    if (openSignal > 0 && ref.current)
      ref.current.scrollIntoView({ behavior: "smooth", block: "start" });
  }, [openSignal]);

  const next = () => setStep((s) => Math.min(s + 1, 3));
  const back = () => setStep((s) => Math.max(s - 1, 0));
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const submit = (e) => {
    e?.preventDefault();

    const subject = encodeURIComponent("Nouveau message du formulaire");
    const body = encodeURIComponent(
      Object.entries(data)
        .map(([key, value]) => `${key} : ${value}`)
        .join("\r\n"),
    );

    const link = document.createElement("a");
    link.href = `mailto:sales@myadsplatform.tech?subject=${subject}&body=${body}`;
    link.click();

    setDone(true);
  };

  const stepValid =
    step === 0
      ? !!data.role
      : step === 1
        ? !!data.goal
        : step === 2
          ? !!data.budget
          : !!(data.name && data.email && data.company);

  return (
    <section
      className="contact"
      id="contact"
      data-screen-label="11 Contact"
      ref={ref}
    >
      <div className="container">
        <div className="section-head reveal">
          <h2>
            {t.contact.title_a} <em>{t.contact.title_em}</em>
            {t.contact.title_b}
          </h2>
          <div>
            <div className="eyebrow" style={{ color: "oklch(0.78 0.012 60)" }}>
              {t.contact.eyebrow}
            </div>
            <p
              className="desc"
              style={{ marginTop: 14, color: "oklch(0.78 0.012 60)" }}
            >
              {t.contact.desc}
            </p>
          </div>
        </div>
        <div className="contact-grid">
          <form className="contact-form reveal" onSubmit={submit}>
            {!done ? (
              <>
                <div className="cf-steps" aria-hidden="true">
                  {[0, 1, 2, 3].map((i) => (
                    <div
                      key={i}
                      className={
                        "cf-step " +
                        (i < step ? "done" : i === step ? "active" : "")
                      }
                    ></div>
                  ))}
                </div>
                <div
                  style={{
                    fontFamily: "var(--mono)",
                    fontSize: 11,
                    color: "var(--ink-3)",
                    letterSpacing: "0.1em",
                    textTransform: "uppercase",
                    marginBottom: 8,
                  }}
                >
                  {t.contact.step} {step + 1} / 4
                </div>

                {step === 0 && (
                  <div className="cf-stage">
                    <h4>
                      {lang === "fr"
                        ? "Vous êtes…"
                        : lang === "nl"
                          ? "U bent…"
                          : lang === "es"
                            ? "Eres…"
                            : "You are…"}
                    </h4>
                    <p className="desc">
                      {lang === "fr"
                        ? "Pour adapter notre réponse à votre rôle."
                        : lang === "nl"
                          ? "Om ons antwoord aan uw rol aan te passen."
                          : lang === "es"
                            ? "Para adaptar nuestra respuesta a tu rol."
                            : "To tailor our response to your role."}
                    </p>
                    <div className="cf-options">
                      {[
                        {
                          k: "agency",
                          fr: "Agence média digitale",
                          nl: "Digitaal mediabureau",
                          en: "Digital media agency",
                          es: "Agencia de medios digitales",
                        },
                        {
                          k: "advertiser",
                          fr: "Annonceur",
                          nl: "Adverteerder",
                          en: "Advertiser",
                          es: "Anunciante",
                        },
                        {
                          k: "trading",
                          fr: "Agence créa",
                          nl: "Creatief bureau",
                          en: "Creative agency",
                          es: "Agencia creativa",
                        },
                        {
                          k: "other",
                          fr: "Autre",
                          nl: "Andere",
                          en: "Other",
                          es: "Otro",
                        },
                      ].map((o) => (
                        <button
                          key={o.k}
                          type="button"
                          className={data.role === o.k ? "selected" : ""}
                          onClick={() => set("role", o.k)}
                        >
                          <div>
                            <div className="h">{o[lang]}</div>
                          </div>
                        </button>
                      ))}
                    </div>
                  </div>
                )}

                {step === 1 && (
                  <div className="cf-stage">
                    <h4>
                      {lang === "fr"
                        ? "Votre objectif principal ?"
                        : lang === "nl"
                          ? "Uw belangrijkste doel?"
                          : lang === "es"
                            ? "¿Tu objetivo principal?"
                            : "Your main objective?"}
                    </h4>
                    <p className="desc">
                      {lang === "fr"
                        ? "Choisissez l'objectif de votre prochaine campagne."
                        : lang === "nl"
                          ? "Kies het doel van uw volgende campagne."
                          : lang === "es"
                            ? "Elige el objetivo de tu próxima campaña."
                            : "Pick your next campaign's goal."}
                    </p>
                    <div className="cf-options">
                      {[
                        {
                          k: "traffic",
                          fr: "Trafic qualifié",
                          nl: "Kwalitatief verkeer",
                          en: "Qualified traffic",
                          es: "Tráfico cualificado",
                          s: {
                            fr: "CPC garanti",
                            nl: "Gegarandeerde CPC",
                            en: "Guaranteed CPC",
                            es: "CPC garantizado",
                          },
                        },
                        {
                          k: "awareness",
                          fr: "Notoriété & Reach",
                          nl: "Bekendheid & Bereik",
                          en: "Awareness & Reach",
                          es: "Notoriedad y Alcance",
                          s: {
                            fr: "CPM/VCR/LTR",
                            nl: "CPM/VCR/LTR",
                            en: "CPM/VCR/LTR",
                            es: "CPM/VCR/LTR",
                          },
                        },
                        {
                          k: "perf",
                          fr: "Performance / CPA",
                          nl: "Performance / CPA",
                          en: "Performance / CPA",
                          es: "Performance / CPA",
                          s: {
                            fr: "dCPM optimisé",
                            nl: "dCPM-geoptimaliseerd",
                            en: "dCPM optimized",
                            es: "dCPM optimizado",
                          },
                        },
                        {
                          k: "local",
                          fr: "Local DOOH",
                          nl: "Local DOOH",
                          en: "Local DOOH",
                          es: "Local DOOH",
                          s: {
                            fr: "écrans",
                            nl: "schermen",
                            en: "screens",
                            es: "pantallas",
                          },
                        },
                      ].map((o) => (
                        <button
                          key={o.k}
                          type="button"
                          className={data.goal === o.k ? "selected" : ""}
                          onClick={() => set("goal", o.k)}
                        >
                          <div>
                            <div className="h">{o[lang]}</div>
                            <div className="s">{o.s[lang]}</div>
                          </div>
                        </button>
                      ))}
                    </div>
                  </div>
                )}

                {step === 2 && (
                  <div className="cf-stage">
                    <h4>
                      {lang === "fr"
                        ? "Budget net estimé ?"
                        : lang === "nl"
                          ? "Geschat netto budget?"
                          : lang === "es"
                            ? "¿Presupuesto neto estimado?"
                            : "Estimated net budget?"}
                    </h4>
                    <p className="desc">
                      {lang === "fr"
                        ? "Indication, non engageant."
                        : lang === "nl"
                          ? "Indicatief, niet bindend."
                          : lang === "es"
                            ? "Indicativo, sin compromiso."
                            : "Indicative, non-binding."}
                    </p>
                    <div className="cf-options">
                      {[
                        { k: "<25k", l: "< €25k" },
                        { k: "25-75k", l: "€25k–€75k" },
                        { k: "75-200k", l: "€75k–€200k" },
                        { k: ">200k", l: "> €200k" },
                      ].map((o) => (
                        <button
                          key={o.k}
                          type="button"
                          className={data.budget === o.k ? "selected" : ""}
                          onClick={() => set("budget", o.k)}
                        >
                          <div>
                            <div className="h">{o.l}</div>
                          </div>
                        </button>
                      ))}
                    </div>
                  </div>
                )}

                {step === 3 && (
                  <div className="cf-stage">
                    <h4>
                      {lang === "fr"
                        ? "Vos coordonnées"
                        : lang === "nl"
                          ? "Uw gegevens"
                          : lang === "es"
                            ? "Tus datos"
                            : "Your details"}
                    </h4>
                    <p className="desc">
                      {lang === "fr"
                        ? "Réponse sous 24h ouvrées."
                        : lang === "nl"
                          ? "Antwoord binnen 24 werkuren."
                          : lang === "es"
                            ? "Respuesta en 24h laborables."
                            : "Response within 24 business hours."}
                    </p>
                    <input
                      className="cf-input"
                      placeholder={
                        lang === "fr"
                          ? "Nom complet"
                          : lang === "nl"
                            ? "Volledige naam"
                            : lang === "es"
                              ? "Nombre completo"
                              : "Full name"
                      }
                      value={data.name}
                      onChange={(e) => set("name", e.target.value)}
                      required
                    />
                    <input
                      className="cf-input"
                      type="email"
                      placeholder={
                        lang === "fr"
                          ? "Email professionnel"
                          : lang === "nl"
                            ? "Zakelijke e-mail"
                            : lang === "es"
                              ? "Email profesional"
                              : "Work email"
                      }
                      value={data.email}
                      onChange={(e) => set("email", e.target.value)}
                      required
                    />
                    <input
                      className="cf-input"
                      placeholder={
                        lang === "fr"
                          ? "Société / Agence"
                          : lang === "nl"
                            ? "Bedrijf / Bureau"
                            : lang === "es"
                              ? "Empresa / Agencia"
                              : "Company / Agency"
                      }
                      value={data.company}
                      onChange={(e) => set("company", e.target.value)}
                      required
                    />
                    <textarea
                      className="cf-input"
                      placeholder={
                        lang === "fr"
                          ? "Contexte (optionnel)"
                          : lang === "nl"
                            ? "Context (optioneel)"
                            : lang === "es"
                              ? "Contexto (opcional)"
                              : "Context (optional)"
                      }
                      value={data.msg}
                      onChange={(e) => set("msg", e.target.value)}
                    />
                  </div>
                )}

                <div className="cf-actions">
                  {step > 0 ? (
                    <button
                      type="button"
                      className="btn btn-secondary btn-sm"
                      onClick={back}
                    >
                      ← {t.contact.back}
                    </button>
                  ) : (
                    <span />
                  )}
                  {step < 3 ? (
                    <button
                      type="button"
                      className="btn btn-primary btn-sm"
                      onClick={next}
                      disabled={!stepValid}
                      style={{
                        opacity: stepValid ? 1 : 0.4,
                        pointerEvents: stepValid ? "auto" : "none",
                      }}
                    >
                      {t.contact.next} →
                    </button>
                  ) : (
                    <button
                      type="submit"
                      className="btn btn-accent btn-sm"
                      disabled={!stepValid}
                      style={{
                        opacity: stepValid ? 1 : 0.4,
                        pointerEvents: stepValid ? "auto" : "none",
                      }}
                    >
                      {t.contact.send} →
                    </button>
                  )}
                </div>
              </>
            ) : (
              <div className="cf-success">
                <div className="ok">✓</div>
                <h4
                  style={{
                    fontFamily: "var(--serif)",
                    fontSize: 30,
                    marginBottom: 10,
                  }}
                >
                  {t.contact.success_t}
                </h4>
                <p
                  style={{
                    color: "var(--ink-2)",
                    maxWidth: "40ch",
                    margin: "0 auto",
                  }}
                >
                  {t.contact.success_d}
                </p>
                <a
                  href="#top"
                  className="btn btn-secondary btn-sm"
                  style={{ marginTop: 24 }}
                  onClick={() => {
                    setDone(false);
                    setStep(0);
                  }}
                >
                  {t.contact.success_cta}
                </a>
              </div>
            )}
          </form>

          <div className="contact-info reveal">
            <div className="ci-block">
              <h5>
                {lang === "fr"
                  ? "Sales BE"
                  : lang === "nl"
                    ? "Sales BE"
                    : "Sales BE"}
              </h5>
              <div className="v">
                <a href="mailto:sales@myadsplatform.tech">
                  sales@myadsplatform.tech
                </a>
              </div>
            </div>
            <div className="ci-block">
              <h5>
                {lang === "fr"
                  ? "HQ"
                  : lang === "nl"
                    ? "HQ"
                    : lang === "es"
                      ? "HQ"
                      : "HQ"}
              </h5>
              <div className="v">{t.footer.addr}</div>
            </div>
            {(__country === "fr" || __country === "es") && (
              <div className="ci-block">
                <h5>
                  {lang === "fr"
                    ? "Bureau local"
                    : lang === "nl"
                      ? "Lokaal kantoor"
                      : lang === "es"
                        ? "Oficina local"
                        : "Local office"}
                </h5>
                <div className="v">
                  {__country === "fr"
                    ? "19 Rue Cognacq-Jay · 75007 Paris"
                    : "c/ Acuario 10, 28130 Alalpardo · Madrid"}
                </div>
              </div>
            )}
            <div className="ci-block">
              <h5>
                {lang === "fr"
                  ? "Markets"
                  : lang === "nl"
                    ? "Markten"
                    : lang === "es"
                      ? "Mercados"
                      : "Markets"}
              </h5>
              <div
                className="v"
                style={{
                  fontSize: 16,
                  fontFamily: "var(--sans)",
                  color: "oklch(0.85 0.012 60)",
                }}
              >
                BE · FR · ES · PT · UK · DE · MENA
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =============== Legal page =============== */

function LegalPage({ slug, lang }) {
  const all =
    (window.MYADS_LEGAL && window.MYADS_LEGAL[lang]) ||
    (window.MYADS_LEGAL && window.MYADS_LEGAL.fr) ||
    {};
  const page = all[slug];
  useEffectBlog(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [slug]);

  const i18n = {
    fr: {
      home: "Accueil",
      legal: "Légal",
      updated: "Dernière mise à jour",
      notFound: "Page non trouvée",
      back: "← Retour à l'accueil",
    },
    nl: {
      home: "Home",
      legal: "Juridisch",
      updated: "Laatst bijgewerkt",
      notFound: "Pagina niet gevonden",
      back: "← Terug naar home",
    },
    en: {
      home: "Home",
      legal: "Legal",
      updated: "Last updated",
      notFound: "Page not found",
      back: "← Back to home",
    },
    es: {
      home: "Inicio",
      legal: "Legal",
      updated: "Última actualización",
      notFound: "Página no encontrada",
      back: "← Volver al inicio",
    },
  };
  const L = i18n[lang] || i18n.fr;

  if (!page) {
    return (
      <main className="legal-shell">
        <div className="container" style={{ padding: "120px 0 80px" }}>
          <h1 style={{ fontFamily: "var(--serif)", fontSize: 48 }}>
            {L.notFound}
          </h1>
          <p style={{ marginTop: 16 }}>
            <a href="#" style={{ color: "var(--accent)" }}>
              {L.back}
            </a>
          </p>
        </div>
      </main>
    );
  }

  const dateFmt = (d) => {
    try {
      return new Date(d).toLocaleDateString(
        lang === "fr"
          ? "fr-BE"
          : lang === "nl"
            ? "nl-BE"
            : lang === "es"
              ? "es-ES"
              : "en-GB",
        { year: "numeric", month: "long", day: "numeric" },
      );
    } catch (e) {
      return d;
    }
  };

  const otherSlugs = Object.keys(all).filter((s) => s !== slug);

  return (
    <main className="legal-shell">
      <div className="legal-hero">
        <div className="container">
          <div className="legal-crumbs">
            <a href="#">{L.home}</a> <span>›</span> <span>{L.legal}</span>{" "}
            <span>›</span> <span className="curr">{page.title}</span>
          </div>
          <h1 className="legal-title">{page.title}</h1>
          <div className="legal-meta">
            {L.updated} · <time>{dateFmt(page.updated)}</time>
          </div>
        </div>
      </div>
      <div className="article-body">
        <div className="container article-container">
          <MD source={page.body} />
          <hr
            style={{
              border: "none",
              borderTop: "1px solid var(--line)",
              margin: "60px 0 30px",
            }}
          />
          <div className="legal-other">
            {otherSlugs.map((s) => (
              <a key={s} href={`#legal/${s}`} className="legal-other-link">
                {all[s].title} →
              </a>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
}

/* =============== Footer =============== */
function Footer({ lang }) {
  const t = T(lang);
  return (
    <footer className="footer" data-screen-label="12 Footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <img
                src={
                  (window.__resources && window.__resources.logoMark) ||
                  "assets/logo-mark.png"
                }
                alt="MyAds"
                style={{ width: 32, height: 32 }}
              />
              MyAds
            </div>
            <p>{t.footer.tagline}</p>
          </div>
          <div className="footer-col">
            <h6>{t.footer.products}</h6>
            <ul>
              <li>
                <a href="#solutions">CPC Traffic</a>
              </li>
              <li>
                <a href="#solutions">CPM Display & Video</a>
              </li>
              <li>
                <a href="#solutions">CPM Audio</a>
              </li>
              <li>
                <a href="#solutions">CPM CTV</a>
              </li>
              <li>
                <a href="#solutions">Local DOOH</a>
              </li>
              <li>
                <a href="#solutions">dCPM Performance</a>
              </li>
              <li>
                <a href="#solutions">Elite Programmatic</a>
              </li>
              <li>
                <a
                  href="https://be-fr.myadsplatform.tech/"
                  target="_blank"
                  rel="noopener"
                >
                  MyAds Platform
                </a>
              </li>
            </ul>
          </div>
          <div className="footer-col">
            <h6>{t.footer.company}</h6>
            <ul>
              <li>
                <a href="#sustainability">CARE Program</a>
              </li>
              <li>
                <a href="#cases">Cases</a>
              </li>
              <li>
                <a href="#blog">{t.nav.blog}</a>
              </li>
              <li>
                <a href="#data">Data Taxonomy</a>
              </li>
              <li>
                <a href="#contact"></a>
              </li>
            </ul>
          </div>
          <div className="footer-col">
            <h6>{t.footer.legal}</h6>
            <ul>
              <li>
                <a href="#legal/mentions-legales">
                  {lang === "fr"
                    ? "Mentions légales"
                    : lang === "nl"
                      ? "Wettelijke vermeldingen"
                      : lang === "es"
                        ? "Aviso legal"
                        : "Legal notice"}
                </a>
              </li>
              <li>
                <a href="#legal/vie-privee">
                  {lang === "fr"
                    ? "Vie privée (RGPD)"
                    : lang === "nl"
                      ? "Privacy (GDPR)"
                      : lang === "es"
                        ? "Privacidad (RGPD)"
                        : "Privacy (GDPR)"}
                </a>
              </li>
              <li>
                <a href="#legal/cookies">
                  {lang === "fr"
                    ? "Cookies"
                    : lang === "nl"
                      ? "Cookies"
                      : "Cookies"}
                </a>
              </li>
              <li>
                <a href="#" onClick={(e) => e.preventDefault()}>
                  {lang === "fr"
                    ? "Conditions générales"
                    : lang === "nl"
                      ? "Algemene voorwaarden"
                      : lang === "es"
                        ? "Condiciones generales"
                        : "Terms & conditions"}
                </a>
              </li>
              <li>
                <a href="#" onClick={(e) => e.preventDefault()}>
                  {lang === "fr"
                    ? "Code éthique (JEP)"
                    : lang === "nl"
                      ? "Ethiekcode (JEP)"
                      : lang === "es"
                        ? "Código ético (JEP)"
                        : "Ethics code (JEP)"}
                </a>
              </li>
              <li style={{ color: "rgb(255, 255, 255)" }}>
                <a href="/llms.txt"></a>
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <div>{t.footer.copy}</div>
          <div>{t.footer.addr}</div>
        </div>
      </div>
    </footer>
  );
}

/* =============== App =============== */
function parseHash(h) {
  const s = (h || "").replace(/^#/, "");
  if (!s) return { kind: "home", anchor: "" };
  if (s === "blog") return { kind: "blog" };
  if (s === "blog-admin") return { kind: "blog-admin" };
  if (s === "faq") return { kind: "faq" };
  if (s.startsWith("blog/")) {
    const slug = s.slice("blog/".length);
    return { kind: "article", slug };
  }
  if (s.startsWith("legal/")) {
    const slug = s.slice("legal/".length);
    return { kind: "legal", slug };
  }
  // anchor on home
  return { kind: "home", anchor: s };
}

function App() {
  const [lang, setLang] = useState(() => {
    const saved = localStorage.getItem("myads-lang");
    if (saved) return saved;
    const nav = (navigator.language || "fr").slice(0, 2);
    return ["fr", "nl", "en"].includes(nav) ? nav : "fr";
  });
  useEffect(() => {
    localStorage.setItem("myads-lang", lang);
    document.documentElement.lang = lang;
  }, [lang]);

  const [country, setCountry] = useState(() => {
    const saved = localStorage.getItem("myads-country");
    return saved && window.MYADS_COUNTRIES[saved] && saved !== "other"
      ? saved
      : "be";
  });
  __country = country;
  useEffect(() => {
    localStorage.setItem("myads-country", country);
  }, [country]);
  const chooseCountry = (code) => {
    const c = window.MYADS_COUNTRIES[code];
    if (!c) return;
    if (c.external) {
      window.location.href = c.external;
      return;
    }
    setCountry(code);
    if (!c.langs.includes(lang)) setLang(c.langs[0]);
  };

  const [openContact, setOpenContact] = useState(0);
  const [showSticky, setShowSticky] = useState(false);
  const goContact = () => setOpenContact((n) => n + 1);

  // ----- hash routing for blog -----
  const [route, setRoute] = useState(() => parseHash(window.location.hash));
  useEffect(() => {
    const onHash = () => {
      const r = parseHash(window.location.hash);
      setRoute(r);
      // when entering blog/article, jump to top
      if (
        r.kind === "blog" ||
        r.kind === "article" ||
        r.kind === "legal" ||
        r.kind === "faq" ||
        r.kind === "blog-admin"
      ) {
        window.scrollTo({ top: 0, behavior: "instant" });
      }
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffect(() => {
    const onScroll = () => setShowSticky(window.scrollY > 700);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useReveal(route.kind);

  return (
    <>
      <Nav
        lang={lang}
        setLang={setLang}
        onCta={goContact}
        country={country}
        onCountry={chooseCountry}
      />
      {route.kind === "blog" ? (
        <BlogIndex lang={lang} />
      ) : route.kind === "article" ? (
        <BlogArticle slug={route.slug} lang={lang} onCta={goContact} />
      ) : route.kind === "legal" ? (
        <LegalPage slug={route.slug} lang={lang} />
      ) : route.kind === "faq" ? (
        <FAQ lang={lang} />
      ) : route.kind === "blog-admin" ? (
        <BlogAdmin lang={lang} />
      ) : (
        <main>
          <Hero lang={lang} onCta={goContact} />
          <Ribbon lang={lang} />
          <Models lang={lang} onCta={goContact} />
          <Solutions lang={lang} onCta={goContact} />
          <Inventory lang={lang} onCta={goContact} country={country} />
          <DataExplorer lang={lang} onCta={goContact} />
          <Testimonials lang={lang} onCta={goContact} />
          <Sustainability lang={lang} onCta={goContact} />
          <Cases lang={lang} onCta={goContact} />
          <BlogTeaser lang={lang} />
          <Contact lang={lang} openSignal={openContact} />
        </main>
      )}
      <Footer lang={lang} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);