// ============================================================
// MONARCH AVOCAT — Site (React, single-page artifact)
// ============================================================

const { useState, useEffect, useContext, createContext, Fragment } = React;

const HERO_IMG = "assets/hero.webp";
const CAL_LINK = "hugo-groslambert/diagnostic1h";
const CAL_ORIGIN = "https://cal.eu";
const CAL_EMBED_JS = "https://app.cal.eu/embed/embed.js";
const CAL_URL = `${CAL_ORIGIN}/${CAL_LINK}`;

// Charge le script d'embed Cal une seule fois et l'initialise (popup de réservation).
function useCalEmbed() {
  useEffect(() => {
    if (window.__monarchCalInit) return;
    window.__monarchCalInit = true;
    (function (C, A, L) {
      let p = function (a, ar) {a.q.push(ar);};
      let d = C.document;
      C.Cal = C.Cal || function () {
        let cal = C.Cal;let ar = arguments;
        if (!cal.loaded) {cal.ns = {};cal.q = cal.q || [];d.head.appendChild(d.createElement("script")).src = A;cal.loaded = true;}
        if (ar[0] === L) {
          const api = function () {p(api, arguments);};
          const namespace = ar[1];
          api.q = api.q || [];
          if (typeof namespace === "string") {cal.ns[namespace] = cal.ns[namespace] || api;p(cal.ns[namespace], ar);p(cal, ["initNamespace", namespace]);} else p(cal, ar);
          return;
        }
        p(cal, ar);
      };
    })(window, CAL_EMBED_JS, "init");
    try {
      window.Cal("init", { origin: CAL_ORIGIN });
      window.Cal("ui", { hideEventTypeDetails: false, layout: "month_view" });
    } catch (e) {}
  }, []);
}

// Ouvre la popup Cal ; repli sur l'ouverture d'onglet si le script n'est pas chargé.
function openCal(e) {
  if (window.Cal) {
    if (e) e.preventDefault();
    window.Cal("modal", { calLink: CAL_LINK, config: { layout: "month_view" } });
  }
  // sinon : le lien href s'ouvre normalement (repli)
}

const C = {
  blanc: "#FFFFFF",
  albatre: "#FAF9F6",
  encre: "#1B1D1C",
  ardoise: "#5B7C99",
  ardoiseFonce: "#3D5468",
  sauge: "#5C6F5C",
  saugeFonce: "#48584A",
  gris: "#737373",
  grisClair: "#9A9A95",
  trait: "#E4E1DA"
};

const FONTS = {
  serif: "'Fraunces', Georgia, serif",
  body: "'Archivo', system-ui, sans-serif",
  editorial: "'Spectral', Georgia, serif"
};

// ---------- i18n ----------
const LANGS = ["fr", "en", "es", "it"];
const LangContext = createContext({ lang: "fr", setLang: () => {} });

function useT() {
  const { lang } = useContext(LangContext);
  return (key) => {
    const T = window.MONARCH_TRANSLATIONS || {};
    const d = T[lang] || T.fr || {};
    return d[key] ?? (T.fr && T.fr[key]) ?? key;
  };
}

// Render translated HTML inline. tag defaults to span.
function TT({ k, tag = "span", style, className }) {
  const t = useT();
  return React.createElement(tag, {
    style,
    className,
    dangerouslySetInnerHTML: { __html: t(k) }
  });
}

// Inject Google Fonts + keyframes once
function useFonts() {
  useEffect(() => {
    const id = "monarch-fonts";
    if (document.getElementById(id)) return;
    const link = document.createElement("link");
    link.id = id;
    link.rel = "stylesheet";
    link.href =
    "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Spectral:wght@400;500&family=Archivo:wght@300;400;500;600&display=swap";
    document.head.appendChild(link);

    const style = document.createElement("style");
    style.textContent = `
      @keyframes monarchRise { from { opacity:0; transform:translateY(22px);} to {opacity:1; transform:translateY(0);} }
      @keyframes monarchFade { from { opacity:0;} to {opacity:1;} }
      html { scroll-behavior: smooth; }
      body { margin: 0; }
      .monarch-article-body p { font-size: 18px; line-height: 1.78; color: #2c2e2d; margin: 0 0 22px; }
      .monarch-article-body h2 { font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin: 40px 0 14px; }
      .monarch-article-body h3 { font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 500; margin: 32px 0 10px; }
      .monarch-article-body ul, .monarch-article-body ol { font-size: 18px; line-height: 1.78; color: #2c2e2d; padding-left: 22px; margin: 0 0 22px; }
      .monarch-article-body li { margin-bottom: 8px; }
      .monarch-article-body blockquote { font-family: 'Fraunces', Georgia, serif; font-size: 24px; line-height: 1.4; font-weight: 500; color: #3D5468; border-left: 2px solid #5B7C99; margin: 30px 0; padding: 4px 0 4px 26px; }
      .monarch-article-body a { color: #3D5468; text-decoration: underline; text-underline-offset: 3px; }
      .monarch-article-body img { width: 100%; height: auto; margin: 24px 0; }
    `;
    document.head.appendChild(style);
  }, []);
}

// ---------- Small UI atoms ----------
function Eyebrow({ children, color }) {
  return (
    <span
      style={{
        fontSize: 12,
        letterSpacing: "0.22em",
        textTransform: "uppercase",
        color: color || C.ardoise,
        fontWeight: 600
      }}>
      {children}
    </span>);
}

