// ============================================================
// Paper — the A4 document body with inline editable fields
// Based on a real krátkodobý nájom bytu (KNB) template, adapted
// for free user editing with selects, number fields & placeholders.
// ============================================================

// PartyBlock — person/entrepreneur toggle for a single party line
const PartyBlock = ({ label, type, onTypeChange, onRemove, demo, onDisplayChange }) => {
  const isPerson = type === 'person';
  const [bizKind, setBizKind] = React.useState('po'); // 'po' = právnická osoba, 'szco' = fyzická osoba – podnikateľ

  // Track editable values to compute the display name (for signature area)
  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 = label.toLowerCase().startsWith('náj') ? 'nájomcu' : 'prenajímateľa';
  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>
              Podnikateľ
            </button>
          </div>
          {!isPerson && (
            <div className="party-type-switch party-type-switch-sub" role="tablist" aria-label="Typ podnikateľa">
              <button
                role="tab"
                aria-selected={bizKind === 'po'}
                className={bizKind === 'po' ? 'active' : ''}
                onClick={() => setBizKind('po')}
              >
                Právnická osoba
              </button>
              <button
                role="tab"
                aria-selected={bizKind === 'szco'}
                className={bizKind === 'szco' ? 'active' : ''}
                onClick={() => setBizKind('szco')}
              >
                FO – podnikateľ
              </button>
            </div>
          )}
        </div>
        {onRemove && <button className="remove" onClick={onRemove} aria-label="Odstrániť">×</button>}
      </div>

      {isPerson ? (
        <p className="party-line">
          <span className="ed-cg"><Ed defaultValue={demo.name} placeholder="Meno a priezvisko" lg onValueChange={setPersonName} />,</span>
          {' '}nar. <span className="ed-cg"><Ed defaultValue={demo.born} placeholder="DD. MM. RRRR" />,</span>
          {' '}trvalý pobyt <span className="ed-cg"><Ed defaultValue={demo.addr} placeholder="Ulica, č., PSČ, mesto" xl />,</span>
          {' '}tel. <span className="ed-cg"><Ed defaultValue="" placeholder="0900 000 000" />,</span>
          {' '}e-mail <span className="ed-cg"><Ed defaultValue="" placeholder="email@email.com" lg />,</span>
          {roleGen === 'prenajímateľa' && <>{' '}IBAN <span className="ed-cg"><Ed defaultValue="" placeholder="SK00 0000 0000 0000 0000 0000" xl />,</span></>}
          {' '}<Ed defaultValue="" placeholder={`Iné údaje ${roleGen}`} xl />
        </p>
      ) : (
        <p className="party-line">
          <span className="ed-cg"><Ed defaultValue="" placeholder="Obchodné meno" lg onValueChange={setCompanyName} />,</span>
          {' '}{bizKind === 'po' ? 'sídlo' : 'miesto podnikania'} <span className="ed-cg"><Ed defaultValue="" placeholder="Ulica, č., PSČ, mesto" xl />,</span>
          {' '}<span className="ed-cg">IČO: <Ed defaultValue="" placeholder="00 000 000" />,</span>
          {bizKind === 'po' && <>{' '}zastúpený <span className="ed-cg"><Ed defaultValue="" placeholder="meno a funkcia konateľa" lg onValueChange={setCompanyRep} />,</span></>}
          {' '}tel. <span className="ed-cg"><Ed defaultValue="" placeholder="0900 000 000" />,</span>
          {' '}e-mail <span className="ed-cg"><Ed defaultValue="" placeholder="email@email.com" lg />,</span>
          {roleGen === 'prenajímateľa' && <>{' '}IBAN <span className="ed-cg"><Ed defaultValue="" placeholder="SK00 0000 0000 0000 0000 0000" xl />,</span></>}
          {' '}<Ed defaultValue="" placeholder={`Iné údaje ${roleGen}`} xl />
        </p>
      )}
    </div>
  );
};

window.PartyBlock = PartyBlock;

