// Benefits, How it works, Doc types, Author, FAQ, Related, Final CTA, Footer

const Benefits = () => (
  <section className="section" id="vyhody" data-screen-label="04 Výhody">
    <div className="container">
      <SectionHeader num="§ 04" eyebrow="Prečo náš generátor" title="Štyri rozdiely, ktoré uvidíte v zmluve." intro="Bezplatné vzory na internete sa píšu pre nikoho. Naše znenia píšeme tak, ako keby pred nami sedel klient." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0 }} className="benefits-grid">
        {[
          { n: '01', t: 'Znenie písal advokát, nie marketing.', d: 'Každú klauzulu sme používali alebo bránili na súde. Žiadne kopírované formulácie z nedostatočných šablón.' },
          { n: '02', t: 'Pokrýva bežné životné situácie ', d: 'BSM, podielové spoluvlastníctvo, podnájom, výpoveď bez udania dôvodu, depozit nad 3 nájomné — všetko ošetrené.' },
          { n: '03', t: 'Aktualizované pri každej novele.', d: 'Sledujeme legislatívu a judikatúru. Posledná verzia 4.2 reflektuje rozhodnutie NS SR.' },
          { n: '04', t: 'Možnosť individuálneho review.', d: 'Ak nestačí šablóna, advokát z kancelárie Vám zmluvu skontroluje za dohodnutý poplatok. ' },
        ].map(b => (
          <div key={b.n} style={{ padding: '40px', borderTop: '1px solid var(--rule)', borderRight: '1px solid var(--rule)' }} className="benefit-cell">
            <div className="step-num">{b.n}</div>
            <h3 className="h3" style={{ margin: '20px 0 12px', fontFamily: 'var(--serif)', fontSize: '1.4rem', fontWeight: 400 }}>{b.t}</h3>
            <p className="body" style={{ margin: 0, fontSize: '0.95rem' }}>{b.d}</p>
          </div>
        ))}
      </div>
      <style>{`
        .benefits-grid > :nth-child(2n) { border-right: 0; }
        .benefits-grid > :nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
        @media (max-width: 800px) { .benefits-grid { grid-template-columns: 1fr !important; } .benefits-grid > * { border-right: 0 !important; } }
      `}</style>
    </div>
  </section>
);

const HowItWorks = () => (
  <section className="section" id="ako-funguje" data-screen-label="05 Ako to funguje">
    <div className="container">
      <SectionHeader num="§ 05" eyebrow="Ako to funguje" title="Tri kroky. Bez registrácie." intro="Vyplníte formulár, skontrolujete živý náhľad, stiahnete PDF. Ak vyžadujete podpis, generátor pripraví aj inštrukcie na overenie." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)' }} className="how-grid">
        {[
          { n: '01', t: 'Zvolíte druh nájmu.', d: 'Byt, dom, nebytový priestor alebo pozemok. Generátor si dynamicky upraví otázky a klauzuly podľa zákonov, ktoré sa na váš prípad vzťahujú.' },
          { n: '02', t: 'Vyplníte údaje.', d: 'Strany, predmet, doba, nájomné, depozit, energie. Pri každom poli máte tooltip s vysvetlením od advokáta.' },
          { n: '03', t: 'Stiahnete dokument.', d: 'PDF v právnickej úprave (A4, 1,15 riadkovanie, číslované strany). Voliteľne pošleme druhej zmluvnej strane na e-mail.' },
        ].map((s, i) => (
          <div key={s.n} style={{ padding: 36, borderRight: i < 2 ? '1px solid var(--rule)' : 'none' }}>
            <div className="step-num">{s.n}</div>
            <h3 className="h3" style={{ margin: '16px 0 8px', fontFamily: 'var(--serif)', fontSize: '1.3rem', fontWeight: 400 }}>{s.t}</h3>
            <p className="body" style={{ margin: 0, fontSize: '0.92rem' }}>{s.d}</p>
          </div>
        ))}
      </div>
      <QuickAnswer
        q="Ako dlho trvá vytvorenie nájomnej zmluvy?"
        a="Priemerný čas vyplnenia generátora je 8 – 12 minút. Hotová zmluva je k stiahnutiu v PDF okamžite po dokončení posledného kroku."
      />
      <style>{`@media (max-width: 800px) { .how-grid { grid-template-columns: 1fr !important; } .how-grid > * { border-right: 0 !important; border-bottom: 1px solid var(--rule); } .how-grid > :last-child { border-bottom: 0; } }`}</style>
    </div>
  </section>
);