function PrimaryBtn({ textKey, children, full, big, small, style }) {
  const t = useT();
  const [hover, setHover] = useState(false);
  const label = textKey ? t(textKey) : children;
  return (
    <a
      href={CAL_URL}
      target="_blank"
      rel="noopener noreferrer"
      data-cal-link={CAL_LINK}
      data-cal-origin={CAL_ORIGIN}
      data-cal-config='{"layout":"month_view"}'
      onClick={openCal}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 10,
        fontFamily: FONTS.body,
        fontSize: big ? 16 : small ? 13.5 : 15,
        fontWeight: 600,
        letterSpacing: "0.01em",
        padding: big ? "19px 38px" : small ? "12px 20px" : "17px 30px",
        borderRadius: 2,
        background: hover ? C.saugeFonce : C.sauge,
        color: "#fff",
        cursor: "pointer",
        textDecoration: "none",
        transform: hover ? "translateY(-2px)" : "none",
        boxShadow: hover ? "0 14px 30px -12px rgba(76,88,74,.6)" : "none",
        transition: "all .35s cubic-bezier(.2,.7,.3,1)",
        width: full ? "100%" : "auto",
        justifyContent: full ? "center" : "flex-start",
        ...style
      }}>
      {label}{" "}
      <span style={{ transform: hover ? "translateX(5px)" : "none", transition: "transform .35s" }}>→</span>
    </a>);
}

function MonarchSite() {
  useFonts();
  useCalEmbed();
  const [page, setPage] = useState("home");
  const [slug, setSlug] = useState(null);
  const lang = "fr";

  useEffect(() => { document.documentElement.setAttribute("lang", "fr"); }, []);

  const go = (p, s = null) => {setPage(p);setSlug(s);window.scrollTo({ top: 0 });};

  return (
    <LangContext.Provider value={{ lang, setLang: () => {} }}>
      <div style={{ fontFamily: FONTS.body, color: C.encre, background: C.blanc, fontSize: 17, lineHeight: 1.7 }}>
        <Header page={page} go={go} />
        {page === "home" && <Home />}
        {page === "profil" && <Profil go={go} />}
        {page === "blog" && <Blog go={go} />}
        {page === "article" && <Article slug={slug} go={go} />}
        {page === "legal" && <Legal go={go} />}
        <Footer go={go} />
      </div>
    </LangContext.Provider>);
}

// ---------- Header ----------
function Header({ page, go }) {
  const t = useT();
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const solid = scrolled || page !== "home";

  const NavLink = ({ to, hash, children }) =>
  <button
    onClick={() => {
      if (hash) {
        if (page !== "home") {
          go("home");
          setTimeout(() => {
            const el = document.getElementById(hash);
            if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
          }, 80);
        } else {
          const el = document.getElementById(hash);
          if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
        }
      } else {
        go(to);
      }
    }}
    style={{
      fontFamily: FONTS.body,
      fontSize: 14.5,
      fontWeight: 500,
      color: C.encre,
      opacity: page === to ? 1 : 0.78,
      background: "none",
      border: "none",
      cursor: "pointer",
      padding: 0,
      borderBottom: page === to ? `1px solid ${C.encre}` : "1px solid transparent",
      paddingBottom: 2
    }}>
      {children}
    </button>;

  return (
    <header
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        zIndex: 50,
        background: solid ? "rgba(255,255,255,.92)" : "transparent",
        backdropFilter: solid ? "blur(12px)" : "none",
        WebkitBackdropFilter: solid ? "blur(12px)" : "none",
        boxShadow: solid ? `0 1px 0 ${C.trait}` : "none",
        padding: solid ? "14px 0" : "22px 0",
        transition: "all .4s"
      }}>
      <div
        style={{
          maxWidth: 1240,
          margin: "0 auto",
          padding: "0 32px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 24
        }}>
        <button
          onClick={() => go("home")}
          style={{ display: "flex", flexDirection: "column", lineHeight: 1, background: "none", border: "none", cursor: "pointer", textAlign: "left", padding: 0 }}>
          <span style={{ fontFamily: FONTS.serif, fontSize: 23, fontWeight: 600, letterSpacing: "0.04em", color: C.encre }}>MONARCH</span>
          <span style={{ fontSize: 9.5, letterSpacing: "0.28em", textTransform: "uppercase", color: C.gris, marginTop: 5 }}>{t("logo.sub")}</span>
        </button>
        <nav style={{ display: "flex", alignItems: "center", gap: 28 }}>
          <NavLink to="home" hash="methode">{t("nav.method")}</NavLink>
          <NavLink to="blog">{t("nav.journal")}</NavLink>
          <NavLink to="profil">{t("nav.lawyer")}</NavLink>
          <PrimaryBtn textKey="nav.cta" />
        </nav>
      </div>
    </header>);
}

// ---------- HOME ----------
function Home() {
  return (
    <main>
      <Hero />
      <Chaos />
      <ConstatCta />
      <Pivot />
      <HeroCta />
      <Method />
      <Process />
      <Domains />
      <Doctrine />
      <FinalCta />
    </main>);
}

function Wrap({ children, style }) {
  return <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 32px", ...style }}>{children}</div>;
}