const Paper = ({ doctype, landlords, setLandlords, tenants, setTenants, optionals, setActiveArticle, setActiveTipKey, onTipClick, activeTipKey, domBuildingType: domBuildingTypeProp, setDomBuildingType: setDomBuildingTypeProp }) => {
  const meta = DOCTYPES.find(d => d.id === doctype);

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

  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 the reading band,
    // auto-switch activeTipKey to that point so the right-sidebar tip follows.
    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) => {
      // Find the top-most intersecting point paragraph
      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(); };
  }, [doctype, landlords.length, tenants.length, optionals]);

  const addLandlord = () => landlords.length < 10 && setLandlords([...landlords, { id: Date.now(), type: 'person' }]);
  const removeLandlord = (id) => landlords.length > 1 && setLandlords(landlords.filter(l => l.id !== id));
  const setLandlordType = (id, type) => setLandlords(landlords.map(l => l.id === id ? { ...l, type } : l));
  const addTenant = () => tenants.length < 10 && setTenants([...tenants, { id: Date.now() + 1, type: 'person' }]);
  const removeTenant = (id) => tenants.length > 1 && setTenants(tenants.filter(t => t.id !== id));
  const setTenantType = (id, type) => setTenants(tenants.map(t => t.id === id ? { ...t, type } : t));

  const demoLandlord = (i) => i === 0 ? { name: 'Mária Kováčová', born: '12. 03. 1974', id: 'EK 884 231', addr: 'Záhradnícka 12, 821 08 Bratislava' } : { name: '', born: '', id: '', addr: '' };
  const demoTenant = (i) => i === 0 ? { name: 'Ing. Peter Novák', born: '04. 08. 1991', id: 'HC 112 490', addr: 'Mickiewiczova 3, 811 07 Bratislava' } : { name: '', born: '', id: '', addr: '' };

  // Display names for signature area — fed by PartyBlock onDisplayChange
  const [landlordDisplay, setLandlordDisplay] = React.useState({});
  const [tenantDisplay, setTenantDisplay] = React.useState({});
  const setLD = (id) => (text) => setLandlordDisplay(s => (s[id] === text ? s : { ...s, [id]: text }));
  const setTD = (id) => (text) => setTenantDisplay(s => (s[id] === text ? s : { ...s, [id]: text }));

  // ===== Grammar helpers for singular/plural in parties =====
  const L = landlords.length > 1; // prenajímatelia (plural)
  const T = tenants.length > 1;   // nájomcovia (plural)
  // Prenajímateľ
  const P_N   = L ? 'Prenajímatelia' : 'Prenajímateľ';       // nominatív: kto
  const P_G   = L ? 'Prenajímateľov' : 'Prenajímateľa';      // genitív / akuzatív: koho
  const P_D   = L ? 'Prenajímateľom' : 'Prenajímateľovi';    // datív: komu
  const P_JE  = L ? 'sú' : 'je';
  const P_BY  = L ? 'boli' : 'bol';
  const P_OPR = L ? 'oprávnení' : 'oprávnený';
  const P_POV = L ? 'povinní' : 'povinný';
  // Nájomca
  const N_N   = T ? 'Nájomcovia' : 'Nájomca';
  const N_G   = T ? 'Nájomcov' : 'Nájomcu';
  const N_D   = T ? 'Nájomcom' : 'Nájomcovi';
  const N_JE  = T ? 'sú' : 'je';
  const N_BY  = T ? 'boli' : 'bol';
  const N_OPR = T ? 'oprávnení' : 'oprávnený';
  const N_POV = T ? 'povinní' : 'povinný';
  const N_VZ  = T ? 'vzali' : 'berie';   // berie / berú na vedomie
  const N_VPS = T ? 'vpustili' : 'vpustil';
  const N_VYH = T ? 'vyhlasujú' : 'vyhlasuje';
  const N_ODV = T ? 'odovzdajú' : 'odovzdá';
  const N_DAV = T ? 'dávajú' : 'dáva';
  const N_NEM = T ? 'nemajú' : 'nemá';
  const N_UHR = T ? 'uhradia' : 'uhradí';
  const N_ZAV = T ? 'zaväzujú' : 'zaväzuje';
  const N_BOL = T ? 'boli' : 'bol';
  const N_ZL  = T ? 'zložia' : 'zloží';
  const N_POU = T ? 'boli poučení' : 'bol poučený';

  const [inflationVariant, setInflationVariant] = React.useState('oznam');
  const [hasBasement, setHasBasement] = React.useState(false);
  const [hasBalcony, setHasBalcony] = React.useState(false);
  const [hasLoggia, setHasLoggia] = React.useState(false);
  const [hasParking, setHasParking] = React.useState(false);
  const [hasAppurt, setHasAppurt] = React.useState('s');
  const [payTiming, setPayTiming] = React.useState('pri');
  const [petsVariant, setPetsVariant] = React.useState('suhlas');
  const [smokingVariant, setSmokingVariant] = React.useState('zakaz');
  // Rodinný dom / Stavba — typ objektu (riadený z GenApp cez prop)
  const domBuildingType = domBuildingTypeProp || 'stavba';
  const setDomBuildingType = setDomBuildingTypeProp || (() => {});
  const domLabels = {
    stavba:  { nom: 'stavba',  gen: 'stavby',  aku: 'stavbu',  lok: 'stavbe',  dal: 'stavbe' },
    garaz:   { nom: 'garáž',   gen: 'garáže',  aku: 'garáž',   lok: 'garáži',  dal: 'garáži' },
  };
  const DB = domLabels[domBuildingType] || domLabels.stavba;
  // Rodinný dom — priľahlé pozemky (dynamicky pridávané parcely)
  const [plots, setPlots] = React.useState([{ id: 1 }]);
  const addPlot = () => plots.length < 10 && setPlots([...plots, { id: Date.now() }]);
  const removePlot = (id) => plots.length > 1 && setPlots(plots.filter(p => p.id !== id));
  // Rodinný dom — rozsah prenájmu (celý dom / len časť)
  const [houseScope, setHouseScope] = React.useState('cely');
  // Rodinný dom — doba nájmu (určitá / neurčitá)
  const [houseTerm, setHouseTerm] = React.useState('urcita');
  // Rodinný dom — podnájom tretej osobe
  const [houseSublet, setHouseSublet] = React.useState('suhlas');
  // Pozemok — rozsah (celý / časť), doba, podnájom
  const [landTerm, setLandTerm] = React.useState('urcita');
  const [landSublet, setLandSublet] = React.useState('suhlas');
  const [landPets, setLandPets] = React.useState('suhlas');
  // Nebytový priestor
  const [nbTerm, setNbTerm] = React.useState('urcita');
  const [nbNotice, setNbNotice] = React.useState('3');
  const [nbPay, setNbPay] = React.useState('vopred');
  const INFLATION_TEXTS = {
    auto: 'Zmluvné strany sa dohodli, že výška nájomného sa každoročne k 1. januáru automaticky zvýši o mieru inflácie za predchádzajúci kalendárny rok vyhlásenú Štatistickým úradom Slovenskej republiky, a to bez potreby uzatvorenia dodatku k tejto zmluve.',
    oznam: 'Ak za predchádzajúci kalendárny rok nastala inflácia vyhlásená Štatistickým úradom Slovenskej republiky, Prenajímateľ je oprávnený písomným oznámením doručeným Nájomcovi zvýšiť nájomné o mieru takejto inflácie, a to bez potreby uzatvorenia dodatku k tejto zmluve. Zvýšené nájomné je Nájomca povinný platiť od prvého dňa mesiaca nasledujúceho po doručení oznámenia.',
  };

  return (
    <div className="paper-stage">
      <article className="paper" aria-label="Nájomná zmluva — editovateľný dokument">
        <h1 className="doc-title">{doctype === 'dom' ? (domBuildingType === 'garaz' ? 'ZMLUVA O NÁJME GARÁŽE' : 'ZMLUVA O NÁJME STAVBY') : meta.title}</h1>
        <div className="doc-sub">
          uzatvorená podľa {meta.ref || '§ 663 a nasl. Občianskeho zákonníka'}
        </div>

        {/* Čl. I — Zmluvné strany */}
        <section className="article" id="art-1">
          <div className="article-head">
            <div className="article-num">Článok I</div>
            <span className="article-title">Zmluvné strany</span>
          </div>

          <p className="party-heading" style={{ fontWeight: 600, marginTop: 18, marginBottom: 10 }}>Prenajímateľ:</p>

          {landlords.map((l, i) => {
            const d = demoLandlord(i);
            const label = landlords.length > 1 ? `Prenajímateľ č. ${String(i + 1).padStart(2, '0')}` : 'Prenajímateľ';
            return (
              <PartyBlock key={l.id} label={label} type={l.type || 'person'}
                onTypeChange={(t) => setLandlordType(l.id, t)}
                onRemove={landlords.length > 1 ? () => removeLandlord(l.id) : null}
                onDisplayChange={setLD(l.id)}
                demo={d} />
            );
          })}

          <div style={{ marginTop: 10, marginBottom: 4 }}>
            <button className="party-add party-add-left" onClick={addLandlord} disabled={landlords.length >= 10}>+ Ďalší prenajímateľ</button>
          </div>

          <p className="party-alias">
            (ďalej len „<span className="party-alias-term">{P_N}</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 }}>Nájomca:</p>

          {tenants.map((t, i) => {
            const d = demoTenant(i);
            const label = tenants.length > 1 ? `Nájomca č. ${String(i + 1).padStart(2, '0')}` : 'Nájomca';
            return (
              <PartyBlock key={t.id} label={label} type={t.type || 'person'}
                onTypeChange={(tp) => setTenantType(t.id, tp)}
                onRemove={tenants.length > 1 ? () => removeTenant(t.id) : null}
                onDisplayChange={setTD(t.id)}
                demo={d} />
            );
          })}

          <div style={{ marginTop: 10, marginBottom: 4 }}>
            <button className="party-add party-add-left" onClick={addTenant} disabled={tenants.length >= 10}>+ Ďalší nájomca</button>
          </div>

          <p className="party-alias">
            (ďalej len „<span className="party-alias-term">{N_N}</span>")
          </p>

          <p style={{ marginTop: 18, fontStyle: 'italic', color: 'var(--ink-3)', fontSize: 13 }}>
            (ďalej {P_N} a {N_N} spolu aj ako „<span style={{ color: 'var(--ink)' }}>Zmluvné strany</span>")
          </p>
        </section>

        {/* Čl. II — Predmet nájmu */}
        <section className="article" id="art-2">
          <div className="article-head">
            <div className="article-num">Článok II</div>
            <span className="article-title">Predmet nájmu</span>
          </div>
          <p className="has-tip">
            <TipBtn pointKey="art-2" />
            <strong>2.1</strong> &nbsp;{P_N} sa {L ? 'zaväzujú' : 'zaväzuje'} prenechať {N_D} za odplatu
            do užívania predmet nájmu špecifikovaný v bodoch 2.2 až 2.{doctype === 'dom' ? '6' : '4'} tejto zmluvy.
          </p>

          {doctype === 'pozemok' && (<>
          <p className="has-tip">
            <TipBtn pointKey="2.2-pozemok" />
            <strong>2.2</strong> &nbsp;{P_N} {L ? 'sú oprávnení' : 'je oprávnený'} dať do prenájmu nehnuteľnosť — pozemok, nachádzajúci sa v katastrálnom území{' '}
            <Ed defaultValue="" placeholder="kat. územie" lg />, obec{' '}
            <Ed defaultValue="" placeholder="obec" lg />, okres{' '}
            <Ed defaultValue="" placeholder="okres" />, ktorý je zapísaný v katastri nehnuteľností na liste vlastníctva č.{' '}
            <Ed defaultValue="" placeholder="č. LV" num /> ako:
            {plots.map((p, i) => (
              <span key={p.id} className="plot-line">
                <br />
                {String.fromCharCode(97 + i)}){' '}parcela reg. „<Ed defaultValue="" placeholder="C/E" />" č. <Ed defaultValue="" placeholder="č." num />,
                {' '}s výmerou <Ed defaultValue="" placeholder="0,00" num /> m²,
                {' '}druh pozemku: <Ed defaultValue="" placeholder="napr. záhrada, orná pôda" lg />
                {plots.length > 1 && (
                  <button
                    type="button"
                    className="seg-toggle plot-remove"
                    onClick={() => removePlot(p.id)}
                    aria-label={`Odstrániť parcelu ${String.fromCharCode(97 + i)})`}
                    title="Odstrániť parcelu"
                  >×</button>
                )}
                {i === plots.length - 1 ? '.' : ','}
              </span>
            ))}
            {plots.length < 10 && (
              <>
                {' '}
                <button type="button" className="party-add party-add-inline" onClick={addPlot}>
                  + Pridať parcelu
                </button>
              </>
            )}
            <br />
            (ďalej len „<em>pozemok</em>" alebo „<em>predmet nájmu</em>")
          </p>
          <p>
            <strong>2.3</strong> &nbsp;{P_N} {L ? 'prenechávajú' : 'prenecháva'} predmet nájmu {N_D} do nájmu v celom jeho rozsahu.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="2.4-pozemok" />
            <strong>2.4</strong> &nbsp;<em>Účel nájmu.</em> {N_N} {N_JE} {N_POV} predmet nájmu užívať výlučne na účel:{' '}
            <Ed defaultValue="" placeholder="napr. záhradkárčenie, parkovanie, uskladnenie materiálu" xl />.
            {N_N} môže predmet nájmu užívať na iný ako dohodnutý účel len s predchádzajúcim písomným súhlasom {P_G}.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="2.5-pozemok" />
            <strong>2.5</strong> &nbsp;Prenechanie predmetu nájmu alebo jeho časti do podnájmu tretej osobe je{' '}
            <Ed select defaultValue="suhlas" options={[
              { v: 'zakaz',  label: 'zakázané' },
              { v: 'suhlas', label: `možné len s predchádzajúcim písomným súhlasom ${P_G}` },
              { v: 'volne',  label: `možné aj bez súhlasu ${P_G}` },
            ]} onValueChange={setLandSublet} />.
          </p>
          </>)}

          {doctype === 'dom' && (<>
          <p className="has-tip">
            <TipBtn pointKey="2.2" />
            <strong>2.2</strong> &nbsp;Predmetom nájmu je{' '}
            <Ed select defaultValue="stavba" options={[
              { v: 'stavba', label: 'stavba' },
              { v: 'garaz',  label: 'garáž' },
            ]} onValueChange={setDomBuildingType} />{' '}so súpisným číslom{' '}
            <Ed defaultValue="" placeholder="č." num />, postavená na pozemku parcela č.{' '}
            <Ed defaultValue="" placeholder="č." num />, nachádzajúca sa{' '}
            <Ed defaultValue="" placeholder="Ulica, č., PSČ, mesto" xl />, katastrálne územie{' '}
            <Ed defaultValue="" placeholder="kat. územie" lg />, vedená na liste vlastníctva č.{' '}
            <Ed defaultValue="" placeholder="č. LV" num /> (ďalej len „<em>{DB.nom}</em>").
          </p>
          <p>
            <strong>2.3</strong> &nbsp;Predmetom nájmu je ďalej aj priľahlý pozemok, a to:
            {plots.map((p, i) => (
              <span key={p.id} className="plot-line">
                <br />
                {String.fromCharCode(97 + i)}){' '}pozemok parcela č. <Ed defaultValue="" placeholder="č." num />,
                {' '}druh pozemku: <Ed defaultValue="" placeholder="napr. záhrada" lg />,
                {' '}o výmere <Ed defaultValue="" placeholder="0,00" num /> m²
                {plots.length > 1 && (
                  <button
                    type="button"
                    className="seg-toggle plot-remove"
                    onClick={() => removePlot(p.id)}
                    aria-label={`Odstrániť parcelu ${String.fromCharCode(97 + i)})`}
                    title="Odstrániť parcelu"
                  >×</button>
                )}
                {i === plots.length - 1 ? '.' : ','}
              </span>
            ))}
            {plots.length < 10 && (
              <>
                {' '}
                <button type="button" className="party-add party-add-inline" onClick={addPlot}>
                  + Pridať parcelu
                </button>
              </>
            )}
            <br />
            (ďalej len „<em>Priľahlý pozemok</em>"; {DB.nom.charAt(0).toUpperCase() + DB.nom.slice(1)} a Priľahlý pozemok ďalej spolu aj ako „<em>Predmet nájmu</em>")
          </p>
          <p className="has-tip">
            <TipBtn pointKey="2.4" />
            <strong>2.4</strong> &nbsp;{P_N} {L ? 'prenechávajú' : 'prenecháva'} predmet nájmu {N_D} do nájmu{' '}
            <Ed select defaultValue="cely" options={[
              { v: 'cely',  label: 'v celom jeho rozsahu' },
              { v: 'cast',  label: 'len čiastočne — v rozsahu uvedenom nižšie' },
            ]} onValueChange={setHouseScope} />.
            {houseScope === 'cast' && (
              <>
                {' '}{`Nájom sa vzťahuje len na nasledujúcu časť ${DB.gen} a priľahlých pozemkov:`}{' '}
                <Ed defaultValue="" placeholder="napr. prízemie (kuchyňa, obývačka, kúpeľňa, 2 izby) …" xl />.
              </>
            )}
          </p>
          <p>
            <strong>2.5</strong> &nbsp;{N_N} {N_JE} {N_OPR} užívať aj príslušenstvo {DB.gen}, ktorým {L ? 'sú' : 'je'}{' '}
            <Ed defaultValue="" placeholder="napr. garáž, záhradný domček, bazén, krb, vonkajší nábytok …" xl />.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="2.6-dom" />
            <strong>2.6</strong> &nbsp;Prenechanie predmetu nájmu alebo jeho časti do podnájmu tretej osobe je{' '}
            <Ed select defaultValue="suhlas" options={[
              { v: 'zakaz',  label: 'zakázané' },
              { v: 'suhlas', label: `možné len s predchádzajúcim písomným súhlasom ${P_G}` },
              { v: 'volne',  label: `možné aj bez súhlasu ${P_G}` },
            ]} onValueChange={setHouseSublet} />.
          </p>
          </>)}

          {doctype === 'nebyt' && (<>
          <p className="has-tip">
            <TipBtn pointKey="2.2-nebyt" />
            <strong>2.2</strong> &nbsp;Predmetom nájmu je nebytový priestor nachádzajúci sa v budove so súpisným číslom{' '}
            <Ed defaultValue="" placeholder="č." num />, postavenej na pozemku parcela č.{' '}
            <Ed defaultValue="" placeholder="č." num />, katastrálne územie{' '}
            <Ed defaultValue="" placeholder="kat. územie" lg />, okres{' '}
            <Ed defaultValue="" placeholder="okres" />, zapísanej na liste vlastníctva č.{' '}
            <Ed defaultValue="" placeholder="č. LV" num />, na adrese{' '}
            <Ed defaultValue="" placeholder="Ulica, č., PSČ, mesto" xl />.{' '}
            Celková výmera podlahovej plochy nebytového priestoru je{' '}
            <Ed defaultValue="" placeholder="0,00" num /> m²
            {' '}(ďalej len „<em>nebytový priestor</em>" alebo „<em>predmet nájmu</em>").
          </p>
          <p className="has-tip">
            <TipBtn pointKey="2.3-nebyt" />
            <strong>2.3</strong> &nbsp;<em>Účel nájmu.</em>{' '}
            {N_N} {N_JE} {N_OPR} užívať predmet nájmu výlučne na účel:{' '}
            <Ed defaultValue="" placeholder="napr. kancelárske priestory, obchodná prevádzka, sklad" xl />,
            a to v súlade s predmetom činnosti vymedzenom dokladom o oprávnení podnikať
            a v súlade s tým, na aké účely je priestor stavebne určený. Zmenu účelu užívania
            predmetu nájmu je {N_N} {N_OPR} vykonať len s predchádzajúcim písomným súhlasom {P_G}.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="2.4-nebyt" />
            <strong>2.4</strong> &nbsp;Prenechanie predmetu nájmu alebo jeho časti do podnájmu tretej osobe je{' '}
            <Ed select defaultValue="suhlas" options={[
              { v: 'zakaz',  label: 'zakázané' },
              { v: 'suhlas', label: `možné len s predchádzajúcim písomným súhlasom ${P_G}` },
              { v: 'volne',  label: `možné aj bez súhlasu ${P_G}` },
            ]} />.
          </p>
          </>)}

          {doctype === 'byt' && (<>
          <p className="has-tip">
            <TipBtn pointKey="2.2" />
            <strong>2.2</strong> &nbsp;Predmetom nájmu je byt č. <Ed defaultValue="5" placeholder="č. bytu" num />{' '}
            <Ed select defaultValue="s" options={[
              { v: 'bez', label: 'bez príslušenstva' },
              { v: 's',   label: 's príslušenstvom bytu' },
            ]} onValueChange={(v) => setHasAppurt(v)} />,
            na <Ed defaultValue="2." placeholder="1./2./…" /> poschodí,
            nachádzajúci sa v bytovom dome na ulici <Ed defaultValue="Škovránčia 3" placeholder="Ulica a č." lg />
            {' '}v <Ed defaultValue="Bratislave" placeholder="Mesto" />, katastrálne územie{' '}
            <Ed defaultValue="BA — Staré mesto" placeholder="kat. územie" lg />, vedený na liste vlastníctva č.{' '}
            <Ed defaultValue="" placeholder="č. LV" num />.
            {hasAppurt === 's' && (
              <>
                {' '}Príslušenstvom bytu {((Number(hasBasement) + Number(hasBalcony) + Number(hasLoggia) + Number(hasParking)) > 1) ? 'sú' : 'je'}{' '}
                {[
                  hasBasement && <span key="c" className="seg-chip">pivnica/pivničná kobka <button type="button" className="seg-toggle" aria-label="Odstrániť pivnicu" onClick={() => setHasBasement(false)}>×</button></span>,
                  hasBalcony && <span key="b" className="seg-chip">balkón <button type="button" className="seg-toggle" aria-label="Odstrániť balkón" onClick={() => setHasBalcony(false)}>×</button></span>,
                  hasLoggia && <span key="l" className="seg-chip">loggia <button type="button" className="seg-toggle" aria-label="Odstrániť loggiu" onClick={() => setHasLoggia(false)}>×</button></span>,
                  hasParking && <span key="p" className="seg-chip">parkovacie státie <button type="button" className="seg-toggle" aria-label="Odstrániť parkovacie státie" onClick={() => setHasParking(false)}>×</button></span>,
                ].filter(Boolean).reduce((acc, el, i, arr) => {
                  if (i === 0) return [el];
                  if (i === arr.length - 1) return [...acc, ' a ', el];
                  return [...acc, ', ', el];
                }, [])}{(hasBasement || hasBalcony || hasLoggia || hasParking) ? '.' : ''}
              </>
            )}
            {hasAppurt === 's' && (!hasBasement || !hasBalcony || !hasLoggia || !hasParking) && (
              <span className="seg-add">
                {!hasBasement && <button type="button" onClick={() => setHasBasement(true)}>+ pivnica</button>}
                {!hasBalcony && <button type="button" onClick={() => setHasBalcony(true)}>+ balkón</button>}
                {!hasLoggia && <button type="button" onClick={() => setHasLoggia(true)}>+ loggia</button>}
                {!hasParking && <button type="button" onClick={() => setHasParking(true)}>+ parkovacie státie</button>}
              </span>
            )}
          </p>
          <p className="has-tip">
            <TipBtn pointKey="2.3" />
            <strong>2.3</strong> &nbsp;Celková výmera predmetu nájmu je <Ed defaultValue="96,71" placeholder="0,00" num /> m²{hasAppurt === 's' && <>,
            z toho výmera bytu <Ed defaultValue="88,54" placeholder="0,00" num /> m²</>}
            {hasAppurt === 's' && hasBasement && <>, výmera pivnice/pivničnej kobky <Ed defaultValue="8,17" placeholder="0,00" num /> m²</>}
            {hasAppurt === 's' && hasBalcony && <>, výmera balkóna <Ed defaultValue="2,02" placeholder="0,00" num /> m²</>}
            {hasAppurt === 's' && hasLoggia && <>, výmera loggie <Ed defaultValue="3,50" placeholder="0,00" num /> m²</>}
            {hasAppurt === 's' && hasParking && <>, výmera parkovacieho státia <Ed defaultValue="12,50" placeholder="0,00" num /> m²</>}
            .
          </p>
          <p className="has-tip">
            <TipBtn pointKey="2.4" />
            <strong>2.4</strong> &nbsp;Predmet nájmu {L ? 'prenechávajú' : 'prenecháva'} {P_N} {N_D} do nájmu v celom svojom rozsahu.
            Prenechanie predmetu nájmu alebo jeho časti do podnájmu tretej osobe je{' '}
            <Ed select defaultValue="suhlas" options={[
              { v: 'zakaz',  label: `zakázané` },
              { v: 'suhlas', label: `možné len s písomným súhlasom ${P_G}` },
              { v: 'volne',  label: `možné aj bez súhlasu ${P_G}` },
            ]} />.
          </p>
          <p>
            <strong>2.5</strong> &nbsp;{N_N} {N_VYH}, že {T ? 'sú si vedomí' : 'je si vedomý'} skutočnosti, že zmluva sa uzatvára
            podľa zákona č. 98/2014 Z. z. o krátkodobom nájme bytu (ďalej len
            „<em>zákon o krátkodobom nájme bytu</em>").
          </p>
          </>)}
        </section>

        {/* Čl. III — Doba nájmu */}
        <section className="article" id="art-3">
          <div className="article-head">
            <div className="article-num">Článok III</div>
            <span className="article-title">Doba nájmu</span>
          </div>

          {doctype === 'pozemok' && (<>
          <p className="has-tip">
            <TipBtn pointKey="3.1-pozemok" />
            <strong>3.1</strong> &nbsp;Táto nájomná zmluva sa uzatvára na{' '}
            <Ed select defaultValue="urcita" options={[
              { v: 'urcita',   label: 'dobu určitú' },
              { v: 'neurcita', label: 'dobu neurčitú' },
            ]} onValueChange={setLandTerm} />
            {landTerm === 'urcita' ? (
              <>, a to od <Ed defaultValue="" placeholder="DD.MM.RRRR" /> do <Ed defaultValue="" placeholder="DD.MM.RRRR" />.</>
            ) : (
              <> odo dňa <Ed defaultValue="" placeholder="DD.MM.RRRR" />.</>
            )}
          </p>
          <p className="has-tip">
            <TipBtn pointKey="3.2-pozemok" />
            <strong>3.2</strong> &nbsp;Ak je nájom dohodnutý na dobu určitú, nájom sa skončí uplynutím tejto doby,
            ak sa Zmluvné strany nedohodnú inak. Ak {N_N} užíva predmet nájmu aj po skončení nájmu a {P_N}{' '}
            proti tomu nepodá návrh na vypratanie nehnuteľnosti na súde do 30 dní, obnovuje sa nájomná zmluva za rovnakých podmienok.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="3.3-pozemok" />
            <strong>3.3</strong> &nbsp;Najneskôr ku dňu zániku nájmu {N_N} {N_ODV} {P_D} pozemok v čistom stave
            zodpovedajúcom dohodnutému užívaniu, s prihliadnutím na obvyklé opotrebenie.
          </p>
          </>)}

          {doctype === 'dom' && (<>
          <p className="has-tip">
            <TipBtn pointKey="3.1" />
            <strong>3.1</strong> &nbsp;Táto nájomná zmluva sa uzatvára na{' '}
            <Ed select defaultValue="urcita" options={[
              { v: 'urcita',   label: 'dobu určitú' },
              { v: 'neurcita', label: 'dobu neurčitú' },
            ]} onValueChange={setHouseTerm} />
            {houseTerm === 'urcita' ? (
              <>, a to od <Ed defaultValue="" placeholder="DD.MM.RRRR" /> do <Ed defaultValue="" placeholder="DD.MM.RRRR" />.</>
            ) : (
              <> odo dňa <Ed defaultValue="" placeholder="DD.MM.RRRR" />.</>
            )}
          </p>
          <p>
            <strong>3.2</strong> &nbsp;Ak je nájom dohodnutý na dobu určitú, nájom sa skončí uplynutím tejto doby,
            ak sa Zmluvné strany nedohodnú inak. Ak {N_N} užíva predmet nájmu aj po skončení nájmu a {P_N}{' '}
            proti tomu nepodá návrh na vypratanie nehnuteľnosti na súde do 30 dní,
            obnovuje sa nájomná zmluva za rovnakých podmienok.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="3.3-dom" />
            <strong>3.3</strong> &nbsp;Najneskôr ku dňu zániku nájmu {N_N} {N_ODV} {P_D} predmet nájmu
            v čistom stave zodpovedajúcom dohodnutému užívaniu, s prihliadnutím na obvyklé opotrebenie.
          </p>
          </>)}

          {doctype === 'nebyt' && (<>
          <p className="has-tip">
            <TipBtn pointKey="3.1-nebyt" />
            <strong>3.1</strong> &nbsp;Táto zmluva sa uzatvára na{' '}
            <Ed select defaultValue="urcita" options={[
              { v: 'urcita',   label: 'dobu určitú' },
              { v: 'neurcita', label: 'dobu neurčitú' },
            ]} onValueChange={setNbTerm} />
            {nbTerm === 'urcita' ? (
              <>, a to od <Ed defaultValue="" placeholder="DD.MM.RRRR" /> do <Ed defaultValue="" placeholder="DD.MM.RRRR" />.</>
            ) : (
              <> odo dňa <Ed defaultValue="" placeholder="DD.MM.RRRR" />.</>
            )}
          </p>
          {nbTerm === 'urcita' && (
            <p>
              <strong>3.2</strong> &nbsp;Nájom dojednaný na určitý čas sa skončí uplynutím času, na ktorý bol dojednaný,
              ak sa Zmluvné strany nedohodnú inak.
            </p>
          )}
          <p className="has-tip">
            <TipBtn pointKey="3.3-nebyt" />
            <strong>{nbTerm === 'urcita' ? '3.3' : '3.2'}</strong> &nbsp;{P_N} {L ? 'môžu' : 'môže'} písomne vypovedať zmluvu
            {nbTerm === 'urcita' ? ' uzavretú na určitý čas pred uplynutím času' : ''}, ak:
            <br />a) {N_N} užíva predmet nájmu v rozpore so zmluvou,
            <br />b) {N_N} o viac ako jeden mesiac mešká s platením nájomného alebo úhrad za služby spojené s nájmom,
            <br />c) {N_N} alebo osoby, ktoré s {T ? 'nimi' : 'ním'} užívajú predmet nájmu, napriek písomnému upozorneniu hrubo porušujú pokoj alebo poriadok,
            <br />d) bolo rozhodnuté o odstránení alebo o zmenách stavby, čo bráni užívať predmet nájmu,
            <br />e) {N_N} {T ? 'prenechali' : 'prenechal'} predmet nájmu do podnájmu bez súhlasu {P_G}.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="3.4-nebyt" />
            <strong>{nbTerm === 'urcita' ? '3.4' : '3.3'}</strong> &nbsp;{N_N} {T ? 'môžu' : 'môže'} písomne vypovedať zmluvu
            {nbTerm === 'urcita' ? ' uzavretú na určitý čas pred uplynutím času' : ''}, ak:
            <br />a) {T ? 'stratia' : 'stratí'} spôsobilosť prevádzkovať činnosť, na ktorú si priestor {T ? 'najali' : 'najal'},
            <br />b) predmet nájmu sa stane bez zavinenia {N_G} nespôsobilý na dohodnuté užívanie,
            <br />c) {P_N} hrubo porušuje svoje povinnosti spojené s odovzdaním a údržbou predmetu nájmu.
          </p>
          {nbTerm === 'neurcita' && (
            <p>
              <strong>3.4</strong> &nbsp;Keďže je zmluva uzavretá na neurčitý čas, {P_N} aj {N_N}{' '}
              sú oprávnení zmluvu písomne vypovedať aj bez uvedenia dôvodu.
            </p>
          )}
          <p className="has-tip">
            <TipBtn pointKey="3.6-nebyt" />
            <strong>3.5</strong> &nbsp;<em>Výpovedná lehota.</em>{' '}
            Výpovedná lehota je{' '}
            <Ed select defaultValue="3" options={[
              { v: '1', label: '1 mesiac' },
              { v: '2', label: '2 mesiace' },
              { v: '3', label: '3 mesiace' },
            ]} onValueChange={setNbNotice} /> a počíta sa od prvého dňa mesiaca nasledujúceho po doručení výpovede druhej strane.
          </p>
          <p>
            <strong>3.6</strong> &nbsp;Po skončení nájmu je {N_N} {N_POV} vrátiť predmet nájmu v pôvodnom stave
            s prihliadnutím na obvyklé opotrebenie, a odovzdať {P_D} všetky kľúče.
          </p>
          </>)}

          {doctype === 'byt' && (<>
          <p className="has-tip">
            <TipBtn pointKey="3.1" />
            <strong>3.1</strong> &nbsp;Zmluvné strany sa dohodli, že táto zmluva sa uzatvára na
            {' '}dobu určitú, a to od <Ed defaultValue="01.09.2025" placeholder="DD.MM.RRRR" />
            {' '}do <Ed defaultValue="31.08.2026" placeholder="DD.MM.RRRR" />
            {' '}<Ed select defaultValue="moznost" options={[
              { v: 'moznost', label: 's možnosťou predĺženia po vzájomnej dohode' },
              { v: 'bez',     label: 'bez možnosti ďalšieho predĺženia' },
            ]} />.
            <span className="legal-hint" role="note">
              <strong>Upozornenie:</strong> Podľa § 3 ods. 1 zákona č. 98/2014 Z. z. je možné zmluvu uzatvoriť
              <strong> najviac na 2 roky</strong>; predĺžiť ju možno za rovnakých podmienok najviac dvakrát, t. j. celkovo
              <strong> maximálne na 6 rokov</strong>. Zmluva na dobu neurčitú nie je podľa tohto zákona prípustná.
            </span>
          </p>
          <p>
            <strong>3.2</strong> &nbsp;Nájom podľa tejto zmluvy zaniká jedným zo spôsobov
            vymedzených v § 6 zákona o krátkodobom nájme bytu.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="3.3" />
            <strong>3.3</strong> &nbsp;Ak {N_N} napriek písomnému upozorneniu opakovane {T ? 'porušujú' : 'porušuje'} povinnosti,
            ktorých porušenie by inak zakladalo právo {P_G} ukončiť nájomný pomer výpoveďou,{' '}
            {P_JE} {P_N} {P_OPR} od zmluvy odstúpiť.
          </p>
          <p>
            <strong>3.4</strong> &nbsp;Najneskôr ku dňu zániku nájmu {N_N} {N_ODV} {P_D} predmet nájmu
            v čistom stave zodpovedajúcom dohodnutému užívaniu.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="3.5" />
            <strong>3.5</strong> &nbsp;Po skončení nájmu {N_N} {N_NEM} právo na náhradný byt, ubytovanie ani prístrešie.
            V prípade, že {N_N} po zániku tejto zmluvy predmet nájmu {T ? 'neuvoľnia' : 'neuvoľní'},
            {' '}{P_JE} {P_N} {P_OPR} podať návrh na vypratanie predmetu nájmu.
          </p>
          </>)}
        </section>

        {/* Čl. IV — Nájomné, energie, platobné podmienky */}
        <section className="article" id="art-4">
          <div className="article-head">
            <div className="article-num">Článok IV</div>
            <span className="article-title">Nájomné, náklady za služby a platobné podmienky</span>
          </div>

          {doctype === 'pozemok' && (<>
          <p className="has-tip">
            <TipBtn pointKey="4.1-pozemok" />
            <strong>4.1</strong> &nbsp;<em>Nájomné.</em>{' '}
            Zmluvné strany sa dohodli na nájomnom za užívanie predmetu nájmu vo výške{' '}
            <Ed defaultValue="" placeholder="suma" num /> € mesačne (slovom:{' '}
            <Ed defaultValue="" placeholder="slovom" lg /> eur).
          </p>
          <p className={`optional-clause has-tip ${!optionals['c-land-services'] ? 'disabled' : ''}`}>
            <TipBtn pointKey="4.2-pozemok" />
            <strong>4.2</strong> &nbsp;<em>Úhrady za služby.</em>{' '}
            V nájomnom nie sú zahrnuté úhrady za plnenia spojené s užívaním pozemku (napr. dodávka elektriny, vody —{' '}
            <Ed defaultValue="" placeholder="rozpis služieb" xl />).
            Tieto úhrady {T ? 'uhrádzajú' : 'uhrádza'} {N_N} paušálnou zálohou vo výške{' '}
            <Ed defaultValue="" placeholder="suma" num /> € mesačne.
          </p>
          <p>
            <strong>4.3</strong> &nbsp;<em>Splatnosť.</em>{' '}
            Nájomné{optionals['c-land-services'] ? ' a úhrady za služby' : ''} {L ? 'uhrádzajú' : 'uhrádza'} {N_N} vždy k{' '}
            <Ed select defaultValue="15." options={[
              { v: '5.',  label: '5.' },
              { v: '10.', label: '10.' },
              { v: '15.', label: '15.' },
              { v: '20.', label: '20.' },
            ]} /> dňu kalendárneho mesiaca predchádzajúceho mesiacu, na ktorý sa nájomné vzťahuje, a to{' '}
            <Ed select defaultValue="prevod" options={[
              { v: 'prevod',   label: `bezhotovostným prevodom na účet ${P_G} uvedený v záhlaví zmluvy` },
              { v: 'hotovost', label: 'v hotovosti oproti potvrdeniu o prijatí platby' },
            ]} />.
          </p>
          <p className={`optional-clause ${!optionals['c-inflation'] ? 'disabled' : ''}`}>
            <strong>4.4</strong> &nbsp;<em>Inflačná doložka.</em>{' '}
            <Ed select defaultValue="oznam" options={[
              { v: 'auto',  label: 'Automatické zvýšenie nájomného bez oznámenia' },
              { v: 'oznam', label: 'Zvýšenie nájomného písomným oznámením' },
            ]} onValueChange={setInflationVariant} />
            <br />
            {INFLATION_TEXTS[inflationVariant]}
          </p>
          <p className="has-tip">
            <TipBtn pointKey="4.5-pozemok" />
            <strong>4.5</strong> &nbsp;<em>Depozit (Zábezpeka).</em>{' '}
            {N_N} je {N_POV} pri podpise tejto zmluvy zložiť depozit vo výške{' '}
            <Ed select defaultValue="2" options={[
              { v: '1', label: '1-mesačného nájomného' },
              { v: '2', label: '2-mesačného nájomného' },
              { v: '3', label: '3-mesačného nájomného' },
            ]} />.
            Depozit slúži na vykrytie prípadných nedoplatkov, dlžného nájomného a škôd na pozemku.
            {' '}{P_N} vráti depozit (alebo jeho nepoužitú časť) do{' '}
            <Ed select defaultValue="30" options={[
              { v: '14', label: '14' },
              { v: '30', label: '30' },
              { v: '60', label: '60' },
            ]} /> dní od skončenia nájmu.
          </p>
          </>)}

          {doctype === 'dom' && (<>
          <p className="has-tip">
            <TipBtn pointKey="4.1" />
            <strong>4.1</strong> &nbsp;<em>Nájomné.</em>{' '}
            Zmluvné strany sa dohodli na nájomnom za užívanie predmetu nájmu vo výške{' '}
            <Ed defaultValue="" placeholder="suma" num /> € mesačne (slovom:{' '}
            <Ed defaultValue="" placeholder="slovom" lg /> eur).
          </p>
          <p className="has-tip">
            <TipBtn pointKey="4.2" />
            <strong>4.2</strong> &nbsp;<em>Úhrady za služby.</em>{' '}
            V nájomnom nie sú zahrnuté úhrady za plnenia poskytované s užívaním predmetu nájmu. Tieto úhrady zahŕňajú:{' '}
            <Ed defaultValue="" placeholder="napr. el. energia, plyn, vodné a stočné, odvoz odpadu, internet, …" xl />.
            {' '}{N_N} {T ? 'uhrádzajú' : 'uhrádza'} tieto úhrady paušálnou zálohou vo výške{' '}
            <Ed defaultValue="" placeholder="suma" num /> € mesačne.
          </p>
          <p>
            <strong>4.3</strong> &nbsp;<em>Splatnosť.</em>{' '}
            Celková mesačná platba (nájomné + zálohy) je{' '}
            <Ed defaultValue="" placeholder="suma" num /> €. Platba je splatná vždy k{' '}
            <Ed select defaultValue="15." options={[
              { v: '5.',  label: '5.' },
              { v: '10.', label: '10.' },
              { v: '15.', label: '15.' },
              { v: '20.', label: '20.' },
            ]} /> dňu kalendárneho mesiaca predchádzajúceho mesiacu, na ktorý sa nájomné vzťahuje,
            a to <Ed select defaultValue="prevod" options={[
              { v: 'prevod',   label: `bezhotovostným prevodom na účet ${P_G} uvedený v záhlaví zmluvy` },
              { v: 'hotovost', label: 'v hotovosti oproti potvrdeniu o prijatí platby' },
            ]} />.
          </p>
          <p>
            <strong>4.4</strong> &nbsp;<em>Vyúčtovanie.</em>{' '}
            {P_N} vykoná vyúčtovanie úhrad za služby{' '}
            <Ed select defaultValue="rocne" options={[
              { v: 'rocne',  label: 'jedenkrát ročne' },
              { v: 'polroc', label: 'polročne' },
            ]} /> alebo po skončení nájmu, a to na základe skutočnej spotreby a faktúr od dodávateľov.
            Nedoplatok je {N_N} {N_POV} uhradiť do <Ed defaultValue="30" placeholder="počet" num /> dní od doručenia výzvy;
            preplatok vráti {P_N} v rovnakej lehote.
          </p>
          <p className={`optional-clause ${!optionals['c-inflation'] ? 'disabled' : ''}`}>
            <strong>4.5</strong> &nbsp;<em>Inflačná doložka.</em>{' '}
            <Ed select defaultValue="oznam" options={[
              { v: 'auto',  label: 'Automatické zvýšenie nájomného bez oznámenia' },
              { v: 'oznam', label: 'Zvýšenie nájomného písomným oznámením' },
            ]} onValueChange={setInflationVariant} />
            <br />
            {INFLATION_TEXTS[inflationVariant]}
          </p>
          <p className="has-tip">
            <TipBtn pointKey="4.6-dom" />
            <strong>{optionals['c-inflation'] ? '4.6' : '4.5'}</strong> &nbsp;<em>Depozit (Zábezpeka).</em>{' '}
            {N_N} je {N_POV} pri podpise tejto zmluvy zložiť depozit vo výške{' '}
            <Ed select defaultValue="2" options={[
              { v: '1', label: '1-mesačného nájomného a úhrad za služby' },
              { v: '2', label: '2-mesačného nájomného a úhrad za služby' },
              { v: '3', label: '3-mesačného nájomného a úhrad za služby' },
            ]} />.
            Depozit slúži na vykrytie prípadných nedoplatkov, dlžného nájomného a škôd na nehnuteľnosti a jej vybavení.
            {' '}{P_N} vráti depozit (alebo jeho nepoužitú časť) do{' '}
            <Ed select defaultValue="30" options={[
              { v: '14', label: '14' },
              { v: '30', label: '30' },
              { v: '60', label: '60' },
            ]} /> dní
            od skončenia nájmu, resp. po doručení ročného vyúčtovania.
          </p>
          </>)}

          {doctype === 'nebyt' && (<>
          <p className="has-tip">
            <TipBtn pointKey="4.1-nebyt" />
            <strong>4.1</strong> &nbsp;<em>Nájomné.</em>{' '}
            Zmluvné strany sa dohodli na úhrade za nájom vo výške{' '}
            <Ed defaultValue="" placeholder="suma" num /> € za m² podlahovej plochy ročne.
            Mesačná výška úhrady za nájom je{' '}
            <Ed defaultValue="" placeholder="suma" num /> € (slovom:{' '}
            <Ed defaultValue="" placeholder="slovom" lg /> eur).
            Nájomné sa platí mesačne{' '}
            <Ed select defaultValue="vopred" options={[
              { v: 'vopred', label: 'vopred' },
              { v: 'pozadu', label: 'pozadu' },
            ]} onValueChange={setNbPay} />, vždy k{' '}
            <Ed select defaultValue="15." options={[
              { v: '5.',  label: '5.' },
              { v: '10.', label: '10.' },
              { v: '15.', label: '15.' },
              { v: '20.', label: '20.' },
              { v: '25.', label: '25.' },
            ]} /> dňu {nbPay === 'vopred' ? 'predchádzajúceho' : 'príslušného'} mesiaca, a to{' '}
            <Ed select defaultValue="prevod" options={[
              { v: 'prevod',   label: `bezhotovostným prevodom na účet ${P_G} uvedený v záhlaví zmluvy` },
              { v: 'hotovost', label: 'v hotovosti oproti potvrdeniu o prijatí platby' },
            ]} />.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="4.2-nebyt" />
            <strong>4.2</strong> &nbsp;<em>Úhrady za služby.</em>{' '}
            Službami, ktorých poskytovanie je spojené s užívaním predmetu nájmu, sú najmä:{' '}
            <Ed defaultValue="" placeholder="napr. vodné a stočné, teplo, elektrická energia, odvoz odpadu" xl />.
            {N_N} {T ? 'uhrádzajú' : 'uhrádza'} tieto služby paušálnou zálohou vo výške{' '}
            <Ed defaultValue="" placeholder="suma" num /> € mesačne, splatnou spolu s nájomným.
            Nedoplatky alebo preplatky z vyúčtovania sú splatné do{' '}
            <Ed defaultValue="20" placeholder="počet" num /> dní odo dňa jeho doručenia vyúčtovania Prenajímateľa.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="4.3-nebyt" />
            <strong>4.3</strong> &nbsp;<em>Peňažná zábezpeka (Depozit).</em>{' '}
            {N_N} {N_POV} pri podpise tejto zmluvy zložiť peňažnú zábezpeku vo výške{' '}
            <Ed select defaultValue="2" options={[
              { v: '1', label: '1-mesačného nájomného a úhrad za služby' },
              { v: '2', label: '2-mesačného nájomného a úhrad za služby' },
              { v: '3', label: '3-mesačného nájomného a úhrad za služby' },
            ]} />,
            ktorá slúži na pokrytie prípadných nedoplatkov, dlžného nájomného a škôd na predmete nájmu.
            Peňažná zábezpeka je splatná do{' '}
            <Ed defaultValue="3" placeholder="počet" num /> dní od podpisu zmluvy; počas trvania zmluvy bude v držbe {P_G}.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="4.4-nebyt" />
            <strong>4.4</strong> &nbsp;<em>Omeškanie a obmedzenie užívania.</em>{' '}
            V prípade omeškania {N_G} s úhradou nájomného alebo preddavkov za služby je {N_N} {N_POV}{' '}
            zaplatiť zákonný úrok z omeškania.
          </p>
          <p className={`optional-clause has-tip ${!optionals['c-inflation'] ? 'disabled' : ''}`}>
            <TipBtn pointKey="4.5-nebyt" />
            <strong>4.5</strong> &nbsp;<em>Inflačná doložka.</em>{' '}
            <Ed select defaultValue="oznam" options={[
              { v: 'auto',  label: 'Automatické zvýšenie nájomného bez oznámenia' },
              { v: 'oznam', label: 'Zvýšenie nájomného písomným oznámením' },
            ]} onValueChange={setInflationVariant} />
            <br />
            {INFLATION_TEXTS[inflationVariant]}
          </p>
          </>)}

          {doctype === 'byt' && (<>
          <p className="has-tip">
            <TipBtn pointKey="4.1" />
            <strong>4.1</strong> &nbsp;Zmluvné strany sa dohodli, že výška nájomného za predmet nájmu je mesačne{' '}
            <Ed defaultValue="1100" placeholder="suma" num /> € (slovom: <Ed defaultValue="jedentisícsto" placeholder="slovom" lg /> eur).
            Nájomné sa platí mesačne vopred, vždy k <Ed select defaultValue="15." options={[
              { v: '5.',  label: '5.' },
              { v: '10.', label: '10.' },
              { v: '15.', label: '15.' },
              { v: '20.', label: '20.' },
            ]} /> dňu kalendárneho mesiaca
            predchádzajúceho mesiacu, na ktorý sa nájomné vzťahuje, a to{' '}
            <Ed select defaultValue="prevod" options={[
              { v: 'prevod',    label: `prevodom na bankový účet ${P_G} uvedený v záhlaví zmluvy` },
              { v: 'hotovost',  label: 'v hotovosti oproti potvrdeniu o prijatí platby' },
            ]} />.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="4.2" />
            <strong>4.2</strong> &nbsp;V cene nájmu podľa bodu 4.1 nie sú zahrnuté úhrady za plnenia poskytované
            s užívaním bytu a príslušenstva. Tieto úhrady {T ? 'uhrádzajú' : 'uhrádza'} {N_N} paušálnou zálohou s lehotou splatnosti
            rovnakou ako nájomné, a to na účet {P_G}. Položky zahŕňajú (mesačne):{' '}
            <Ed defaultValue="fond opráv, fond opráv balkóny/lodžie/terasy, teplá úžitková voda, náklad na vykurovanie, správa, vodné a stočné — SV, odvoz a likvidácia odpadu, havarijná služba, zrážková voda, upratovanie spoločných častí, upratovanie vonkajších priestorov, deratizácia, bankové poplatky, spoločná elektrická energia" placeholder="rozpis služieb" xl />.
            Spolu <Ed defaultValue="195,00" placeholder="suma" num /> €/mesiac.
            Zálohová platba za elektrickú energiu je <Ed defaultValue="30" placeholder="suma" num /> €/mesiac.{' '}
            {N_N} {N_POU}, že výška týchto úhrad závisí od skutočnej spotreby a mení sa každoročne.
            Úhradu prípadných nedoplatkov/preplatkov vykonajú Zmluvné strany podľa skutočnej spotreby
            na základe vyúčtovaní a zúčtovacích faktúr od dodávateľov jednotlivých služieb.
          </p>
          <p>
            <strong>4.3</strong> &nbsp;Celková mesačná platba (nájomné + zálohy + elektrina) je{' '}
            <Ed defaultValue="1 325" placeholder="suma" num /> €.
          </p>
          <p>
            <strong>4.4</strong> &nbsp;Drobné opravy do výšky <Ed defaultValue="50" placeholder="suma" num /> €
            hradí {N_N} na svoje náklady.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="4.5" />
            <strong>4.5</strong> &nbsp;Peňažná zábezpeka je vo výške <Ed select defaultValue="1" options={[
              { v: '1', label: '1-mesačného nájomného a úhrad' },
              { v: '2', label: '2-násobku mesačného nájomného a úhrad' },
              { v: '3', label: '3-násobku mesačného nájomného a úhrad' },
            ]} /> podľa bodu 4.1 a slúži na pokrytie prípadných nedoplatkov, škôd a nákladov {P_G}{' '}
            po skončení nájmu. Peňažná zábezpeka je splatná do <Ed defaultValue="3" placeholder="počet" num /> dní od podpisu
            tejto zmluvy; počas trvania zmluvy bude v držbe {P_G}. Ak peňažná zábezpeka nebude uhradená ani do{' '}
            <Ed defaultValue="5" placeholder="počet" num /> dní od podpisu zmluvy, táto zmluva sa ruší od počiatku (ex tunc).
            Po skončení nájmu bude peňažná zábezpeka vrátená po odpočítaní prípadných nedoplatkov a škôd na predmete nájmu,
            a to po doručení vyúčtovania od správy bytového domu.
          </p>
          <p className={`optional-clause ${!optionals['c-inflation'] ? 'disabled' : ''}`}>
            <strong>4.6</strong> &nbsp;<Ed select defaultValue="oznam" options={[
              { v: 'auto',  label: 'Automatické zvýšenie nájomného bez oznámenia' },
              { v: 'oznam', label: 'Zvýšenie nájomného písomným oznámením' },
            ]} onValueChange={setInflationVariant} />
            <br />
            {INFLATION_TEXTS[inflationVariant]}
          </p>
          <p>
            <strong>{optionals['c-inflation'] ? '4.7' : '4.6'}</strong> &nbsp;<strong>Rekapitulácia platby po podpise zmluvy:</strong> {N_N} {N_UHR}{' '}
            do <Ed defaultValue="" placeholder="počet" num /> dní od podpisu tejto zmluvy nájomné za prvý mesiac vo výške{' '}
            <Ed defaultValue="1 325" placeholder="suma" num /> € a peňažnú zábezpeku vo výške{' '}
            <Ed defaultValue="1 325" placeholder="suma" num /> €, spolu{' '}
            <Ed defaultValue="2 650" placeholder="suma" num /> € (slovom:{' '}
            <Ed defaultValue="dvetisícšesťsto päťdesiat" placeholder="slovom" lg /> eur).
          </p>
          </>)}
        </section>

        {/* Čl. V — Vybavenie a stav predmetu nájmu */}
        <section className="article" id="art-5">
          <div className="article-head">
            <div className="article-num">Článok V</div>
            <span className="article-title">{doctype === 'dom' ? 'Stav predmetu nájmu a jeho vybavenie' : doctype === 'nebyt' ? 'Práva a povinnosti zmluvných strán' : doctype === 'pozemok' ? 'Stav pozemku' : 'Vybavenie bytu a škody na byte'}</span>
          </div>

          {doctype === 'pozemok' && (<>
          <p>
            <strong>5.1</strong> &nbsp;Zmluvné strany budú komunikovať primárne cez aplikáciu{' '}
            <Ed select defaultValue="wa" options={[
              { v: 'wa',     label: 'WhatsApp' },
              { v: 'signal', label: 'Signal' },
              { v: 'tg',     label: 'Telegram' },
            ]} />{' '}(prepojenú s telefónnymi číslami uvedenými na prvej strane tejto zmluvy) (ďalej aj ako „<em>Aplikácia</em>").
          </p>
          <p>
            <strong>5.2</strong> &nbsp;{P_N} {L ? 'prenechávajú' : 'prenecháva'} {N_D} pozemok v stave spôsobilom na dohodnuté užívanie.
            {' '}{N_N} {N_VYH}, že {T ? 'sú' : 'je'} so stavom pozemku {T ? 'oboznámení' : 'oboznámený'} a takto ho {T ? 'preberajú' : 'preberá'}.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="5.3-pozemok" />
            <strong>5.3</strong> &nbsp;Stav pozemku bude zaznamenaný v preberacom protokole.
            Zmluvné strany môžu stav pozemku pri odovzdaní zdokumentovať{' '}
            <Ed select defaultValue="video" options={[
              { v: 'video',    label: 'formou videozáznamu zaslaného cez Aplikáciu' },
              { v: 'foto',     label: 'formou fotografií zaslaných cez Aplikáciu' },
              { v: 'protokol', label: 'písomným súpisom v preberacom protokole' },
            ]} />.
          </p>
          </>)}

          {doctype === 'dom' && (<>
          <p>
            <strong>5.1</strong> &nbsp;Zmluvné strany budú komunikovať cez aplikáciu{' '}
            <Ed select defaultValue="wa" options={[
              { v: 'wa',     label: 'WhatsApp' },
              { v: 'signal', label: 'Signal' },
              { v: 'tg',     label: 'Telegram' },
            ]} />{' '}(prepojenú s telefónnymi číslami, resp. kontaktmi Zmluvných strán uvedenými na prvej strane
            tejto zmluvy) (ďalej aj ako „<em>Aplikácia</em>").
          </p>
          <p>
            <strong>5.2</strong> &nbsp;{P_N} {L ? 'prenechávajú' : 'prenecháva'} {N_D} predmet nájmu v stave spôsobilom na riadne užívanie.
          </p>
          <p className="has-tip has-tip-2">
            <TipBtn pointKey="5.3-dom" />
            <TipBtn pointKey="5.3b-dom" stacked />
            <strong>5.3</strong> &nbsp;Rozsah vybavenia a stav predmetu nájmu vrátane stavov meračov energií bude zaznamenaný
            v preberacom protokole. Zmluvné strany môžu stav predmetu nájmu a vybavenia pri odovzdaní zdokumentovať{' '}
            <Ed select defaultValue="video" options={[
              { v: 'video',    label: 'formou videozáznamu zaslaného cez Aplikáciu' },
              { v: 'foto',     label: 'formou fotografií zaslaných cez Aplikáciu' },
              { v: 'protokol', label: 'písomným súpisom vybavenia v preberacom protokole' },
            ]} />. Vybavenie predmetu nájmu {L ? 'prenechávajú' : 'prenecháva'} {P_N} {N_D}{' '}
            na užívanie bezodplatne počas trvania tejto zmluvy.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="5.4-dom" />
            <strong>5.4</strong> &nbsp;{N_N} {T ? 'sú povinní' : 'je povinný'} do{' '}
            <Ed select defaultValue="7" options={[
              { v: '7',  label: '7' },
              { v: '14', label: '14' },
            ]} /> dní odo dňa prevzatia predmetu nájmu oznámiť {P_D}{' '}
            všetky zistené vady a nedostatky. Ak tak {T ? 'neurobia' : 'neurobí'},
            má sa za to, že predmet nájmu {T ? 'prevzali' : 'prevzal'} bez vád.
          </p>
          <p>
            <strong>5.5</strong> &nbsp;{N_N} {T ? 'sú zodpovední' : 'je zodpovedný'} za všetky škody na predmete nájmu, jeho zariadeniach,
            príslušenstve a majetku {P_G} spôsobené {T ? 'ich' : 'jeho'} činnosťou alebo činnosťou osoby,{' '}
            ktorú do predmetu nájmu {T ? 'vpustili' : 'vpustil'}, a {T ? 'sú povinní' : 'je povinný'} ich na vlastné náklady odstrániť
            alebo uviesť do pôvodného stavu. Ak ich {T ? 'neodstránia' : 'neodstráni'} ani do{' '}
            <Ed select defaultValue="30" options={[
              { v: '15', label: '15' },
              { v: '30', label: '30' },
            ]} /> dní od vzniku škody alebo skončenia nájmu,
            {' '}{P_N} ich {L ? 'môžu' : 'môže'} nechať opraviť a požadovať preplatenie týchto výdavkov.
          </p>
          </>)}

          {doctype === 'nebyt' && (<>
          <p>
            <strong>5.1</strong> &nbsp;Zmluvné strany môžu komunikovať cez aplikáciu{' '}
            <Ed select defaultValue="wa" options={[
              { v: 'wa',     label: 'WhatsApp' },
              { v: 'signal', label: 'Signal' },
              { v: 'tg',     label: 'Telegram' },
            ]} />{' '}(prepojenú s telefónnymi číslami, resp. kontaktmi Zmluvných strán uvedenými v záhlaví tejto zmluvy)
            (ďalej aj ako „<em>Aplikácia</em>").
          </p>
          <p className="has-tip">
            <TipBtn pointKey="5.2-nebyt" />
            <strong>5.2</strong> &nbsp;<em>Odovzdanie a údržba.</em>{' '}
            {P_N} {P_JE} {P_POV} odovzdať {N_D} predmet nájmu v stave spôsobilom na obvyklé
            alebo dohodnuté užívanie a na svoje náklady ho v tomto stave udržiavať.
            O odovzdaní vyhotovia Zmluvné strany preberací protokol a stav zdokumentujú
            (včrátane stavov meračov energií){' '}
            <Ed select defaultValue="video" options={[
              { v: 'video',    label: 'formou videozáznamu zaslaného cez Aplikáciu' },
              { v: 'foto',     label: 'formou fotografií zaslaných cez Aplikáciu' },
              { v: 'protokol', label: 'písomným súpisom v preberacom protokole' },
            ]} />.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="5.3-nebyt-biz" />
            <strong>5.3</strong> &nbsp;<em>Drobné opravy.</em>{' '}
            {N_N} {N_JE} {N_POV} uhrádzať náklady spojené s obvyklým (bežným) udržiavaním predmetu nájmu.
            Potrebu väčších opráv je {N_POV} bez zbytočného odkladu oznámiť {P_D} a umožniť ich vykonanie,
            inak zodpovedá za škodu. Drobné opravy do výšky{' '}
            <Ed defaultValue="" placeholder="suma" num /> € za jednu opravu hradí {N_N} na vlastné náklady.
          </p>
          <p>
            <strong>5.4</strong> &nbsp;<em>Stavebné úpravy.</em>{' '}
            {N_N} sa zaväzuje nevykonať bez predchádzajúceho písomného súhlasu {P_G}
            žiadne stavebné ani iné úpravy predmetu nájmu.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="5.5-nebyt" />
            <strong>5.5</strong> &nbsp;<em>BOZP, PO a hygiena.</em>{' '}
            {N_N} si bude v prenajatých priestoroch zabezpečovať povinnosti vyplývajúce
            zo všeobecne záväzných právnych noriem v oblasti požiarnej ochrany, BOZP a hygieny
            sám, na vlastné náklady a nebezpečenstvo. Ak účel užívania vyžaduje zvláštne vybavenie,
            {' '}{N_N} ho zabezpečí na vlastné náklady.
          </p>
          <p>
            <strong>5.6</strong> &nbsp;<em>Zodpovednosť za škody.</em>{' '}
            {N_N} zodpovedá v plnom rozsahu za škodu spôsobenú vlastnou alebo podnikateľskou činnosťou
            (včrátane činnosti osoby, ktorú do priestoru vpustil).
          </p>
          <p className="has-tip">
            <TipBtn pointKey="5.7-nebyt" />
            <strong>5.7</strong> &nbsp;<em>Oznámenie vád.</em>{' '}
            {N_N} je {N_POV} do{' '}
            <Ed select defaultValue="7" options={[
              { v: '7',  label: '7' },
              { v: '14', label: '14' },
            ]} /> dní od prevzatia predmetu nájmu oznámiť {P_D} cez Aplikáciu všetky zistené poškodenia,
            vady alebo nedostatky. Ak tak {T ? 'neurobia' : 'neurobí'}, má sa za to, že predmet nájmu
            {T ? ' prevzali' : ' prevzal'} v stave bez vád.
          </p>
          </>)}

          {doctype === 'byt' && (<>
          <p>
            <strong>5.1</strong> &nbsp;Zmluvné strany budú komunikovať cez aplikáciu{' '}
            <Ed select defaultValue="wa" options={[
              { v: 'wa',     label: 'WhatsApp' },
              { v: 'signal', label: 'Signal' },
              { v: 'tg',     label: 'Telegram' },
            ]} />{' '}(prepojenú s telefónnymi číslami, resp. kontaktmi Zmluvných strán uvedenými na prvej strane
            tejto zmluvy) (ďalej aj ako „<em>Aplikácia</em>").
          </p>
          <p className="has-tip has-tip-2">
            <TipBtn pointKey="5.2" />
            <TipBtn pointKey="5.2b" stacked />
            <strong>5.2</strong> &nbsp;Predmet nájmu {L ? 'odovzdávajú' : 'odovzdáva'} {P_N} {N_D} vybavený podľa{' '}
            <Ed select defaultValue="video" options={[
              { v: 'video',    label: 'videa zachytávajúceho jeho stav (podľa tohto článku)' },
              { v: 'foto',     label: 'fotodokumentácie zachytávajúcej jeho stav' },
              { v: 'protokol', label: 'písomného súpisu vybavenia' },
            ]} />{' '}a stavy meračov energií na základe preberacieho protokolu. Vybavenie bytu {L ? 'prenechávajú' : 'prenecháva'} {P_N} {N_D}{' '}
            na užívanie bezodplatne počas trvania platnosti tejto zmluvy.
          </p>
          <p>
            <strong>5.3</strong> &nbsp;{N_N} {T ? 'sú zodpovední' : 'je zodpovedný'} za všetky škody na nehnuteľnosti, zariadeniach,
            príslušenstve a majetku {P_G} spôsobené {T ? 'ich' : 'jeho'} činnosťou alebo činnosťou osoby, ktorú do bytu {T ? 'vpustili' : 'vpustil'} na návštevu,
            a {T ? 'sú povinní' : 'je povinný'} ich na vlastné náklady odstrániť alebo uviesť do pôvodného stavu. Ak ich {T ? 'neodstránia' : 'neodstráni'}
            ani do <Ed select defaultValue="30" options={[
              { v: '15', label: '15' },
              { v: '30', label: '30' },
            ]} /> dní od vzniku škody alebo skončenia nájmu,
            {' '}{P_N} ich {L ? 'môžu' : 'môže'} nechať opraviť alebo uviesť do pôvodného stavu a požadovať preplatenie týchto
            výdavkov. {N_N} {T ? 'sú povinní' : 'je povinný'} bezodkladne písomne oznámiť {P_D} všetky takéto škody.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="5.4" />
            <strong>5.4</strong> &nbsp;Stav bytu a jeho vybavenie bude v deň odovzdania bytu zdokumentovaný
            v Aplikácii. {N_N} {T ? 'sú povinní' : 'je povinný'} do{' '}
            <Ed select defaultValue="7" options={[
              { v: '7',  label: '7' },
              { v: '14', label: '14' },
            ]} /> dní odo dňa prevzatia bytu oznámiť {P_D}{' '}
            všetky zistené poškodenia, vady alebo nedostatky bytu a jeho zariadenia, a to výlučne formou
            písomnej správy zaslanej do spoločnej komunikačnej skupiny zriadenej v Aplikácii.
          </p>
          <p>
            <strong>5.5</strong> &nbsp;Ak {N_N} v uvedenej lehote poškodenia, vady ani nedostatky {T ? 'neoznámia' : 'neoznámi'},
            má sa za to, že byt a jeho zariadenie boli ku dňu začiatku nájmu odovzdané v stave bez poškodení,
            vád a nedostatkov, a {N_N} {T ? 'berú' : 'berie'} na vedomie, že za akékoľvek poškodenia zistené po uplynutí
            uvedenej lehoty {T ? 'zodpovedajú' : 'zodpovedá'}, pokiaľ {T ? 'nepreukážu' : 'nepreukáže'} opak.
          </p>
          </>)}
        </section>

        {/* Čl. VI — pozemok: Práva a povinnosti */}
        {doctype === 'pozemok' && (
        <section className="article" id="art-6-pozemok">
          <div className="article-head">
            <div className="article-num">Článok VI</div>
            <span className="article-title">Práva a povinnosti zmluvných strán</span>
          </div>
          <p>
            <strong>6.1</strong> &nbsp;{N_N} {T ? 'sú povinní' : 'je povinný'} užívať pozemok riadne, šetrne, v súlade s jeho dohodnutým účelom,
            udržiavať ho v čistote a poriadku a chrániť ho pred poškodením.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="6.2-pozemok" />
            <strong>6.2</strong> &nbsp;Drobnú a bežnú údržbu pozemku (napr. kosenie trávy, údržba prípadného oplotenia a pod.)
            si {N_N} {T ? 'zabezpečujú' : 'zabezpečuje'} na vlastné náklady.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="6.3-pozemok" />
            <strong>6.3</strong> &nbsp;{N_N} nie {T ? 'sú oprávnení' : 'je oprávnený'} vykonávať na pozemku žiadne stavebné úpravy,
            zmeny, ani umiestňovať trvalé stavby bez predchádzajúceho písomného súhlasu {P_G}.
          </p>
          <p>
            <strong>6.4</strong> &nbsp;{P_N} {L ? 'sú oprávnení' : 'je oprávnený'} vstúpiť na pozemok za účelom kontroly
            jeho stavu a dodržiavania účelu nájmu, a to po predchádzajúcom oznámení {N_D} vopred minimálne{' '}
            <Ed select defaultValue="24" options={[
              { v: '24', label: '24 hodín' },
              { v: '48', label: '48 hodín' },
              { v: '72', label: '72 hodín' },
            ]} />, okrem prípadu bezprostredného ohrozenia majetku.
          </p>
          <p className={`optional-clause has-tip ${!optionals['c-pets'] ? 'disabled' : ''}`}>
            <TipBtn pointKey="6.5-pozemok" />
            <strong>6.5</strong> &nbsp;<em>Zvieratá.</em>{' '}Chov alebo držanie zvierat na pozemku je{' '}
            <Ed select defaultValue="suhlas" options={[
              { v: 'zakaz',    label: 'výslovne zakázané' },
              { v: 'suhlas',   label: `dovolené len s predchádzajúcim písomným súhlasom ${P_G}` },
              { v: 'povolene', label: 'povolené bez obmedzenia' },
            ]} onValueChange={setLandPets} />.
            {' '}{N_N} {T ? 'zodpovedajú' : 'zodpovedá'} za všetky škody spôsobené zvieraťom na pozemku alebo na majetku tretích osôb.
          </p>
        </section>
        )}

        {/* Čl. VII — pozemok: Skončenie nájmu */}
        {doctype === 'pozemok' && (
        <section className="article" id="art-7-pozemok">
          <div className="article-head">
            <div className="article-num">Článok VII</div>
            <span className="article-title">Skončenie nájmu</span>
          </div>
          <p>
            <strong>7.1</strong> &nbsp;Nájom zaniká uplynutím dojednanej doby, písomnou dohodou Zmluvných strán,
            písomnou výpoveďou alebo písomným odstúpením od zmluvy.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="7.2-pozemok" />
            <strong>7.2</strong> &nbsp;Každá zo Zmluvných strán je oprávnená vypovedať túto zmluvu aj bez uvedenia dôvodu
            s výpovednou lehotou <strong>3 mesiace</strong>, ktorá začína plynúť prvým dňom kalendárneho mesiaca
            nasledujúceho po doručení výpovede druhej strane.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="7.3-pozemok" />
            <strong>7.3</strong> &nbsp;{P_N} {L ? 'môžu' : 'môže'} odstúpiť od tejto zmluvy okamžite, ak {N_N}{' '}
            {T ? 'nezaplatili' : 'nezaplatil'} splatné nájomné ani do splatnosti ďalšieho nájomného,
            alebo ak napriek upozorneniu {T ? 'užívajú' : 'užíva'} pozemok v rozpore s dohodnutým účelom.
          </p>
          <p>
            <strong>7.4</strong> &nbsp;{N_N} {T ? 'sú povinní' : 'je povinný'} ku dňu skončenia nájmu pozemok úplne vypratať
            a odovzdať ho {P_D} v stave, v akom ho {T ? 'prevzali' : 'prevzal'} (s prihliadnutím na obvyklé opotrebenie).
          </p>
        </section>
        )}

        {/* Čl. VI — dom: Práva a povinnosti */}
        {doctype === 'dom' && (
        <section className="article" id="art-6-dom">
          <div className="article-head">
            <div className="article-num">Článok VI</div>
            <span className="article-title">Práva a povinnosti zmluvných strán</span>
          </div>
          <p>
            <strong>6.1</strong> &nbsp;{N_N} {T ? 'sú povinní' : 'je povinný'} užívať predmet nájmu riadne a v súlade s jeho účelom,
            udržiavať ho v čistote a poriadku, a chrániť ho pred poškodením.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="6.2-dom" />
            <strong>6.2</strong> &nbsp;Drobné opravy a bežnú údržbu predmetu nájmu súvisiace s jeho užívaním si {N_N}{' '}
            {T ? 'zabezpečujú' : 'zabezpečuje'} na vlastné náklady do sumy{' '}
            <Ed defaultValue="20" placeholder="20" num /> EUR za jednu opravu. Opravy presahujúce túto sumu{' '}
            {P_JE} {P_N} povinn{L ? 'í' : 'ý'} zabezpečiť na vlastné náklady po predchádzajúcom oznámení zo strany {N_G}.
          </p>
          <p>
            <strong>6.3</strong> &nbsp;{N_N} {T ? 'sú povinní' : 'je povinný'} bez zbytočného odkladu oznámiť {P_D}{' '}
            všetky vady a poruchy predmetu nájmu, jeho vybavenia a inštalácií, ktoré si vyžadujú opravu presahujúcu rámec
            drobných opráv podľa bodu 6.2.
          </p>
          <p>
            <strong>6.4</strong> &nbsp;{N_N} nie {T ? 'sú oprávnení' : 'je oprávnený'} vykonávať žiadne stavebné úpravy
            ani iné zásahy do predmetu nájmu bez predchádzajúceho písomného súhlasu {P_G}.
          </p>
          <p>
            <strong>6.5</strong> &nbsp;{P_N} {L ? 'sú oprávnení' : 'je oprávnený'} vstúpiť do predmetu nájmu za účelom kontroly
            jeho stavu, a to po predchádzajúcom oznámení {N_D} vopred minimálne{' '}
            <Ed select defaultValue="24" options={[
              { v: '24', label: '24 hodín' },
              { v: '48', label: '48 hodín' },
              { v: '72', label: '72 hodín' },
            ]} />, okrem prípadu bezprostredného ohrozenia predmetu nájmu alebo zdravia osôb.
          </p>
          <p className={`optional-clause ${!optionals['c-smoking'] ? 'disabled' : ''}`}>
            <strong>6.6</strong> &nbsp;<em>Fajčenie.</em>{' '}V predmete nájmu je fajčenie (vrátane elektronickej cigarety
            a zahrievaných tabakových výrobkov){' '}
            <Ed select defaultValue="zakaz" options={[
              { v: 'zakaz',    label: 'výslovne zakázané' },
              { v: 'exterier', label: 'povolené len v exteriéri (záhrada, terasa)' },
              { v: 'povolene', label: 'povolené' },
            ]} />.
          </p>
          <p className={`optional-clause ${!optionals['c-pets'] ? 'disabled' : ''}`}>
            <strong>6.7</strong> &nbsp;<em>Zvieratá.</em>{' '}Držanie zvierat v predmete nájmu je{' '}
            <Ed select defaultValue="suhlas" options={[
              { v: 'zakaz',    label: 'výslovne zakázané' },
              { v: 'suhlas',   label: `dovolené s písomným súhlasom ${P_G}` },
              { v: 'povolene', label: 'povolené bez obmedzenia' },
            ]} />. {N_N} {T ? 'zodpovedajú' : 'zodpovedá'} za všetky škody spôsobené zvieraťom na predmete nájmu a jeho vybavení.
          </p>
          <p className={`optional-clause ${!optionals['art-7'] ? 'disabled' : ''}`}>
            <strong>6.8</strong> &nbsp;<em>Zmluvná pokuta pri omeškaní s platbou.</em>{' '}
            V prípade omeškania {N_G} s úhradou nájomného alebo úhrady za služby{' '}
            {P_JE} {P_N} {P_OPR} požadovať zmluvnú pokutu vo výške{' '}
            <Ed defaultValue="0,05" placeholder="%" num /> % z dlžnej sumy za každý začatý deň omeškania.
            Nárok na zákonný úrok z omeškania a na náhradu škody tým nie je dotknutý.
          </p>
        </section>
        )}

        {/* Čl. VII — dom: Skončenie nájmu */}
        {doctype === 'dom' && (
        <section className="article" id="art-7-dom">
          <div className="article-head">
            <div className="article-num">Článok VII</div>
            <span className="article-title">Skončenie nájmu</span>
          </div>
          <p>
            <strong>7.1</strong> &nbsp;Nájom zaniká uplynutím dojednanej doby, písomnou dohodou Zmluvných strán,
            písomnou výpoveďou alebo písomným odstúpením od zmluvy.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="7.2-dom" />
            <strong>7.2</strong> &nbsp;Každá zo Zmluvných strán je oprávnená vypovedať túto zmluvu aj bez uvedenia
            dôvodu s výpovednou lehotou <strong>3 mesiace</strong>, ktorá začína plynúť prvým dňom kalendárneho
            mesiaca nasledujúceho po doručení výpovede druhej strane.
          </p>
          <p className="has-tip">
            <TipBtn pointKey="7.3-dom" />
            <strong>7.3</strong> &nbsp;{P_N} {L ? 'môžu' : 'môže'} odstúpiť od tejto zmluvy, ak {N_N},{' '}
            hoci upomenut{T ? 'í' : 'ý'}, {T ? 'nezaplatili' : 'nezaplatil'} splatné nájomné ani do splatnosti
            ďalšieho nájomného, a ak je táto doba kratšia ako tri mesiace, do troch mesiacov, alebo ak
            s ohľadom na právoplatné rozhodnutie príslušného orgánu treba predmet nájmu vypratať.
          </p>
          <p>
            <strong>7.4</strong> &nbsp;{N_N} {T ? 'sú povinní' : 'je povinný'} ku dňu skončenia nájmu predmet nájmu vypratať,
            odovzdať ho {P_D} v stave v akom ho {T ? 'prevzali' : 'prevzal'} (s prihliadnutím na obvyklé opotrebenie)
            a odovzdať všetky kľúče.
          </p>
        </section>
        )}

        {/* Čl. VI — Doručovanie (byt / nebyt) */}
        {(doctype === 'byt' || doctype === 'nebyt') && (
        <section className="article" id="art-6">
          <div className="article-head">
            <div className="article-num">Článok VI</div>
            <span className="article-title">Doručovanie a preberanie zásielok</span>
          </div>
          <p>
            <strong>6.1</strong> &nbsp;Zmluvné strany sa dohodli, že akékoľvek písomnosti a zásielky súvisiace
            s touto zmluvou si preberajú na adrese uvedenej v záhlaví tejto zmluvy, a to aj v prípade,
            ak sa na tejto adrese fakticky nezdržiavajú. Zásielka doručená na túto adresu sa považuje
            za riadne doručenú dňom jej prevzatia alebo márnym uplynutím odbernej lehoty na pošte
            či u iného doručovateľa.
          </p>
          <p>
            <strong>6.2</strong> &nbsp;Zmluvné strany sa ďalej dohodli, že doručovanie oznámení a iných správ
            môže byť uskutočnené aj prostredníctvom spoločného komunikačného kanála — skupinového chatu
            v Aplikácii podľa čl. V, v ktorom je zachytená celá komunikácia medzi Zmluvnými stranami.
            Správa zaslaná týmto spôsobom sa považuje za doručenú okamihom jej odoslania, a to aj v prípade,
            ak si ju adresát neprečítal.
          </p>
          <p>
            <strong>6.3</strong> &nbsp;Ustanovenia tohto článku sa použijú bez ohľadu na to, či adresát
            zmení svoje miesto pobytu, korešpondenčnú adresu alebo telefónne číslo, pokiaľ o tejto zmene
            písomne neinformuje druhú stranu a táto zmena nebude potvrdená druhou stranou.
          </p>
        </section>
        )}

        {/* Čl. VII — Ostatné dojednania (fajčenie, zvieratá, pokuta) — byt / nebyt */}
        {(doctype === 'byt' || doctype === 'nebyt') && (optionals['c-smoking'] || optionals['c-pets'] || optionals['art-7']) && (
        <section className="article" id="art-7">
          <div className="article-head">
            <div className="article-num">Článok VII</div>
            <span className="article-title">Ostatné dojednania</span>
          </div>
          {(() => {
            let n = 0;
            const num = (on) => on ? `7.${++n}` : '—';
            const sOn = !!optionals['c-smoking'];
            const pOn = !!optionals['c-pets'];
            const fOn = !!optionals['art-7'];
            return <>
          <p className={`optional-clause ${!sOn ? 'disabled' : ''}`}>
            <strong>{num(sOn)}</strong> &nbsp;<em>Fajčenie.</em>{' '}
            V predmete nájmu a v spoločných častiach bytového domu
            je fajčenie (cigarety, cigary, fajka, elektronická cigareta, zahrievané tabakové výrobky
            a obdobné výrobky){' '}
            <Ed select defaultValue="zakaz" options={[
              { v: 'zakaz',    label: 'výslovne zakázané' },
              { v: 'balkon',   label: 'povolené len na balkóne/lodžii/terase' },
              { v: 'povolene', label: 'povolené' },
            ]} onValueChange={setSmokingVariant} />.
            {smokingVariant !== 'povolene' && <>
              {' '}V prípade porušenia tohto zákazu {P_JE} {P_N} {P_OPR} požadovať od {N_G} náhradu nákladov
              na odstránenie následkov fajčenia (najmä profesionálne vyčistenie textílií, čalúnenia, stien
              a stropov, prípadne vymaľovanie priestoru).
            </>}
          </p>
          <p className={`optional-clause ${!pOn ? 'disabled' : ''}`}>
            <strong>{num(pOn)}</strong> &nbsp;<em>Zvieratá.</em>{' '}
            Držanie zvierat (psov, mačiek a iných domácich či exotických zvierat) v predmete nájmu je{' '}
            <Ed select defaultValue="suhlas" options={[
              { v: 'zakaz',    label: 'výslovne zakázané' },
              { v: 'suhlas',   label: `dovolené s písomným súhlasom ${P_G}` },
              { v: 'povolene', label: 'povolené bez obmedzenia' },
            ]} onValueChange={setPetsVariant} />.
            {petsVariant !== 'zakaz' && <>
              {' '}{N_N} {T ? 'zodpovedajú' : 'zodpovedá'} za všetky škody spôsobené zvieraťom na predmete nájmu
              a jeho vybavení, ako aj za škody spôsobené tretím osobám. {N_N} {T ? 'sú povinní' : 'je povinný'}{' '}
              zabezpečiť, aby zviera nerušilo ostatných obyvateľov bytového domu (najmä hlukom a zápachom),
              a pri odovzdaní predmetu nájmu {T ? 'vykonajú' : 'vykoná'} na svoje náklady profesionálne
              vyčistenie bytu (vrátane dezinfekcie a deratizácie, ak je to s ohľadom na druh zvieraťa potrebné).
            </>}
          </p>
          <p className={`optional-clause ${!fOn ? 'disabled' : ''}`}>
            <strong>{num(fOn)}</strong> &nbsp;<em>Zmluvná pokuta pri omeškaní s platbou.</em>{' '}
            V prípade omeškania {N_G} s úhradou nájomného alebo úhrady za služby{' '}
            {P_JE} {P_N} {P_OPR} požadovať zmluvnú pokutu vo výške{' '}
            <Ed defaultValue="0,05" placeholder="%" num /> % z dlžnej sumy za každý začatý deň omeškania.
            Nárok na zákonný úrok z omeškania a na náhradu škody tým nie je dotknutý.
          </p>
          </>; })()}
        </section>
        )}

        {/* Čl. VIII — Záverečné ustanovenia */}
        {(() => {
          const art7On = doctype === 'dom' || doctype === 'pozemok' || optionals['c-smoking'] || optionals['c-pets'] || optionals['art-7'];
          const ROM = art7On ? 'VIII' : 'VII';
          const P = art7On ? 8 : 7;
          let m = 0;
          const mk = (on = true) => on ? `${P}.${++m}` : '—';
          return (
        <section className="article" id="art-8">
          <div className="article-head">
            <div className="article-num">Článok {ROM}</div>
            <span className="article-title">Záverečné ustanovenia</span>
          </div>
          <p>
            <strong>{mk()}</strong> &nbsp;Akákoľvek zmena tejto zmluvy je možná len po predchádzajúcej dohode
            Zmluvných strán vo forme písomného dodatku, ktorý bude vzájomne odsúhlasený a podpísaný.
          </p>
          <p>
            <strong>{mk()}</strong> &nbsp;Právne vzťahy vyplývajúce z tejto zmluvy,
            ako aj prípadné spory medzi Zmluvnými stranami, sa spravujú právnym poriadkom Slovenskej republiky.
          </p>
          <p className={`optional-clause has-tip ${!optionals['c-arbitration'] ? 'disabled' : ''}`}>
            <TipBtn pointKey="8.3" />
            <strong>{mk(optionals['c-arbitration'])}</strong> &nbsp;Zmluvné strany sa dohodli, že všetky spory (vrátane vypratania nehnuteľnosti),
            ktoré vzniknú z tejto zmluvy budú riešené (písomne a zrýchlenou formou) rozhodcom{' '}
            JUDr. Milanom Ficekom, advokátom, so sídlom:{' '}
            Žilinská 14, 81105 Bratislava ako vybranou osobou
            podľa § 6 ods. 3 zákona č. 244/2002 Z.z. o rozhodcovskom konaní a to podľa pravidiel zverejnených
            v Obchodnom vestníku pod č. 96/2016, značka: O000260 (t.j. pravidlá spoločnosti Rozhodcovské konanie
            SR s.r.o.). Rozhodcovské konanie bude vedené v súlade s právnymi predpismi SR.
          </p>
          <p>
            <strong>{mk()}</strong> &nbsp;Zmluvné strany sa zaväzujú plniť všetky svoje povinnosti,
            ktoré vyplývajú z tejto zmluvy.
            {T && ` ${N_N} sú voči ${P_D} zaviazaní spoločne a nerozdielne.`}
          </p>
          <p>
            <strong>{mk()}</strong> &nbsp;Táto zmluva nadobúda platnosť a účinnosť momentom jej podpísania
            obidvoma Zmluvnými stranami.
          </p>
          <p>
            <strong>{mk()}</strong> &nbsp;Táto zmluva je vyhotovená v <Ed defaultValue="dvoch" placeholder="počet" /> rovnopisoch,
            z ktorých každá Zmluvná strana obdrží jeden.
          </p>
          <p>
            <strong>{mk()}</strong> &nbsp;Zmluvné strany vyhlasujú, že si zmluvu prečítali, jej obsahu porozumeli
            a na znak súhlasu ju vlastnoručne podpisujú.
          </p>
        </section>
          );
        })()}

        {/* Signatures */}
        <div className="signatures">
          <div className="sig-block">
            <div className="sig-cap">V <Ed defaultValue="Bratislave" placeholder="Mesto" />, dňa <Ed defaultValue="14. 04. 2026" placeholder="dátum" /></div>
            {landlords.map((l, i) => {
              const d = demoLandlord(i);
              const nm = (landlordDisplay[l.id] || '').trim();
              return (
                <div className="sig-person" key={l.id}>
                  <div className="sig-line"></div>
                  <div className="sig-cap">{L ? `Prenajímateľ č. ${String(i + 1).padStart(2, '0')}` : 'Prenajímateľ'}</div>
                  <div className="sig-name">{nm || 'Meno a priezvisko'}</div>
                </div>
              );
            })}
          </div>
          <div className="sig-block">
            <div className="sig-cap">V <Ed defaultValue="Bratislave" placeholder="Mesto" />, dňa <Ed defaultValue="14. 04. 2026" placeholder="dátum" /></div>
            {tenants.map((t, i) => {
              const d = demoTenant(i);
              const nm = (tenantDisplay[t.id] || '').trim();
              return (
                <div className="sig-person" key={t.id}>
                  <div className="sig-line"></div>
                  <div className="sig-cap">{T ? `Nájomca č. ${String(i + 1).padStart(2, '0')}` : 'Nájomca'}</div>
                  <div className="sig-name">{nm || 'Meno a priezvisko'}</div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="doc-footer-meta">
          <span>Vzor zmluvy pripravili advokáti z FICEK &amp; Partners</span>
          <span>Vzor je verejne prístupný na www.{window.SITE_NAME}</span>
          <span>v2.4 · Rev. apríl 2026</span>
        </div>
      </article>

      <div className="paper-actions" role="group" aria-label="Akcie so zmluvou">
        <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 · v2.4</span>
          </button>
          <button type="button" className="btn-download btn-download--ghost" onClick={downloadAsDoc}>
            <span className="btn-download__glyph" aria-hidden="true">↓</span>
            <span className="btn-download__main">Stiahnuť ako Word</span>
            <span className="btn-download__meta">.doc · v2.4</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">nevratná akcia</span>
          </button>
        </div>
        <p className="paper-actions__note">
          PDF sa otvorí v dialógu tlače prehliadača — v cieli zvoľte <em>Uložiť ako PDF</em>. Word (.doc) otvoríte v MS Word alebo v LibreOffice a môžete zmluvu ďalej upraviť.
        </p>
      </div>
    </div>
  );
};

// -------------------------------------------------------------
// Word (.doc) export — serialize the <article.paper> DOM as a
// Word-compatible HTML document and trigger a download.
// We clone the article, strip editable chrome (inputs, selects,
// disabled clauses, tip buttons, + add buttons, × toggles), then
// wrap it in a Word HTML header with MSO namespaces.
// -------------------------------------------------------------
function downloadAsDoc() {
  const article = document.querySelector('article.paper');
  if (!article) return;
  const clone = article.cloneNode(true);

  // 1) Drop disabled optional clauses/articles completely
  clone.querySelectorAll('.article.optional.disabled, .optional-clause.disabled').forEach(el => el.remove());

  // 2) Remove chrome that has no meaning on paper
  const killSelectors = [
    '.tip-pin', '.tip-pin-inline', '.tip-back',
    '.seg-toggle', '.seg-add',
    '.party-add', '.party-type-switch', '.party-type-switch-sub',
    '.party-type-switch-wrap', '.inflation-variant-picker',
    '.legal-hint',
  ];
  clone.querySelectorAll(killSelectors.join(',')).forEach(el => el.remove());

  // 3) Replace <select.ed-select> with its selected option's label (plain text)
  clone.querySelectorAll('select.ed-select').forEach(sel => {
    // the real DOM still has the select's selectedIndex; we read from the original
    const liveSel = findMatchingLiveElement(article, clone, sel);
    let label = '';
    if (liveSel && liveSel.options && liveSel.selectedIndex >= 0) {
      label = liveSel.options[liveSel.selectedIndex].textContent || '';
    } else {
      // fallback: first option
      const first = sel.querySelector('option');
      label = first ? first.textContent : '';
    }
    const span = document.createElement('span');
    span.textContent = label;
    sel.parentNode.replaceChild(span, sel);
  });

  // 4) Mirror spans for selects are no longer needed
  clone.querySelectorAll('.ed-select-print').forEach(el => {
    // keep the text, unwrap
    const textNode = document.createTextNode(el.textContent || '');
    el.parentNode.replaceChild(textNode, el);
  });

  // 5) Turn contentEditable .ed spans into plain text
  clone.querySelectorAll('.ed').forEach(ed => {
    const text = ed.textContent || '';
    const span = document.createElement('span');
    span.textContent = text;
    ed.parentNode.replaceChild(span, ed);
  });

  // 6) Remove download actions footer if it slipped in
  clone.querySelectorAll('.paper-actions').forEach(el => el.remove());

  // 6a) Convert signatures block into a 2-column TABLE — Word renders tables reliably
  //     (CSS grid & inline-block with fixed % are flaky in .doc HTML)
  const sigGrid = clone.querySelector('.signatures');
  if (sigGrid) {
    const blocks = Array.from(sigGrid.querySelectorAll(':scope > .sig-block'));
    const [left, right] = [blocks[0], blocks[1]];
    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');
    [left, right].forEach(b => {
      const td = document.createElement('td');
      td.setAttribute('width', '50%');
      td.style.cssText = 'width:50%;vertical-align:top;text-align:center;padding:0 12pt;';
      if (b) td.appendChild(b);
      tr.appendChild(td);
    });
    table.appendChild(tr);
    sigGrid.parentNode.replaceChild(table, sigGrid);
  }

  // 6b-restructure) Rebuild sig-block as a single table — Word respects table-cell padding
  // but applies automatic paragraph spacing to <div>s. Tables reliably stay tight.
  clone.querySelectorAll('.sig-block').forEach(block => {
    const outerCap = block.querySelector(':scope > .sig-cap'); // "V Bratislave, dňa ..."
    const persons = Array.from(block.querySelectorAll(':scope > .sig-person'));

    const tbl = document.createElement('table');
    tbl.setAttribute('width', '100%');
    tbl.setAttribute('cellpadding', '0');
    tbl.setAttribute('cellspacing', '0');
    tbl.setAttribute('border', '0');
    tbl.style.cssText = 'width:100%;border-collapse:collapse;';

    const mkRow = (html, css, innerCss) => {
      const tr = document.createElement('tr');
      const td = document.createElement('td');
      td.setAttribute('align', 'center');
      td.style.cssText = 'padding:0;text-align:center;line-height:1;' + (css || '');
      td.innerHTML =
        '<p align="center" style="margin:0;padding:0;text-align:center;' +
        'mso-margin-top-alt:0;mso-margin-bottom-alt:0;' +
        'mso-line-height-rule:exactly;line-height:115%;' + (innerCss || '') + '">' +
        html + '</p>';
      tr.appendChild(td);
      tbl.appendChild(tr);
    };

    // Outer "V Bratislave, dňa ..." at top of this party's signature column
    if (outerCap) {
      mkRow(
        outerCap.textContent.trim().toUpperCase(),
        'padding:0 0 44pt;text-align:center;', // 44pt breathing room below — this is where the user signs
        "font-family:'IBM Plex Sans',Arial,sans-serif;font-size:9pt;letter-spacing:1.5pt;color:#555;text-align:center;"
      );
    }

    // For each signatory: line + role + name, stacked tight
    persons.forEach((person, idx) => {
      const cap  = person.querySelector('.sig-cap');
      const name = person.querySelector('.sig-name');
      // If more than one person in the same column, add space between them
      if (idx > 0) {
        mkRow('&nbsp;', 'padding:28pt 0 0;', 'font-size:1pt;line-height:1pt;');
      }
      // Signature line (1pt tall, bottom border)
      mkRow('&nbsp;', 'border-bottom:1px solid #0f1116;height:1pt;line-height:1pt;font-size:1pt;');
      // Role (PRENAJÍMATEĽ / NÁJOMCA) — Word ignores text-transform, so uppercase in JS
      mkRow(
        cap ? cap.textContent.trim().toUpperCase() : '',
        'padding-top:6pt;text-align:center;',
        "font-family:'IBM Plex Sans',Arial,sans-serif;font-size:9pt;letter-spacing:1.5pt;color:#555;text-align:center;"
      );
      // Name (directly below role, tight)
      mkRow(
        name ? name.textContent.trim() : '',
        'padding-top:3pt;text-align:center;',
        'font-size:10pt;font-style:italic;color:#666;text-align:center;'
      );
    });

    block.innerHTML = '';
    block.appendChild(tbl);
  });

  // 6c) Footer meta — Word doesn't flex; render as inline with dot separators
  const meta = clone.querySelector('.doc-footer-meta');
  if (meta) {
    const spans = Array.from(meta.querySelectorAll(':scope > span'));
    meta.innerHTML = spans.map(s => s.textContent.trim()).join(' &nbsp;·&nbsp; ');
  }

  // 7) Inline minimal styling — Word understands a subset of CSS
  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, div.MsoFooter { margin: 0; padding: 0; text-align: left; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 8pt; letter-spacing: 0.5pt; color: #777; }
    body { font-family: "Libre Caslon Text", Georgia, serif; color: #0f1116; font-size: 12pt; line-height: 1.5; }
    /* Word defaults all <p>/<div> to ~8pt before+after. Kill that for signature area so caption+name stay tight. */
    .sig-block, .sig-block div, .sig-block p { mso-margin-top-alt: 0; mso-margin-bottom-alt: 0; }
    h1.doc-title { font-size: 16pt; text-align: center; letter-spacing: 2pt; margin: 0 0 6pt; text-transform: uppercase; font-weight: 700; }
    .doc-sub { text-align: center; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 9pt; letter-spacing: 1.5pt; text-transform: uppercase; color: #555; margin: 0 0 36pt; }
    .article { margin: 0 0 22pt; }
    .article-head { text-align: center; margin: 22pt 0 10pt; }
    .article-num { font-family: "Libre Caslon Text", Georgia, serif; font-size: 13pt; font-weight: 700; letter-spacing: 3pt; text-transform: uppercase; }
    .article-title { display: block; font-style: italic; color: #333; font-size: 11pt; margin-top: 2pt; letter-spacing: 1pt; }
    p { margin: 0 0 10pt; text-align: justify; }
    strong { font-weight: 700; }
    em, i { font-style: italic; }
    .signatures { margin-top: 48pt; width: 100%; }
    .sig-block { display: inline-block; width: 48%; vertical-align: top; text-align: center; }
    .sig-block .sig-cap { margin: 0; padding: 0; }
    .sig-block .sig-cap + .sig-person .sig-line { margin-top: 36pt; }
    .sig-cap { font-family: "IBM Plex Sans", Arial, sans-serif; font-size: 9pt; letter-spacing: 1.5pt; text-transform: uppercase; color: #555; margin: 0; padding: 0; line-height: 1.3; }
    .sig-line { border-bottom: 1px solid #0f1116; margin: 36pt 0 4pt; height: 1pt; line-height: 1pt; font-size: 1pt; }
    .sig-name { font-size: 10pt; font-style: italic; color: #666; margin: 2pt 0 0; padding: 0; line-height: 1.3; }
    .sig-person { margin: 0; padding: 0; }
    .sig-person + .sig-person .sig-line { margin-top: 36pt; }
    .sig-person .sig-cap { margin-top: 2pt; }
    .doc-footer-meta { margin-top: 36pt; padding-top: 10pt; border-top: 1px solid #ccc; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 8pt; letter-spacing: 1.5pt; text-transform: uppercase; color: #555; }
    .doc-footer-meta span { margin-right: 24pt; }
    .party { margin: 10pt 0 14pt; padding-left: 10pt; border-left: 2pt solid #0f1116; }
    .party-role { font-family: "IBM Plex Mono", Consolas, monospace; font-size: 9pt; letter-spacing: 1.5pt; text-transform: uppercase; color: #555; margin-bottom: 4pt; }
    .party-alias { font-style: italic; color: #555; margin-top: 6pt; font-size: 11pt; }
    .party-alias-term { font-style: normal; font-weight: 600; color: #0f1116; }
  `;

  // 8) Compose the Word HTML shell
  const body = clone.outerHTML;
  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>Nájomná zmluva</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>
<div style="mso-element:footer" id="f1">
  <p class="MsoFooter" align="left" style="text-align:left;">Vzor stiahnutý zadarmo z www.${window.SITE_NAME}</p>
</div>
</body>
</html>`;

  // 9) Trigger download
  window.__lastDocHtml = html;
  const blob = new Blob(['\ufeff', html], { type: 'application/msword' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'najomna-zmluva.doc';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

// Helper: given cloned node, find corresponding live node in source tree
// (same relative position in the DOM).
function findMatchingLiveElement(liveRoot, cloneRoot, cloneEl) {
  const path = [];
  let n = cloneEl;
  while (n && n !== cloneRoot) {
    const p = n.parentNode;
    if (!p) break;
    path.unshift(Array.prototype.indexOf.call(p.children, n));
    n = p;
  }
  let cur = liveRoot;
  for (const idx of path) {
    if (!cur || !cur.children || !cur.children[idx]) return null;
    cur = cur.children[idx];
  }
  return cur;
}

window.Paper = Paper;
window.__downloadAsDoc = downloadAsDoc;