// ============================================================
// PaperDohoda — Dohoda rodičov o úprave výkonu rodičovských
// práv a povinností k maloletým deťom (§ 24 ods. 3 ZoR).
// Schvaľovaná súdom v konaní vo veciach starostlivosti
// o maloletých (§ 100 a nasl., § 112 CMP) — samostatný návrh
// na schválenie sa podáva osobitne; v dohode sa súd neuvádza.
// ============================================================

// ============================================================
// Helpery — singulár/plurál + rodinnoprávne role.
// ============================================================
const DETI_SLOVO_DOH = {
  sg: { nom: 'maloleté dieťa', gen: 'maloletého dieťaťa', dat: 'maloletému dieťaťu', ak: 'maloleté dieťa', lok: 'maloletom dieťati', instr: 'maloletým dieťaťom' },
  pl: { nom: 'maloleté deti',  gen: 'maloletých detí',    dat: 'maloletým deťom',    ak: 'maloleté deti',  lok: 'maloletých deťoch', instr: 'maloletými deťmi' },
};
const detiSlovoDoh = (pocet, pad = 'nom') => DETI_SLOVO_DOH[pocet === 1 ? 'sg' : 'pl'][pad];

const ROLA_DOH = {
  matka: { nom: 'matka', gen: 'matky', dat: 'matke',  ak: 'matku',  lok: 'matke',  instr: 'matkou' },
  otec:  { nom: 'otec',  gen: 'otca',  dat: 'otcovi', ak: 'otca',   lok: 'otcovi', instr: 'otcom' },
};
const rolaPad = (key, pad = 'nom') => ROLA_DOH[key][pad];
const rolaCap = (key, pad = 'nom') => {
  const s = rolaPad(key, pad);
  return s.charAt(0).toUpperCase() + s.slice(1);
};
// Prvý-rodič v hlavičke: pohlavie 'muz' → otec, 'zena' → matka. Druhý je opak.
const prvyKey = (pohlavie) => pohlavie === 'muz' ? 'otec' : 'matka';
const druhyKey = (pohlavie) => pohlavie === 'muz' ? 'matka' : 'otec';

const bolo = (pocet) => pocet === 1 ? 'bolo' : 'boli';
const detiSlovoZv = (pocet) => pocet === 1 ? 'zveruje' : 'zverujú';

// ============================================================
// Sample texty — striedavka 4 sekcie (rovnaké ako PaperDeti, len text bez petitu).
// Plus záverečná veta o odovzdaní.
// ============================================================
const sampleStriedavka_BeznyDoh = (p) =>
  `S výnimkou osobitnej úpravy počas letných, zimných a veľkonočných prázdnin ${p === 1 ? 'bude' : 'budú'} ${detiSlovoDoh(p, 'nom')} v osobnej starostlivosti matky každý párny kalendárny týždeň od pondelka od 8:00 hod. do nasledujúceho pondelka nepárneho kalendárneho týždňa do 8:00 hod. a v osobnej starostlivosti otca každý nepárny kalendárny týždeň od pondelka od 8:00 hod. do nasledujúceho pondelka párneho kalendárneho týždňa do 8:00 hod.`;
const sampleStriedavka_LetneDoh = (p) =>
  `Počas letných prázdnin ${p === 1 ? 'bude' : 'budú'} ${detiSlovoDoh(p, 'nom')} v osobnej starostlivosti matky v každom kalendárnom roku vždy od 15. 7. od 19:00 hod. do 1. 8. do 9:00 hod. a od 15. 8. od 19:00 hod. do 31. 8. do 19:00 hod. V osobnej starostlivosti otca ${p === 1 ? 'bude' : 'budú'} ${detiSlovoDoh(p, 'nom')} v každom kalendárnom roku vždy od 1. 7. od 9:00 hod. do 15. 7. do 19:00 hod. a od 1. 8. od 9:00 hod. do 15. 8. do 19:00 hod.`;
const sampleStriedavka_ZimneDoh = (p) =>
  `Počas zimných prázdnin ${p === 1 ? 'bude' : 'budú'} ${detiSlovoDoh(p, 'nom')} v nepárnom kalendárnom roku v osobnej starostlivosti otca od 24. 12. od 16:00 hod. do 25. 12. do 18:00 hod., matky od 25. 12. od 18:00 hod. do 1. 1. nasledujúceho párneho roka do 10:00 hod., otca od 1. 1. párneho roka od 10:00 hod. do 6. 1. do 18:00 hod. V párnom kalendárnom roku ${p === 1 ? 'bude' : 'budú'} ${detiSlovoDoh(p, 'nom')} v osobnej starostlivosti matky od 24. 12. od 16:00 hod. do 25. 12. do 18:00 hod., otca od 25. 12. od 18:00 hod. do 1. 1. nasledujúceho nepárneho roka do 10:00 hod., matky od 1. 1. nepárneho roka od 10:00 hod. do 6. 1. do 18:00 hod.`;
const sampleStriedavka_VelkonocneDoh = (p) =>
  `Počas veľkonočných prázdnin ${p === 1 ? 'bude' : 'budú'} ${detiSlovoDoh(p, 'nom')} v osobnej starostlivosti matky každý párny kalendárny rok od Zeleného štvrtka od 10:00 hod. do Veľkonočného pondelka do 14:00 hod. a v osobnej starostlivosti otca každý nepárny kalendárny rok od Zeleného štvrtka od 10:00 hod. do Veľkonočného pondelka do 14:00 hod.`;
const sampleVetaOdovzdanieDoh = (p) =>
  `Miestom prevzatia a odovzdania ${detiSlovoDoh(p, 'gen')} bude predškolské alebo školské zariadenie, ktoré ${p === 1 ? 'maloletý navštevuje' : 'maloletí navštevujú'}, a v čase ${p === 1 ? 'jeho' : 'ich'} neprítomnosti v tomto zariadení bydlisko odovzdávajúceho rodiča.`;

const sampleStriedavkaJoinedDoh = (typ, p) => {
  const bezny = typ === 'vlastne'
    ? '[Vyplňte vlastný režim striedania - pozor režim musí byť napísaný tak, aby bol vykonateľný.]'
    : sampleStriedavka_BeznyDoh(p);
  return [
    bezny,
    sampleStriedavka_LetneDoh(p),
    sampleStriedavka_ZimneDoh(p),
    sampleStriedavka_VelkonocneDoh(p),
    sampleVetaOdovzdanieDoh(p),
  ].join('\n\n');
};

// Spoločná starostlivosť — sample text v dohodovom jazyku.
// Druhá veta o komunikácii bola odstránená — pri dohode je redundantná
// (samotný akt uzavretia dohody implikuje komunikáciu rodičov).
const sampleSpolocnaDoh = (p) =>
  `Účastníci dohody sa dohodli, že ${bolo(p)} ${detiSlovoDoh(p, 'nom')} zverené do spoločnej osobnej starostlivosti oboch rodičov podľa § 24 ods. 2 zákona č. 36/2005 Z. z. o rodine.`;

// Styk — 4 sekcie + odovzdanie. nezverenyKey = 'matka' | 'otec'.
const sampleStyk_Bezny = (nezverenyKey, p) => {
  const opr = nezverenyKey === 'matka' ? 'oprávnená' : 'oprávnený';
  const cap = nezverenyKey === 'matka' ? 'Matka' : 'Otec';
  return `${cap} je ${opr} stýkať sa s ${detiSlovoDoh(p, 'instr')} každý párny kalendárny týždeň od piatka od 16:00 hod. do nedele do 19:00 hod. a každý kalendárny týždeň v utorok od 15:00 hod. do 19:00 hod.`;
};
const sampleStyk_Letne = (nezverenyKey, p) => {
  const opr = nezverenyKey === 'matka' ? 'oprávnená' : 'oprávnený';
  const cap = nezverenyKey === 'matka' ? 'Matka' : 'Otec';
  if (nezverenyKey === 'otec') {
    return `${cap} je ${opr} stýkať sa s ${detiSlovoDoh(p, 'instr')} v každom kalendárnom roku vždy od 1. 7. od 9:00 hod. do 15. 7. do 19:00 hod. a od 1. 8. od 9:00 hod. do 15. 8. do 19:00 hod.`;
  }
  return `${cap} je ${opr} stýkať sa s ${detiSlovoDoh(p, 'instr')} v každom kalendárnom roku vždy od 15. 7. od 19:00 hod. do 1. 8. do 9:00 hod. a od 15. 8. od 19:00 hod. do 31. 8. do 19:00 hod.`;
};
const sampleStyk_Zimne = (nezverenyKey, p) => {
  const opr = nezverenyKey === 'matka' ? 'oprávnená' : 'oprávnený';
  const cap = nezverenyKey === 'matka' ? 'Matka' : 'Otec';
  if (nezverenyKey === 'otec') {
    return `${cap} je ${opr} stýkať sa s ${detiSlovoDoh(p, 'instr')} v nepárnom kalendárnom roku od 24. 12. od 16:00 hod. do 25. 12. do 18:00 hod. a od 1. 1. párneho roka od 10:00 hod. do 6. 1. do 18:00 hod. V párnom kalendárnom roku od 25. 12. od 18:00 hod. do 1. 1. nasledujúceho nepárneho roka do 10:00 hod.`;
  }
  return `${cap} je ${opr} stýkať sa s ${detiSlovoDoh(p, 'instr')} v nepárnom kalendárnom roku od 25. 12. od 18:00 hod. do 1. 1. nasledujúceho párneho roka do 10:00 hod. V párnom kalendárnom roku od 24. 12. od 16:00 hod. do 25. 12. do 18:00 hod. a od 1. 1. nepárneho roka od 10:00 hod. do 6. 1. do 18:00 hod.`;
};
const sampleStyk_Velkonocne = (nezverenyKey, p) => {
  const opr = nezverenyKey === 'matka' ? 'oprávnená' : 'oprávnený';
  const cap = nezverenyKey === 'matka' ? 'Matka' : 'Otec';
  const par = nezverenyKey === 'matka' ? 'párny' : 'nepárny';
  return `${cap} je ${opr} stýkať sa s ${detiSlovoDoh(p, 'instr')} každý ${par} kalendárny rok od Zeleného štvrtka od 10:00 hod. do Veľkonočného pondelka do 14:00 hod.`;
};
const sampleStykJoinedDoh = (nezverenyKey, p) => [
  sampleStyk_Bezny(nezverenyKey, p),
  sampleStyk_Letne(nezverenyKey, p),
  sampleStyk_Zimne(nezverenyKey, p),
  sampleStyk_Velkonocne(nezverenyKey, p),
  sampleVetaOdovzdanieDoh(p),
].join('\n\n');