function Hero() {
  const t = useT();
  return (
    <section style={{ paddingTop: 120, position: "relative", overflow: "hidden" }}>
      <Wrap>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 0.92fr",
            alignItems: "end",
            minHeight: "calc(100vh - 120px)"
          }}>
          <div style={{ padding: "40px 60px 90px 0" }}>
            <div style={{ animation: "monarchRise .8s .1s both" }}>
              <Eyebrow>{t("hero.eyebrow")}</Eyebrow>
            </div>
            <h1
              style={{
                fontFamily: FONTS.serif,
                lineHeight: 1.08,
                letterSpacing: "-0.015em",
                margin: "24px 0 0",
                animation: "monarchRise .9s .25s both",
                fontSize: "65px",
                color: "rgb(17, 17, 17)",
                fontWeight: "400"
              }}>
              {t("hero.h1.l1")}
              <br />
              <span style={{ color: C.ardoiseFonce, fontWeight: 600 }}>{t("hero.h1.l2")}</span>
              <br />
              <span style={{ color: "rgb(17, 17, 17)", fontWeight: "400" }}>{t("hero.h1.l3_italic")}</span>
            </h1>
            <p
              style={{
                fontSize: 20,
                lineHeight: 1.6,
                color: "#3a3d3b",
                maxWidth: "30em",
                margin: "30px 0 40px",
                animation: "monarchRise .9s .45s both"
              }}>{t("hero.body")}</p>
            <div style={{ display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap", animation: "monarchRise .9s .6s both" }}>
              <PrimaryBtn textKey="hero.btn" />
              <a href="#methode" style={{ fontWeight: 500, color: C.ardoiseFonce, textDecoration: "none", borderBottom: `1px solid transparent` }}>
                {t("hero.seemethod")} →
              </a>
            </div>
            <div style={{ marginTop: 26, fontSize: 13.5, color: C.gris, display: "flex", alignItems: "center", gap: 10, animation: "monarchRise .9s .75s both" }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: C.sauge }} /> {t("hero.subnote")}
            </div>
          </div>
          <div
            style={{
              position: "relative",
              alignSelf: "end",
              height: "calc(100vh - 120px)",
              display: "flex",
              alignItems: "flex-end",
              justifyContent: "center",
              animation: "monarchFade 1.4s .4s both"
            }}>
            <div
              style={{
                position: "absolute",
                left: -40,
                top: "8%",
                bottom: 0,
                width: 1,
                background: `linear-gradient(to bottom, transparent, ${C.trait} 30%, ${C.trait} 80%, transparent)`
              }} />
            <img
              src={HERO_IMG}
              alt={t("hero.alt")}
              style={{ height: "100%", width: "auto", objectFit: "contain", objectPosition: "bottom" }} />
          </div>
        </div>
      </Wrap>
    </section>);
}

function ConstatCta() {
  return (
    <section style={{ background: C.blanc, padding: "0" }}>
      <Wrap style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 40, padding: "42px 0", borderBottom: `1px solid ${C.trait}` }}>
        <TT
          tag="p"
          k="constatcta.text"
          style={{ fontFamily: FONTS.serif, fontSize: "clamp(20px,1.9vw,26px)", fontWeight: 500, lineHeight: 1.32, letterSpacing: "-0.01em", margin: 0, maxWidth: "30em" }} />
        <PrimaryBtn textKey="constatcta.btn" />
      </Wrap>
    </section>);
}

function HeroCta() {
  const t = useT();
  return (
    <section style={{ background: C.albatre, borderTop: `1px solid ${C.trait}`, borderBottom: `1px solid ${C.trait}` }}>
      <Wrap style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 50, alignItems: "center", padding: "42px 0" }}>
        <div>
          <span style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>{t("herocta.eyebrow")}</span>
          <p style={{ fontFamily: FONTS.serif, fontSize: "clamp(22px,2.2vw,28px)", fontWeight: 500, lineHeight: 1.3, letterSpacing: "-0.01em", margin: "12px 0 0", maxWidth: "26em" }}>
            {t("herocta.text")}
          </p>
        </div>
        <PrimaryBtn textKey="herocta.btn" />
      </Wrap>
    </section>);
}

function Chaos() {
  const t = useT();
  const keys = ["chaos.item1", "chaos.item2", "chaos.item3", "chaos.item4"];
  return (
    <section style={{ background: C.albatre, borderTop: `1px solid ${C.trait}`, borderBottom: `1px solid ${C.trait}`, padding: "110px 0" }}>
      <Wrap style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
        <div>
          <Eyebrow>{t("chaos.eyebrow")}</Eyebrow>
          <h2 style={{ fontFamily: FONTS.serif, fontSize: "clamp(28px,3.4vw,44px)", fontWeight: 500, lineHeight: 1.08, letterSpacing: "-0.015em", margin: "8px 0 0" }}>
            {t("chaos.title")}
          </h2>
          <p style={{ color: C.gris, marginTop: 18, maxWidth: "30em" }}>{t("chaos.sub")}</p>
        </div>
        <div style={{ marginTop: 14 }}>
          {keys.map((k, i) =>
          <div key={k} style={{ padding: "22px 0", borderBottom: i < 3 ? `1px solid ${C.trait}` : "none", display: "flex", gap: 18, alignItems: "flex-start" }}>
              <span style={{ fontFamily: FONTS.serif, fontSize: 15, color: C.grisClair, minWidth: 28 }}>{String(i + 1).padStart(2, "0")}</span>
              <TT tag="p" k={k} style={{ fontSize: 16.5, lineHeight: 1.6, margin: 0 }} />
            </div>
          )}
        </div>
      </Wrap>
    </section>);
}