const DocTypesSection = () => {
  const types = [
    { id: 'byt', t: 'Nájomná zmluva — byt', l: '§ 663 OZ · zák. č. 98/2014 Z. z.', d: 'Klasický nájom bytu i krátkodobý nájom podľa zák. č. 98/2014 Z. z. Generátor sa pýta, ktorý režim potrebujete, a podľa toho doplní výpovedné dôvody, dĺžku nájmu a režim depozitu.' },
    { id: 'dom', t: 'Nájomná zmluva — stavba / garáž', l: '§ 663 OZ', d: 'Stavba, garáž, prístrešok alebo iná nehnuteľnosť. Vrátane súvisiaceho pozemku a príslušenstva.' },
    { id: 'nebyt', t: 'Nájomná zmluva — nebytový priestor', l: 'zák. č. 116/1990 Zb.', d: 'Pre kancelárie, predajne, sklady, výrobné priestory. Reflektuje špecifické pravidlá pre podnikateľské nájmy a investície nájomcu do priestoru.' },
    { id: 'pozemok', t: 'Nájomná zmluva — pozemok', l: '§ 663 OZ · zák. č. 504/2003 Z. z. (poľnohosp.)', d: 'Orná pôda, záhrada, stavebný pozemok. Pri poľnohospodárskych pozemkoch generátor upozorní na osobitný režim nájmu poľnohospodárskej pôdy.' },
  ];
  return (
    <section className="section" id="typy" style={{ background: 'var(--ivory-2)' }} data-screen-label="06 Typy zmlúv">
      <div className="container">
        <SectionHeader num="§ 06" eyebrow="Podporované typy" title="Štyri zmluvy, jeden generátor." intro="Každý typ má vlastnú sadu otázok a klauzúl. Pri zmene typu zmluvy sa formulár dynamicky prispôsobí." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }} className="doctypes-grid">
          {types.map((t, i) => (
            <div key={t.id} className="card" style={{ padding: 32 }}>
              <div className="mono mb-4">VZOR č. {String(i + 1).padStart(2, '0')} · {t.l}</div>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: '1.6rem', margin: '0 0 12px', fontWeight: 400, letterSpacing: '-0.01em' }}>{t.t}</h3>
              <p className="body" style={{ margin: '0 0 20px' }}>{t.d}</p>
              <a href="#generator" style={{ fontSize: 13, color: 'var(--oxblood)', textDecoration: 'underline', textUnderlineOffset: 4 }}>Vytvoriť tento typ zmluvy →</a>
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 800px) { .doctypes-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
};

const Author = () => (
  <section className="section" id="autor" data-screen-label="07 Autor">
    <div className="container">
      <SectionHeader num="§ 07" eyebrow="Autor a editorial" title="Kto stojí za znením zmluvy." />
      <div className="author-card">
        <div className="author-portrait" style={{ aspectRatio: '1 / 1', borderRadius: '50%', overflow: 'hidden', background: 'var(--ivory-2)', maxWidth: 200 }}>
          <img src={window.__resources?.milanFicekPhoto || "assets/milan-ficek.jpg"} alt="JUDr. Milan Ficek, advokát · Ficek & Partners" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
        <div>
          <div className="mono mb-2">JUDr. Milan Ficek · advokát · SAK č. 5144</div>
          <h3 style={{ fontFamily: 'var(--serif)', fontSize: '1.8rem', margin: '0 0 16px', fontWeight: 400, letterSpacing: '-0.01em' }}>
            Vyše 16 rokov v civilnej a obchodnej agende, špecializácia na nehnuteľnosti a nájomné vzťahy.
          </h3>
          <p className="body" style={{ marginBottom: 16 }}>
            Riadiaci partner kancelárie Ficek &amp; Partners. Autor publikácií k zákonu o krátkodobom nájme bytu, prednášajúci na Justičnej akadémii SR. Zastupoval prenajímateľov i nájomcov v stovkách sporov pred okresnými súdmi a Krajským súdom v Bratislave.
          </p>
          <div style={{ display: 'flex', gap: 32, marginTop: 24, flexWrap: 'wrap' }}>
            <div>
              <div className="mono">PUBLIKÁCIE</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: '1rem', marginTop: 4 }}>42 odborných článkov</div>
            </div>
            <div>
              <div className="mono">JUDIKATÚRA</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: '1rem', marginTop: 4 }}>14 rozhodnutí</div>
            </div>
            <div>
              <div className="mono">ČLENSTVO</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: '1rem', marginTop: 4 }}>SAK · ČAK</div>
            </div>
          </div>
          <div className="pull mt-8">
            „Šablóna nájomnej zmluvy slúži pre ľudí, aby podpisovali lepšie zmluvy. My ich píšeme tak, ako by sme ich mali sami podpísať.“
          </div>
        </div>
      </div>
    </div>
  </section>
);