// ============================================================
// Voliteľné body Čl. II — zaškrtnuteľné s pred-vyplnenými sample textami.
// ============================================================
const VOLITELNE_BODY = [
  { id: 'komunikacia', label: 'Komunikácia medzi rodičmi vo veciach dieťaťa',
    sample: (p) => `Účastníci dohody sa dohodli, že vo veciach týkajúcich sa ${detiSlovoDoh(p, 'gen')} budú spolu komunikovať pravidelne a bezodkladne, a to prostredníctvom telefónu, SMS, e-mailu alebo aplikácie WhatsApp. V prípade, že druhý rodič nereaguje do 24 hodín, je možné využiť aj osobné stretnutie.` },
  { id: 'aktivity', label: 'Účasť na školských a športových aktivitách',
    sample: (p) => `Účastníci dohody sa dohodli, že obaja rodičia majú právo zúčastňovať sa všetkých školských, mimoškolských, športových a kultúrnych aktivít ${detiSlovoDoh(p, 'gen')}, vrátane rodičovských združení, vystúpení, súťaží a školských akcií, bez ohľadu na to, ktorý rodič má ${detiSlovoDoh(p, 'ak')} v danom čase v osobnej starostlivosti.` },
  { id: 'cestovanie', label: 'Cestovanie do zahraničia s dieťaťom',
    sample: (p) => `Účastníci dohody sa dohodli, že každý rodič je povinný informovať druhého rodiča o cestovaní s ${detiSlovoDoh(p, 'instr')} do zahraničia najmenej 14 dní vopred. Druhý rodič vyjadrí súhlas s cestovaním, pokiaľ tomu nebránia objektívne dôvody (napríklad zdravotný stav dieťaťa). V prípade ciest mimo členských štátov Európskej únie je vždy potrebný písomný súhlas druhého rodiča.` },
  { id: 'zdravie', label: 'Zdravotná starostlivosť',
    sample: () => `Účastníci dohody sa dohodli, že o závažných zdravotných výkonoch (operácia, hospitalizácia, dlhodobá liečba) sa rodičia informujú vopred a rozhodujú o nich spoločne. Pri akútnych prípadoch má rodič, ktorý má dieťa v osobnej starostlivosti, právo rozhodnúť okamžite a druhého rodiča následne informovať. Výber pediatra, zubného lekára a špecialistov sa uskutoční po vzájomnej konzultácii.` },
  { id: 'skola', label: 'Výber školy a krúžkov',
    sample: (p) => `Účastníci dohody sa dohodli, že výber materskej školy, základnej školy, strednej školy, vysokej školy a mimoškolských krúžkov ${detiSlovoDoh(p, 'gen')} sa uskutoční po vzájomnej konzultácii a spoločnej dohode rodičov. Žiaden z rodičov nezmení vzdelávacie zariadenie ${detiSlovoDoh(p, 'gen')} bez súhlasu druhého rodiča.` },
  { id: 'nabozenstvo', label: 'Náboženská výchova',
    sample: (p) => `Účastníci dohody sa dohodli, že o náboženskej výchove ${detiSlovoDoh(p, 'gen')} budú rozhodovať spoločne. Žiaden z rodičov bez súhlasu druhého rodiča nezapíše dieťa na náboženské obrady, kurzy alebo aktivity.` },
  { id: 'respekt', label: 'Vzájomné rešpektovanie a komunikácia v prítomnosti dieťaťa',
    sample: (p) => `Účastníci dohody sa zaväzujú vzájomne sa rešpektovať a v prítomnosti ${detiSlovoDoh(p, 'gen')} sa zdržať akýchkoľvek hanlivých, dehonestujúcich alebo kritických vyjadrení voči druhému rodičovi. Účastníci dohody sa zaväzujú podporovať pozitívny vzťah ${detiSlovoDoh(p, 'gen')} k druhému rodičovi a k jeho rodinnému prostrediu.` },
  { id: 'vlastny', label: 'Vlastný bod',
    sample: () => '' },
];

// ============================================================
// Storage keys + defaults
// ============================================================
const KIDS_DOHODA_KEY = 'ziadostorozvod.kids-dohoda.v1';
const META_DOHODA_KEY = 'ziadostorozvod.meta-dohoda.v1';
const CL_DOHODA_KEY = 'ziadostorozvod.cl-dohoda.v1';

const newKidD = () => ({
  id: 'kid-' + Math.random().toString(36).slice(2, 9),
  meno: '',
  datumNarodenia: '',
  bytom: '',
});

const DEFAULT_CL_DOHODA = {
  // Default null — používateľ musí aktívne vybrať formu starostlivosti.
  // Sub-bod A potom zobrazí placeholder "[vyberte formu starostlivosti vyššie]".
  formaStarostlivosti: null,                // null | 'a' | 'b' | 'c'
  zvereniePri_a: 'matka',                   // 'matka' | 'otec'
  typStriedania: '1tyz',                    // '1tyz' | 'vlastne'
  rezimVyzivnehoPri_b: 'i',                 // 'i' | 'ii'
  rezimVyzivnehoPri_c: 'ii',
  ktoSaZavauje_b: 'otec',                   // 'matka' | 'otec' — pri (b)/(c) variant (i)
  ktoSaZavauje_c: 'otec',
  vyzivne: {},                              // { [kidId]: { suma } }
  styk: 'i',                                // 'i' | 'ii'
  zastupovanie: 'obaja',                    // 'obaja' | 'matka' | 'otec' — default vždy 'obaja'
  userTouchedZastupovanie: false,
  volitelne: {                              // checkboxy voliteľných bodov
    komunikacia: false, aktivity: false, cestovanie: false, zdravie: false,
    skola: false, nabozenstvo: false, respekt: false, vlastny: false,
  },
};

const DEFAULT_VYZIVNE_ROW_DOH = { suma: '' };

// ============================================================
// SyncedEd — controlled inline contentEditable (rovnaký pattern ako PaperDeti).
// ============================================================
const SyncedEdD = ({ value, onChange, placeholder, lg, num, noPersist }) => {
  const ref = React.useRef(null);
  const isTypingRef = React.useRef(false);
  React.useEffect(() => {
    if (ref.current && !isTypingRef.current && ref.current.textContent !== value) {
      ref.current.textContent = value;
    }
    isTypingRef.current = false;
  }, [value]);
  const cls = ['ed', lg && 'ed-lg', num && 'ed-num', !value && 'ed-empty', noPersist && 'ed-no-persist'].filter(Boolean).join(' ');
  return (
    <span ref={ref} className={cls} contentEditable suppressContentEditableWarning
      onInput={(e) => { isTypingRef.current = true; onChange(e.currentTarget.textContent); }}
      data-placeholder={placeholder} role="textbox" aria-label={placeholder}
    />
  );
};

// Inline Ed (uncontrolled, persisted) — pre statické položky
const EdD = React.forwardRef(({ defaultValue = '', placeholder = '', lg, num, block }, ref) => {
  const [empty, setEmpty] = React.useState(true);
  const handleInput = (e) => setEmpty(e.currentTarget.textContent.length === 0);
  const cls = ['ed', lg && 'ed-lg', num && 'ed-num', block && 'ed-block', empty && 'ed-empty'].filter(Boolean).join(' ');
  return (
    <span ref={ref} className={cls} contentEditable suppressContentEditableWarning
      onInput={handleInput} data-placeholder={placeholder} role="textbox" aria-label={placeholder} />
  );
});

// TipBtn — context z GenApp
const TipContextD = (window.TipContext = window.TipContext || React.createContext({ activeTipKey: null, onTipClick: () => {} }));
const TipBtnD = ({ pointKey }) => {
  const ctx = React.useContext(TipContextD);
  const ref = React.useRef(null);
  const [topPx, setTopPx] = React.useState(0);
  React.useLayoutEffect(() => {
    const button = ref.current;
    if (!button) return;
    const anchor = button.parentNode;
    const paper = button.closest('.paper');
    if (!paper || !anchor) return;
    const update = () => {
      let top = anchor.offsetTop;
      let p = anchor.offsetParent;
      while (p && p !== paper) { top += p.offsetTop; p = p.offsetParent; }
      setTopPx(top + 2);
    };
    update();
    const ro = new ResizeObserver(update);
    ro.observe(paper);
    window.addEventListener('resize', update);
    return () => { ro.disconnect(); window.removeEventListener('resize', update); };
  }, []);
  const isActive = ctx.activeTipKey === pointKey;
  return (
    <button ref={ref} type="button"
      className={'tip-pin no-print no-copy' + (isActive ? ' active' : '')}
      data-tip-key={pointKey}
      onClick={() => ctx.onTipClick && ctx.onTipClick(pointKey)}
      style={{ top: topPx + 'px' }}
    >TIP</button>
  );
};

// UsePatternButton — oxblood "Použiť tento text →"
// Mobile-safe trigger: onPointerDown vyvolá akciu okamžite (touch tap bez 300ms
// delay), preventDefault + stopPropagation zabránia bublinkovaniu kliku.
// onClick zachovaný pre keyboard (Tab + Enter). Akcia je idempotent.
const UsePatternButtonD = ({ onClick, children }) => {
  const trigger = (e) => {
    e.preventDefault();
    e.stopPropagation();
    onClick && onClick(e);
  };
  return (
    <button type="button" onPointerDown={trigger} onClick={trigger} style={{ fontSize: '0.85em', padding: '6px 14px', border: '1px solid var(--oxblood)', borderRadius: 'var(--r-sm)', background: 'var(--paper)', color: 'var(--oxblood)', cursor: 'pointer', fontWeight: 500 }}>
      {children || 'Použiť tento text →'}
    </button>
  );
};

