// ============================================================
// Paper — A4 dokument editor pre smlouvu o půjčce (zápůjčku)
// Single-doctype: § 2390 zákona č. 89/2012 Sb., občanský zákoník (NOZ).
// Implementácia podľa docs/FORM_SPEC.md.
// Vizuálna štruktúra prevzatá z najomnazmluva.sk pattern: .article-head,
// .has-tip + <strong>X.Y</strong> číslovanie, .party-block, .party-add.
// ============================================================

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é klauzuly (presunuté SEM aby useEffect dep array fungoval) =====
  const [currency, setCurrency] = React.useState('Kč');
  const [customCurrency, setCustomCurrency] = React.useState('');
  const [paymentMethod, setPaymentMethod] = React.useState('hotovost');
  const [interestType, setInterestType] = React.useState('bezurocne');
  const [payingForm, setPayingForm] = React.useState('onetime');
  const [paymentsKind, setPaymentsKind] = React.useState('monthly');
  const [returnForm, setReturnForm] = React.useState('hotovost');

  // 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));

    // Point-level scroll-spy: when a .has-tip paragraph enters reading band,
    // auto-switch activeTipKey to that point.
    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, paymentMethod, interestType, 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;

  // Veriteľ — pádové formy
  const V_N   = C ? 'Věřitelé' : 'Věřitel';     // 1. p. (kdo)
  const V_NL  = C ? 'věřitelé' : 'věřitel';     // 1. p. lowercase
  const V_G   = C ? 'věřitelů' : 'věřitele';    // 2. p. (koho)
  const V_D   = C ? 'věřitelům' : 'věřiteli';   // 3. p. (komu)
  const V_I   = C ? 'věřiteli' : 'věřitelem';   // 7. p. (kým) — „půjčení peněz dlužníkovi věřitelem"
  // Dlž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_ZAV = D ? 'se zavazují' : 'se zavazuje';
  const D_VRA = 'vrátí';   // 3. os. sg. i pl. zhodné
  const D_PRO = D ? 'prohlašují' : 'prohlašuje';
  const D_POT = D ? 'svými podpisy potvrzují' : 'svým podpisem potvrzuje';
  const SOL   = D && solidaryLiability ? ' společně a nerozdílně' : '';

  const curLabel = currency === '__custom__' ? (customCurrency || 'měna') : currency;

  return (
    <div className="paper-stage">
      <article className="paper" aria-label="Smlouva o půjčce — editovatelný dokument">
        <h1 className="doc-title">SMLOUVA O PŮJČCE (ZÁPŮJČKA)</h1>
        <div className="doc-sub">uzavřená podle § 2390 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 (zapůjč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 „<span className="party-alias-term">{V_NL}</span>" nebo „<span className="party-alias-term">{C ? 'zapůjčitelé' : 'zapůjčitel'}</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 (vydlužitel):</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 „<span className="party-alias-term">{D_NL}</span>" nebo „<span className="party-alias-term">{D ? 'vydlužitelé' : 'vydlužitel'}</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 — Předmět smlouvy */}
        <section className="article" id="art-1">
          <div className="article-head">
            <div className="article-num">čl. I</div>
            <span className="article-title">Předmět smlouvy o půjčce</span>
          </div>

          <p className="has-tip">
            <TipBtn pointKey="1.1" />
            Předmětem této smlouvy o půjčce je půjčení peněz 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' },
              { v: '__custom__', label: 'Jiná měna' },
            ]} />
            {currency === '__custom__' && <> (<span className="ed-cg"><Ed defaultValue="" placeholder="kód měny" onValueChange={setCustomCurrency} /></span>)</>}
            {' '}(slovy: <span className="ed-cg"><Ed defaultValue="" placeholder="padesát tisíc korun českých" lg /></span>) {D_D} {V_I} za podmínek uvedených v této smlouvě.
          </p>
        </section>

        {/* Čl. II — Způsob poskytnutí peněz */}
        <section className="article" id="art-2">
          <div className="article-head">
            <div className="article-num">čl. II</div>
            <span className="article-title">Způsob poskytnutí peněz</span>
          </div>

          <p className="has-tip">
            <TipBtn pointKey="2.1" />
            <strong>2.1</strong> &nbsp;Půjčka podle čl. I této smlouvy se {D_D} poskytuje{' '}
            <Ed select value={paymentMethod} onValueChange={setPaymentMethod} options={[
              { v: 'hotovost', label: 'v hotovosti při podpisu této smlouvy' },
              { v: 'prevod', label: 'převodem na bankovní účet' },
              { v: 'hotovost_prevod', label: 'částečně v hotovosti a částečně převodem' },
            ]} />.
          </p>

          {paymentMethod === 'hotovost' && (
            <p className="has-tip">
              <TipBtn pointKey="2.2" />
              <strong>2.2</strong> &nbsp;Půjčka ve výši uvedené v čl. I této smlouvy byla poskytnuta {D_D} před podpisem této smlouvy o půjčce v hotovosti. {D_N} {D_PRO} a {D_POT} převzetí částky uvedené v čl. I této smlouvy.
            </p>
          )}

          {paymentMethod === 'prevod' && (
            <p className="has-tip">
              <TipBtn pointKey="2.2" />
              <strong>2.2</strong> &nbsp;Půjčka ve výši uvedené v čl. I této smlouvy bude poskytnuta {D_D} převodem na bankovní účet {V_G} uvedený v záhlaví této smlouvy.
            </p>
          )}

          {paymentMethod === 'hotovost_prevod' && (
            <>
              <p className="has-tip">
                <TipBtn pointKey="2.2" />
                <strong>2.2</strong> &nbsp;První část ve výši{' '}
                <span className="ed-cg"><Ed defaultValue="" placeholder="20 000" num /></span> {curLabel}{' '}
                (slovy: <span className="ed-cg"><Ed defaultValue="" placeholder="dvacet tisíc korun českých" lg /></span>) byla poskytnuta {D_D} před podpisem této smlouvy o půjčce v hotovosti a {D_N} {D_POT} převzetí uvedené částky.
              </p>
              <p>
                <strong>2.3</strong> &nbsp;Druhá část ve výši{' '}
                <span className="ed-cg"><Ed defaultValue="" placeholder="30 000" num /></span> {curLabel}{' '}
                (slovy: <span className="ed-cg"><Ed defaultValue="" placeholder="třicet tisíc korun českých" lg /></span>) bude poskytnuta {D_D} převodem na bankovní účet {V_G} uvedený v záhlaví této smlouvy.
              </p>
            </>
          )}

          <p className="legal-hint no-copy" style={{ fontSize: 12.5, color: 'var(--ink-3)', fontStyle: 'italic', marginTop: 8 }}>
            <strong>Tip:</strong> Pokud již byly peníze předány předem a potřebujete k tomu doklad, vytvořte si <em>uznání dluhu</em> podle § 2053 zákona č. 89/2012 Sb., občanský zákoník — zdarma na stránce <a href="http://uznanidluhu.cz/" target="_blank" rel="noopener noreferrer">uznanidluhu.cz</a>.
          </p>
        </section>

        {/* Čl. III — Smluvní úrok */}
        <section className="article" id="art-3">
          <div className="article-head">
            <div className="article-num">čl. III</div>
            <span className="article-title">Smluvní úrok</span>
          </div>

          <p className="has-tip">
            <TipBtn pointKey="3.1" />
            {interestType === 's_urokem' && <><strong>3.1</strong> &nbsp;</>}
            Smluvní strany se dohodly, že {D_NL} {D_VRA} {V_D} půjčenou částku{' '}
            <Ed select value={interestType} onValueChange={setInterestType} options={[
              { v: 'bezurocne', label: 'bezúročně' },
              { v: 's_urokem', label: 's úrokem (smluvní úrok jako odměna za poskytnutí půjčky)' },
            ]} />.
          </p>

          {interestType === 's_urokem' && (
            <>
              <p className="has-tip">
                <TipBtn pointKey="3.2" />
                <strong>3.2</strong> &nbsp;{D_N} zaplatí {V_D} za poskytnutí půjčky odměnu (smluvní úrok) ve výši{' '}
                <span className="ed-cg"><Ed defaultValue="" placeholder="5 % p. a." lg /></span>.
              </p>
              <p>
                <strong>3.3</strong> &nbsp;Celková částka, tj. půjčená částka spolu s odměnou (smluvním úrokem), kterou {D_NL} {D_VRA} {V_D} podle čl. IV této smlouvy o půjčce, bude{' '}
                <span className="ed-cg"><Ed defaultValue="" placeholder="52 500" num /></span> {curLabel}{' '}
                (slovy: <span className="ed-cg"><Ed defaultValue="" placeholder="padesát dva tisíce pět set korun českých" lg /></span>).
              </p>
            </>
          )}
        </section>

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

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

          {payingForm === 'payments' && (
            <p className="has-tip">
              <TipBtn pointKey="4.2" />
              <strong>4.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>4.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á <span className="ed-cg"><Ed defaultValue="" placeholder="DD. MM. RRRR" /></span>.
              </p>
              <p className="has-tip">
                <TipBtn pointKey="4.4" />
                <strong>4.4</strong> &nbsp;Pokud se {D_NL} zpozdí s vrácením více než dvou splátek nebo jedné splátky po dobu delší než tři měsíce, {V_NL} má právo od této smlouvy o půjčce odstoupit a požadovat splnění celého dluhu najednou (§ 2394 zákona č. 89/2012 Sb., občanský zákoník).
              </p>
            </>
          )}

          {payingForm === 'payments' && paymentsKind === 'other' && (
            <>
              <p>
                <strong>4.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 dluhu" xl /></span>.
              </p>
              <p className="has-tip">
                <TipBtn pointKey="4.4" />
                <strong>4.4</strong> &nbsp;Pokud se {D_NL} zpozdí s vrácením více než dvou splátek nebo jedné splátky po dobu delší než tři měsíce, {V_NL} má právo od této smlouvy o půjčce odstoupit a požadovat splnění celého dluhu najednou (§ 2394 zákona č. 89/2012 Sb., občanský zákoník).
              </p>
            </>
          )}

          <p className="has-tip">
            <TipBtn pointKey="4.5" />
            <strong>{payingForm === 'payments' ? '4.5' : '4.2'}</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ě věřitele' },
              { v: 'prevod', label: `převodem na bankovní účet ${V_G} uvedený v záhlaví této smlouvy` },
            ]} />.
          </p>

          {D && (
            <p className="has-tip">
              <TipBtn pointKey="4.solidarity" />
              <strong>{payingForm === 'payments' ? '4.6' : '4.3'}</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. V — Další práva a povinnosti */}
        <section className="article" id="art-5">
          <div className="article-head">
            <div className="article-num">čl. V</div>
            <span className="article-title">Další práva a povinnosti</span>
          </div>

          <p className="has-tip">
            <TipBtn pointKey="5.1" />
            {optionals['c-other-terms'] && <><strong>5.1</strong> &nbsp;</>}
            Smluvní strany se dohodly, že pokud se {D_NL} dostane do prodlení se zaplacením dluhu, {D_NL} se zavazuje uhradit {V_D} <strong>zákonný úrok z prodlení</strong>, a to ode dne následujícího po dni splatnosti až do úplného zaplacení (§ 1968 a § 1970 zákona č. 89/2012 Sb., občanský zákoník; nař. vlády č. 351/2013 Sb.).
          </p>

          {optionals['c-other-terms'] && (
            <p className="has-tip">
              <TipBtn pointKey="5.2" />
              <strong>5.2</strong> &nbsp;<span className="ed-cg"><Ed defaultValue="" placeholder="Sem vložte případně další ujednání, pokud to považujete za nutné." xl /></span>
            </p>
          )}
        </section>

        {/* Čl. VI — Doručování */}
        <section className="article" id="art-6">
          <div className="article-head">
            <div className="article-num">čl. VI</div>
            <span className="article-title">Doručování</span>
          </div>

          <p className="has-tip">
            <TipBtn pointKey="6.1" />
            <strong>6.1</strong> &nbsp;Smluvní strany se dohodly, že veškeré písemnosti si doručují doporučeně do vlastních rukou, prostřednictvím držitele poštovní licence, a to vždy nejméně s desetidenní úložní dobou, nebo osobně. Stranám se doručuje na adresy uvedené při jejich jménech. V případě, že své adresy od okamžiku podpisu této dohody změnily, jsou povinny tuto skutečnost bez zbytečného odkladu sdělit druhé smluvní straně. Osobám registrovaným ve veřejných rejstřících je možno vždy doručovat i na adresy uvedené v těchto rejstřících. Za doručenou zásilku se považuje také zásilka odeslaná podle předchozího odstavce, jejíž přijetí adresát odmítl nebo se nedoručitelná nebo nedoručená vrátila zpět, a to i když se adresát o tomto doručení nedozvěděl. Účinek doručení zásilky nastává dnem jejího přijetí nebo dnem, kdy se tato vrací zpět odesílateli.
          </p>

          <p>
            <strong>6.2</strong> &nbsp;Výše uvedená ustanovení o doručování se přiměřeně použijí i v rozhodčím řízení při doručování písemnosti rozhodčího řízení, včetně povinnosti oznámit změnu adresy pro doručování rozhodci.
          </p>
        </section>

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

          <p>
            <strong>7.1</strong> &nbsp;Tato smlouva o půjčce byla vyhotovena ve 2 stejnopisech, pro každého z účastníků. Každý z účastníků převzal jedno vyhotovení této smlouvy o půjčce. Smluvní strany se dohodly, že tuto smlouvu o půjčce 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í této smlouvy o půjčce.
          </p>

          {optionals['c-arbitration'] && (
            <p className="has-tip">
              <TipBtn pointKey="7.2" />
              <strong>7.2</strong> &nbsp;Smluvní strany se dohodly, že všechny majetkové spory, které vzniknou z této smlouvy, 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>
          )}

          <p>
            <strong>{optionals['c-arbitration'] ? '7.3' : '7.2'}</strong> &nbsp;{D_N} a {V_NL} potvrzují, že si smlouvu o půjčce řádně přečetli, obsahu smlouvy o půjčce rozumějí a na znak souhlasu ji podepisují. Smluvní strany prohlašují, že smlouvu o půjčce uzavřely svobodně a vážně.
          </p>

          {/* Místo podpisu */}
          <p style={{ textAlign: 'center', margin: '32px 0 60px' }}>
            V <span className="ed-cg"><Ed defaultValue="" placeholder="Praha / Brno / ..." /></span>, dne .............................
          </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 — pattern z najomnazmluva.sk */}
      <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 smlouvu dále upravit.
          </p>
        )}
      </div>
    </div>
  );
};

window.Paper = Paper;