function Pivot() {
  const t = useT();
  return (
    <section style={{ textAlign: "center", padding: "120px 0" }}>
      <Wrap>
        <Eyebrow>{t("pivot.eyebrow")}</Eyebrow>
        <TT
          tag="p"
          k="pivot.text"
          style={{ fontFamily: FONTS.serif, fontSize: "clamp(26px,3vw,40px)", lineHeight: 1.32, fontWeight: 500, letterSpacing: "-0.015em", maxWidth: "20em", margin: "26px auto 0" }} />
      </Wrap>
    </section>);
}

function Method() {
  const t = useT();
  const pillars = [
  { n: "01", tKey: "method.p1.t", bKey: "method.p1.b" },
  { n: "02", tKey: "method.p2.t", bKey: "method.p2.b" },
  { n: "03", tKey: "method.p3.t", bKey: "method.p3.b" }];

  return (
    <section style={{ background: C.encre, color: "#fff", padding: "110px 0" }}>
      <Wrap>
        <Eyebrow color={C.sauge}>{t("method.eyebrow")}</Eyebrow>
        <h2 style={{ fontFamily: FONTS.serif, color: "#fff", fontSize: "clamp(28px,3.4vw,46px)", fontWeight: 500, lineHeight: 1.1, letterSpacing: "-0.015em", margin: "18px 0 0", maxWidth: "14em" }}>
          {t("method.title")}
        </h2>
        <p style={{ color: "#b9bbb8", fontSize: 18, maxWidth: "32em", marginTop: 22 }}>{t("method.sub")}</p>
        <div style={{ marginTop: 70 }}>
          {pillars.map((p, i) =>
          <div key={p.n} style={{ display: "grid", gridTemplateColumns: "90px 1fr", gap: 30, padding: "42px 0", borderTop: "1px solid rgba(255,255,255,.13)", borderBottom: i === 2 ? "1px solid rgba(255,255,255,.13)" : "none", alignItems: "start" }}>
              <div style={{ fontFamily: FONTS.serif, fontSize: 34, color: C.sauge, lineHeight: 1 }}>{p.n}</div>
              <div>
                <h3 style={{ fontFamily: FONTS.serif, fontSize: 25, color: "#fff", fontWeight: 500, marginBottom: 14, marginTop: 0 }}>{t(p.tKey)}</h3>
                <TT tag="p" k={p.bKey} style={{ color: "#b9bbb8", fontSize: 16.5, maxWidth: "40em", margin: 0 }} />
              </div>
            </div>
          )}
        </div>
      </Wrap>
    </section>);
}

function Process() {
  const t = useT();
  const steps = [
  { n: "01", tKey: "process.s1.t", bKey: "process.s1.b" },
  { n: "02", tKey: "process.s2.t", bKey: "process.s2.b" },
  { n: "03", tKey: "process.s3.t", bKey: "process.s3.b" },
  { n: "04", tKey: "process.s4.t", bKey: "process.s4.b" },
  { n: "05", tKey: "process.s5.t", bKey: "process.s5.b" }];

  return (
    <section id="methode" style={{ background: C.albatre, borderTop: `1px solid ${C.trait}`, borderBottom: `1px solid ${C.trait}`, padding: "110px 0" }}>
      <Wrap>
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 70, alignItems: "end", marginBottom: 70 }}>
          <div>
            <Eyebrow>{t("process.eyebrow")}</Eyebrow>
            <h2 style={{ fontFamily: FONTS.serif, fontSize: "clamp(28px,3.4vw,44px)", fontWeight: 500, lineHeight: 1.08, letterSpacing: "-0.015em", margin: "14px 0 0", maxWidth: "14em" }}>
              {t("process.title")}
            </h2>
          </div>
          <p style={{ color: C.gris, fontSize: 17, lineHeight: 1.7, margin: 0, maxWidth: "34em", justifySelf: "end" }}>{t("process.sub")}</p>
        </div>
        <div style={{ position: "relative" }}>
          <div style={{ position: "absolute", top: 22, left: "6%", right: "6%", height: 1, background: `linear-gradient(to right, transparent, ${C.trait} 8%, ${C.trait} 92%, transparent)` }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 28, position: "relative" }}>
            {steps.map((s) =>
            <div key={s.n} style={{ position: "relative" }}>
                <div style={{ display: "flex", justifyContent: "center", marginBottom: 22 }}>
                  <span style={{ width: 44, height: 44, borderRadius: "50%", background: C.albatre, border: `1px solid ${C.ardoise}`, color: C.ardoiseFonce, fontFamily: FONTS.serif, fontSize: 17, fontWeight: 500, display: "flex", alignItems: "center", justifyContent: "center" }}>{s.n}</span>
                </div>
                <h3 style={{ fontFamily: FONTS.serif, fontSize: 20, fontWeight: 500, margin: "0 0 12px", letterSpacing: "-0.01em", textAlign: "center" }}>{t(s.tKey)}</h3>
                <p style={{ fontSize: 14.5, color: C.gris, lineHeight: 1.6, margin: 0, textAlign: "center" }}>{t(s.bKey)}</p>
              </div>
            )}
          </div>
        </div>
        <div style={{ marginTop: 56, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 40, flexWrap: "wrap", padding: "36px 0 0", borderTop: `1px solid ${C.trait}` }}>
          <p style={{ fontFamily: FONTS.serif, fontSize: "clamp(20px,1.9vw,26px)", color: C.encre, fontWeight: 500, lineHeight: 1.35, margin: 0, maxWidth: "24em", letterSpacing: "-0.01em" }}>
            {t("process.ctaText")}
          </p>
          <PrimaryBtn textKey="process.ctaBtn" />
        </div>
      </Wrap>
    </section>);
}

