// ============================================================
// Paper — A4 dokument editor pre uznání dluhu
// Single-doctype: § 2053 zákona č. 89/2012 Sb., občanský zákoník (NOZ).
// Implementácia podľa docs/UZNANIDLUHU_FORM_SPEC.md.
// ============================================================

const __IS_MOBILE_DEVICE = (() => {
  if (typeof navigator === 'undefined') return false;
  try {
    const params = new URLSearchParams(window.location.search);
    if (params.get('forceDesktopUI') === '1') return false;
  } catch (e) {}
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent || '');
})();

// PartyBlock — typ osoby selector (FO nepodnikatel / FO podnikatel / PO) + údaje
const PartyBlock = ({ label, type, onTypeChange, onRemove, demo, onDisplayChange, role }) => {
  const isPerson = type === 'person';
  const [bizKind, setBizKind] = React.useState('po'); // 'po' = právnická osoba, 'fop' = FO podnikatel

  const [personName, setPersonName] = React.useState('');
  const [companyName, setCompanyName] = React.useState('');
  const [companyRep, setCompanyRep] = React.useState('');

  React.useEffect(() => {
    if (!onDisplayChange) return;
    let text = '';
    if (isPerson) {
      text = personName.trim();
    } else if (bizKind === 'po') {
      const nm = companyName.trim();
      const rep = companyRep.trim();
      text = nm && rep ? `${nm} — zast. ${rep}` : nm;
    } else {
      text = companyName.trim();
    }
    onDisplayChange(text);
  }, [isPerson, bizKind, personName, companyName, companyRep]);

  const roleGen = role === 'creditor' ? 'věřitele' : 'dlužníka';

  return (
    <div className="party-block">
      <div className="party-role no-copy">
        <span className="party-role-label">{label}</span>
        <div className="party-type-switches">
          <div className="party-type-switch" role="tablist" aria-label="Typ osoby">
            <button
              role="tab"
              aria-selected={isPerson}
              className={isPerson ? 'active' : ''}
              onClick={() => onTypeChange('person')}
            >
              <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                <circle cx="6" cy="4" r="2.1" stroke="currentColor" strokeWidth="1.1"/>
                <path d="M2.2 10.5c.5-2 2-3 3.8-3s3.3 1 3.8 3" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round"/>
              </svg>
              Fyzická osoba
            </button>
            <button
              role="tab"
              aria-selected={!isPerson}
              className={!isPerson ? 'active' : ''}
              onClick={() => onTypeChange('company')}
            >
              <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                <rect x="1.8" y="2.3" width="8.4" height="7.4" stroke="currentColor" strokeWidth="1.1"/>
                <path d="M4 5.2h1M7 5.2h1M4 7.2h1M7 7.2h1" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round"/>
              </svg>
              Podnikatel
            </button>
          </div>
          {!isPerson && (
            <div className="party-type-switch party-type-switch-sub" role="tablist" aria-label="Typ podnikatele">
              <button
                role="tab"
                aria-selected={bizKind === 'po'}
                className={bizKind === 'po' ? 'active' : ''}
                onClick={() => setBizKind('po')}
              >
                Právnická osoba
              </button>
              <button
                role="tab"
                aria-selected={bizKind === 'fop'}
                className={bizKind === 'fop' ? 'active' : ''}
                onClick={() => setBizKind('fop')}
              >
                FO podnikatel
              </button>
            </div>
          )}
        </div>
        {onRemove && <button className="remove" onClick={onRemove} aria-label="Odstranit">×</button>}
      </div>

      {isPerson ? (
        <div className="party-fields">
          <div className="party-field-row">
            <span className="party-field-label">Jméno a příjmení:</span>
            <span className="party-field-input"><Ed defaultValue={demo.name} placeholder="Jméno a příjmení" lg onValueChange={setPersonName} /></span>
          </div>
          <div className="party-field-row">
            <span className="party-field-label">Datum narození:</span>
            <span className="party-field-input"><Ed defaultValue={demo.born} placeholder="DD. MM. RRRR" /></span>
          </div>
          <div className="party-field-row">
            <span className="party-field-label">Bydliště:</span>
            <span className="party-field-input"><Ed defaultValue={demo.addr} placeholder="Ulice, č., PSČ, město" xl /></span>
          </div>
          <div className="party-field-row">
            <span className="party-field-label">Občanství:</span>
            <span className="party-field-input"><Ed defaultValue="Česká republika" placeholder="Česká republika" /></span>
          </div>
          <div className="party-field-row">
            <span className="party-field-label">Telefon / e-mail:</span>
            <span className="party-field-input party-field-input--two">
              <Ed defaultValue="" placeholder="+420 000 000 000" />
              <Ed defaultValue="" placeholder="email@email.cz" lg />
            </span>
          </div>
          {role === 'creditor' && (
            <div className="party-field-row">
              <span className="party-field-label">Bankovní účet (IBAN):</span>
              <span className="party-field-input"><Ed defaultValue="" placeholder="CZ00 0000 0000 0000 0000 0000" xl /></span>
            </div>
          )}
          <div className="party-field-row">
            <span className="party-field-label">Jiné údaje:</span>
            <span className="party-field-input"><Ed defaultValue="" placeholder={`Volitelně další identifikační údaje ${roleGen}`} xl /></span>
          </div>
        </div>
      ) : (
        <div className="party-fields">
          <div className="party-field-row">
            <span className="party-field-label">{bizKind === 'po' ? 'Název společnosti:' : 'Obchodní firma:'}</span>
            <span className="party-field-input"><Ed defaultValue="" placeholder={bizKind === 'po' ? 'Název společnosti' : 'Obchodní firma'} lg onValueChange={setCompanyName} /></span>
          </div>
          <div className="party-field-row">
            <span className="party-field-label">IČ:</span>
            <span className="party-field-input"><Ed defaultValue="" placeholder="00000000" /></span>
          </div>
          <div className="party-field-row">
            <span className="party-field-label">Sídlo:</span>
            <span className="party-field-input"><Ed defaultValue="" placeholder="Ulice, č., PSČ, město" xl /></span>
          </div>
          {bizKind === 'po' && (
            <div className="party-field-row">
              <span className="party-field-label">Zastoupena:</span>
              <span className="party-field-input"><Ed defaultValue="" placeholder="jméno a funkce zástupce" lg onValueChange={setCompanyRep} /></span>
            </div>
          )}
          <div className="party-field-row">
            <span className="party-field-label">Telefon / e-mail:</span>
            <span className="party-field-input party-field-input--two">
              <Ed defaultValue="" placeholder="+420 000 000 000" />
              <Ed defaultValue="" placeholder="email@email.cz" lg />
            </span>
          </div>
          {role === 'creditor' && (
            <div className="party-field-row">
              <span className="party-field-label">Bankovní účet (IBAN):</span>
              <span className="party-field-input"><Ed defaultValue="" placeholder="CZ00 0000 0000 0000 0000 0000" xl /></span>
            </div>
          )}
          <div className="party-field-row">
            <span className="party-field-label">Jiné údaje:</span>
            <span className="party-field-input"><Ed defaultValue="" placeholder={`Volitelně další identifikační údaje ${roleGen}`} xl /></span>
          </div>
        </div>
      )}
    </div>
  );
};

