// ============================================================
// Monarch — Simulateurs : Dutreil · LBO · OBO  (window.*)
// Requiert window.MSC (simcore.jsx).
// ============================================================

(function () {
  const { useState, useEffect } = React;
  const M = window.MSC;
  const { C, SERIF, BODY, IS, flatTax, dmtg, fmt, pct, CountEuro, injectCore, useReveal,
    Eyebrow, Label, MoneyInput, IntInput, Shell, InputsCard, Doctrine, Alert, CTAEmail, Gauge, Stat, ProsCons } = M;

  // util commun : marqueur flèche + boîte blueprint
  function Defs() {
    return (
      <defs>
        <marker id="mscArrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
          <path d="M0,0 L10,5 L0,10" fill="none" stroke={C.encre} strokeWidth="1.2" />
        </marker>
        <pattern id="mscHatch" width="7" height="7" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="7" stroke={C.ardoise} strokeWidth="0.8" opacity="0.5" />
        </pattern>
      </defs>);
  }
  function Box({ x, y, w, h, lines, fill }) {
    return (
      <g>
        <rect x={x} y={y} width={w} height={h} fill={fill || C.albatre} stroke={C.encre} strokeWidth="1" />
        {lines.map((l, i) =>
          <text key={i} x={x + w / 2} y={y + h / 2 + (i - (lines.length - 1) / 2) * 16 + 4} fontFamily="'Archivo',sans-serif" fontSize="12" fontWeight="600" letterSpacing="0.09em" fill={C.encre} textAnchor="middle">{l}</text>)}
      </g>);
  }
  const Flow = ({ d, on, delay, dash, w, color }) =>
    <path className={"msc-line" + (on ? " on" : "")} style={{ transitionDelay: (delay || 0) + "s" }} d={d} fill="none" stroke={color || C.encre} strokeWidth={w || 1.4} markerEnd="url(#mscArrow)" strokeDasharray={dash ? "5 4" : undefined} />;
  const Lbl = ({ x, y, on, delay, children, color, anchor }) =>
    <text className={"msc-soft" + (on ? " on" : "")} style={{ transitionDelay: (delay || 0) + "s" }} x={x} y={y} fontFamily="'Archivo',sans-serif" fontSize="10.5" letterSpacing="0.05em" fill={color || C.gris} textAnchor={anchor || "middle"}>{children}</text>;

  // =====================================================
  // 1. DUTREIL
  // =====================================================
  function DutreilSimulator() {
    useEffect(injectCore, []);
    const [valeur, setValeur] = useState(2000000);
    const [enfants, setEnfants] = useState(2);
    const [done, setDone] = useState(false);
    const [busy, setBusy] = useState(false);
    const reveal = useReveal(done, 250);

    const V = Math.max(0, Number(valeur) || 0);
    const n = Math.max(1, Number(enfants) || 1);
    const perChild = V / n;
    const stdTax = dmtg(Math.max(0, perChild - 100000)) * n;
    const dutBase = Math.max(0, 0.25 * perChild - 100000);
    const dutTax = dmtg(dutBase) * n;
    const saved = stdTax - dutTax;

    const go = () => { setBusy(true); setDone(false); setTimeout(() => { setBusy(false); setDone(true); }, 700); };

    return (
      <Shell eyebrow="Transmission · Pacte Dutreil (art. 787 B CGI)"
        title="Transmettre votre entreprise sans l'amputer d'un impôt confiscatoire."
        intro="Comparez les droits de mutation d'une transmission standard avec l'effet de levier du Pacte Dutreil.">
        {!done &&
          <InputsCard onCompute={go} computing={busy} label="Calculer les droits">
            <div><Label>Valeur de la société</Label><MoneyInput value={valeur} onChange={setValeur} min={100000} max={20000000} step={100000} /></div>
            <div><Label>Nombre d'enfants</Label><IntInput value={enfants} onChange={setEnfants} min={1} max={8} /></div>
          </InputsCard>}

        {done &&
          <div style={{ marginTop: 36 }}>
            <ParamRecap items={[["Valeur", fmt(V)], ["Enfants", String(n)]]} onEdit={() => setDone(false)} />
            <div className="msc-grid2" style={{ marginTop: 16 }}>
              <Panel tone="light" eyebrow="Transmission standard" title="Le frottement successoral">
                <Gauge run={reveal} base={V} segments={[{ value: V - stdTax, keep: true }, { value: stdTax }]} />
                <div style={{ marginTop: 18 }}>
                  <Stat label="Dette fiscale à la charge des héritiers" value={stdTax} run={reveal} color={C.encre} sub={`Soit ${pct(stdTax, V)} % de la valeur transmise — à décaisser`} />
                </div>
              </Panel>
              <Panel tone="dark" eyebrow="Pacte Dutreil" title="La dette résiduelle">
                <Gauge run={reveal} base={V} segments={[{ value: V - dutTax, keep: true, good: true }, { value: dutTax }]} />
                <div style={{ marginTop: 18 }}>
                  <div style={{ fontFamily: BODY, fontSize: 12.5, color: "#9ea7a0", marginBottom: 6 }}>Dette fiscale résiduelle</div>
                  <CountEuro value={dutTax} run={reveal} style={{ fontFamily: SERIF, fontSize: "clamp(30px,4.4vw,52px)", fontWeight: 500, color: "#fff", letterSpacing: "-0.01em", lineHeight: 1 }} />
                  <div style={{ fontFamily: BODY, fontSize: 13, color: C.sauge, fontWeight: 600, marginTop: 8 }}>Assiette réduite de 75 % (art. 787 B)</div>
                </div>
              </Panel>
            </div>

            <Synth reveal={reveal} value={saved} label="Économie de droits grâce au Pacte Dutreil" sub="par rapport à une transmission non préparée" />

            <DutreilMechanism reveal={reveal} />

            <Doctrine open={reveal} eyebrow="La doctrine du cabinet" title="L'illusion du démembrement" accent={C.sauge}>
              <p style={{ margin: "0 0 14px" }}>La pratique courante consiste à lier ce pacte à une donation avec réserve d'usufruit. Le cabinet s'y oppose : ce montage dilue votre qualité d'associé sur les titres transmis et partage la décision avec les nu-propriétaires.</p>
              <p style={{ margin: "0 0 18px" }}>L'ingénierie Monarch combine la <b style={{ color: "#fff" }}>donation en pleine propriété</b> du Pacte Dutreil avec l'émission de <b style={{ color: "#fff" }}>parts de préférence à droit de vote renforcé</b>. Vous transmettez l'essentiel de la valeur économique exonérée, tout en conservant le <b style={{ color: "#fff" }}>contrôle décisionnel</b> du groupe — dans le strict respect de la prohibition des clauses léonines (art. 1844-1 C. civ.), un droit minimal restant attaché à chaque catégorie de titres.</p>
              <LockSvg on={reveal} />
            </Doctrine>

            <ProsCons open={reveal}
              pour={["L'impôt de transmission est réduit de 75 % sur la valeur de l'entreprise.", "Vous transmettez tôt tout en gardant la direction (parts de préférence).", "Donner avant 70 ans ajoute une réduction de droits supplémentaire."]}
              contre={["Engagements de conservation à respecter (jusqu'à 6 ans) sous peine de rappel.", "Une fonction de direction doit être exercée pendant une durée définie.", "Mise en place technique : statuts, pactes et suivi dans le temps."]} />

            <CTAEmail label="Recevoir mon schéma de gouvernance" note="Schéma détaillé (Dutreil + parts de préférence) communiqué après prise de contact." />
          </div>}
      </Shell>);
  }

  // Mécanisme + frise chronologique du Pacte Dutreil
  function DutreilMechanism({ reveal }) {
    const [on, setOn] = useState(false);
    useEffect(() => { if (reveal) { const id = setTimeout(() => setOn(true), 250); return () => clearTimeout(id); } else setOn(false); }, [reveal]);
    const step = (n, t, d) => (
      <div style={{ display: "grid", gridTemplateColumns: "34px 1fr", gap: 14, alignItems: "start" }}>
        <span style={{ fontFamily: SERIF, fontSize: 20, color: C.ardoise, lineHeight: 1.2 }}>{n}</span>
        <div>
          <div style={{ fontFamily: BODY, fontSize: 14.5, fontWeight: 600, color: C.encre, marginBottom: 3 }}>{t}</div>
          <div style={{ fontFamily: BODY, fontSize: 13.5, color: C.gris, lineHeight: 1.6 }}>{d}</div>
        </div>
      </div>);
    return (
      <div style={{ marginTop: 22, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
        <Eyebrow>Le dispositif · art. 787 B CGI</Eyebrow>
        <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 6px" }}>Comment fonctionne l'exonération de 75 %</h3>
        <p style={{ fontFamily: BODY, fontSize: 14.5, color: C.gris, lineHeight: 1.65, margin: "0 0 24px", maxWidth: "46em" }}>
          Le Pacte Dutreil permet de transmettre les titres d'une société opérationnelle en n'étant taxé que sur <b style={{ color: C.encre }}>25 % de leur valeur</b>, sous réserve d'engagements de conservation et d'une fonction de direction.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px,1fr))", gap: 22, marginBottom: 28 }}>
          {step("1", "Engagement collectif", "Signé avant la transmission, il porte sur au moins 17 % des droits financiers et 34 % des droits de vote (seuils non cotés). Durée minimale : 2 ans.")}
          {step("2", "Transmission (donation ou décès)", "Pendant l'engagement collectif, les titres sont transmis. L'abattement de 75 % s'applique sur l'assiette des droits.")}
          {step("3", "Engagement individuel", "Chaque héritier ou donataire s'engage à conserver les titres 4 ans supplémentaires à compter de la fin de l'engagement collectif.")}
          {step("4", "Fonction de direction", "L'un des signataires doit exercer une fonction de direction pendant l'engagement collectif puis 3 ans après la transmission.")}
        </div>
        <Timeline2 on={on} />
        <p style={{ fontFamily: BODY, fontSize: 12.5, color: C.grisC, lineHeight: 1.6, margin: "16px 0 0" }}>
          Durée d'engagement cumulée : 2 ans (collectif) + 4 ans (individuel) = <b style={{ color: C.encre }}>jusqu'à 6 ans de conservation</b>. La donation en pleine propriété avant 70 ans ouvre droit à une réduction de droits supplémentaire de 50 %.
        </p>
      </div>);
  }

  function Timeline2({ on }) {
    const x0 = 20, x1 = 700, y = 70;
    const X = (yr) => x0 + (x1 - x0) * (yr / 6);
    const seg = (a, b, color, label, yOff) => {
      const xa = X(a), xb = X(b);
      return (
        <g>
          <line x1={xa} y1={y} x2={on ? xb : xa} y2={y} stroke={color} strokeWidth="6" style={{ transition: "x2 1s ease" }} />
          <text x={(xa + xb) / 2} y={y + yOff} fontFamily="'Archivo',sans-serif" fontSize="11" fontWeight="600" fill={color} textAnchor="middle">{label}</text>
        </g>);
    };
    return (
      <svg viewBox="0 0 720 110" style={{ width: "100%", height: "auto", display: "block" }} role="img" aria-label="Frise des durées de conservation Dutreil">
        <line x1={x0} y1={y} x2={x1} y2={y} stroke={C.trait} strokeWidth="1" />
        {[0, 2, 6].map((yr) =>
          <g key={yr}>
            <line x1={X(yr)} y1={y - 10} x2={X(yr)} y2={y + 10} stroke={C.encre} strokeWidth="1" />
            <text x={X(yr)} y={y + 28} fontFamily="'Archivo',sans-serif" fontSize="11" fill={C.grisC} textAnchor="middle">An {yr}</text>
          </g>)}
        {seg(0, 2, C.ardoiseF, "Engagement collectif (2 ans min.)", -14)}
        {seg(2, 6, C.saugeF, "Engagement individuel (4 ans)", -14)}
        <g className={"msc-soft" + (on ? " on" : "")} style={{ transitionDelay: "1s" }}>
          <line x1={X(2)} y1={y - 30} x2={X(2)} y2={y - 4} stroke={C.encre} strokeWidth="1" strokeDasharray="3 3" />
          <text x={X(2)} y={y - 36} fontFamily="'Archivo',sans-serif" fontSize="10.5" fill={C.encre} textAnchor="middle">Transmission</text>
        </g>
      </svg>);
  }

  // verrou géométrique qui se referme (anse qui se dessine)
  function LockSvg({ on }) {
    return (
      <svg viewBox="0 0 60 60" width="56" height="56" style={{ marginTop: 18 }} aria-hidden="true">
        <rect x="14" y="28" width="32" height="24" fill="none" stroke={C.sauge} strokeWidth="1.4" />
        <path className={"msc-line" + (on ? " on" : "")} style={{ transitionDelay: ".4s", strokeDasharray: 70, strokeDashoffset: on ? 0 : 70 }} d="M 20 28 L 20 20 A 10 10 0 0 1 40 20 L 40 28" fill="none" stroke={C.sauge} strokeWidth="1.4" />
        <circle cx="30" cy="38" r="2.4" fill={C.sauge} />
        <line x1="30" y1="40" x2="30" y2="46" stroke={C.sauge} strokeWidth="1.4" />
      </svg>);
  }

  // =====================================================
  // 2. LBO
  // =====================================================
  function LBOSimulator() {
    useEffect(injectCore, []);
    const [acq, setAcq] = useState(1500000);
    const [done, setDone] = useState(false);
    const [busy, setBusy] = useState(false);
    const reveal = useReveal(done, 250);

    const D = Math.max(0, Number(acq) || 0);
    const nomPropre = D / (1 - 0.314);
    const holding = D / (1 - 0.0125);
    const economy = nomPropre - holding;
    const base = nomPropre || 1;

    const go = () => { setBusy(true); setDone(false); setTimeout(() => { setBusy(false); setDone(true); }, 700); };

    return (
      <Shell eyebrow="Reprise · Effet de levier (LBO)"
        title="Racheter sans asphyxier la trésorerie de la cible."
        intro="Mesurez l'écart entre un remboursement de la dette d'acquisition en nom propre et via une holding de reprise.">
        {!done &&
          <InputsCard onCompute={go} computing={busy} label="Modéliser le levier">
            <div style={{ gridColumn: "1 / -1" }}><Label>Montant de l'acquisition (dette à rembourser)</Label><MoneyInput value={acq} onChange={setAcq} min={200000} max={20000000} step={100000} /></div>
          </InputsCard>}

        {done &&
          <div style={{ marginTop: 36 }}>
            <ParamRecap items={[["Acquisition", fmt(D)]]} onEdit={() => setDone(false)} />
            <div style={{ marginTop: 16, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
              <div style={{ marginBottom: 26 }}>
                <BarRow label="Remboursement en nom propre" sub={`Flat tax 31,4 % — votre cible est saignée de ${fmt(nomPropre)}`} run={reveal} base={base} color={C.encre}
                  segments={[{ value: D, keep: true }, { value: nomPropre - D }]} value={nomPropre} />
              </div>
              <BarRow label="Structuration LBO via holding" sub={`Régime mère-fille — la cible ne distribue que ${fmt(holding)}`} run={reveal} base={base} color={C.saugeF}
                segments={[{ value: D, keep: true, good: true }, { value: holding - D }]} value={holding} good />
            </div>

            <Synth reveal={reveal} value={economy} label="Trésorerie d'exploitation préservée" sub="restée dans la cible pour investir, au lieu d'être distribuée à l'impôt" />

            <Doctrine open={reveal} eyebrow="L'ingénierie" title="La dette se rembourse là où elle est la moins coûteuse" accent={C.sauge}>
              <p style={{ margin: 0 }}>La holding de reprise rembourse la dette d'acquisition grâce aux dividendes de la cible, remontés quasiment sans frottement (régime mère-fille). Le cabinet sécurise la structuration — intégration fiscale, garanties, gouvernance — pour que le levier serve votre stratégie sans fragiliser l'exploitation. La répartition du capital respecte la prohibition des clauses léonines, chaque associé conservant un droit minimal.</p>
            </Doctrine>

            <ProsCons open={reveal}
              pour={["Vous rachetez sans sortir tout l'argent de votre poche.", "La dette se rembourse avec les bénéfices de la société, presque sans impôt.", "Les intérêts d'emprunt sont déductibles."]}
              contre={["L'opération repose sur l'endettement : un aléa d'activité fragilise le remboursement.", "La banque demande généralement des garanties.", "Structuration et suivi (holding, intégration fiscale) à encadrer."]} />

            <CTAEmail label="Étudier le montage de ma reprise" note="Tableau d'amortissement et schéma d'acquisition communiqués après prise de contact." />
          </div>}
      </Shell>);
  }

  function BarRow({ label, sub, segments, base, value, run, color, good }) {
    return (
      <div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10, flexWrap: "wrap", gap: 8 }}>
          <span style={{ fontFamily: BODY, fontSize: 13, color: good ? C.sauge : C.ardoise, letterSpacing: "0.1em", textTransform: "uppercase", fontWeight: 600 }}>{label}</span>
          <CountEuro value={value} run={run} style={{ fontFamily: SERIF, fontSize: "clamp(22px,2.6vw,30px)", fontWeight: 500, color: color, letterSpacing: "-0.01em" }} />
        </div>
        <Gauge run={run} base={base} segments={segments} height={18} />
        <div style={{ fontFamily: BODY, fontSize: 13, color: C.gris, marginTop: 8 }}>{sub}</div>
      </div>);
  }

  function LBOSchema({ reveal, economy }) {
    return (
      <div style={{ marginTop: 22, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
        <Eyebrow>Schéma d'acquisition · plan d'architecte</Eyebrow>
        <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 18px" }}>Le flux de la reprise par holding</h3>
        <svg viewBox="0 0 760 300" style={{ width: "100%", height: "auto", display: "block" }} role="img" aria-label="Schéma LBO">
          <Defs />
          {/* banque -> holding */}
          <Flow d="M 175 96 L 175 130 L 300 130" on={reveal} delay={0.1} w={1.8} />
          <Lbl x={205} y={120} on={reveal} delay={0.5} color={C.saugeF} anchor="start">Dette bancaire</Lbl>
          {/* holding -> cible (rachat) */}
          <Flow d="M 460 152 L 585 152 L 585 200" on={reveal} delay={0.8} />
          <Lbl x={500} y={142} on={reveal} delay={1.2} anchor="start">Rachat des titres</Lbl>
          {/* cible -> holding (dividendes mère-fille) */}
          <Flow d="M 520 232 L 400 232 L 400 178" on={reveal} delay={1.5} dash color={C.ardoise} />
          <Lbl x={470} y={250} on={reveal} delay={1.9} color={C.ardoise}>Dividendes (mère-fille)</Lbl>
          {/* holding -> banque (remboursement) */}
          <Flow d="M 300 140 L 200 140 L 200 112" on={reveal} delay={2.1} dash />
          <Lbl x={150} y={150} on={reveal} delay={2.5} anchor="start">Remboursement</Lbl>

          <Box x={70} y={66} w={210} h={46} lines={["BANQUE"]} />
          <Box x={300} y={120} w={160} h={64} lines={["HOLDING", "DE REPRISE"]} />
          <Box x={505} y={200} w={210} h={60} lines={["SOCIÉTÉ CIBLE"]} />
        </svg>
      </div>);
  }

  // =====================================================
  // 3. OBO
  // =====================================================
  function OBOSimulator() {
    useEffect(injectCore, []);
    const [valo, setValo] = useState(3000000);
    const [cash, setCash] = useState(1000000);
    const [done, setDone] = useState(false);
    const [busy, setBusy] = useState(false);
    const reveal = useReveal(done, 250);

    const S = Math.max(0, Number(valo) || 0);
    const C0 = Math.min(Math.max(0, Number(cash) || 0), S);
    const netApresPV = C0 * 0.70; // indicatif PFU 30 %
    const partVendue = pct(C0, S);

    const go = () => { setBusy(true); setDone(false); setTimeout(() => { setBusy(false); setDone(true); }, 700); };

    return (
      <Shell eyebrow="Cash-out · Owner Buy-Out (OBO)"
        title="Rendre votre patrimoine professionnel liquide, sans céder votre entreprise."
        intro="Vendez une partie de vos titres à une holding que vous contrôlez : vous encaissez, l'entreprise rembourse.">
        {!done &&
          <InputsCard onCompute={go} computing={busy} label="Simuler le cash-out">
            <div><Label>Valorisation de la société</Label><MoneyInput value={valo} onChange={setValo} min={200000} max={30000000} step={100000} /></div>
            <div><Label>Liquidité immédiate visée</Label><MoneyInput value={cash} onChange={setCash} min={0} max={S} step={50000} /></div>
          </InputsCard>}

        {done &&
          <div style={{ marginTop: 36 }}>
            <ParamRecap items={[["Valorisation", fmt(S)], ["Cash-out", fmt(C0)], ["Part cédée", partVendue + " %"]]} onEdit={() => setDone(false)} />
            <div className="msc-grid2" style={{ marginTop: 16 }}>
              <Panel tone="dark" eyebrow="Sphère personnelle" title="Vos liquidités">
                <div style={{ fontFamily: BODY, fontSize: 12.5, color: "#9ea7a0", marginBottom: 6 }}>Disponibles sur votre compte personnel</div>
                <CountEuro value={C0} run={reveal} style={{ fontFamily: SERIF, fontSize: "clamp(32px,4.6vw,56px)", fontWeight: 500, color: "#fff", letterSpacing: "-0.01em", lineHeight: 1 }} />
                <div style={{ fontFamily: BODY, fontSize: 13, color: C.sauge, fontWeight: 600, marginTop: 10 }}>avant imposition de la plus-value</div>
                <div style={{ fontFamily: BODY, fontSize: 13, color: "#9ea7a0", marginTop: 4 }}>≈ {fmt(netApresPV)} net après PFU 30 % (indicatif, hors abattements / apport-cession)</div>
              </Panel>
              <Panel tone="light" eyebrow="Sphère professionnelle" title="Le remboursement">
                <p style={{ fontFamily: BODY, fontSize: 15, color: "#2c2e2d", lineHeight: 1.65, margin: 0 }}>
                  La nouvelle holding lève une dette de <b>{fmt(C0)}</b> pour vous payer. Cette dette est ensuite remboursée par les <b>dividendes futurs</b> de l'entreprise, remontés sans frottement notable (régime mère-fille).
                </p>
                <p style={{ fontFamily: BODY, fontSize: 13.5, color: C.gris, lineHeight: 1.6, margin: "14px 0 0" }}>
                  Votre outil de travail finance lui-même l'extraction de votre patrimoine personnel.
                </p>
              </Panel>
            </div>

            <Doctrine open={reveal} eyebrow="Le message d'ingénierie" title="Sécuriser les fruits de votre travail, sans lâcher la barre" accent={C.sauge}>
              <p style={{ margin: 0 }}>Vous rendez liquide une partie de la valeur créée tout en conservant la <b style={{ color: "#fff" }}>direction de votre groupe</b>. La gouvernance de la holding (parts de préférence à droit de vote renforcé, statuts sur-mesure) verrouille le contrôle décisionnel — dans le respect de la prohibition des clauses léonines : chaque catégorie de titres conserve un droit minimal aux résultats et au vote.</p>
            </Doctrine>

            <ProsCons open={reveal}
              pour={["Vous transformez une partie de votre entreprise en liquidités, sans la vendre.", "Vous conservez la direction du groupe.", "La dette est remboursée par les dividendes futurs de la société."]}
              contre={["La plus-value de cession reste imposable au moment de l'opération.", "L'entreprise doit générer assez de bénéfices pour rembourser la dette.", "Opération encadrée : valorisation, banque, gouvernance à bâtir avec soin."]} />

            <CTAEmail label="Étudier la faisabilité de mon OBO" note="Modélisation complète (dette, dividendes, gouvernance) après prise de contact." />
          </div>}
      </Shell>);
  }

  function OBOSchema({ reveal, cash }) {
    return (
      <div style={{ marginTop: 22, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
        <Eyebrow>Schéma de l'opération · plan d'architecte</Eyebrow>
        <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 18px" }}>La vente à soi-même</h3>
        <svg viewBox="0 0 760 320" style={{ width: "100%", height: "auto", display: "block" }} role="img" aria-label="Schéma OBO">
          <Defs />
          {/* dirigeant cède titres -> holding */}
          <Flow d="M 175 96 L 175 150 L 300 150" on={reveal} delay={0.1} />
          <Lbl x={200} y={140} on={reveal} delay={0.5} anchor="start">Cession de titres</Lbl>
          {/* banque -> holding (dette) */}
          <Flow d="M 690 96 L 690 150 L 470 150" on={reveal} delay={0.8} w={1.8} />
          <Lbl x={560} y={140} on={reveal} delay={1.2} color={C.saugeF} anchor="start">Dette {fmt(cash)}</Lbl>
          {/* holding -> dirigeant (paiement) */}
          <Flow d="M 320 178 L 320 230 L 175 230 L 175 112" on={reveal} delay={1.5} dash color={C.ardoise} />
          <Lbl x={240} y={248} on={reveal} delay={1.9} color={C.ardoise}>Paiement {fmt(cash)}</Lbl>
          {/* cible -> holding (dividendes) */}
          <Flow d="M 560 290 L 420 290 L 420 184" on={reveal} delay={2.1} dash />
          <Lbl x={500} y={282} on={reveal} delay={2.5} anchor="start">Dividendes → remboursement</Lbl>

          <Box x={70} y={66} w={210} h={46} lines={["LE DIRIGEANT"]} />
          <Box x={300} y={120} w={170} h={64} lines={["NOUVELLE", "HOLDING"]} />
          <Box x={600} y={66} w={130} h={46} lines={["BANQUE"]} />
          <Box x={545} y={262} w={210} h={56} lines={["SOCIÉTÉ", "(OUTIL DE TRAVAIL)"]} />
        </svg>
      </div>);
  }

  // ---- éléments partagés locaux ----
  function ParamRecap({ items, onEdit }) {
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap", border: `1px solid ${C.trait}`, background: C.albatre, padding: "14px 18px" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 26 }}>
          {items.map((it) =>
            <div key={it[0]} style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <span style={{ fontFamily: BODY, fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>{it[0]}</span>
              <span style={{ fontFamily: BODY, fontSize: 15, color: C.encre, fontWeight: 600 }}>{it[1]}</span>
            </div>)}
        </div>
        <button onClick={onEdit} style={{ fontFamily: BODY, fontSize: 13, fontWeight: 600, color: C.ardoiseF, background: "none", border: "none", cursor: "pointer", padding: 0, whiteSpace: "nowrap" }}>↺ Modifier</button>
      </div>);
  }

  function Panel({ tone, eyebrow, title, children }) {
    const dark = tone === "dark";
    return (
      <div style={{ border: dark ? `1px solid ${C.saugeF}` : `1px solid ${C.trait}`, background: dark ? C.encre : C.blanc, color: dark ? "#fff" : C.encre, padding: "clamp(22px,3vw,32px)", display: "flex", flexDirection: "column" }}>
        <Eyebrow color={dark ? C.sauge : C.ardoise}>{eyebrow}</Eyebrow>
        <h3 style={{ fontFamily: SERIF, fontSize: 22, fontWeight: 500, margin: "10px 0 16px", letterSpacing: "-0.01em", color: dark ? "#fff" : C.encre }}>{title}</h3>
        {children}
      </div>);
  }

  function Synth({ reveal, value, label, sub }) {
    return (
      <div className={"msc-soft" + (reveal ? " on" : "")} style={{ transitionDelay: ".2s", marginTop: 22, border: `1px solid ${C.trait}`, background: C.albatre, padding: "clamp(22px,3vw,32px)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 30, flexWrap: "wrap" }}>
        <div style={{ fontFamily: BODY, fontSize: 14, color: C.gris, lineHeight: 1.5, maxWidth: "30em" }}>{sub}</div>
        <div style={{ textAlign: "right" }}>
          <CountEuro value={value > 0 ? value : 0} run={reveal} style={{ fontFamily: SERIF, fontSize: "clamp(30px,4vw,48px)", fontWeight: 500, color: C.saugeF, letterSpacing: "-0.01em" }} />
          <div style={{ fontFamily: BODY, fontSize: 13, color: C.gris, marginTop: 2 }}>{label}</div>
        </div>
      </div>);
  }

  window.DutreilSimulator = DutreilSimulator;
  window.LBOSimulator = LBOSimulator;
  window.OBOSimulator = OBOSimulator;
  window.__mscShared = { ParamRecap, Panel, Synth, Defs, Box, Flow, Lbl };
})();