// PetitPh — placeholder no-print
const PhD = ({ children }) => (
  <span className="no-copy no-print" style={{ fontStyle: 'italic', color: 'var(--ink-3)' }}>{children}</span>
);
const orPhD = (val, hint) => (val && String(val).trim()) ? val : <PhD>[{hint}]</PhD>;

// formatujKidsList — "{Meno, nar. dátum, bytom adresa}, [a] {Meno, nar. dátum, bytom adresa}"
// Bytom sa zobrazí len ak je vyplnené (aby pri prázdnom poli nevznikla "bytom ?" syntax).
const formatujKidsListDoh = (kids) => {
  if (!kids || kids.length === 0) return '';
  const renderKid = (k) => (
    <>
      {orPhD(k.meno, 'meno?')}, nar. {orPhD(k.datumNarodenia, 'dátum?')}
      {k.bytom && k.bytom.trim() ? <>, bytom {k.bytom}</> : null}
    </>
  );
  if (kids.length === 1) return renderKid(kids[0]);
  return (
    <>{kids.map((k, i) => (
      <React.Fragment key={k.id}>
        {renderKid(k)}
        {i === kids.length - 2 ? (kids.length === 2 ? ' a ' : ', a ') : (i < kids.length - 1 ? ', ' : '')}
      </React.Fragment>
    ))}</>
  );
};

