// ============================================================
// Monarch — Simulateurs : Management Fees · Désimbrication immobilière
// Requiert window.MSC (simcore.jsx) et window.__mscShared (simulators2.jsx).
// ============================================================

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

  function shared() { return window.__mscShared; }

  function injectExtra() {
    if (document.getElementById("msc-extra")) return;
    const s = document.createElement("style");
    s.id = "msc-extra";
    s.textContent = `@keyframes mscPulse{0%,100%{opacity:.3}50%{opacity:1}} .msc-pulse{animation:mscPulse 1.6s ease-in-out infinite;}`;
    document.head.appendChild(s);
  }

  // =====================================================
  // 4. MANAGEMENT FEES
  // =====================================================
  function ManagementFeesSimulator() {
    useEffect(() => { injectCore(); injectExtra(); }, []);
    const { ParamRecap, Panel, Defs, Box, Flow, Lbl } = shared();
    const [ca, setCa] = useState(1500000);
    const [benef, setBenef] = useState(200000);
    const [fees, setFees] = useState(50000);
    const [done, setDone] = useState(false);
    const [busy, setBusy] = useState(false);
    const reveal = useReveal(done, 250);

    const B = Math.max(0, Number(benef) || 0);
    const F = Math.min(Math.max(0, Number(fees) || 0), B);
    const isSans = IS(B);
    const isAvec = IS(B - F);
    const econ = isSans - isAvec;

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

    return (
      <Shell eyebrow="Flux intra-groupe · Management fees"
        title="Centraliser la trésorerie et optimiser l'IS de la filiale."
        intro="Une convention de prestations bien construite déduit une charge réelle chez la filiale et remonte la trésorerie vers la holding.">
        {!done &&
          <InputsCard onCompute={go} computing={busy} label="Calculer l'impact">
            <div><Label>Chiffre d'affaires de la filiale</Label><MoneyInput value={ca} onChange={setCa} min={100000} max={20000000} step={50000} /></div>
            <div><Label>Bénéfice avant impôt (et avant fees)</Label><MoneyInput value={benef} onChange={setBenef} min={0} max={5000000} step={10000} /></div>
            <div style={{ gridColumn: "1 / -1" }}><Label>Prestations annuelles facturées par la holding</Label><MoneyInput value={fees} onChange={setFees} min={0} max={Math.max(10000, B)} step={5000} /></div>
          </InputsCard>}

        {done &&
          <div style={{ marginTop: 36 }}>
            <ParamRecap items={[["CA filiale", fmt(ca)], ["Bénéfice", fmt(B)], ["Fees", fmt(F)]]} onEdit={() => setDone(false)} />

            <div style={{ marginTop: 16, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
              <Eyebrow>Le vase communicant</Eyebrow>
              <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 6px" }}>Le flux de prestations</h3>
              <p style={{ fontFamily: BODY, fontSize: 14.5, color: C.gris, lineHeight: 1.6, margin: "0 0 20px", maxWidth: "44em" }}>La société d'exploitation verse <b style={{ color: C.encre }}>{fmt(F)}</b> de management fees à la holding animatrice : une charge déductible chez la filiale, une trésorerie centralisée en haut du groupe.</p>
              <div className="msc-grid2" style={{ marginTop: 8 }}>
                <ImpactCard label="Économie d'IS mécanique sur la filiale" value={econ} run={reveal} sub={`Bénéfice taxable ramené de ${fmt(B)} à ${fmt(B - F)}`} />
                <ImpactCard label="Trésorerie centralisée dans la holding" value={F} run={reveal} good sub="pour réinvestissement ou rémunération centralisée" />
              </div>
              <p style={{ fontFamily: BODY, fontSize: 12.5, color: C.grisC, lineHeight: 1.6, margin: "16px 0 0" }}>
                Note : ces honoraires constituent un produit imposable chez la holding ; l'économie nette au niveau du groupe dépend de son résultat. L'enjeu décisif reste la substance juridique du flux.
              </p>
            </div>

            <Alert open={reveal} title="Le risque de l'acte anormal de gestion">
              <p style={{ margin: 0 }}>Fixer un montant de management fees n'est qu'un calcul. La validation fiscale exige une <b>matérialité juridique irréprochable</b> : éviter les doublons avec les fonctions de mandataire social, justifier la méthode de refacturation, et prouver l'animation effective du groupe. Le cabinet sécurise et rédige la substance de ces conventions pour rendre ce flux inattaquable.</p>
            </Alert>

            <ProsCons open={reveal}
              pour={["Fait baisser l'impôt sur les bénéfices de la filiale (charge déductible).", "Centralise la trésorerie dans la holding pour la réinvestir.", "Permet de mutualiser des fonctions (direction, gestion) au niveau du groupe."]}
              contre={["Les honoraires sont un produit imposable chez la holding : l'économie nette est partielle.", "L'administration vérifie la réalité des prestations (risque de redressement).", "Conventions à rédiger et justifier rigoureusement."]} />

            <CTAEmail label="Demander l'audit de mes conventions réglementées" note="Revue de la substance et des conventions communiquée après prise de contact." />
          </div>}
      </Shell>);
  }

  function ImpactCard({ label, value, run, sub, good }) {
    return (
      <div style={{ border: `1px solid ${C.trait}`, background: C.albatre, padding: "20px 22px" }}>
        <div style={{ fontFamily: BODY, fontSize: 12.5, color: C.gris, marginBottom: 8 }}>{label}</div>
        <CountEuro value={value} run={run} style={{ fontFamily: SERIF, fontSize: "clamp(26px,3.4vw,38px)", fontWeight: 500, color: good ? C.saugeF : C.encre, letterSpacing: "-0.01em", lineHeight: 1 }} />
        {sub && <div style={{ fontFamily: BODY, fontSize: 12.5, color: C.grisC, marginTop: 8, lineHeight: 1.5 }}>{sub}</div>}
      </div>);
  }

  // =====================================================
  // 5. DÉSIMBRICATION IMMOBILIÈRE
  // =====================================================
  function RealEstateSpinOffSimulator() {
    useEffect(() => { injectCore(); injectExtra(); }, []);
    const { ParamRecap, Defs, Box, Flow, Lbl } = shared();
    const [activite, setActivite] = useState(1000000);
    const [murs, setMurs] = useState(600000);
    const [loyer, setLoyer] = useState(48000);
    const [done, setDone] = useState(false);
    const [busy, setBusy] = useState(false);
    const reveal = useReveal(done, 250);

    const A = Math.max(0, Number(activite) || 0);
    const Mu = Math.max(0, Number(murs) || 0);
    const L = Math.max(0, Number(loyer) || 0);
    const global = A + Mu;
    const isEcon = L * 0.25;

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

    return (
      <Shell eyebrow="Protection d'actifs · Désimbrication immobilière"
        title="Sortir les murs du risque de l'exploitation."
        intro="Conserver l'immobilier au bilan de la société commerciale l'expose à ses créanciers et alourdit la cession. La désimbrication sanctuarise les murs.">
        {!done &&
          <InputsCard onCompute={go} computing={busy} label="Diagnostiquer">
            <div><Label>Valorisation de l'outil de travail</Label><MoneyInput value={activite} onChange={setActivite} min={100000} max={20000000} step={50000} /></div>
            <div><Label>Valeur des murs professionnels</Label><MoneyInput value={murs} onChange={setMurs} min={0} max={10000000} step={50000} /></div>
            <div style={{ gridColumn: "1 / -1" }}><Label>Loyer annuel estimé (post-désimbrication)</Label><MoneyInput value={loyer} onChange={setLoyer} min={0} max={500000} step={2000} /></div>
          </InputsCard>}

        {done &&
          <div style={{ marginTop: 36 }}>
            <ParamRecap items={[["Activité", fmt(A)], ["Murs", fmt(Mu)], ["Loyer/an", fmt(L)]]} onEdit={() => setDone(false)} />

            {/* PHASE 1 — statu quo */}
            <div style={{ marginTop: 16, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
                <Eyebrow color={C.ardoise}>Phase 1 · le statu quo</Eyebrow>
                <span className="msc-pulse" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 18, height: 18, border: `1px solid ${C.encre}`, fontFamily: SERIF, fontSize: 12, color: C.encre }}>!</span>
              </div>
              <svg viewBox="0 0 760 130" style={{ width: "100%", height: "auto", display: "block", marginBottom: 14 }} role="img" aria-label="Société globale imbriquée">
                <Defs />
                <Box x={210} y={26} w={340} h={78} lines={["SOCIÉTÉ GLOBALE", fmt(global)]} />
                <text x={380} y={120} fontFamily="'Archivo',sans-serif" fontSize="10.5" fill={C.ardoise} textAnchor="middle" letterSpacing="0.05em">activité + murs imbriqués dans la même entité</text>
              </svg>
              <p style={{ fontFamily: BODY, fontSize: 14.5, color: "#2c2e2d", lineHeight: 1.7, margin: 0, maxWidth: "46em" }}>
                Vos murs sont exposés au risque de votre exploitation (créanciers, défaillance). En cas de cession de l'activité, le repreneur refusera d'acheter l'immobilier : vous devrez extraire les murs dans l'urgence, déclenchant l'imposition immédiate des plus-values latentes et paralysant la vente.
              </p>
            </div>

            {/* PHASE 2 — ingénierie */}
            <div className={"msc-soft" + (reveal ? " on" : "")} style={{ transitionDelay: ".3s", marginTop: 22, border: `1px solid ${C.saugeF}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
              <Eyebrow color={C.sauge}>Phase 2 · la désimbrication (OBO immobilier)</Eyebrow>
              <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 18px" }}>Deux entités, deux risques séparés</h3>
              <svg viewBox="0 0 760 320" style={{ width: "100%", height: "auto", display: "block" }} role="img" aria-label="Schéma de désimbrication">
                <Defs />
                {/* holding contrôle SCI */}
                <Flow d="M 560 96 L 560 200" on={reveal} delay={0.2} />
                <Lbl x={620} y={150} on={reveal} delay={0.7} anchor="start">détient &amp; contrôle</Lbl>
                {/* SCI rachète les murs à l'OPCO */}
                <Flow d="M 505 232 L 255 232" on={reveal} delay={1.0} />
                <Lbl x={380} y={222} on={reveal} delay={1.5}>Rachat des murs</Lbl>
                {/* OPCO paie un loyer à la SCI */}
                <Flow d="M 255 262 L 505 262" on={reveal} delay={1.8} dash color={C.ardoise} />
                <Lbl x={380} y={282} on={reveal} delay={2.2} color={C.ardoise}>Loyer (déductible) {fmt(L)}/an</Lbl>

                <Box x={440} y={56} w={240} h={46} lines={["HOLDING"]} />
                <Box x={60} y={208} w={200} h={78} lines={["OPCO", fmt(A)]} />
                <Box x={505} y={208} w={210} h={78} lines={["SCI PATRIMONIALE", fmt(Mu)]} />
              </svg>
              <div className="msc-grid2" style={{ marginTop: 10 }}>
                <ImpactCard label="Baisse de l'IS de l'exploitation (loyers déductibles)" value={isEcon} run={reveal} good sub="par an" />
                <div style={{ border: `1px solid ${C.trait}`, background: C.albatre, padding: "20px 22px" }}>
                  <div style={{ fontFamily: BODY, fontSize: 12.5, color: C.gris, marginBottom: 8 }}>Et aussi</div>
                  <ul style={{ fontFamily: BODY, fontSize: 13.5, color: "#2c2e2d", lineHeight: 1.6, margin: 0, paddingLeft: 18 }}>
                    <li>Une rente immobilière personnelle qui rembourse l'emprunt de la SCI.</li>
                    <li>Un outil de travail purifié, liquide et attractif pour un repreneur.</li>
                  </ul>
                </div>
              </div>
            </div>

            <Doctrine open={reveal} eyebrow="La ligne doctrinale Monarch" title="Une désimbrication n'a de valeur que si la gouvernance est blindée" accent={C.sauge}>
              <p style={{ margin: 0 }}>Lors de la structuration de la SCI, la pratique standard suggère souvent un démembrement croisé ou simple des parts. Nous l'écartons. La désimbrication doit s'accompagner d'une gouvernance sur-mesure (statuts, <b style={{ color: "#fff" }}>parts de préférence à droit de vote renforcé</b>) pour que la holding conserve le <b style={{ color: "#fff" }}>contrôle décisionnel</b> de la SCI — sans affaiblir votre qualité d'associé et dans le respect de la prohibition des clauses léonines.</p>
            </Doctrine>

            <ProsCons open={reveal}
              pour={["Met les murs à l'abri du risque de l'exploitation (créanciers).", "Les loyers versés par la société réduisent son impôt.", "Rend l'entreprise plus simple à vendre (sans l'immobilier)."]}
              contre={["Sortir les murs peut déclencher une imposition de la plus-value.", "Crée une SCI à gérer (compta, déclarations).", "Loyers perçus par la SCI : imposables selon le régime choisi."]} />

            <CTAEmail label="Étudier la faisabilité de ma désimbrication" note="Diagnostic plus-values et schéma SCI communiqués après prise de contact." />
          </div>}
      </Shell>);
  }

  window.ManagementFeesSimulator = ManagementFeesSimulator;
  window.RealEstateSpinOffSimulator = RealEstateSpinOffSimulator;
})();