window.PartyBlock = PartyBlock;

const Paper = ({ creditors, setCreditors, debtors, setDebtors, solidaryLiability, setSolidaryLiability, optionals, setActiveArticle, setActiveTipKey, onTipClick, activeTipKey }) => {

  const TipBtn = ({ pointKey, inline, end }) => (
    <button
      type="button"
      className={`tip-pin no-print ${inline ? 'tip-pin-inline' : ''} ${end ? 'tip-pin-end' : ''} ${activeTipKey === pointKey ? 'active' : ''}`}
      data-tip-key={pointKey}
      onClick={(e) => { e.stopPropagation(); onTipClick && onTipClick(pointKey); }}
      aria-label={`Zobrazit tip k bodu ${pointKey}`}
      title={`Tip k bodu ${pointKey}`}
      contentEditable={false}
    >
      TIP
    </button>
  );

  // ===== State pre dynamické klauzule =====
  const [currency, setCurrency] = React.useState('Kč');
  const [payingForm, setPayingForm] = React.useState('onetime');     // jednorazovo / splátky
  const [paymentsKind, setPaymentsKind] = React.useState('monthly'); // monthly / other
  const [returnForm, setReturnForm] = React.useState('hotovost');    // hotovost / prevod

  React.useEffect(() => {
    if (!['Kč', 'EUR', 'USD'].includes(currency)) setCurrency('Kč');
  }, [currency]);

  // Scroll-spy pre activeArticle. Dep array MUSÍ obsahovať všetko, čo môže
  // pridať/odobrať .has-tip paragraf, aby IntersectionObserver re-attachol
  // observers na nové DOM elementy.
  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 points = document.querySelectorAll('.paper p.has-tip .tip-pin[data-tip-key]');
    const pointEls = Array.from(points).map(btn => ({ el: btn.closest('p.has-tip'), key: btn.dataset.tipKey }));
    let currentKey = null;
    const pObs = new IntersectionObserver((entries) => {
      const hits = entries
        .filter(e => e.isIntersecting)
        .map(e => {
          const found = pointEls.find(pe => pe.el === e.target);
          return found ? { ...found, top: e.boundingClientRect.top } : null;
        })
        .filter(Boolean)
        .sort((a, b) => a.top - b.top);
      if (hits.length && hits[0].key !== currentKey) {
        currentKey = hits[0].key;
        setActiveTipKey && setActiveTipKey(currentKey);
      }
    }, { rootMargin: '-30% 0px -60% 0px' });
    pointEls.forEach(pe => pe.el && pObs.observe(pe.el));

    return () => { obs.disconnect(); pObs.disconnect(); };
  }, [creditors.length, debtors.length, optionals, payingForm, paymentsKind, returnForm, solidaryLiability]);

  // Strany — pridanie / odobranie / typ
  const addCreditor = () => creditors.length < 10 && setCreditors([...creditors, { id: Date.now(), type: 'person' }]);
  const removeCreditor = (id) => creditors.length > 1 && setCreditors(creditors.filter(c => c.id !== id));
  const setCreditorType = (id, type) => setCreditors(creditors.map(c => c.id === id ? { ...c, type } : c));

  const addDebtor = () => debtors.length < 10 && setDebtors([...debtors, { id: Date.now() + 1, type: 'person' }]);
  const removeDebtor = (id) => debtors.length > 1 && setDebtors(debtors.filter(d => d.id !== id));
  const setDebtorType = (id, type) => setDebtors(debtors.map(d => d.id === id ? { ...d, type } : d));

  const demoCreditor = (i) => i === 0 ? { name: 'Jan Novák', born: '14. 03. 1981', addr: 'Botanická 14, 602 00 Brno' } : { name: '', born: '', addr: '' };
  const demoDebtor = (i) => i === 0 ? { name: 'Petr Svoboda', born: '04. 08. 1991', addr: 'Údolní 8, 602 00 Brno' } : { name: '', born: '', addr: '' };

  // Display names pre podpisovú časť
  const [creditorDisplay, setCreditorDisplay] = React.useState({});
  const [debtorDisplay, setDebtorDisplay] = React.useState({});
  const setCD = (id) => (text) => setCreditorDisplay(s => (s[id] === text ? s : { ...s, [id]: text }));
  const setDD = (id) => (text) => setDebtorDisplay(s => (s[id] === text ? s : { ...s, [id]: text }));

  // Pluralizácia
  const C = creditors.length > 1;
  const D = debtors.length > 1;

  // Věřitel — pádové formy
  const V_N   = C ? 'Věřitelé' : 'Věřitel';     // 1. p.
  const V_NL  = C ? 'věřitelé' : 'věřitel';     // 1. p. lowercase
  const V_G   = C ? 'věřitelů' : 'věřitele';    // 2. p.
  const V_D   = C ? 'věřitelům' : 'věřiteli';   // 3. p.
  const V_MA  = C ? 'mají' : 'má';
  // Dlužník
  const D_N   = D ? 'Dlužníci' : 'Dlužník';
  const D_NL  = D ? 'dlužníci' : 'dlužník';
  const D_G   = D ? 'dlužníků' : 'dlužníka';
  const D_D   = D ? 'dlužníkům' : 'dlužníkovi';
  const D_VRA = 'vrátí';                         // 3. os. sg. i pl. zhodné
  const D_ZAV = D ? 'se zavazují' : 'se zavazuje';
  const D_PRO = D ? 'prohlašují' : 'prohlašuje';
  const D_UZN = D ? 'uznávají' : 'uznává';
  const D_POT = D ? 'svými podpisy potvrzují' : 'svým podpisem potvrzuje';
  // „bytě" pri PO/FO dlžníkovi nemá zmysel pri uznaní dlhu — used kept just for sg/pl text
  const SOL   = D && solidaryLiability ? ' společně a nerozdílně' : '';

  const curLabel = currency;

  // Číslovanie článkov sa mení podľa toggla rozhodčí doložka (4. krok č. — Další ujednání)
  // a Rozhodčí doložka (5. krok č. — voliteľný).
  // Optionals: c-other-terms (čl. IV Další ujednání), c-arbitration (čl. V Rozhodčí doložka).
  let artNum = 4; // čl. I = Uznání dluhu, čl. II = Splácení, čl. III = Způsob vrácení; ďalšie články dynamicky
  const artFurtherTerms = optionals['c-other-terms'] ? artNum++ : null;
  const artArbitration = optionals['c-arbitration'] ? artNum++ : null;
  const artFinal = artNum;

  const roman = (n) => ['I','II','III','IV','V','VI','VII'][n-1] || String(n);

  return (
    <div className="paper-stage">
      <article className="paper" aria-label="Uznání dluhu — editovatelný dokument">
        <h1 className="doc-title">UZNÁNÍ DLUHU</h1>
        <div className="doc-sub">učiněné podle § 2053 a násl. zákona č. 89/2012 Sb., občanský zákoník</div>

        {/* Strany */}
        <section className="article" id="art-parties">
          <p className="party-heading" style={{ fontWeight: 600, marginTop: 18, marginBottom: 10 }}>Věřitel:</p>

          {creditors.map((c, i) => {
            const d = demoCreditor(i);
            const lbl = creditors.length > 1 ? `Věřitel č. ${String(i + 1).padStart(2, '0')}` : 'Věřitel';
            return (
              <PartyBlock key={c.id} label={lbl} role="creditor" type={c.type || 'person'}
                onTypeChange={(t) => setCreditorType(c.id, t)}
                onRemove={creditors.length > 1 ? () => removeCreditor(c.id) : null}
                onDisplayChange={setCD(c.id)}
                demo={d} />
            );
          })}

          <div style={{ marginTop: 10, marginBottom: 4 }}>
            <button className="party-add party-add-left" onClick={addCreditor} disabled={creditors.length >= 10}>+ Další věřitel</button>
          </div>

          <p className="party-alias">
            (dále jen jako „<span className="party-alias-term">{V_NL}</span>")
          </p>

          <p className="no-copy" style={{ textAlign: 'center', fontStyle: 'italic', color: 'var(--ink-3)', margin: '14px 0' }}>a</p>

          <p className="party-heading" style={{ fontWeight: 600, marginTop: 18, marginBottom: 10 }}>Dlužník:</p>

          {debtors.map((d, i) => {
            const dem = demoDebtor(i);
            const lbl = debtors.length > 1 ? `Dlužník č. ${String(i + 1).padStart(2, '0')}` : 'Dlužník';
            return (
              <PartyBlock key={d.id} label={lbl} role="debtor" type={d.type || 'person'}
                onTypeChange={(t) => setDebtorType(d.id, t)}
                onRemove={debtors.length > 1 ? () => removeDebtor(d.id) : null}
                onDisplayChange={setDD(d.id)}
                demo={dem} />
            );
          })}

          <div style={{ marginTop: 10, marginBottom: 4 }}>
            <button className="party-add party-add-left" onClick={addDebtor} disabled={debtors.length >= 10}>+ Další dlužník</button>
          </div>

          <p className="party-alias">
            (dále jen jako „<span className="party-alias-term">{D_NL}</span>")
          </p>

          <p style={{ marginTop: 18, fontStyle: 'italic', color: 'var(--ink-3)', fontSize: 13 }}>
            (dále spolu jen jako „<span style={{ color: 'var(--ink)' }}>smluvní strany</span>")
          </p>
        </section>

        {/* Čl. I — Uznání dluhu */}
        <section className="article" id="art-1">
          <div className="article-head">
            <div className="article-num">čl. I</div>
            <span className="article-title">Uznání dluhu</span>
          </div>

          <p className="has-tip">
            <TipBtn pointKey="1.1" />
            <strong>1.1</strong> &nbsp;{D_N} tímto {D_UZN} svůj dluh vůči {V_D} ve výši{' '}
            <span className="ed-cg"><Ed defaultValue="" placeholder="50 000" num /></span>{' '}
            <Ed select value={currency} onValueChange={setCurrency} options={[
              { v: 'Kč', label: 'Kč' },
              { v: 'EUR', label: 'EUR' },
              { v: 'USD', label: 'USD' },
            ]} />
            {' '}(slovy: <span className="ed-cg"><Ed defaultValue="" placeholder="padesát tisíc korun českých" lg /></span>), který vznikl z důvodu:{' '}
            <span className="ed-cg"><Ed defaultValue="" placeholder="zápůjčka peněz dle smlouvy o zápůjčce ze dne ..." xl /></span>.
          </p>

          <p className="has-tip">
            <TipBtn pointKey="1.2" />
            <strong>1.2</strong> &nbsp;{D_N} výslovně {D_PRO}, že {D_UZN} shora uvedený dluh <strong>co do důvodu i výše</strong> a {D_ZAV} jej {V_D} uhradit ve lhůtách a způsobem uvedeným níže.
          </p>
        </section>

        {/* Čl. II — Splácení dluhu */}
        <section className="article" id="art-2">
          <div className="article-head">
            <div className="article-num">čl. II</div>
            <span className="article-title">Splácení dluhu</span>
          </div>

          <p className="has-tip">
            <TipBtn pointKey="2.1" />
            <strong>2.1</strong> &nbsp;Smluvní strany se dohodly, že {D_NL} {D_VRA} dluh{SOL}{' '}
            <Ed select value={payingForm} onValueChange={setPayingForm} options={[
              { v: 'onetime', label: 'jednorázově' },
              { v: 'payments', label: 've splátkách' },
            ]} />
            {payingForm === 'onetime' && <>{' '}nejpozději do <span className="ed-cg"><Ed defaultValue="" placeholder="DD. MM. RRRR" /></span>.</>}
            {payingForm === 'payments' && '.'}
          </p>

          {payingForm === 'payments' && (
            <p className="has-tip">
              <TipBtn pointKey="2.2" />
              <strong>2.2</strong> &nbsp;Splácení proběhne{' '}
              <Ed select value={paymentsKind} onValueChange={setPaymentsKind} options={[
                { v: 'monthly', label: 'v měsíčních splátkách.' },
                { v: 'other', label: 'v jiných než měsíčních splátkách.' },
              ]} />
            </p>
          )}

          {payingForm === 'payments' && paymentsKind === 'monthly' && (
            <>
              <p>
                <strong>2.3</strong> &nbsp;{D_N} {D_ZAV} uhradit dluh {V_D} v pravidelných měsíčních splátkách ve výši{' '}
                <span className="ed-cg"><Ed defaultValue="" placeholder="5 000" num /></span> {curLabel} vždy{' '}
                <Ed select options={[
                  { v: 'do 5. dne v měsíci', label: 'do 5. dne v měsíci' },
                  { v: 'do 10. dne v měsíci', label: 'do 10. dne v měsíci' },
                  { v: 'do 15. dne v měsíci', label: 'do 15. dne v měsíci' },
                  { v: 'do 20. dne v měsíci', label: 'do 20. dne v měsíci' },
                  { v: 'do 25. dne v měsíci', label: 'do 25. dne v měsíci' },
                ]} />. První splátka je splatná dne <span className="ed-cg"><Ed defaultValue="" placeholder="DD. MM. RRRR" /></span>.
              </p>
              <p className="has-tip">
                <TipBtn pointKey="2.4" />
                <strong>2.4</strong> &nbsp;V případě, že se {D_NL} zpozdí byť i jen s jednou splátkou, {V_NL} {V_MA} právo požadovat úhradu celého zbývajícího dluhu.
              </p>
            </>
          )}

          {payingForm === 'payments' && paymentsKind === 'other' && (
            <>
              <p>
                <strong>2.3</strong> &nbsp;{D_N} bude splácet dluh ve splátkách následovně:{' '}
                <span className="ed-cg"><Ed defaultValue="" placeholder="Zde uveďte čas a způsob úhrady jednotlivých splátek" xl /></span>.
              </p>
              <p className="has-tip">
                <TipBtn pointKey="2.4" />
                <strong>2.4</strong> &nbsp;V případě, že se {D_NL} zpozdí byť i jen s jednou splátkou, {V_NL} {V_MA} právo požadovat úhradu celého zbývajícího dluhu.
              </p>
            </>
          )}

          {D && (
            <p className="has-tip">
              <TipBtn pointKey="2.solidarity" />
              <strong>{payingForm === 'payments' ? '2.5' : '2.2'}</strong> &nbsp;<strong>Solidární odpovědnost dlužníků.</strong> Dlužníci se zavazují plnit dluh{' '}
              <Ed select value={solidaryLiability ? 'solidarni' : 'podilove'} onValueChange={(v) => setSolidaryLiability(v === 'solidarni')} options={[
                { v: 'solidarni', label: 'společně a nerozdílně podle § 1872 zákona č. 89/2012 Sb., občanský zákoník' },
                { v: 'podilove',  label: 'každý rovným dílem podle § 1869 zákona č. 89/2012 Sb., občanský zákoník' },
              ]} />.
            </p>
          )}
        </section>

        {/* Čl. III — Způsob vrácení dluhu */}
        <section className="article" id="art-3">
          <div className="article-head">
            <div className="article-num">čl. III</div>
            <span className="article-title">Způsob vrácení dluhu</span>
          </div>

          <p className="has-tip">
            <TipBtn pointKey="3.1" />
            <strong>3.1</strong> &nbsp;Smluvní strany se dohodly, že {D_NL} {D_VRA} dluh {V_D}{' '}
            <Ed select value={returnForm} onValueChange={setReturnForm} options={[
              { v: 'hotovost', label: 'v hotovosti v místě bydliště nebo sídla věřitele' },
              { v: 'prevod', label: `převodem na bankovní účet ${V_G} uvedený v záhlaví této listiny` },
            ]} />.
          </p>
        </section>

        {/* Čl. IV — Další ujednání (voliteľný) */}
        {optionals['c-other-terms'] && (
          <section className="article" id="art-4">
            <div className="article-head">
              <div className="article-num">čl. {roman(artFurtherTerms)}</div>
              <span className="article-title">Další ujednání</span>
            </div>

            <p className="has-tip">
              <TipBtn pointKey="4.1" />
              <strong>{artFurtherTerms}.1</strong> &nbsp;Smluvní strany se dále dohodly:{' '}
              <span className="ed-cg"><Ed defaultValue="" placeholder="Sem vložte případně další ujednání — sankce, ručitelství, zástava, zákaz postoupení pohledávky apod." xl /></span>
            </p>
          </section>
        )}

        {/* Čl. V (resp. IV) — Rozhodčí doložka (voliteľný) */}
        {optionals['c-arbitration'] && (
          <section className="article" id="art-5">
            <div className="article-head">
              <div className="article-num">čl. {roman(artArbitration)}</div>
              <span className="article-title">Rozhodčí doložka</span>
            </div>

            <p className="has-tip">
              <TipBtn pointKey="5.1" />
              <strong>{artArbitration}.1</strong> &nbsp;Smluvní strany se dohodly, že všechny majetkové spory, které vzniknou z tohoto uznání dluhu, budou rozhodnuty v rozhodčím řízení podle zákona č. 216/1994 Sb. o rozhodčím řízení rozhodcem: JUDr. Milan Ficek, advokát (zapsaný v seznamu evropských advokátů ČAK pod ev. č. 50245), se sídlem: Lidická 700/19, 602 00 Brno (<a href="http://www.rrcr.cz" target="_blank" rel="noopener noreferrer">www.rrcr.cz</a>). Rozhodce rozhoduje neveřejně bez ústního jednání (písemně) na základě písemných důkazů. Rozhodčí poplatek za každý spor činí 4 % z hodnoty předmětu sporu, nejméně 4.500,- Kč. Zásilka se má za doručenou i vhozením do domovní schránky adresáta nebo jejím vrácením rozhodci. Rozhodce se řídí právními předpisy a nesmí rozhodovat v rozporu s veřejným pořádkem. Právní předpisy rozhodce aplikuje stejně jako soudce v soudním řízení podle o. s. ř. Ustanovení této rozhodčí doložky upravující postup, kterým má rozhodce vést řízení, je dohodou stran ve smyslu § 19 odst. 1 ZRŘ. Není-li postup upraven, postupuje rozhodce v řízení způsobem, který považuje za vhodný (§ 19 odst. 2 ZRŘ), a to s přiměřenou aplikací ustanovení o. s. ř. (§ 30 ZRŘ).
            </p>
          </section>
        )}

        {/* Čl. final — Závěrečná ustanovení */}
        <section className="article" id="art-final">
          <div className="article-head">
            <div className="article-num">čl. {roman(artFinal)}</div>
            <span className="article-title">Závěrečná ustanovení</span>
          </div>

          <p>
            <strong>{artFinal}.1</strong> &nbsp;Toto uznání dluhu bylo vyhotoveno ve 2 stejnopisech, pro každého z účastníků. Každý z účastníků převzal jedno vyhotovení tohoto uznání dluhu. Smluvní strany se dohodly, že toto uznání dluhu je možné měnit pouze očíslovaným písemným dodatkem podepsaným oběma stranami, který se stane nedílnou součástí tohoto uznání dluhu.
          </p>

          <p className="has-tip">
            <TipBtn pointKey="final.2" />
            <strong>{artFinal}.2</strong> &nbsp;{D_N} a {V_NL} potvrzují, že si toto uznání dluhu řádně přečetli, jeho obsahu rozumějí a na znak souhlasu jej podepisují. Smluvní strany prohlašují, že toto uznání dluhu učinily svobodně a vážně.
          </p>

          {/* Místo a datum podpisu */}
          <p style={{ textAlign: 'center', margin: '32px 0 60px' }}>
            V <span className="ed-cg"><Ed defaultValue="" placeholder="Praha / Brno / ..." /></span>, dne <span className="ed-cg"><Ed defaultValue="" placeholder="DD. MM. RRRR" /></span>.
          </p>

          <div className="signatures" style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            <div>
              {creditors.map((c, i) => (
                <div key={c.id} className="sig-block" style={{ marginBottom: 24, textAlign: 'center' }}>
                  <div style={{ borderTop: '1px solid #1a1a1a', paddingTop: 6 }}>
                    <strong>{C ? `Věřitel č. ${String(i + 1).padStart(2, '0')}` : 'Věřitel'}</strong>
                    {creditorDisplay[c.id] ? <><br/>{creditorDisplay[c.id]}</> : null}
                  </div>
                </div>
              ))}
            </div>
            <div>
              {debtors.map((d, i) => (
                <div key={d.id} className="sig-block" style={{ marginBottom: 24, textAlign: 'center' }}>
                  <div style={{ borderTop: '1px solid #1a1a1a', paddingTop: 6 }}>
                    <strong>{D ? `Dlužník č. ${String(i + 1).padStart(2, '0')}` : 'Dlužník'}</strong>
                    {debtorDisplay[d.id] ? <><br/>{debtorDisplay[d.id]}</> : null}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </article>

      {/* Download actions */}
      <div className="paper-actions no-print no-copy">
        <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">Stáhnout jako PDF</span>
            <span className="btn-download__meta">A4</span>
          </button>
          {!__IS_MOBILE_DEVICE && (
            <button type="button" className="btn-download btn-download--ghost" onClick={() => window.print()}>
              <span className="btn-download__glyph" aria-hidden="true">↓</span>
              <span className="btn-download__main">Stáhnout jako 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">Vymazat údaje</span>
            <span className="btn-download__meta">nevratná akce</span>
          </button>
        </div>
        {__IS_MOBILE_DEVICE ? (
          <p className="paper-actions__note paper-actions__note--mobile" role="note">
            <span className="paper-actions__note-icon" aria-hidden="true">ⓘ</span>
            <span>Stažení ve formátu Word je momentálně dostupné pouze na počítači. Pro mobil doporučujeme stažení v PDF.</span>
          </p>
        ) : (
          <p className="paper-actions__note">
            PDF se otevře v dialogu tisku prohlížeče — v cíli zvolte <em>Uložit jako PDF</em>. Word (.doc) otevřete v MS Word nebo v LibreOffice a můžete uznání dluhu dále upravit.
          </p>
        )}
      </div>
    </div>
  );
};

window.Paper = Paper;