// ============================================================
// PaperDohoda komponent
// ============================================================
const PaperDohoda = ({ doctype, setActiveArticle, setActiveTipKey, onTipClick, activeTipKey }) => {
  // Mená a údaje rodičov + sobáš
  const [menoMatka, setMenoMatka] = React.useState('');
  const [rodneMatka, setRodneMatka] = React.useState('');
  const [datNarMatka, setDatNarMatka] = React.useState('');
  const [pobytMatka, setPobytMatka] = React.useState('');
  // Občianstvo — default "SR"; Persist obnoví uloženú hodnotu cez input event
  // dispatch v restore(), takže ak používateľ nikdy nemenil, zostane "SR".
  const [obcianstvoMatka, setObcianstvoMatka] = React.useState('SR');
  const [menoOtec, setMenoOtec] = React.useState('');
  const [rodneOtec, setRodneOtec] = React.useState('');
  const [datNarOtec, setDatNarOtec] = React.useState('');
  const [pobytOtec, setPobytOtec] = React.useState('');
  const [obcianstvoOtec, setObcianstvoOtec] = React.useState('SR');

  const [datumSobasa, setDatumSobasa] = React.useState('');
  const [miestoSobasa, setMiestoSobasa] = React.useState('');
  // Miesto podpisu — samostatné pole, prázdne, placeholder "mesto"
  // (nezávislé od miesta sobáša, podpis sa môže udiať kdekoľvek).
  const [miestoPodpisu, setMiestoPodpisu] = React.useState('');
  const [maticnyUrad, setMaticnyUrad] = React.useState('');
  const [zvazok, setZvazok] = React.useState('');
  const [rocnik, setRocnik] = React.useState('');
  const [strana, setStrana] = React.useState('');
  const [poradoveCislo, setPoradoveCislo] = React.useState('');

  // Pohlavie prvého účastníka v hlavičke (pre poradie matka/otec)
  const [prvyPohlavie, setPrvyPohlavieRaw] = React.useState(() => {
    try {
      const raw = localStorage.getItem(META_DOHODA_KEY);
      if (raw) {
        const m = JSON.parse(raw);
        if (m && (m.prvyPohlavie === 'muz' || m.prvyPohlavie === 'zena')) return m.prvyPohlavie;
      }
    } catch (e) {}
    return 'muz';
  });
  React.useEffect(() => {
    try { localStorage.setItem(META_DOHODA_KEY, JSON.stringify({ prvyPohlavie })); } catch (e) {}
  }, [prvyPohlavie]);
  const setPrvyPohlavie = (p) => setPrvyPohlavieRaw(p);

  // Kids (rovnaká logika ako PaperDeti — vlastná serializácia)
  const [kids, setKids] = React.useState(() => {
    try {
      const raw = localStorage.getItem(KIDS_DOHODA_KEY);
      if (raw) {
        const parsed = JSON.parse(raw);
        if (Array.isArray(parsed) && parsed.length > 0) {
          return parsed.map(k => k && k.id ? { id: k.id, meno: k.meno || '', datumNarodenia: k.datumNarodenia || '', bytom: k.bytom || '' } : newKidD());
        }
      }
    } catch (e) {}
    return [newKidD()];
  });
  React.useEffect(() => { try { localStorage.setItem(KIDS_DOHODA_KEY, JSON.stringify(kids)); } catch (e) {} }, [kids]);
  const addKid = () => setKids(prev => [...prev, newKidD()]);
  const removeKid = (id) => setKids(prev => prev.length > 1 ? prev.filter(k => k.id !== id) : prev);
  const updateKid = (id, field, value) => setKids(prev => prev.map(k => k.id === id ? { ...k, [field]: value } : k));
  const filledKids = kids.filter(k => k.meno.trim() !== '' || k.datumNarodenia.trim() !== '' || (k.bytom || '').trim() !== '');
  const pCount = filledKids.length;

  // CL state
  const [cl, setCl] = React.useState(() => {
    try {
      const raw = localStorage.getItem(CL_DOHODA_KEY);
      if (raw) {
        const parsed = JSON.parse(raw);
        if (parsed && typeof parsed === 'object') {
          return { ...DEFAULT_CL_DOHODA, ...parsed, volitelne: { ...DEFAULT_CL_DOHODA.volitelne, ...(parsed.volitelne || {}) } };
        }
      }
    } catch (e) {}
    return DEFAULT_CL_DOHODA;
  });
  React.useEffect(() => { try { localStorage.setItem(CL_DOHODA_KEY, JSON.stringify(cl)); } catch (e) {} }, [cl]);

  // Cleanup výživné keys pri delete kid
  React.useEffect(() => {
    const validIds = new Set(kids.map(k => k.id));
    setCl(prev => {
      const filtered = Object.fromEntries(Object.entries(prev.vyzivne || {}).filter(([k]) => validIds.has(k)));
      if (Object.keys(filtered).length === Object.keys(prev.vyzivne || {}).length) return prev;
      return { ...prev, vyzivne: filtered };
    });
  }, [kids]);

  // Default zastupovania = obaja (kým userTouchedZastupovanie=false)
  React.useEffect(() => {
    if (cl.userTouchedZastupovanie) return;
    if (cl.zastupovanie !== 'obaja') setCl(prev => ({ ...prev, zastupovanie: 'obaja' }));
  }, [cl.userTouchedZastupovanie]);

  const setClField = (field, value) => setCl(prev => ({ ...prev, [field]: value }));
  const setZastupovanie = (val) => setCl(prev => ({ ...prev, zastupovanie: val, userTouchedZastupovanie: true }));
  const setVolitelny = (id, val) => setCl(prev => ({ ...prev, volitelne: { ...prev.volitelne, [id]: val } }));
  const setVyzivneSuma = (kidId, value) => setCl(prev => ({
    ...prev,
    vyzivne: { ...(prev.vyzivne || {}), [kidId]: { ...DEFAULT_VYZIVNE_ROW_DOH, ...((prev.vyzivne || {})[kidId] || {}), suma: value } },
  }));
  const getVyzivne = (kidId) => ({ ...DEFAULT_VYZIVNE_ROW_DOH, ...((cl.vyzivne || {})[kidId] || {}) });

  // Refs pre Ed bloky (striedavka, spoločná, styk + voliteľné body)
  const cl_striedanie_Ref = React.useRef(null);
  const cl_spolocna_Ref = React.useRef(null);
  const cl_styk_Ref = React.useRef(null);
  const cl_volitelne_Refs = React.useRef({});
  for (const vb of VOLITELNE_BODY) {
    if (!cl_volitelne_Refs.current[vb.id]) cl_volitelne_Refs.current[vb.id] = React.createRef();
  }
  // Auto-clear Ed bloku striedavky pri prepnutí typStriedania (1tyz ↔ vlastne).
  // Sentinel `undefined` na prvom behu — skip clearing, len zapíš aktuálnu
  // hodnotu (Persist medzitým môže obnoviť obsah, nesmieme prepísať).
  // Identický pattern s PaperDeti.jsx.
  const cl_typStr_typPrev = React.useRef();
  const [showSampleStr, setShowSampleStr] = React.useState(false);
  const [showSampleSpol, setShowSampleSpol] = React.useState(false);
  const [showSampleStyk, setShowSampleStyk] = React.useState(false);
  const [showSampleVol, setShowSampleVol] = React.useState({});

  React.useEffect(() => {
    if (cl_typStr_typPrev.current === undefined) {
      cl_typStr_typPrev.current = cl.typStriedania;
      return;
    }
    if (cl_typStr_typPrev.current === cl.typStriedania) return;
    cl_typStr_typPrev.current = cl.typStriedania;
    if (cl_striedanie_Ref.current) {
      cl_striedanie_Ref.current.textContent = '';
      cl_striedanie_Ref.current.dispatchEvent(new Event('input', { bubbles: true }));
    }
  }, [cl.typStriedania]);

  const fillSampleText = (refOrId, text) => {
    let ref = refOrId;
    if (typeof refOrId === 'string') {
      ref = cl_volitelne_Refs.current[refOrId];
    }
    if (ref?.current) {
      ref.current.textContent = text;
      ref.current.dispatchEvent(new Event('input', { bubbles: true }));
    }
  };

  // TipContext value
  const tipCtx = React.useMemo(() => ({ activeTipKey, onTipClick }), [activeTipKey, onTipClick]);

  // Scroll-spy pre articles
  React.useEffect(() => {
    const articles = document.querySelectorAll('.paper .article[id]');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setActiveArticle(e.target.id); });
    }, { rootMargin: '-35% 0px -55% 0px' });
    articles.forEach(a => obs.observe(a));
    const tipButtons = document.querySelectorAll('.paper [data-tip-key]');
    let currentKey = null;
    const pObs = new IntersectionObserver((entries) => {
      const hits = entries.filter(e => e.isIntersecting).map(e => ({ key: e.target.dataset.tipKey, top: e.boundingClientRect.top })).sort((a, b) => a.top - b.top);
      if (hits.length && hits[0].key !== currentKey) { currentKey = hits[0].key; setActiveTipKey && setActiveTipKey(currentKey); }
    }, { rootMargin: '-20% 0px -60% 0px' });
    tipButtons.forEach(btn => pObs.observe(btn));
    return () => { obs.disconnect(); pObs.disconnect(); };
  }, []);

  // Rodičovské role z pohlavia (mapping zachovaný z PaperDeti pre kompatibilitu existujúcich komponentov)
  // pri dohode: prvy === otec, druhy === matka (alebo opak)
  const prvyR = prvyKey(prvyPohlavie);   // 'otec' | 'matka'
  const druhyR = druhyKey(prvyPohlavie);

  // Mená v hlavičke (prvy/druhy podľa poradia)
  const menoPrvy = prvyR === 'otec' ? menoOtec : menoMatka;
  const setMenoPrvy = prvyR === 'otec' ? setMenoOtec : setMenoMatka;
  const rodnePrvy = prvyR === 'otec' ? rodneOtec : rodneMatka;
  const setRodnePrvy = prvyR === 'otec' ? setRodneOtec : setRodneMatka;
  const datNarPrvy = prvyR === 'otec' ? datNarOtec : datNarMatka;
  const setDatNarPrvy = prvyR === 'otec' ? setDatNarOtec : setDatNarMatka;
  const pobytPrvy = prvyR === 'otec' ? pobytOtec : pobytMatka;
  const setPobytPrvy = prvyR === 'otec' ? setPobytOtec : setPobytMatka;
  const obcianstvoPrvy = prvyR === 'otec' ? obcianstvoOtec : obcianstvoMatka;
  const setObcianstvoPrvy = prvyR === 'otec' ? setObcianstvoOtec : setObcianstvoMatka;

  const menoDruhy = druhyR === 'otec' ? menoOtec : menoMatka;
  const setMenoDruhy = druhyR === 'otec' ? setMenoOtec : setMenoMatka;
  const rodneDruhy = druhyR === 'otec' ? rodneOtec : rodneMatka;
  const setRodneDruhy = druhyR === 'otec' ? setRodneOtec : setRodneMatka;
  const datNarDruhy = druhyR === 'otec' ? datNarOtec : datNarMatka;
  const setDatNarDruhy = druhyR === 'otec' ? setDatNarOtec : setDatNarMatka;
  const pobytDruhy = druhyR === 'otec' ? pobytOtec : pobytMatka;
  const setPobytDruhy = druhyR === 'otec' ? setPobytOtec : setPobytMatka;
  const obcianstvoDruhy = druhyR === 'otec' ? obcianstvoOtec : obcianstvoMatka;
  const setObcianstvoDruhy = druhyR === 'otec' ? setObcianstvoOtec : setObcianstvoMatka;

  // Materializovaný text bodu A (zverenie).
  // Default null → placeholder; po výbere ktorejkoľvek možnosti sa zobrazí
  // materializovaný text v dohodovom jazyku ("Účastníci dohody sa dohodli...").
  const renderBodA = () => {
    if (cl.formaStarostlivosti === null) {
      return (
        <p className="no-copy no-print" style={{ margin: '8px 0', fontStyle: 'italic', color: 'var(--ink-3)' }}>
          [vyberte formu starostlivosti vyššie]
        </p>
      );
    }
    if (cl.formaStarostlivosti === 'a') {
      const komuKey = cl.zvereniePri_a; // 'matka' | 'otec'
      return (
        <p style={{ margin: '8px 0' }}>
          Účastníci dohody sa dohodli, že {detiSlovoDoh(pCount, 'nom')} {pCount > 0 ? formatujKidsListDoh(filledKids) : <PhD>[doplňte deti vyššie]</PhD>} sa {detiSlovoZv(pCount)} do osobnej starostlivosti {rolaPad(komuKey, 'gen')}.
        </p>
      );
    }
    if (cl.formaStarostlivosti === 'b') {
      // Striedavá — úvod + obsah Ed bloku (vyplní sa cez "Použiť tento text").
      return (
        <p style={{ margin: '8px 0 4px' }}>
          Účastníci dohody sa dohodli, že {detiSlovoDoh(pCount, 'nom')} {pCount > 0 ? formatujKidsListDoh(filledKids) : <PhD>[doplňte deti]</PhD>} sa {detiSlovoZv(pCount)} do striedavej osobnej starostlivosti oboch rodičov nasledovne:
        </p>
      );
    }
    if (cl.formaStarostlivosti === 'c') {
      return (
        <p style={{ margin: '8px 0' }}>
          Účastníci dohody sa dohodli, že {detiSlovoDoh(pCount, 'nom')} {pCount > 0 ? formatujKidsListDoh(filledKids) : <PhD>[doplňte deti]</PhD>} sa {detiSlovoZv(pCount)} do spoločnej osobnej starostlivosti oboch rodičov podľa § 24 ods. 2 zákona č. 36/2005 Z. z. o rodine.
        </p>
      );
    }
    return null;
  };

  // Materializovaný text bodu B (zastupovanie)
  const renderBodB = () => {
    const z = cl.zastupovanie;
    const sloveso = z === 'matka' ? 'vykonávať bude matka' : z === 'otec' ? 'vykonávať bude otec' : 'budú vykonávať obaja rodičia';
    return (
      <p style={{ margin: '8px 0' }}>
        Účastníci dohody sa dohodli, že zastupovanie {detiSlovoDoh(pCount, 'gen')} a správu {pCount === 1 ? 'jeho' : 'ich'} majetku {sloveso}.
      </p>
    );
  };

  // Materializovaný text bodu C (výživné)
  const renderBodC = () => {
    if (cl.formaStarostlivosti === null) {
      return (
        <p className="no-copy no-print" style={{ margin: '8px 0', fontStyle: 'italic', color: 'var(--ink-3)' }}>
          [vyberte formu starostlivosti v bode A vyššie]
        </p>
      );
    }
    const rezim = cl.formaStarostlivosti === 'a'
      ? 'i'
      : cl.formaStarostlivosti === 'b' ? cl.rezimVyzivnehoPri_b : cl.rezimVyzivnehoPri_c;

    if (rezim === 'ii') {
      if (cl.formaStarostlivosti === 'b') {
        return <p style={{ margin: '8px 0' }}>Účastníci dohody sa dohodli, že počas trvania striedavej osobnej starostlivosti rodičov výživné neurčujú.</p>;
      }
      return <p style={{ margin: '8px 0' }}>Účastníci dohody sa dohodli, že výživné si neurčujú. Každý z rodičov si plní vyživovaciu povinnosť počas obdobia, keď má {detiSlovoDoh(pCount, 'ak')} v osobnej starostlivosti.</p>;
    }

    // rezim === 'i' — kto sa zaväzuje
    let platiKey;
    let prijemcaKey;
    if (cl.formaStarostlivosti === 'a') {
      // Platí ten, komu nie je zverené
      platiKey = cl.zvereniePri_a === 'matka' ? 'otec' : 'matka';
      prijemcaKey = cl.zvereniePri_a;
    } else {
      // Pri (b)/(c) — voľba "kto sa zaväzuje" (default 'otec')
      const fld = cl.formaStarostlivosti === 'b' ? cl.ktoSaZavauje_b : cl.ktoSaZavauje_c;
      platiKey = fld;
      prijemcaKey = fld === 'matka' ? 'otec' : 'matka';
    }

    return (
      <>
        <p style={{ margin: '8px 0 4px' }}>
          {rolaCap(platiKey)} sa zaväzuje prispievať na výživu nasledovne:
        </p>
        {pCount === 0 ? (
          <p className="no-copy no-print" style={{ fontStyle: 'italic', color: 'var(--ink-3)', paddingLeft: 16 }}>
            [doplňte aspoň jedno maloleté dieťa v sekcii účastníkov vyššie]
          </p>
        ) : (
          filledKids.map(kid => {
            const r = getVyzivne(kid.id);
            return (
              <p key={kid.id} style={{ margin: '0 0 4px', paddingLeft: 16 }}>
                – maloleté dieťa {orPhD(kid.meno, 'meno?')}, nar. {orPhD(kid.datumNarodenia, 'dátum?')} vo výške {orPhD(r && r.suma, 'suma')} eur mesačne
              </p>
            );
          })
        )}
        <p style={{ margin: '8px 0 0' }}>
          Výživné je splatné vždy do 15. dňa kalendárneho mesiaca vopred, k rukám {rolaPad(prijemcaKey, 'gen')}, počnúc dňom schválenia tejto dohody súdom.
        </p>
      </>
    );
  };

  // Materializovaný text bodu D (styk)
  const renderBodD = () => {
    if (cl.formaStarostlivosti === 'b') {
      return <p style={{ margin: '8px 0', fontStyle: 'italic', color: 'var(--ink-2)' }}>Pri striedavej osobnej starostlivosti sa styk osobitne neupravuje.</p>;
    }
    if (cl.formaStarostlivosti === 'c') {
      return <p style={{ margin: '8px 0', fontStyle: 'italic', color: 'var(--ink-2)' }}>Pri spoločnej osobnej starostlivosti sa styk osobitne neupravuje, fungovanie je dohodnuté v bode A vyššie.</p>;
    }
    // (a)
    if (cl.styk === 'ii') {
      return <p style={{ margin: '8px 0' }}>Účastníci dohody sa dohodli, že súdom upravený styk nepožadujú, o styku sa dohodnú v konkrétnych prípadoch ústne.</p>;
    }
    // styk === 'i' — Ed obsah materializovaný
    const nezKey = cl.zvereniePri_a === 'matka' ? 'otec' : 'matka';
    return (
      <p style={{ margin: '8px 0' }}>
        Účastníci dohody sa dohodli na úprave styku {rolaPad(nezKey, 'gen')} s {detiSlovoDoh(pCount, 'instr')} {pCount > 0 ? formatujKidsListDoh(filledKids) : ''} v nasledujúcom rozsahu:
      </p>
    );
  };

  return (
    <TipContextD.Provider value={tipCtx}>
    <div className="paper-stage">
      <article className="paper" aria-label="Dohoda rodičov — editovateľný dokument">

        {/* Nadpis dokumentu — pri dohode na úplnom vrchu (žiadny súd v hlavičke,
            dohoda je dvojstranný akt rodičov, súd sa určí až pri samostatnom
            návrhu na schválenie podľa § 24 ods. 3 ZoR + § 100/§ 112 CMP). */}
        <h1 className="doc-title doc-title--long" style={{ marginTop: 16 }}>
          Dohoda rodičov o úprave výkonu rodičovských práv a povinností k maloletým deťom
        </h1>
        <div className="doc-sub">
          uzavretá podľa ustanovení § 24 a § 25 zákona č. 36/2005 Z. z. o rodine medzi účastníkmi
        </div>

        {/* Voľba poradia rodičov v hlavičke */}
        <div className="no-copy no-print" style={{ display: 'flex', gap: 16, alignItems: 'center', fontSize: '0.85em', color: 'var(--ink-3)', marginTop: 32 }}>
          <span style={{ fontFamily: 'var(--mono)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>V poradí prvý je:</span>
          <label style={{ display: 'inline-flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}>
            <input type="radio" name="prvy-pohlavie" value="muz" checked={prvyPohlavie === 'muz'} onChange={() => setPrvyPohlavie('muz')} />
            <span>otec</span>
          </label>
          <label style={{ display: 'inline-flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}>
            <input type="radio" name="prvy-pohlavie" value="zena" checked={prvyPohlavie === 'zena'} onChange={() => setPrvyPohlavie('zena')} />
            <span>matka</span>
          </label>
        </div>

        {/* Účastníci dohody */}
        <div className="parties-table" style={{ display: 'flex', flexDirection: 'column', gap: 20, padding: '24px 0', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', margin: '12px 0 32px' }}>
          {/* Prvý účastník */}
          <div style={{ marginBottom: 20 }}>
            <div style={{ fontWeight: 'bold', marginBottom: 8 }}>{rolaCap(prvyR, 'instr')}:</div>
            <div className="party-grid">
              <span>Meno a priezvisko:</span>
              <div style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
                <SyncedEdD value={menoPrvy} onChange={setMenoPrvy} placeholder="meno a priezvisko" />
                <span style={{ whiteSpace: 'nowrap' }}>rod.:</span>
                <SyncedEdD value={rodnePrvy} onChange={setRodnePrvy} placeholder="rodné priezvisko" />
              </div>
              <span>Dátum narodenia:</span> <SyncedEdD value={datNarPrvy} onChange={setDatNarPrvy} placeholder="DD. MM. RRRR" />
              <span>Trvalý pobyt:</span> <SyncedEdD value={pobytPrvy} onChange={setPobytPrvy} placeholder="ulica, PSČ mesto" />
              <span>{prvyR === 'matka' ? 'Štátna občianka' : 'Štátny občan'}:</span>
              <SyncedEdD value={obcianstvoPrvy} onChange={setObcianstvoPrvy} placeholder="SR" />
            </div>
            <div style={{ fontStyle: 'italic', marginTop: 6 }}>/ďalej len „{prvyR}"/</div>
          </div>

          {/* Druhý účastník */}
          <div>
            <div style={{ fontWeight: 'bold', marginBottom: 8 }}>{rolaCap(druhyR, 'instr')}:</div>
            <div className="party-grid">
              <span>Meno a priezvisko:</span>
              <div style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
                <SyncedEdD value={menoDruhy} onChange={setMenoDruhy} placeholder="meno a priezvisko" />
                <span style={{ whiteSpace: 'nowrap' }}>rod.:</span>
                <SyncedEdD value={rodneDruhy} onChange={setRodneDruhy} placeholder="rodné priezvisko" />
              </div>
              <span>Dátum narodenia:</span> <SyncedEdD value={datNarDruhy} onChange={setDatNarDruhy} placeholder="DD. MM. RRRR" />
              <span>Trvalý pobyt:</span> <SyncedEdD value={pobytDruhy} onChange={setPobytDruhy} placeholder="ulica, PSČ mesto" />
              <span>{druhyR === 'matka' ? 'Štátna občianka' : 'Štátny občan'}:</span>
              <SyncedEdD value={obcianstvoDruhy} onChange={setObcianstvoDruhy} placeholder="SR" />
            </div>
            <div style={{ fontStyle: 'italic', marginTop: 6 }}>/ďalej len „{druhyR}"/</div>
          </div>

          <div style={{ fontStyle: 'italic' }}>/ďalej spolu len „účastníci dohody"/</div>
        </div>

        {/* Sekcia maloletých detí */}
        <div className="kids-table has-tip" style={{ display: 'flex', flexDirection: 'column', gap: 24, padding: '0 0 24px 0', borderBottom: '1px solid var(--rule)', margin: '0 0 32px' }}>
          <TipBtnD pointKey="kids-section" />
          <div style={{ fontWeight: 'bold' }}>vo veci {detiSlovoDoh(pCount, 'gen')}:</div>
          {kids.map((kid) => (
            <div key={kid.id} className="kid-row party-grid" style={{ position: 'relative', alignItems: 'baseline' }}>
              <span style={{ fontWeight: 'bold' }}>maloleté dieťa:</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {/* Meno bez fontWeight bold — placeholder zostáva v normálnej váhe
                    konzistentne s ostatnými placeholdermi v dokumente. */}
                <SyncedEdD value={kid.meno} onChange={(v) => updateKid(kid.id, 'meno', v)} placeholder="meno a priezvisko" lg noPersist />
                <div style={{ display: 'flex', gap: 6, alignItems: 'baseline' }}>
                  <span style={{ whiteSpace: 'nowrap' }}>nar.:</span>
                  <SyncedEdD value={kid.datumNarodenia} onChange={(v) => updateKid(kid.id, 'datumNarodenia', v)} placeholder="DD. MM. RRRR" noPersist />
                </div>
                <div style={{ display: 'flex', gap: 6, alignItems: 'baseline' }}>
                  <span style={{ whiteSpace: 'nowrap' }}>bytom:</span>
                  <SyncedEdD value={kid.bytom} onChange={(v) => updateKid(kid.id, 'bytom', v)} placeholder="ulica, PSČ obec" noPersist />
                </div>
              </div>
              {kids.length > 1 && (
                <button type="button" className="kid-remove no-print no-copy"
                  onClick={() => removeKid(kid.id)} aria-label="Odstrániť dieťa" title="Odstrániť dieťa"
                  style={{ position: 'absolute', right: 0, top: 0, background: 'transparent', border: 0, cursor: 'pointer', color: 'var(--ink-4)', fontSize: 14, lineHeight: 1, padding: '2px 6px' }}
                >✕</button>
              )}
            </div>
          ))}
          <button type="button" className="party-add no-print no-copy" onClick={addKid} style={{ alignSelf: 'flex-start' }}>+ Pridať maloleté dieťa</button>
        </div>

        {/* Čl. I — Predmet dohody */}
        <section className="article page-break-before" id="art-1">
          <div className="article-intro">
            <div className="article-head">
              <div className="article-num">Článok I</div>
              <span className="article-title">Predmet dohody</span>
            </div>
            <p className="has-tip">
              <TipBtnD pointKey="art-1-predmet" />
              <strong>1.</strong>&nbsp;&nbsp;Účastníci dohody, ktorí sú rodičmi {detiSlovoDoh(pCount, 'gen')}, uzavreli manželstvo dňa{' '}
              <SyncedEdD value={datumSobasa} onChange={setDatumSobasa} placeholder="DD. MM. RRRR" />
              {' '}v{' '}<SyncedEdD value={miestoSobasa} onChange={setMiestoSobasa} placeholder="mesto" />
              . Zapísané je v knihe manželstiev matričného úradu{' '}
              <SyncedEdD value={maticnyUrad} onChange={setMaticnyUrad} placeholder="názov matričného úradu" lg />
              , zväzok <SyncedEdD value={zvazok} onChange={setZvazok} placeholder="č." num />
              , ročník <SyncedEdD value={rocnik} onChange={setRocnik} placeholder="RRRR" num />
              , na strane <SyncedEdD value={strana} onChange={setStrana} placeholder="č." num />
              , pod poradovým číslom <SyncedEdD value={poradoveCislo} onChange={setPoradoveCislo} placeholder="č." num />
              {' '}/ďalej len „manželstvo"/.
            </p>
          </div>

          <p style={{ margin: '12px 0 8px' }}>
            <strong>2.</strong>&nbsp;&nbsp;Účastníci dohody sa dohodli na úprave výkonu ich rodičovských práv a povinností k {detiSlovoDoh(pCount, 'dat')} nasledujúcim spôsobom:
          </p>

          {/* A — Zverenie */}
          <div className="has-tip" style={{ marginBottom: 24 }}>
            <TipBtnD pointKey="3.3-forma" />
            <p style={{ margin: '12px 0 8px' }}><strong>A. Zverenie {detiSlovoDoh(pCount, 'gen')} do starostlivosti</strong></p>
            <div className="no-copy no-print" style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: '0.92em', padding: '10px 12px', background: 'var(--ivory-2)', borderRadius: 'var(--r-sm)', border: '1px solid var(--rule)' }}>
              {[
                { v: 'a', label: 'Osobná starostlivosť jedného rodiča (§ 24 ods. 1 ZoR)' },
                { v: 'b', label: 'Striedavá osobná starostlivosť oboch rodičov (§ 24 ods. 2 ZoR)' },
                { v: 'c', label: 'Spoločná osobná starostlivosť oboch rodičov (§ 24 ods. 2 ZoR)' },
              ].map(opt => (
                <label key={opt.v} style={{ display: 'flex', gap: 8, alignItems: 'baseline', cursor: 'pointer' }}>
                  <input type="radio" name="dh-forma" value={opt.v}
                    checked={cl.formaStarostlivosti === opt.v}
                    onChange={() => setClField('formaStarostlivosti', opt.v)} />
                  <span>{opt.label}</span>
                </label>
              ))}
            </div>

            {/* Placeholder pre default null — zobrazí sa, kým používateľ nevyberie. */}
            {cl.formaStarostlivosti === null && renderBodA()}

            {cl.formaStarostlivosti === 'a' && (
              <div className="no-copy no-print" style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: '0.92em', padding: '10px 12px', background: 'var(--ivory-2)', borderRadius: 'var(--r-sm)', border: '1px solid var(--rule)', marginTop: 8 }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: '0.78em', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 4 }}>Komu sa dieťa zveruje:</div>
                {[{ v: 'matka', label: 'matke' }, { v: 'otec', label: 'otcovi' }].map(opt => (
                  <label key={opt.v} style={{ display: 'flex', gap: 8, alignItems: 'baseline', cursor: 'pointer' }}>
                    <input type="radio" name="dh-zverenie" value={opt.v}
                      checked={cl.zvereniePri_a === opt.v}
                      onChange={() => setClField('zvereniePri_a', opt.v)} />
                    <span>{opt.label}</span>
                  </label>
                ))}
              </div>
            )}

            {cl.formaStarostlivosti === 'b' && (
              <>
                <div className="no-copy no-print" style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: '0.92em', padding: '10px 12px', background: 'var(--ivory-2)', borderRadius: 'var(--r-sm)', border: '1px solid var(--rule)', marginTop: 8 }}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: '0.78em', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 4 }}>Typ striedania:</div>
                  {[{ v: '1tyz', label: 'Týždenné striedanie' }, { v: 'vlastne', label: 'Vlastné striedanie' }].map(opt => (
                    <label key={opt.v} style={{ display: 'flex', gap: 8, alignItems: 'baseline', cursor: 'pointer' }}>
                      <input type="radio" name="dh-typStr" value={opt.v}
                        checked={cl.typStriedania === opt.v}
                        onChange={() => setClField('typStriedania', opt.v)} />
                      <span>{opt.label}</span>
                    </label>
                  ))}
                </div>
                {renderBodA()}
                <div style={{ marginBottom: 8 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                    <strong>Opis striedania</strong>
                    <button className="no-copy no-print"
                      onClick={() => setShowSampleStr(!showSampleStr)}
                      style={{ fontSize: '0.78em', padding: '3px 10px', border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', background: 'var(--paper)', cursor: 'pointer', color: 'var(--ink-2)' }}
                    >{showSampleStr ? 'Skryť vzor' : 'Zobraziť vzor textu'}</button>
                  </div>
                  {showSampleStr && (() => {
                    const joined = sampleStriedavkaJoinedDoh(cl.typStriedania, Math.max(1, pCount));
                    return (
                      <div className="no-copy no-print" style={{ background: 'var(--ivory-2)', border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', padding: '14px 18px', margin: '0 0 8px' }}>
                        <div style={{ fontFamily: 'var(--mono)', fontSize: '0.78em', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 12 }}>Vzorový text — len ako inšpirácia</div>
                        <pre style={{ margin: 0, fontFamily: 'var(--serif)', whiteSpace: 'pre-wrap', fontSize: '0.92em', color: 'var(--ink-2)', lineHeight: 1.55 }}>{joined}</pre>
                        <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
                          <UsePatternButtonD onClick={() => { fillSampleText(cl_striedanie_Ref, joined); setShowSampleStr(false); }} />
                          <button onClick={() => setShowSampleStr(false)} style={{ fontSize: '0.82em', padding: '6px 14px', border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', background: 'transparent', cursor: 'pointer', color: 'var(--ink-3)' }}>Zatvoriť</button>
                        </div>
                      </div>
                    );
                  })()}
                  <EdD block ref={cl_striedanie_Ref} placeholder="Sem vložte text striedavej osobnej starostlivosti — kliknite na 'Zobraziť vzor textu' a 'Použiť tento text'." />
                </div>
              </>
            )}

            {/* Spoločná osobná starostlivosť — zobrazí sa LEN materializovaný
                jednovetný text. Žiadny opis fungovania, sample tlačidlo ani
                Ed block — pri dohode je deklaratívne ustanovenie postačujúce. */}
            {cl.formaStarostlivosti === 'c' && (
              <>
                <div className="no-copy no-print" style={{ marginTop: 8, padding: '12px 14px', background: 'var(--ivory-2)', borderRadius: 'var(--r-sm)', border: '1px solid var(--rule)', fontSize: '0.88em', color: 'var(--ink-2)', fontStyle: 'italic' }}>
                  Spoločná osobná starostlivosť vyžaduje dohodu oboch rodičov. Predpokladá sa, že rodičia žijú v rovnakej oblasti a sú schopní komunikovať vo veciach výchovy detí.
                </div>
                {renderBodA()}
              </>
            )}

            {cl.formaStarostlivosti === 'a' && renderBodA()}
          </div>

          {/* B — Zastupovanie */}
          <div className="has-tip" style={{ marginBottom: 24 }}>
            <TipBtnD pointKey="3.3-zastupovanie" />
            <p style={{ margin: '12px 0 8px' }}><strong>B. Zastupovanie a správa majetku {detiSlovoDoh(pCount, 'gen')}</strong></p>
            <div className="no-copy no-print" style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: '0.92em', padding: '10px 12px', background: 'var(--ivory-2)', borderRadius: 'var(--r-sm)', border: '1px solid var(--rule)' }}>
              {[
                { v: 'obaja', label: 'Obaja rodičia spoločne' },
                { v: 'matka', label: 'Iba matka' },
                { v: 'otec', label: 'Iba otec' },
              ].map(opt => (
                <label key={opt.v} style={{ display: 'flex', gap: 8, alignItems: 'baseline', cursor: 'pointer' }}>
                  <input type="radio" name="dh-zast" value={opt.v}
                    checked={cl.zastupovanie === opt.v}
                    onChange={() => setZastupovanie(opt.v)} />
                  <span>{opt.label}</span>
                </label>
              ))}
            </div>
            {renderBodB()}
          </div>

          {/* C — Výživné */}
          <div className="has-tip" style={{ marginBottom: 24 }}>
            <TipBtnD pointKey="3.4-vyzivne" />
            <p style={{ margin: '12px 0 8px' }}><strong>C. Úprava výživného pre {detiSlovoDoh(pCount, 'ak')}</strong></p>

            {pCount === 0 ? (
              <p className="no-copy no-print" style={{ fontStyle: 'italic', color: 'var(--ink-3)' }}>[Doplňte aspoň jedno maloleté dieťa v sekcii účastníkov vyššie]</p>
            ) : (
              <>
                {(cl.formaStarostlivosti === 'b' || cl.formaStarostlivosti === 'c') && (
                  <>
                    <div className="no-copy no-print" style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: '0.92em', padding: '10px 12px', background: 'var(--ivory-2)', borderRadius: 'var(--r-sm)', border: '1px solid var(--rule)', marginBottom: 8 }}>
                      <div style={{ fontFamily: 'var(--mono)', fontSize: '0.78em', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 4 }}>Dohodli ste sa na výživnom?</div>
                      {[
                        { v: 'i', label: 'Áno, dohodli sme sa na výživnom od jedného z rodičov.' },
                        { v: 'ii', label: 'Nie, výživné si neurčujeme. Každý rodič živí dieťa počas času, keď je u neho.' },
                      ].map(opt => {
                        const fld = cl.formaStarostlivosti === 'b' ? 'rezimVyzivnehoPri_b' : 'rezimVyzivnehoPri_c';
                        return (
                          <label key={opt.v} style={{ display: 'flex', gap: 8, alignItems: 'baseline', cursor: 'pointer' }}>
                            <input type="radio" name={'dh-rezim-' + cl.formaStarostlivosti} value={opt.v}
                              checked={cl[fld] === opt.v}
                              onChange={() => setClField(fld, opt.v)} />
                            <span>{opt.label}</span>
                          </label>
                        );
                      })}
                    </div>
                    {((cl.formaStarostlivosti === 'b' && cl.rezimVyzivnehoPri_b === 'i') ||
                      (cl.formaStarostlivosti === 'c' && cl.rezimVyzivnehoPri_c === 'i')) && (
                      <div className="no-copy no-print" style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: '0.92em', padding: '10px 12px', background: 'var(--ivory-2)', borderRadius: 'var(--r-sm)', border: '1px solid var(--rule)', marginBottom: 8 }}>
                        <div style={{ fontFamily: 'var(--mono)', fontSize: '0.78em', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 4 }}>Kto sa zaväzuje platiť výživné:</div>
                        {[{ v: 'matka', label: 'matka' }, { v: 'otec', label: 'otec' }].map(opt => {
                          const fld = cl.formaStarostlivosti === 'b' ? 'ktoSaZavauje_b' : 'ktoSaZavauje_c';
                          return (
                            <label key={opt.v} style={{ display: 'flex', gap: 8, alignItems: 'baseline', cursor: 'pointer' }}>
                              <input type="radio" name={'dh-ktoplati-' + cl.formaStarostlivosti} value={opt.v}
                                checked={cl[fld] === opt.v}
                                onChange={() => setClField(fld, opt.v)} />
                              <span>{opt.label}</span>
                            </label>
                          );
                        })}
                      </div>
                    )}
                  </>
                )}

                {/* Tabuľka súm pri rezim 'i' */}
                {(() => {
                  const rezim = cl.formaStarostlivosti === 'a'
                    ? 'i'
                    : cl.formaStarostlivosti === 'b' ? cl.rezimVyzivnehoPri_b : cl.rezimVyzivnehoPri_c;
                  if (rezim !== 'i') return null;
                  return (
                    <div className="no-copy no-print" style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '10px 12px', background: 'var(--ivory-2)', borderRadius: 'var(--r-sm)', border: '1px solid var(--rule)', marginBottom: 8 }}>
                      {filledKids.map(kid => {
                        const r = getVyzivne(kid.id);
                        return (
                          <div key={kid.id} style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
                            <span style={{ whiteSpace: 'nowrap' }}>{kid.meno || '(meno?)'}{kid.datumNarodenia ? ', nar. ' + kid.datumNarodenia : ''}:</span>
                            <input type="text" inputMode="decimal" value={r.suma}
                              onChange={(e) => setVyzivneSuma(kid.id, e.target.value)} placeholder="suma"
                              style={{ width: 80, padding: '4px 8px', border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', fontFamily: 'var(--serif)', fontSize: '0.95em', textAlign: 'right' }} />
                            <span style={{ whiteSpace: 'nowrap' }}>€/mesiac</span>
                          </div>
                        );
                      })}
                    </div>
                  );
                })()}

                {renderBodC()}
              </>
            )}
          </div>

          {/* D — Styk */}
          <div className="has-tip" style={{ marginBottom: 24 }}>
            <TipBtnD pointKey="3.5-styk" />
            <p style={{ margin: '12px 0 8px' }}><strong>D. Úprava styku</strong></p>

            {cl.formaStarostlivosti === 'a' && (() => {
              const nezKey = cl.zvereniePri_a === 'matka' ? 'otec' : 'matka';
              return (
                <>
                  <div className="no-copy no-print" style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: '0.92em', padding: '10px 12px', background: 'var(--ivory-2)', borderRadius: 'var(--r-sm)', border: '1px solid var(--rule)' }}>
                    {[
                      { v: 'i', label: 'Dohodli sme sa na konkrétnej úprave styku.' },
                      { v: 'ii', label: 'Súdom upravený styk nepožadujeme, dohodneme sa o styku v konkrétnych prípadoch ústne.' },
                    ].map(opt => (
                      <label key={opt.v} style={{ display: 'flex', gap: 8, alignItems: 'baseline', cursor: 'pointer' }}>
                        <input type="radio" name="dh-styk" value={opt.v}
                          checked={cl.styk === opt.v}
                          onChange={() => setClField('styk', opt.v)} />
                        <span>{opt.label}</span>
                      </label>
                    ))}
                  </div>
                  {renderBodD()}
                  {cl.styk === 'i' && (
                    <div style={{ marginTop: 8 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                        <strong>Opis dohodnutého styku</strong>
                        <button className="no-copy no-print"
                          onClick={() => setShowSampleStyk(!showSampleStyk)}
                          style={{ fontSize: '0.78em', padding: '3px 10px', border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', background: 'var(--paper)', cursor: 'pointer', color: 'var(--ink-2)' }}
                        >{showSampleStyk ? 'Skryť vzor' : 'Zobraziť vzor textu'}</button>
                      </div>
                      {showSampleStyk && (() => {
                        const joined = sampleStykJoinedDoh(nezKey, Math.max(1, pCount));
                        return (
                          <div className="no-copy no-print" style={{ background: 'var(--ivory-2)', border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', padding: '14px 18px', margin: '0 0 8px' }}>
                            <div style={{ fontFamily: 'var(--mono)', fontSize: '0.78em', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 12 }}>Styk druhého rodiča — vzor s prázdninovým režimom</div>
                            <pre style={{ margin: 0, fontFamily: 'var(--serif)', whiteSpace: 'pre-wrap', fontSize: '0.92em', color: 'var(--ink-2)', lineHeight: 1.55 }}>{joined}</pre>
                            <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
                              <UsePatternButtonD onClick={() => { fillSampleText(cl_styk_Ref, joined); setShowSampleStyk(false); }} />
                              <button onClick={() => setShowSampleStyk(false)} style={{ fontSize: '0.82em', padding: '6px 14px', border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', background: 'transparent', cursor: 'pointer', color: 'var(--ink-3)' }}>Zatvoriť</button>
                            </div>
                          </div>
                        );
                      })()}
                      <EdD block ref={cl_styk_Ref} placeholder="Opis dohodnutého styku — váš text alebo použite vzor vyššie..." />
                    </div>
                  )}
                </>
              );
            })()}

            {(cl.formaStarostlivosti === 'b' || cl.formaStarostlivosti === 'c') && renderBodD()}
            {cl.formaStarostlivosti === null && (
              <p className="no-copy no-print" style={{ margin: '8px 0', fontStyle: 'italic', color: 'var(--ink-3)' }}>
                [vyberte formu starostlivosti v bode A vyššie]
              </p>
            )}
          </div>
        </section>

        {/* Čl. II — Úprava výkonu rodičovských práv a povinností.
            Žiadny forced page-break-before — .article-intro má v print
            page-break-inside: avoid, browser zalomí stranu len ak sa
            úvodný blok (header + 1. odsek) nezmestí na aktuálnu stranu. */}
        <section className="article" id="art-2">
          <div className="article-intro">
            <div className="article-head">
              <div className="article-num">Článok II</div>
              <span className="article-title">Úprava výkonu rodičovských práv a povinností</span>
            </div>
            <p>
              <strong>1.</strong>&nbsp;&nbsp;Účastníci dohody uzavretím tejto dohody deklarujú svoj záujem riešiť všetky záležitosti týkajúce sa {detiSlovoDoh(pCount, 'gen')} tak, aby boli v prospech {detiSlovoDoh(pCount, 'gen')}, dohliadnuť na {detiSlovoDoh(pCount, 'ak')}, vychovávať {pCount === 1 ? 'ho' : 'ich'} a riešiť bežné záležitosti týkajúce sa {detiSlovoDoh(pCount, 'gen')} v dobe, keď {pCount === 1 ? 'je maloleté' : 'sú maloleté'}.
            </p>
          </div>

          <p>
            <strong>2.</strong>&nbsp;&nbsp;Účastníci dohody ďalej deklarujú, že v záujme zabezpečenia riadnej starostlivosti o {detiSlovoDoh(pCount, 'ak')} sa budú navzájom bezodkladne pravidelne informovať o všetkých potrebných záležitostiach týkajúcich sa {detiSlovoDoh(pCount, 'gen')}.
          </p>

          {/* Voliteľné body */}
          <div className="has-tip" style={{ marginTop: 16 }}>
            <TipBtnD pointKey="volitelne-body" />
            <p style={{ margin: '8px 0 6px' }}><strong>Voliteľné body dohody (nevykonateľné)</strong></p>
            <p className="no-copy no-print" style={{ fontSize: '0.85em', color: 'var(--ink-3)', fontStyle: 'italic', margin: '0 0 12px' }}>
              Zaškrtnite body, ktoré chcete do dohody zahrnúť. Klik na „Zobraziť vzor textu" otvorí prednastavený text, ktorý môžete upraviť.
            </p>

            <div className="no-copy no-print" style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '10px 12px', background: 'var(--ivory-2)', borderRadius: 'var(--r-sm)', border: '1px solid var(--rule)', marginBottom: 12 }}>
              {VOLITELNE_BODY.map(vb => (
                <label key={vb.id} style={{ display: 'flex', gap: 8, alignItems: 'baseline', cursor: 'pointer', fontSize: '0.92em' }}>
                  <input type="checkbox"
                    checked={!!cl.volitelne[vb.id]}
                    onChange={() => setVolitelny(vb.id, !cl.volitelne[vb.id])} />
                  <span>{vb.label}</span>
                </label>
              ))}
            </div>

            {VOLITELNE_BODY.filter(vb => cl.volitelne[vb.id]).map(vb => {
              const sample = vb.sample(Math.max(1, pCount));
              const showKey = vb.id;
              return (
                <div key={vb.id} style={{ marginBottom: 16 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                    <strong>{vb.label}</strong>
                    {sample && (
                      <button className="no-copy no-print"
                        onClick={() => setShowSampleVol(prev => ({ ...prev, [showKey]: !prev[showKey] }))}
                        style={{ fontSize: '0.78em', padding: '3px 10px', border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', background: 'var(--paper)', cursor: 'pointer', color: 'var(--ink-2)' }}
                      >{showSampleVol[showKey] ? 'Skryť vzor' : 'Zobraziť vzor textu'}</button>
                    )}
                  </div>
                  {sample && showSampleVol[showKey] && (
                    <div className="no-copy no-print" style={{ background: 'var(--ivory-2)', border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', padding: '14px 18px', margin: '0 0 8px' }}>
                      <p style={{ margin: 0, fontSize: '0.92em', color: 'var(--ink-2)', lineHeight: 1.55, fontStyle: 'italic' }}>{sample}</p>
                      <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
                        <UsePatternButtonD onClick={() => { fillSampleText(vb.id, sample); setShowSampleVol(prev => ({ ...prev, [showKey]: false })); }} />
                        <button onClick={() => setShowSampleVol(prev => ({ ...prev, [showKey]: false }))} style={{ fontSize: '0.82em', padding: '6px 14px', border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', background: 'transparent', cursor: 'pointer', color: 'var(--ink-3)' }}>Zatvoriť</button>
                      </div>
                    </div>
                  )}
                  <EdD block ref={cl_volitelne_Refs.current[vb.id]} placeholder={`Vlastný text k bodu „${vb.label}"...`} />
                </div>
              );
            })}
          </div>
        </section>

        {/* Čl. III — Záverečné ustanovenia. Bez forced page-break — riadi article-intro. */}
        <section className="article" id="art-3">
          <div className="article-intro">
            <div className="article-head">
              <div className="article-num">Článok III</div>
              <span className="article-title">Záverečné ustanovenia</span>
            </div>
            <p>
              <strong>1.</strong>&nbsp;&nbsp;Účastníci dohody berú na vedomie, že dohoda o úprave výkonu rodičovských práv a povinností podlieha schváleniu súdom a bez tohto schválenia je nevykonateľná, pričom po jej schválení súdom platí až do momentu, kým súd neschváli inú dohodu.
            </p>
          </div>
          <p>
            <strong>2.</strong>&nbsp;&nbsp;Účastníci dohody prehlasujú a svojim podpisom potvrdzujú, že sú si vedomí, že v súlade s ustanovením § 24 ods. 3 zákona o rodine je podmienkou vykonateľnosti dohody o úprave výkonu rodičovských práv a povinností jej schválenie súdom.
          </p>
          <p>
            <strong>3.</strong>&nbsp;&nbsp;Táto dohoda je vyhotovená v 5 rovnopisoch, z ktorých matka aj otec obdržia po jednom vyhotovení, dve vyhotovenia sú určené pre potreby príslušného súdu za účelom schválenia tejto dohody a jedno vyhotovenie je určené pre príslušnú sociálnu kuratelu.
          </p>
          <p>
            <strong>4.</strong>&nbsp;&nbsp;Účastníci dohody prehlasujú, že dohodu uzatvárajú slobodne, vážne, určito, zrozumiteľne a v najlepšom záujme ich {detiSlovoDoh(pCount, 'gen')}.
          </p>

          {/* Podpisy */}
          <div style={{ marginTop: 36 }}>
            <p style={{ margin: '0 0 24px' }}>
              V <SyncedEdD value={miestoPodpisu} onChange={setMiestoPodpisu} placeholder="mesto" />
              , dňa <EdD defaultValue="" placeholder="DD. MM. RRRR" />.
            </p>
            <div className="signatures-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginTop: 48 }}>
              <div style={{ textAlign: 'center' }}>
                <div className="sig-line" style={{ borderBottom: '1px solid var(--ink)', marginBottom: 6, height: 28 }}></div>
                <div className="sig-name" style={{ fontFamily: 'var(--serif)', fontStyle: 'italic' }}>{menoMatka}</div>
              </div>
              <div style={{ textAlign: 'center' }}>
                <div className="sig-line" style={{ borderBottom: '1px solid var(--ink)', marginBottom: 6, height: 28 }}></div>
                <div className="sig-name" style={{ fontFamily: 'var(--serif)', fontStyle: 'italic' }}>{menoOtec}</div>
              </div>
            </div>
          </div>
        </section>

      </article>

      {/* Actions — obrazovka only */}
      <div className="paper-actions no-print" role="group" aria-label="Akcie s dohodou">
        <div className="paper-actions__row">
          <button type="button" className="btn-download" onClick={() => window.print()}>
            <span className="btn-download__glyph" aria-hidden="true">↓</span>
            <span className="btn-download__main">Stiahnuť ako PDF</span>
            <span className="btn-download__meta">A4</span>
          </button>
          <button type="button" className="btn-download btn-download--ghost" onClick={() => window.__downloadAsDocDohoda && window.__downloadAsDocDohoda()}>
            <span className="btn-download__glyph" aria-hidden="true">↓</span>
            <span className="btn-download__main">Stiahnuť ako Word</span>
            <span className="btn-download__meta">.doc</span>
          </button>
          <button type="button" className="btn-download btn-download--danger" onClick={() => window.__clearFormFields && window.__clearFormFields()}>
            <span className="btn-download__glyph" aria-hidden="true">✕</span>
            <span className="btn-download__main">Vymazať údaje</span>
            <span className="btn-download__meta">natrvalo</span>
          </button>
        </div>
      </div>
    </div>
    </TipContextD.Provider>
  );
};

// ============================================================
// Word export — clone DOM, strip UI chrome, zalomenie pre kid-rows.
// ============================================================
function downloadAsDocDohoda() {
  const article = document.querySelector('article.paper');
  if (!article) return;
  const clone = article.cloneNode(true);

  const killSelectors = [
    '.tip-pin', '.tip-pin-inline', '.tip-back',
    '.party-add', '.party-remove', '.kid-remove',
    '.no-copy', '.no-print',
  ];
  clone.querySelectorAll(killSelectors.join(',')).forEach(el => el.remove());

  // Kid rows — flex stack → block paragraphs (rovnaká logika ako PaperDeti)
  clone.querySelectorAll('.kid-row').forEach(row => {
    const labelSpan = row.querySelector(':scope > span');
    const stackDiv = row.querySelector(':scope > div');
    if (!labelSpan || !stackDiv) return;
    const labelText = (labelSpan.textContent || '').trim();
    const menoSpan = stackDiv.querySelector(':scope > span');
    const menoText = menoSpan ? (menoSpan.textContent || '').trim() : '';
    const subDivs = Array.from(stackDiv.querySelectorAll(':scope > div'));
    const subTexts = subDivs.map(d => (d.textContent || '').replace(/\s+/g, ' ').trim());
    const newRow = document.createElement('div');
    newRow.style.marginBottom = '8px';
    [
      { text: labelText, bold: true, indent: false },
      { text: menoText, bold: true, indent: true },
      ...subTexts.map(t => ({ text: t, bold: false, indent: true })),
    ].forEach(({ text, bold, indent }) => {
      if (!text) return;
      const p = document.createElement('p');
      p.style.margin = '0';
      if (bold) p.style.fontWeight = 'bold';
      if (indent) p.style.marginLeft = '16px';
      p.textContent = text;
      newRow.appendChild(p);
    });
    row.replaceWith(newRow);
  });

  // Strip empty .ed wrappers, replace with their text content
  clone.querySelectorAll('.ed[contenteditable]').forEach(el => {
    const text = el.textContent || '';
    const span = document.createElement('span');
    span.textContent = text;
    el.replaceWith(span);
  });

  // Podpisy — CSS grid Word nepodporuje, render-uje ako stack. Konvertujeme
  // na 2-stĺpcový <table> s 50% šírkami (čiara nad menom, vedľa seba).
  const sigGrid = clone.querySelector('.signatures-2col');
  if (sigGrid) {
    const cols = Array.from(sigGrid.children);
    const table = document.createElement('table');
    table.setAttribute('width', '100%');
    table.setAttribute('cellpadding', '0');
    table.setAttribute('cellspacing', '0');
    table.setAttribute('border', '0');
    table.style.cssText = 'margin-top:48pt;width:100%;border-collapse:collapse;';
    const tr = document.createElement('tr');
    cols.forEach(c => {
      const td = document.createElement('td');
      td.setAttribute('width', '50%');
      td.setAttribute('align', 'center');
      td.style.cssText = 'width:50%;vertical-align:top;text-align:center;padding:0 12pt;';
      const nameDiv = c.querySelector('.sig-name');
      const nameText = nameDiv ? (nameDiv.textContent || '').trim() : '';
      td.innerHTML =
        '<p style="margin:36pt 0 0;border-bottom:1px solid #0f1116;height:1pt;line-height:1pt;font-size:1pt;">&nbsp;</p>' +
        '<p style="margin:6pt 0 0;font-style:italic;color:#444;text-align:center;font-size:11pt;">' + nameText + '</p>';
      tr.appendChild(td);
    });
    table.appendChild(tr);
    sigGrid.replaceWith(table);
  }

  // Štýly Word — @page WordSection1 + mso-footer: f1 zaregistruje footer div
  // ako pravú pätičku. Bez tejto definície Word footer ignoruje a render-uje
  // ho ako bežný odsek na konci dokumentu.
  const styles = `
    @page WordSection1 { size: A4; margin: 2cm 2cm 2.2cm 2cm; mso-footer: f1; mso-footer-margin: 1.2cm; }
    div.WordSection1 { page: WordSection1; }
    p.MsoFooter, li.MsoFooter, div.MsoFooter { margin: 0; padding: 0; mso-pagination: widow-orphan; text-align: center; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 9pt; color: #888888; }
    body { font-family: 'Times New Roman', serif; font-size: 11pt; line-height: 1.4; }
    h1.doc-title { font-size: 14pt; text-align: center; font-weight: bold; margin: 0 0 8pt; text-transform: uppercase; }
    .doc-sub { text-align: center; font-size: 10pt; margin: 0 0 16pt; }
    .article { margin-top: 16pt; }
    .article-head { text-align: center; margin-bottom: 8pt; }
    .article-num { font-size: 12pt; font-weight: bold; text-transform: uppercase; letter-spacing: 1pt; }
    .article-title { display: block; font-style: italic; font-size: 10pt; margin-top: 2pt; }
    .article p { margin: 0 0 8pt; text-align: justify; }
    .party-grid > * { margin: 2pt 0; }
  `;
  const body = clone.outerHTML;
  // Footer div MUSÍ byť sibling .WordSection1, nie dieťa — Word jeho obsah
  // nezobrazí v toku dokumentu, len ho pripojí ako page footer cez mso-footer: f1.
  const footer = `<div style='mso-element:footer' id="f1"><p class="MsoFooter">Vytvorené pomocou webovej stránky - ziadostorozvod.sk</p></div>`;
  const html = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta charset="utf-8" />
<title>Dohoda rodičov o úprave výkonu rodičovských práv a povinností</title>
<!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:Zoom>100</w:Zoom></w:WordDocument></xml><![endif]-->
<style>${styles}</style>
</head>
<body><div class="WordSection1">${body}</div>${footer}</body></html>`;

  const blob = new Blob(['', html], { type: 'application/msword' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'dohoda-rodicov-o-detoch.doc';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

window.PaperDohoda = PaperDohoda;
window.__downloadAsDocDohoda = downloadAsDocDohoda;