function Domains() {
  const t = useT();
  const ds = [
  { nKey: "domains.d1.n", tKey: "domains.d1.t", bKey: "domains.d1.b" },
  { nKey: "domains.d2.n", tKey: "domains.d2.t", bKey: "domains.d2.b" },
  { nKey: "domains.d3.n", tKey: "domains.d3.t", bKey: "domains.d3.b" }];

  return (
    <section id="domaines" style={{ padding: "110px 0" }}>
      <Wrap>
        <Eyebrow>{t("domains.eyebrow")}</Eyebrow>
        <h2 style={{ fontFamily: FONTS.serif, fontSize: "clamp(28px,3.4vw,44px)", fontWeight: 500, lineHeight: 1.08, letterSpacing: "-0.015em", marginTop: 16, maxWidth: "16em" }}>
          {t("domains.title")}
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", marginTop: 60, borderTop: `1px solid ${C.trait}` }}>
          {ds.map((d, i) =>
          <div key={d.nKey} style={{ padding: "42px 38px 50px", borderBottom: `1px solid ${C.trait}`, borderRight: i < 2 ? `1px solid ${C.trait}` : "none", display: "flex", flexDirection: "column" }}>
              <span style={{ fontSize: 12, letterSpacing: "0.2em", color: C.ardoise, fontWeight: 600 }}>{t(d.nKey)}</span>
              <h3 style={{ fontFamily: FONTS.serif, fontSize: 23, fontWeight: 500, margin: "20px 0 14px" }}>{t(d.tKey)}</h3>
              <p style={{ fontSize: 15.5, color: C.gris, lineHeight: 1.62, margin: 0, flex: 1 }}>{t(d.bKey)}</p>
              <a href={CAL_URL} target="_blank" rel="noopener noreferrer" data-cal-link={CAL_LINK} data-cal-origin={CAL_ORIGIN} data-cal-config='{"layout":"month_view"}' onClick={openCal} style={{ marginTop: 26, fontSize: 14, fontWeight: 600, color: C.ardoiseFonce, textDecoration: "none", letterSpacing: "0.02em", display: "inline-flex", alignItems: "center", gap: 8, alignSelf: "flex-start", borderBottom: `1px solid ${C.ardoise}33`, paddingBottom: 3 }}>
                {t("domains.discuss")} <span aria-hidden="true">→</span>
              </a>
            </div>
          )}
        </div>
        <div style={{ marginTop: 56, padding: "36px 38px", background: C.albatre, border: `1px solid ${C.trait}`, display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center" }}>
          <div>
            <span style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>{t("domains.cta.eyebrow")}</span>
            <p style={{ fontFamily: FONTS.serif, fontSize: "clamp(20px,2vw,26px)", fontWeight: 500, lineHeight: 1.3, margin: "10px 0 0", letterSpacing: "-0.01em", maxWidth: "32em" }}>
              {t("domains.cta.text")}
            </p>
          </div>
          <PrimaryBtn textKey="domains.cta.btn" />
        </div>
      </Wrap>
    </section>);
}

function Doctrine() {
  const t = useT();
  return (
    <section style={{ background: C.albatre, borderTop: `1px solid ${C.trait}`, padding: "80px 0" }}>
      <Wrap style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 70, alignItems: "center" }}>
        <div style={{ fontWeight: "400", fontFamily: "Archivo" }}>
          <Eyebrow>{t("doctrine.eyebrow")}</Eyebrow>
          <p style={{ color: C.gris, marginTop: 18, fontWeight: "400" }}>{t("doctrine.sub")}</p>
        </div>
        <div>
          <blockquote style={{ fontFamily: FONTS.serif, fontSize: "clamp(24px,2.7vw,34px)", lineHeight: 1.4, fontWeight: 500, letterSpacing: "-0.01em", margin: 0 }}>
            <span style={{ color: C.ardoise, fontSize: "1.3em", lineHeight: 0 }}>«&nbsp;</span>
            {t("doctrine.quote")}
            <span style={{ color: C.ardoise, fontSize: "1.3em", lineHeight: 0 }}>&nbsp;»</span>
          </blockquote>
          <div style={{ marginTop: 24, fontSize: 14, color: C.gris, letterSpacing: "0.04em" }}>{t("doctrine.attr")}</div>
        </div>
      </Wrap>
    </section>);
}