const FAQ = () => {
  const items = [
    { q: 'Je nájomná zmluva vygenerovaná online právne platná?', a: 'Áno. Nájomná zmluva podľa § 663 a nasl. Občianskeho zákonníka nevyžaduje notársku formu. Stačí písomná forma a podpisy oboch zmluvných strán. Generátor pripravuje plne platné znenie.' },
    { q: 'Aký je rozdiel medzi klasickým nájmom a krátkodobým nájmom bytu?', a: 'Klasický nájom bytu sa riadi Občianskym zákonníkom a chráni nájomcu výpovednými dôvodmi. Krátkodobý nájom podľa zákona č. 98/2014 Z. z. uzaviera prenajímateľ-podnikateľ a umožňuje pružnejšiu výpoveď. Generátor sa vás na začiatku spýta, ktorý režim potrebujete.' },
    { q: 'Musí byť nájomná zmluva overená u notára?', a: 'Nie. Pre platnosť nájomnej zmluvy postačuje písomná forma a podpisy strán. Notárske overenie podpisov je vhodné len ak chcete zmluvu zapísať do katastra (napr. pri vecných bremenách).' },
    { q: 'Akú maximálnu výšku depozitu môžem požadovať?', a: 'Pri klasickom nájme bytu zákon priamo nelimituje výšku zábezpeky, ale judikatúra považuje za primerané maximálne 3 mesačné nájomné. Pri krátkodobom nájme zákon č. 98/2014 stanovuje strop 3-mesačného nájomného.' },
    { q: 'Kto platí daň z prenájmu nehnuteľnosti?', a: 'Daň z príjmu z prenájmu platí vždy prenajímateľ — fyzická osoba sadzbou 19 % (resp. 25 % nad zákonom určený strop). Zmluva by mala výslovne uviesť, kto platí daň z nehnuteľností (zvyčajne prenajímateľ ako vlastník).' },
    { q: 'Ako dlhá môže byť výpovedná doba?', a: 'Pri klasickom nájme bytu je výpovedná doba zo zákona 3 mesiace a začína plynúť prvým dňom nasledujúceho mesiaca. Pri krátkodobom nájme môžu strany dohodnúť kratšiu výpovednú dobu, minimálne však 1 mesiac.' },
    { q: 'Môže nájomnú zmluvu podpísať len jeden z manželov?', a: 'Ak je byt v bezpodielovom spoluvlastníctve manželov (BSM), na uzavretie nájomnej zmluvy je potrebný súhlas oboch manželov. Generátor vám umožní pridať druhého manžela ako spolu-prenajímateľa.' },
    { q: 'Čo ak druhá strana zmluvu poruší?', a: 'Zmluva by mala obsahovať jasné výpovedné dôvody, zmluvné pokuty a úroky z omeškania. Naše vzory tieto ustanovenia obsahujú a možno ich aktivovať v Kroku 06 generátora.' },
    { q: 'Môžem si vygenerovanú zmluvu nechať skontrolovať advokátom?', a: 'Áno. Po vygenerovaní môžete požiadať o individuálne review advokáta z kancelárie Ficek & Partners. Kontrola prebehne do 48 hodín.' },
    { q: 'Sú moje údaje v generátore v bezpečí?', a: 'Údaje spracovávame v súlade s GDPR. Vyplnené údaje sa neukladajú na server, ak nepožiadate o uloženie rozpracovanej zmluvy. PDF sa generuje v prehliadači a nedostane sa k tretím stranám.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq" data-screen-label="08 FAQ">
      <div className="container">
        <SectionHeader num="§ 08" eyebrow="Otázky a odpovede" title="Najčastejšie otázky o nájomnej zmluve." intro="Odpovede pripravil tím Ficek & Partners. Krátka definícia v jednej-dvoch vetách a podrobnejšie vysvetlenie v rozbalenom texte." />
        <div className="narrow">
          {items.map((it, i) => (
            <div key={i} className="accordion-item">
              <button className="accordion-head" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span><span className="pilcrow" style={{ marginRight: 12 }}>§</span>{it.q}</span>
                <span className="plus">{open === i ? '−' : '+'}</span>
              </button>
              {open === i && (
                <div className="accordion-body">
                  {it.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Related = () => (
  <section className="section" id="suvisiace" style={{ background: 'var(--ivory-2)' }} data-screen-label="09 Súvisiace">
    <div className="container">
      <SectionHeader num="§ 09" eyebrow="Súvisiaca právna pomoc" title="Keď šablóna nestačí." intro="Pri komplikovaných situáciách odporúčame individuálne posúdenie. Naša kancelária poskytuje kompletný servis k nehnuteľnostiam a nájmu." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="related-grid">
        {[
          { t: 'Individuálna kontrola zmluvy', p: '\n', d: 'Advokát prejde vašu zmluvu do 48 hodín a navrhne úpravy.' },
          { t: 'Vypovedanie nájmu', p: '\n', d: 'Príprava výpovede a zastupovanie pri ukončení nájomného vzťahu.' },
          { t: 'Spor s nájomcom / prenajímateľom', p: '\n', d: 'Zastupovanie v civilnom spore, vrátane návrhu na vypratanie.' },
          { t: 'Prevod nehnuteľnosti', p: '\n', d: 'Kúpna zmluva, návrh na vklad, právna analýza LV.' },
          { t: 'Vyporiadanie BSM', p: '\n', d: 'Pri prenájme bytu manželov sa často reší pri rozvode.' },
          { t: 'Daňové poradenstvo k nájmu', p: '\n', d: 'V spolupráci s daňovým poradcom — kalkulácia príjmu z prenájmu.' },
        ].map(s => (
          <div key={s.t} className="card" style={{ padding: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
              <h4 style={{ fontFamily: 'var(--serif)', fontSize: '1.1rem', margin: 0, fontWeight: 400 }}>{s.t}</h4>
              <span className="mono" style={{ color: 'var(--oxblood)' }}>{s.p}</span>
            </div>
            <p className="body" style={{ margin: 0, fontSize: '0.85rem' }}>{s.d}</p>
          </div>
        ))}
      </div>
      <style>{`@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  </section>
);

const FinalCTA = () => (
  <section className="section" data-screen-label="10 Záverečné CTA" style={{ background: 'oklch(0.13 0.01 265)', color: 'var(--paper)' }}>
    <div className="container text-center">
      <div className="eyebrow" style={{ color: 'oklch(0.65 0.008 85)', marginBottom: 24 }}>§ 10 — Pripravení začať</div>
      <h2 className="display" style={{ color: 'var(--paper)', maxWidth: 880, margin: '0 auto', fontSize: 'clamp(2rem, 4.5vw, 3.6rem)' }}>
        Vaša nájomná zmluva môže byť hotová <em style={{ color: 'oklch(0.78 0.09 75)' }}>za 9 minút a zadarmo.</em>
      </h2>
      <p className="lede" style={{ color: 'oklch(0.78 0.008 85)', maxWidth: 600, margin: '24px auto 0' }}>
        Začnite generátor. Bez registrácie, bez platby, bez záväzku.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 40, flexWrap: 'wrap' }}>
        <a href="vzor.html" className="btn btn-lg" style={{ background: 'var(--paper)', color: 'var(--ink)' }}>
          Spustiť generátor zmluvy
        </a>
        <a href="#kontakt" className="btn btn-lg" style={{ background: 'transparent', border: '1px solid oklch(0.4 0.01 265)', color: 'var(--paper)' }}>
          Hovoriť s advokátom
        </a>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer" id="kontakt" data-screen-label="11 Footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: '1.5rem', marginBottom: 8 }}>Ficek &amp; Partners</div>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'oklch(0.6 0.008 85)', marginBottom: 24 }}>Advokátska kancelária · od 2010</div>
          <p style={{ fontSize: 14, lineHeight: 1.6, margin: '0 0 20px', color: 'oklch(0.78 0.008 85)' }}>
            Špecializovaná advokátska kancelária pre nehnuteľnosti, občianske, rodinné, tresttné a majetkové právo. Služby v Bratislave.
          </p>
          <div style={{ fontSize: 13, color: 'oklch(0.78 0.008 85)' }}>
            Žilinská 14<br/>
            81105  Bratislava<br/>
            +421 800 223 230<br/>
            advokat@ficek.sk
          </div>
        </div>
        <div>
          <h4>Generátor</h4>
          <ul>
            <li><a href="vzor.html?type=byt">Nájomná zmluva — byt</a></li>
            <li><a href="vzor.html?type=dom">Nájomná zmluva garáž - stavba</a></li>
            <li><a href="vzor.html?type=pozemok">Nájomná zmluva — pozemok</a></li>
            <li><a href="vzor.html?type=nebyt">Nájomná zmluva - nebytový priestor</a></li>
            <li><a href="vzor.html">Všetky vzory →</a></li>
          </ul>
        </div>
        <div>
          <h4>Právna pomoc</h4>
          <ul>
            <li><a href="https://kontrola-zmluvy.sk/" target="_blank" rel="noopener">Kontrola zmluvy</a></li>
            <li><a href="https://ficek.sk/vypoved-z-najmu-bytu-36" target="_blank" rel="noopener">Vypovedanie nájmu</a></li>
            <li><a href="https://ficek.sk/porusenie-najomnej-zmluvy-15432" target="_blank" rel="noopener">Spor o nájom</a></li>
            <li><a href="https://ficek.sk/prevod-nehnutelnosti-347803" target="_blank" rel="noopener">Prevod nehnuteľnosti</a></li>
            <li><a href="https://vyporiadanie.sk" target="_blank" rel="noopener">Vyporiadanie BSM</a></li>
          </ul>
        </div>
        <div>
          <h4>Kancelária</h4>
          <ul>
            <li><a href="https://ficek.sk" target="_blank" rel="noopener">O kancelárii</a></li>
            <li><a href="https://ficek.sk/nas-tim.html" target="_blank" rel="noopener">Tím advokátov</a></li>
            <li><a href="https://ficek.sk/milan-ficek.html" target="_blank" rel="noopener">JUDr. Milan Ficek</a></li>
            <li><a href="https://ficek.sk/my-a-media.html" target="_blank" rel="noopener">Publikácie</a></li>
            <li><a href="https://ficek.sk/kontakt-judr.ficek.html" target="_blank" rel="noopener">Kariéra</a></li>
          </ul>
        </div>
        <div>
          <h4>Právne</h4>
          <ul>
            <li><a href="https://ficek.sk/gdpr/" target="_blank" rel="noopener">Zásady ochrany osobných údajov</a></li>
            <li><a href="#">Cookies</a></li>
            <li><a href="https://www.sak.sk/web/sk/cms/document/61" target="_blank" rel="noopener">Etický kódex SAK</a></li>
            <li><a href="https://ficek.sk/podmienky/" target="_blank" rel="noopener">Reklamačný poriadok</a></li>
            <li><a href="disclaimer.html">Disclaimer šablóny</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2010 – 2026 Ficek &amp; Partners, · IČO 47232 757 · zápis SAK č. 5144</div>
        <div style={{ display: 'flex', gap: 24 }}>
          <span>Posledná aktualizácia obsahu: 22. apríla 2026</span>
        </div>
      </div>
    </div>
  </footer>
);

window.Benefits = Benefits;
window.HowItWorks = HowItWorks;
window.DocTypesSection = DocTypesSection;
window.Author = Author;
window.FAQ = FAQ;
window.Related = Related;
window.FinalCTA = FinalCTA;
window.Footer = Footer;