function FinalCta({ titleKey, textKey }) {
  const t = useT();
  return (
    <section id="contact" style={{ background: C.encre, color: "#fff", textAlign: "center", padding: "130px 0" }}>
      <Wrap>
        <Eyebrow color={C.sauge}>{t("finalcta.eyebrow")}</Eyebrow>
        <h2 style={{ fontFamily: FONTS.serif, color: "#fff", fontSize: "clamp(32px,4.2vw,58px)", fontWeight: 500, lineHeight: 1.1, letterSpacing: "-0.015em", margin: "22px auto 0", maxWidth: "16em" }}>
          {t(titleKey || "finalcta.title")}
        </h2>
        <p style={{ color: "#b9bbb8", fontSize: 19, maxWidth: "34em", margin: "26px auto 42px" }}>
          {t(textKey || "finalcta.text")}
        </p>
        <PrimaryBtn big textKey="finalcta.btn" />
        <div style={{ marginTop: 24, fontSize: 13.5, color: "#8a8c89" }}>{t("finalcta.subnote")}</div>
      </Wrap>
    </section>);
}

// ---------- PROFIL ----------
function Profil({ go }) {
  const t = useT();
  return (
    <main>
      <section style={{ paddingTop: 140, paddingBottom: 30 }}>
        <Wrap>
          <Eyebrow>{t("profil.eyebrow")}</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 70, alignItems: "start", marginTop: 36 }}>
            <aside style={{ position: "sticky", top: 110 }}>
              <figure style={{ margin: "0 0 28px", position: "relative" }}>
                <div style={{ position: "absolute", inset: "12px -12px -12px 12px", background: C.albatre, border: `1px solid ${C.trait}`, zIndex: 0 }} />
                <img
                  src="assets/hugo.jpg"
                  alt="Portrait de Hugo Groslambert"
                  style={{ position: "relative", display: "block", width: "100%", height: "auto", aspectRatio: "4 / 5", objectFit: "cover", objectPosition: "center top", filter: "grayscale(15%) contrast(1.02)", zIndex: 1 }} />
              </figure>
              <div style={{ fontFamily: FONTS.serif, fontSize: 34, fontWeight: 600, lineHeight: 1.1 }}>{t("profil.name1")}<br />{t("profil.name2")}</div>
              <div style={{ color: C.ardoise, fontWeight: 600, marginTop: 10, fontSize: 15, letterSpacing: "0.03em" }}>{t("profil.role")}</div>
              <TT
                tag="div"
                k="profil.bar"
                style={{ marginTop: 26, fontSize: 14.5, color: C.gris, lineHeight: 1.9, borderTop: `1px solid ${C.trait}`, paddingTop: 22 }} />
              <div style={{ marginTop: 30 }}><PrimaryBtn full small textKey="profil.cta" /></div>
            </aside>
            <div>
              <TT
                tag="p"
                k="profil.intro"
                style={{ fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", marginBottom: 22, marginTop: 0, fontWeight: 400 }} />
              <TT tag="p" k="profil.p1" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />
              <TT tag="p" k="profil.p2" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />

              <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 40, margin: "50px 0", padding: "42px 0", borderTop: `1px solid ${C.trait}`, borderBottom: `1px solid ${C.trait}` }}>
                <Win v={t("profil.win1.v")} l={t("profil.win1.l")} />
                <Win v={t("profil.win2.v")} l={t("profil.win2.l")} />
                <Win v={<>{t("profil.win3.v")}<span style={{ fontSize: ".5em" }}> {t("profil.win3.unit")}</span></>} l={t("profil.win3.l")} />
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center", background: C.albatre, border: `1px solid ${C.trait}`, padding: "32px 38px", margin: "0 0 56px" }}>
                <div>
                  <span style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>{t("profil.midcta.eyebrow")}</span>
                  <p style={{ fontFamily: FONTS.serif, fontSize: 22, fontWeight: 500, lineHeight: 1.3, letterSpacing: "-0.01em", margin: "10px 0 0", maxWidth: "22em" }}>
                    {t("profil.midcta.text")}
                  </p>
                </div>
                <PrimaryBtn textKey="profil.midcta.btn" />
              </div>

              <ProseH>{t("profil.h1")}</ProseH>
              <TT tag="p" k="profil.b1" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />
              <ProseH>{t("profil.h2")}</ProseH>
              <TT tag="p" k="profil.b2" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />
              <ProseH>{t("profil.h3")}</ProseH>
              <TT tag="p" k="profil.b3" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />
              <ProseH>{t("profil.h4")}</ProseH>
              <TT tag="p" k="profil.b4" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />
            </div>
          </div>
        </Wrap>
      </section>
      <FinalCta titleKey="profil.finalcta.title" textKey="profil.finalcta.text" />
    </main>);
}

function ProseH({ children }) {
  return <h3 style={{ fontFamily: FONTS.serif, fontSize: 24, fontWeight: 500, margin: "42px 0 16px" }}>{children}</h3>;
}

function Win({ v, l }) {
  return (
    <div>
      <div style={{ fontFamily: FONTS.serif, fontSize: 42, fontWeight: 500, color: C.ardoiseFonce, lineHeight: 1 }}>{v}</div>
      <div style={{ fontSize: 14, color: C.gris, marginTop: 10, lineHeight: 1.5 }}>{l}</div>
    </div>);
}

// ---------- BLOG ----------
function Blog({ go }) {
  const t = useT();
  const posts = (window.MONARCH_POSTS || []).slice().sort((a, b) => (b.iso || "").localeCompare(a.iso || ""));

  return (
    <main>
      <section style={{ paddingTop: 150, paddingBottom: 80 }}>
        <Wrap>
          <Eyebrow>{t("blog.eyebrow")}</Eyebrow>
          <h1 style={{ fontFamily: FONTS.serif, fontSize: "clamp(36px,4.5vw,60px)", fontWeight: 500, lineHeight: 1.08, letterSpacing: "-0.015em", maxWidth: "14em", marginTop: 16 }}>
            {t("blog.h1")}
          </h1>
          <p style={{ fontSize: 19, color: C.gris, maxWidth: "34em", marginTop: 24 }}>{t("blog.sub")}</p>
          {posts.length === 0 ?
            <p style={{ marginTop: 70, paddingTop: 40, borderTop: `1px solid ${C.trait}`, color: C.grisClair, fontStyle: "italic" }}>{t("blog.empty")}</p> :
            <div style={{ marginTop: 70, borderTop: `1px solid ${C.trait}` }}>
              {posts.map((p) =>
                <PostRow key={p.slug} post={p} onOpen={() => go("article", p.slug)} />
              )}
            </div>
          }
        </Wrap>
      </section>
    </main>);
}

function PostRow({ post, onOpen }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onClick={onOpen}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ display: "grid", gridTemplateColumns: "160px 1fr 40px", gap: 40, padding: "38px 0", borderBottom: `1px solid ${C.trait}`, alignItems: "center", background: hover ? C.albatre : "transparent", transition: "background .3s", cursor: "pointer" }}>
      <div style={{ fontSize: 13, color: C.grisClair, letterSpacing: "0.04em" }}>{post.date}</div>
      <div>
        <span style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600, display: "block", marginBottom: 8 }}>{post.cat}</span>
        <h2 style={{ fontFamily: FONTS.serif, fontSize: "clamp(22px,2.4vw,30px)", fontWeight: 500, lineHeight: 1.18, color: hover ? C.ardoiseFonce : C.encre, transition: "color .3s", margin: "0 0 10px" }}>{post.title}</h2>
        {post.excerpt && <p style={{ fontSize: 15.5, color: C.gris, lineHeight: 1.6, margin: 0, maxWidth: "44em" }}>{post.excerpt}</p>}
      </div>
      <div style={{ fontSize: 22, color: hover ? C.ardoise : C.grisClair, transition: "all .3s", textAlign: "right", transform: hover ? "translateX(6px)" : "none" }}>→</div>
    </div>);
}

// ---------- ARTICLE ----------
function Article({ slug, go }) {
  const t = useT();
  const posts = window.MONARCH_POSTS || [];
  const post = posts.find((p) => p.slug === slug);

  if (!post) {
    return (
      <main>
        <section style={{ paddingTop: 160, paddingBottom: 120 }}>
          <Wrap>
            <p style={{ color: C.gris }}>Article introuvable.</p>
            <button onClick={() => go("blog")} style={{ marginTop: 16, color: C.ardoiseFonce, background: "none", border: "none", cursor: "pointer", fontFamily: FONTS.body, fontSize: 15, fontWeight: 600, padding: 0 }}>← {t("blog.back")}</button>
          </Wrap>
        </section>
      </main>);
  }

  return (
    <main>
      <article style={{ paddingTop: 140, paddingBottom: 40 }}>
        <div style={{ maxWidth: 760, margin: "0 auto", padding: "0 32px" }}>
          <button onClick={() => go("blog")} style={{ color: C.ardoise, background: "none", border: "none", cursor: "pointer", fontFamily: FONTS.body, fontSize: 14, fontWeight: 600, padding: 0, letterSpacing: "0.02em", marginBottom: 34, display: "inline-flex", alignItems: "center", gap: 8 }}>← {t("blog.back")}</button>
          <span style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600, display: "block" }}>{post.cat}</span>
          <h1 style={{ fontFamily: FONTS.serif, fontSize: "clamp(32px,4vw,52px)", fontWeight: 500, lineHeight: 1.12, letterSpacing: "-0.015em", margin: "16px 0 18px" }}>{post.title}</h1>
          <div style={{ fontSize: 14, color: C.grisClair, letterSpacing: "0.04em", borderBottom: `1px solid ${C.trait}`, paddingBottom: 28 }}>{post.date}</div>
          {post.cover &&
            <img src={post.cover} alt="" style={{ width: "100%", height: "auto", objectFit: "cover", margin: "34px 0 6px", aspectRatio: "16 / 9" }} />
          }
          <div
            className="monarch-article-body"
            style={{ marginTop: 34 }}
            dangerouslySetInnerHTML={{ __html: post.body || "" }} />
          <div style={{ marginTop: 60, paddingTop: 40, borderTop: `1px solid ${C.trait}`, display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
            <p style={{ fontFamily: FONTS.serif, fontSize: 22, fontWeight: 500, lineHeight: 1.3, margin: 0, maxWidth: "20em", letterSpacing: "-0.01em" }}>
              Une question sur votre situation ?
            </p>
            <PrimaryBtn textKey="hero.btn" />
          </div>
        </div>
      </article>
    </main>);
}

// ---------- LÉGAL ----------
function Legal({ go }) {
  const t = useT();
  const H = ({ children }) => <h2 style={{ fontFamily: FONTS.serif, fontSize: 22, fontWeight: 500, margin: "40px 0 12px", letterSpacing: "-0.01em" }}>{children}</h2>;
  const P = ({ children }) => <p style={{ fontSize: 15.5, lineHeight: 1.75, color: "#2c2e2d", margin: "0 0 14px" }}>{children}</p>;
  const Ph = ({ children }) => <span style={{ color: C.grisClair }}>{children}</span>;
  return (
    <main>
      <section style={{ paddingTop: 140, paddingBottom: 90 }}>
        <div style={{ maxWidth: 760, margin: "0 auto", padding: "0 32px" }}>
          <Eyebrow>{t("legal.eyebrow")}</Eyebrow>
          <h1 style={{ fontFamily: FONTS.serif, fontSize: "clamp(34px,4.2vw,52px)", fontWeight: 500, lineHeight: 1.1, letterSpacing: "-0.015em", margin: "16px 0 8px" }}>{t("legal.h1")}</h1>

          <H>Éditeur du site</H>
          <P>Le présent site est édité par <strong>Hugo Groslambert</strong>, avocat inscrit au Barreau de Toulouse.<br />
            Téléphone : +33 6 69 56 99 18 — Courriel : contact@monarch-avocat.fr<br />
            Directeur de la publication : Hugo Groslambert.</P>

          <H>Profession et règles applicables</H>
          <P>Avocat au Barreau de Toulouse, Maître Hugo Groslambert est soumis aux règles de la profession d'avocat : la loi n° 71-1130 du 31 décembre 1971, le décret n° 91-1197 du 27 novembre 1991, le Règlement Intérieur National (RIN) du Conseil National des Barreaux et le règlement intérieur du Barreau de Toulouse.<br />
            Le titre d'avocat est un titre professionnel français protégé. La structure relève de l'<strong>Ordre des Avocats du Barreau de Toulouse</strong>.</P>

          <H>Médiation de la consommation</H>
          <P>Conformément aux articles L.611-1 et suivants du Code de la consommation, le client consommateur peut recourir gratuitement au médiateur de la consommation de la profession d'avocat.</P>

          <H>Hébergement</H>
          <P>Le site est hébergé par <strong>Hostinger International Ltd.</strong>, 61 Lordou Vironos Street, 6023 Larnaca, Chypre — <Ph>www.hostinger.fr</Ph>.</P>

          <H>Propriété intellectuelle</H>
          <P>L'ensemble des contenus (textes, articles, identité visuelle, photographies) est protégé par le droit d'auteur et reste la propriété de l'éditeur, sauf mention contraire. Toute reproduction ou réutilisation sans autorisation est interdite.</P>

          <H>Données personnelles (RGPD)</H>
          <P>Les informations transmises via le formulaire de prise de rendez-vous ou par courriel sont utilisées uniquement pour répondre à votre demande et ne sont pas cédées à des tiers. Conformément au RGPD et à la loi « Informatique et Libertés », vous disposez d'un droit d'accès, de rectification, d'effacement et d'opposition sur vos données, en écrivant à contact@monarch-avocat.fr. Réclamation possible auprès de la CNIL (www.cnil.fr).</P>

          <H>Confidentialité</H>
          <P>Les échanges avec un avocat sont couverts par le secret professionnel. Les informations diffusées sur ce site ont une vocation générale et d'information ; elles ne constituent pas une consultation juridique et ne sauraient engager la responsabilité de l'éditeur.</P>

          <button onClick={() => go("home")} style={{ marginTop: 36, color: C.ardoiseFonce, background: "none", border: "none", cursor: "pointer", fontFamily: FONTS.body, fontSize: 15, fontWeight: 600, padding: 0 }}>← Retour à l'accueil</button>
        </div>
      </section>
    </main>);
}

// ---------- Footer ----------
function Footer({ go }) {
  const t = useT();
  return (
    <footer style={{ background: C.encre, color: "#8a8c89", borderTop: "1px solid rgba(255,255,255,.1)", padding: "50px 0 40px" }}>
      <Wrap style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 30 }}>
        <div>
          <div style={{ fontFamily: "Fraunces", fontSize: 20, color: "#fff", fontWeight: 600, letterSpacing: "0.04em" }}>MONARCH</div>
          <div style={{ fontSize: 9.5, letterSpacing: "0.25em", textTransform: "uppercase", color: "#8a8c89", marginTop: 6 }}>{t("footer.sub")}</div>
          <div style={{ marginTop: 18, fontSize: 13, display: "flex", gap: 20 }}>
            <button onClick={() => go("home")} style={{ color: "#b9bbb8", background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "inherit", fontSize: "inherit" }}>{t("footer.nav.home")}</button>
            <button onClick={() => go("profil")} style={{ color: "#b9bbb8", background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "inherit", fontSize: "inherit" }}>{t("footer.nav.lawyer")}</button>
            <button onClick={() => go("blog")} style={{ color: "#b9bbb8", background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "inherit", fontSize: "inherit" }}>{t("footer.nav.journal")}</button>
            <button onClick={() => go("legal")} style={{ color: "#b9bbb8", background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "inherit", fontSize: "inherit" }}>{t("footer.nav.legal")}</button>
          </div>
        </div>
        <TT tag="div" k="footer.legal" style={{ fontSize: 12.5, lineHeight: 1.8, maxWidth: "30em", textAlign: "right" }} />
      </Wrap>
    </footer>);
}

// ---------- Mount ----------
ReactDOM.createRoot(document.getElementById("root")).render(<MonarchSite />);