// Strategy document — full Slovak strategic blueprint (15 sections)
// Rendered as an editorial long-form document inside the same page.

const StrategyDoc = () => {
  return (
    <article className="strategy-doc" style={{ background: 'var(--paper)' }}>
      <div className="container" style={{ paddingTop: 64, paddingBottom: 64, maxWidth: 920 }}>
        <div className="mono mb-2">DESIGN BRIEF · INTERNÝ DOKUMENT · v1.0</div>
        <h1 className="display" style={{ fontSize: 'clamp(2rem, 4vw, 3.4rem)' }}>
          Stratégia stránky <em>Nájomná zmluva online</em>
        </h1>
        <p className="lede mt-6" style={{ maxWidth: 720 }}>
          Kompletný blueprint single-page autoritatívnej landing page pre Ficek &amp; Partners — informačná architektúra, copy, SEO/AEO/GEO, schema markup a designerské pravidlá. Obsah pripravený pre implementáciu v Laravel + Inertia.js + Vue/React.
        </p>
        <div style={{ display: 'flex', gap: 24, marginTop: 32, paddingBottom: 32, borderBottom: '1px solid var(--rule)', flexWrap: 'wrap', fontSize: 13, color: 'var(--ink-3)' }}>
          <span>Autor blueprintu: Senior UX strategist</span>
          <span>·</span>
          <span>Stakeholder: JUDr. Milan Ficek</span>
          <span>·</span>
          <span>Rozsah: 15 sekcií</span>
        </div>

        <Sec n="01" t="Stratégia stránky">
          <p>Stránka má dve rovnocenné funkcie: <b>konverznú</b> (spustiť generátor a získať lead) a <b>autoritatívno-obsahovú</b> (rankovať na komerčné aj informačné dopyty, byť citovaná v AI a v featured snippets). Tieto dve funkcie sa nesmú vylučovať — preto stavíme jednu dlhú stránku s pevnou hierarchiou: konverzia hore, hĺbka dole.</p>

          <H4>Primárne segmenty publika</H4>
          <ul>
            <li><b>Prenajímatelia – fyzické osoby:</b> majitelia 1 – 2 bytov, hľadajú „bezpečný vzor“. Hlavné obavy: nezaplatenie, ťažko vysťahovateľný nájomca.</li>
            <li><b>Nájomcovia:</b> hľadajú „férovú zmluvu, ktorá ma neoholí“. Citliví na depozit, výpovedné dôvody, pokuty.</li>
            <li><b>Manželia / spoluvlastníci:</b> potrebujú vedieť, ako ošetriť BSM, podielové spoluvlastníctvo, súhlas druhého manžela.</li>
            <li><b>Právnické osoby:</b> firmy prenajímajúce zamestnancom, alebo SZČO prenajímajúce nehnuteľnosti pod IČOm. Potrebujú správny formát, IČO, DIČ, podpisové oprávnenie.</li>
            <li><b>Náročnejší používateľ:</b> chce niečo medzi „šablóna z internetu zadarmo“ a „advokátom“. Tomuto segmentu predávame primárne.</li>
          </ul>

          <H4>Konverzné ciele (zoradené podľa hodnoty)</H4>
          <ol>
            <li>Spustenie generátora a vygenerovanie zmluvy (mikrokonverzia).</li>
            <li>Žiadosť o individuálne review advokátom (primárna platená konverzia).</li>
            <li>Zanechanie e-mailu pre uloženie rozpracovanej zmluvy (lead).</li>
            <li>Stiahnutie hotového PDF (signál kvalifikácie).</li>
            <li>Kontakt na komplexnú právnu službu (nájom, prevod, spor).</li>
          </ol>

          <H4>Ako stránka balancuje dôveru, použiteľnosť, autoritu a konverziu</H4>
          <p>Vizuálny tón → <b>editoriálny právnický</b> (serif, mnoho whitespace, žiadne SaaS-tropy). Autorita signalizovaná throughout: SAK číslo zápisu, meno advokáta, dátum poslednej kontroly, odkazy na konkrétne paragrafy. Konverzia nie je „BUY NOW“ farba — je to opakované sticky CTA „Vytvoriť zmluvu“ a inline odkazy „→ Spustiť generátor pre tento typ“.</p>
        </Sec>

        <Sec n="02" t="Informačná architektúra (poradie sekcií)">
          <p>Jeden long-scroll, anchor-links v menu, sticky header. Poradie reflektuje funnel <i>vidieť → veriť → konať</i>:</p>
          <table className="data-table">
            <thead><tr><th>#</th><th>Sekcia</th><th>Business</th><th>SEO/AEO/GEO</th><th>UX</th></tr></thead>
            <tbody>
              <IARow n="01" s="Sticky header" b="Konverzia kedykoľvek" seo="Anchor-links pomáhajú indexovať podsekcie ako site-links" ux="Stála navigácia + viditeľné CTA" />
              <IARow n="02" s="Hero" b="Hodnotová propozícia + 1 klik k generátoru" seo="H1 obsahuje primárny keyword + autorská atribúcia" ux="Jasné dva CTA + okamžitá dôvera (autor, dátum, počet vytvorených)" />
              <IARow n="03" s="Authority strip" b="Mikrodôkaz autority" seo="Citovanie konkrétnych zákonov" ux="Vizuálny rytmus medzi hero a hĺbkou" />
              <IARow n="04" s="Generator (formulár + náhľad)" b="Hlavná konverzia" seo="LegalService schema, Service schema" ux="Jeden long form, žiadny wizard" />
              <IARow n="05" s="Benefits / Prečo my" b="Diferenciácia" seo="Sekundárne keywords (vzor, online, advokát)" ux="4 stručné dôvody, čísla nie ikony" />
              <IARow n="06" s="Ako to funguje" b="Redukcia trenia" seo="Snippet-ready 3-step list" ux="Jasný proces" />
              <IARow n="07" s="Typy zmlúv" b="Pokrytie variácií" seo="Cluster pages — interný link na 4 podstránky" ux="Užívateľ rýchlo vidí, či pokrývame jeho prípad" />
              <IARow n="08" s="Autor a editorial" b="E-E-A-T" seo="Person schema, sameAs LinkedIn, ORCID, profil SAK" ux="Tvár + meno + zákonné referencie" />
              <IARow n="09" s="FAQ" b="Long-tail + AEO" seo="FAQPage schema, 10+ otázok" ux="Akordeón, prvá otvorená" />
              <IARow n="10" s="Súvisiace služby" b="Upsell, krížový predaj" seo="Internal linking" ux="Užitočné pre náročnejšie prípady" />
              <IARow n="11" s="Final CTA" b="Posledný výkrik" seo="—" ux="Tmavá sekcia pre vizuálny kontrast" />
              <IARow n="12" s="Footer" b="Trust + sitemap" seo="Site-wide internal links" ux="Pevný kontakt, IČO, právne odkazy" />
            </tbody>
          </table>
        </Sec>

        <Sec n="03" t="Header / menu — desktop a mobile">
          <H4>Top utility bar (desktop, scrolluje preč po 200 px)</H4>
          <ul>
            <li><b>Ľavá strana:</b> „§ Pripravené advokátskou kanceláriou“ · SAK č. zápisu 5144 · Bratislava.</li>
            <li><b>Pravá strana:</b> Telefón · E-mail.</li>
            <li><b>Účel:</b> okamžite signalizovať, že nejde o súkromnú osobu/start-up, ale o reálnu advokátsku kanceláriu.</li>
          </ul>

          <H4>Hlavný header (sticky)</H4>
          <ul>
            <li><b>Logo:</b> serifové, s monogramom „F“ v rámčeku, podtitul „Advokátska kancelária“.</li>
            <li><b>Anchor menu (desktop):</b> Generátor · Ako to funguje · Typy zmlúv · Autor · Otázky a odpovede · Kontakt.</li>
            <li><b>Pravé CTA:</b> primárne „Vytvoriť zmluvu“ (oxblood). Žiadne sekundárne „Prihlásiť sa“ — komplikuje.</li>
            <li><b>Mobile:</b> hamburger so sheet menu, sticky CTA „Vytvoriť zmluvu“ vždy viditeľné v päte.</li>
          </ul>
          <H4>Prečo pôsobí premium (a nie ako lacný SaaS)</H4>
          <ul>
            <li>Žiadne ikonky pri menu položkách. Žiadne emoji. Žiadne badge typu „NEW“.</li>
            <li>Top utility bar je jediný kontextový artefakt advokátskeho prostredia (SAK, lokalita).</li>
            <li>Logo serif, podtitul small-caps – signalizuje formálnu identitu.</li>
          </ul>
        </Sec>

        <Sec n="04" t="Hero — copy varianty">
          <H4>5 alternatívnych H1</H4>
          <ol>
            <li>Nájomná zmluva, pripravená advokátskou kanceláriou.</li>
            <li>Online generátor nájomnej zmluvy od advokátov.</li>
            <li>Vytvorte nájomnú zmluvu, ktorá obstojí v praxi.</li>
            <li>Nájomná zmluva na byt, dom alebo pozemok — za 9 minút.</li>
            <li>Predíďte sporu skôr, než podpíšete.</li>
          </ol>
          <H4>5 podtitulkov</H4>
          <ol>
            <li>Vytvorte právne korektnú nájomnú zmluvu na byt, dom, pozemok alebo nebytový priestor — bez stiahnutia univerzálneho vzoru z internetu.</li>
            <li>Generátor nájomnej zmluvy s ustanoveniami, ktoré používame v advokátskej praxi roky.</li>
            <li>Šablóna písaná tímom Ficek &amp; Partners. Pre prenajímateľov, nájomcov aj spoluvlastníkov.</li>
            <li>Bez registrácie. PDF okamžite. Voliteľná kontrola advokátom.</li>
            <li>Aktualizované pri každej novele zákona — naposledy 14. apríla 2026.</li>
          </ol>
          <H4>5 CTA tlačidiel</H4>
          <ol>
            <li>Vytvoriť zmluvu</li>
            <li>Spustiť generátor</li>
            <li>Začať vytvárať zmluvu</li>
            <li>Zostaviť zmluvu zadarmo</li>
            <li>Vygenerovať nájomnú zmluvu</li>
          </ol>
          <H4>Dôveryhodné prvky pri fold-line</H4>
          <ul>
            <li>Atribúcia autora: meno + funkcia + SAK číslo.</li>
            <li>Dátum poslednej kontroly obsahu.</li>
            <li>Číslo už vygenerovaných zmlúv (sociálny dôkaz, ale bez „testimonialov“).</li>
            <li>Tagy: verzia šablóny + zákonný režim.</li>
            <li>Mikrocopy pri CTA: „Bez registrácie. PDF okamžite.“</li>
          </ul>
        </Sec>

        <Sec n="05" t="Generator UI koncept">
          <p>Long-scroll formulár v pravidle <b>2/3 formulár vľavo + 1/3 živý náhľad vpravo (sticky)</b>. Žiadny wizard. Štruktúra:</p>
          <ol>
            <li><b>Krok 01 – Druh nehnuteľnosti</b> (2×2 dlaždice; výber prefiltruje zvyšok formulára a klauzuly).</li>
            <li><b>Krok 02 – Prenajímateľ(-ia)</b> – karta na osobu, „+ Pridať“ až do 10. Toggle medzi fyzická / právnická osoba.</li>
            <li><b>Krok 03 – Nájomca(-ovia)</b> – rovnaký princíp.</li>
            <li><b>Krok 04 – Predmet nájmu</b> – adresa, LV, kat. úz., dispozícia.</li>
            <li><b>Krok 05 – Doba a nájomné</b> – doba určitá / neurčitá, výška, splatnosť.</li>
            <li><b>Krok 06 – Ďalšie ustanovenia</b> – kolapsovateľné bloky: depozit, energie, inventár, zvieratá, výpoveď, pokuty, riešenie sporov.</li>
          </ol>
          <H4>Pravidlá UX</H4>
          <ul>
            <li>Každé pole má <b>tooltip ⓘ</b> s 1-vetou vysvetlením od advokáta.</li>
            <li>Pri zložitejších ustanoveniach voliteľný „Návrh advokáta“ — predvyplní rozumné znenie.</li>
            <li>Validácia inline, nie po submite.</li>
            <li>Auto-uloženie do localStorage (bez registrácie).</li>
            <li>Stav úplnosti: „Vyplnené 18 z 24 polí · 4 min do dokončenia“.</li>
            <li><b>Multi-party UI:</b> karta + button „+ Pridať prenajímateľa“. Karty sú očíslované rímskymi číslicami v PDF, arabskými v UI.</li>
            <li>Pre ne-právnikov: jazyk normálny, paragrafy v PDF, nie vo formulári.</li>
          </ul>
        </Sec>

        <Sec n="06" t="Trust / autoritný design system">
          <table className="data-table">
            <thead><tr><th>Element</th><th>Pravidlo</th></tr></thead>
            <tbody>
              <tr><td>Typografia</td><td>Serif na H1-H3 (Libre Caslon Text / GT Sectra). Sans-serif IBM Plex Sans na UI a body. Mono na meta-info (čísla, dátumy, čísla strán).</td></tr>
              <tr><td>Spacing</td><td>96 px medzi sekciami na desktope, 56 px na mobile. Generózny whitespace v hero (min. 80 px nad fold-line).</td></tr>
              <tr><td>Farby</td><td>Ivory pozadie, ink-black foreground, oxblood akcent (oklch 0.42 0.11 25). Žiadne gradienty, žiadne neony.</td></tr>
              <tr><td>Ikony</td><td>Žiadne na úrovni produktu. Iba § (paragraph) ako jediný motív. Ak ikony, tak hairline (1 px stroke).</td></tr>
              <tr><td>Karty</td><td>Border 1 px solid rule, radius max 4 px. Žiadne tieňové „lifty“ okrem hover.</td></tr>
              <tr><td>Separátory</td><td>Hairline 1 px medzi sekciami namiesto background-color blokov.</td></tr>
              <tr><td>Imagery</td><td>Iba portrét advokáta a fotky kancelárie. Žiadne stockové „handshakes“. Žiadne illustrácie.</td></tr>
              <tr><td>Testimoniály</td><td>NIE — etický kódex SAK. Namiesto toho: počet vytvorených zmlúv + judikatúrne odkazy.</td></tr>
              <tr><td>Credentials</td><td>SAK číslo, IČO, dátum zápisu, publikácie, prednášky.</td></tr>
              <tr><td>„Created by lawyer“</td><td>Atribuované menovite, nie „naším právnym tímom“.</td></tr>
            </tbody>
          </table>
        </Sec>

        <Sec n="07" t="SEO architektúra">
          <H4>Keyword klastre</H4>
          <ul>
            <li><b>Primárne (komerčné):</b> nájomná zmluva, nájomná zmluva online, nájomná zmluva vzor, generátor nájomnej zmluvy.</li>
            <li><b>Typové:</b> nájomná zmluva byt, nájomná zmluva dom, nájomná zmluva pozemok, nájomná zmluva nebytový priestor, krátkodobý nájom bytu.</li>
            <li><b>Informačné (long-tail):</b> ako napísať nájomnú zmluvu, čo musí obsahovať nájomná zmluva, výpovedné dôvody nájomnej zmluvy, výška depozitu pri nájme.</li>
            <li><b>Brandové:</b> Ficek nájomná zmluva, Ficek a partneri vzor zmluvy.</li>
          </ul>
          <H4>Hierarchia</H4>
          <ul>
            <li><b>H1</b>: 1× s primárnym keywordom (Nájomná zmluva, pripravená advokátskou kanceláriou).</li>
            <li><b>H2</b>: každá hlavná sekcia (Generátor, Ako to funguje, Typy zmlúv, Autor, FAQ, Súvisiace).</li>
            <li><b>H3</b>: jednotlivé typy zmlúv, podotázky FAQ.</li>
          </ul>
          <H4>Title / Meta / URL</H4>
          <table className="data-table">
            <thead><tr><th>Pole</th><th>Hodnota</th></tr></thead>
            <tbody>
              <tr><td>Title</td><td>Nájomná zmluva online — generátor od advokátov · Ficek &amp; Partners</td></tr>
              <tr><td>Meta description</td><td>Vytvorte právne korektnú nájomnú zmluvu na byt, dom, pozemok alebo nebytový priestor. Generátor pripravený advokátskou kanceláriou. Bez registrácie, PDF okamžite.</td></tr>
              <tr><td>URL slug</td><td><code>/najomna-zmluva</code></td></tr>
              <tr><td>Canonical</td><td>Self-canonical na <code>https://najomnazmluva.sk/</code></td></tr>
              <tr><td>Image alt</td><td>„Náhľad PDF nájomnej zmluvy v advokátskej úprave“ — popisne, vždy s kľúčovým slovom v 30 % alt-textov.</td></tr>
            </tbody>
          </table>
          <H4>Cluster — odporúčané podstránky</H4>
          <ul>
            <li>/najomna-zmluva-byt</li>
            <li>/najomna-zmluva-dom</li>
            <li>/najomna-zmluva-pozemok</li>
            <li>/najomna-zmluva-nebytovy-priestor</li>
            <li>/kratkodoby-najom-bytu</li>
            <li>/vypoved-najomnej-zmluvy</li>
            <li>/depozit-pri-najme-bytu</li>
            <li>/najomna-zmluva-vzor</li>
          </ul>
        </Sec>

        <Sec n="08" t="AEO — answer engine optimization">
          <H4>Pravidlá pre snippet eligibility</H4>
          <ul>
            <li>„Krátka odpoveď“ blok hneď za H2 sekcie — 1 – 2 vety, 35 – 55 slov.</li>
            <li>Definičné odseky pred procedurálnymi.</li>
            <li>FAQ sekcia s ≥10 otázkami, JSON-LD FAQPage.</li>
            <li>Bullet listy pre „čo musí zmluva obsahovať“ — 5 – 8 položiek.</li>
            <li>Porovnávacia tabuľka „klasický vs krátkodobý nájom“.</li>
          </ul>
          <H4>10 otázok + krátke odpovede (na priame on-page použitie)</H4>
          <ol>
            <li><b>Je nájomná zmluva vygenerovaná online platná?</b> Áno, nájomná zmluva podľa Občianskeho zákonníka nevyžaduje notársku formu. Postačuje písomná podoba a podpisy strán.</li>
            <li><b>Aký je rozdiel medzi klasickým a krátkodobým nájmom bytu?</b> Klasický nájom sa riadi Občianskym zákonníkom a chráni nájomcu, krátkodobý nájom podľa zák. č. 98/2014 Z. z. uzaviera podnikateľ a umožňuje pružnejšiu výpoveď.</li>
            <li><b>Musí byť zmluva overená u notára?</b> Nie. Pre platnosť stačí písomná forma a podpisy strán.</li>
            <li><b>Akú výšku depozitu môžem požadovať?</b> Pri klasickom nájme bytu sa za primerané považuje max. 3-mesačné nájomné. Pri krátkodobom nájme zákon stanovuje strop 3 mesiace.</li>
            <li><b>Kto platí daň z prenájmu?</b> Daň z príjmu z prenájmu platí prenajímateľ – fyzická osoba sadzbou 19 %.</li>
            <li><b>Aká je výpovedná doba?</b> Pri klasickom nájme bytu zákonných 3 mesiace, pri krátkodobom minimálne 1 mesiac.</li>
            <li><b>Môže zmluvu podpísať len jeden manžel?</b> Ak je byt v BSM, vyžaduje sa súhlas oboch manželov.</li>
            <li><b>Kedy môžem ukončiť nájom okamžite?</b> Pri závažnom porušení zmluvy zo strany nájomcu — neplatenie nájomného viac než 3 mesiace, ničenie majetku, podnájom bez súhlasu.</li>
            <li><b>Čo musí obsahovať nájomná zmluva?</b> Identifikáciu strán, presný predmet nájmu, dobu nájmu, výšku nájomného a spôsob úhrady, podpisy.</li>
            <li><b>Môžem si zmluvu nechať skontrolovať advokátom?</b> Áno, kancelária Ficek &amp; Partners ponúka kontrolu zmluvy do 48 hodín.</li>
          </ol>
        </Sec>

        <Sec n="09" t="GEO — generative engine optimization">
          <ul>
            <li><b>Entitná jasnosť:</b> každý paragraf začína plnou identifikáciou entity („Ficek &amp; Partners“, „Občiansky zákonník“). AI modely milujú jednoznačné entity.</li>
            <li><b>Faktické formulácie:</b> namiesto „rýchlo“ → „za 9 minút“. Namiesto „spoľahlivé“ → „14 286 vygenerovaných zmlúv od r. 2022“.</li>
            <li><b>Atribúcia autora:</b> každá faktická pasáž má autorský anchor — „Pripravil JUDr. Milan Ficek“, dátum recenzie.</li>
            <li><b>Štruktúrované zhrnutia:</b> definícia v 1 vete + bullet list detailov + odkaz na zákon.</li>
            <li><b>Update / Review signály:</b> „Posledná kontrola: 14. 4. 2026“ na 3 miestach — hero, pri FAQ, vo footeri.</li>
            <li><b>Anti-fluff pravidlo:</b> žiadne marketingové prísľuby („najlepšia“, „revolučná“). Generatívne modely tieto frázy ignorujú a niekedy znižujú citačnú váhu.</li>
            <li><b>Section labelling:</b> každá sekcia má číslo a kategorický H2 — uľahčuje LLM citovať „v sekcii 06 stránky o nájomnej zmluve uvádza…“.</li>
          </ul>
        </Sec>

        <Sec n="10" t="Authority / E-E-A-T copy bloky (Slovak)">
          <H4>„Pripravil“</H4>
          <p style={{ borderLeft: '2px solid var(--oxblood)', paddingLeft: 16, fontStyle: 'italic' }}>Vzor pripravil JUDr. Milan Ficek, advokát zapísaný v zozname advokátov Slovenskej advokátskej komory pod č. 5144. Znenie reflektuje aktuálnu právnu úpravu Občianskeho zákonníka (§ 663 a nasl.) a zákona č. 98/2014 Z. z. o krátkodobom nájme bytu.</p>

          <H4>„Skontroloval“</H4>
          <p style={{ borderLeft: '2px solid var(--oxblood)', paddingLeft: 16, fontStyle: 'italic' }}>Editorial review tímu Ficek &amp; Partners — naposledy 14. apríla 2026. Pri každej novele relevantných zákonov vykonávame kontrolu znenia do 30 dní.</p>

          <H4>„Kedy šablóna nestačí“</H4>
          <p style={{ borderLeft: '2px solid var(--oxblood)', paddingLeft: 16, fontStyle: 'italic' }}>Generátor pokrýva štandardné situácie. Individuálnu právnu pomoc odporúčame, ak: (a) prenajímate viac než 3 nehnuteľnosti, (b) ide o investičnú nehnuteľnosť s nadštandardným vybavením, (c) druhá strana je v právnom spore alebo exekúcii, (d) ide o nájom v zahraničí, (e) potrebujete zmluvu v cudzom jazyku alebo s cudzím prvkom.</p>

          <H4>„Potrebujete advokáta?“</H4>
          <p style={{ borderLeft: '2px solid var(--oxblood)', paddingLeft: 16, fontStyle: 'italic' }}>Ak potrebujete osobnú konzultáciu k vašej zmluve, ozvite sa nám na advokat@ficek.sk alebo +421 800 223 230. Kontrola vašej zmluvy advokátom kancelárie do 48 hodín.</p>
        </Sec>

        <Sec n="11" t="Schema markup stratégia">
          <table className="data-table">
            <thead><tr><th>Typ</th><th>Použiť?</th><th>Prečo</th><th>Kľúčové vlastnosti</th></tr></thead>
            <tbody>
              <tr><td><code>WebPage</code></td><td>Áno</td><td>Základný kontajner</td><td>name, url, datePublished, dateModified, inLanguage: sk-SK</td></tr>
              <tr><td><code>FAQPage</code></td><td>Áno</td><td>Rich-result na 10 otázkach</td><td>mainEntity[]: Question + Answer</td></tr>
              <tr><td><code>LegalService</code></td><td>Áno</td><td>Definuje, že stránka prevádzkuje právnu službu</td><td>name, provider (Organization), areaServed: SK, serviceType: „Príprava nájomnej zmluvy“</td></tr>
              <tr><td><code>LocalBusiness</code></td><td>Áno (ako Organization)</td><td>NAP konzistencia</td><td>name, address, telephone, openingHours, vatID, taxID</td></tr>
              <tr><td><code>Person</code></td><td>Áno</td><td>Author entity pre Milana Ficka</td><td>name, jobTitle, sameAs[LinkedIn, SAK profil], affiliation</td></tr>
              <tr><td><code>BreadcrumbList</code></td><td>Áno</td><td>Aj na single-page (Domov &gt; Generátory &gt; Nájomná zmluva)</td><td>itemListElement</td></tr>
              <tr><td><code>Article</code></td><td>Nie</td><td>Stránka nie je článok, je service page</td><td>—</td></tr>
              <tr><td><code>Service</code></td><td>Áno (alternatíva k LegalService)</td><td>Konzervatívnejšia voľba</td><td>provider, serviceType</td></tr>
              <tr><td><code>Review/AggregateRating</code></td><td><b>Nie</b></td><td>Etický kódex SAK + nesmieme falšovať</td><td>—</td></tr>
            </tbody>
          </table>
          <H4>Doporučený JSON-LD plán (human-readable)</H4>
          <ol>
            <li><b>1×</b> WebPage s atribútmi <code>about</code> → LegalService a <code>author</code> → Person.</li>
            <li><b>1×</b> FAQPage agregovaný z 10 Q&amp;A.</li>
            <li><b>1×</b> Organization (Ficek &amp; Partners) s NAP, sameAs na profil SAK.</li>
            <li><b>1×</b> Person (Milan Ficek) s jobTitle, sameAs na profil SAK.</li>
            <li><b>1×</b> BreadcrumbList.</li>
          </ol>
        </Sec>

        <Sec n="12" t="Content moduly podporujúce dôveru">
          <table className="data-table">
            <thead><tr><th>Modul</th><th>Podpora</th></tr></thead>
            <tbody>
              <tr><td>Čo generátor pokrýva</td><td>SEO + GEO (faktická hĺbka)</td></tr>
              <tr><td>Pre koho je určený</td><td>Konverzia (segmentácia)</td></tr>
              <tr><td>Aké typy zmlúv</td><td>SEO (cluster) + Konverzia</td></tr>
              <tr><td>Časté chyby v nájomnej zmluve</td><td>AEO + Trust (citovateľný insight)</td></tr>
              <tr><td>Kedy je individuálna kontrola lepšia</td><td>Trust + Upsell</td></tr>
              <tr><td>Prečo na slovách záleží</td><td>GEO (autorita) + Trust</td></tr>
              <tr><td>Pripravené advokátskou kanceláriou</td><td>Trust + AEO</td></tr>
              <tr><td>FAQ</td><td>SEO + AEO</td></tr>
              <tr><td>Súvisiace služby</td><td>Konverzia + Internal linking</td></tr>
            </tbody>
          </table>
        </Sec>

        <Sec n="13" t="Footer">
          <p>5-stĺpcový grid + 1 brand stĺpec:</p>
          <ul>
            <li><b>Brand:</b> názov, podtitul „Advokátska kancelária“, NAP (adresa, telefón, e-mail).</li>
            <li><b>Generátor:</b> 4 typy + odkaz „Všetky vzory“.</li>
            <li><b>Právna pomoc:</b> Kontrola zmluvy, Vypovedanie nájmu, Spor o nájom, Prevod nehnuteľnosti, Vyporiadanie BSM.</li>
            <li><b>Kancelária:</b> O nás, Tím, Milan Ficek, Publikácie, Kariéra.</li>
            <li><b>Právne:</b> Zásady ochrany osobných údajov, Cookies, Etický kódex SAK, Reklamačný poriadok, Disclaimer šablóny.</li>
            <li><b>Bottom bar:</b> © 2008 – 2026, IČO, SAK č., dátum poslednej aktualizácie.</li>
          </ul>
        </Sec>

        <Sec n="14" t="Mobile-first detaily">
          <ul>
            <li><b>Sticky CTA:</b> spodný bar 56 px so „Vytvoriť zmluvu“. Skrýva sa pri scrolle hore, ukáže sa pri scrolle dole.</li>
            <li><b>Poradie:</b> generátor pred benefitmi (zmena oproti desktopu — na mobile chce užívateľ konať skôr).</li>
            <li><b>Anchor menu:</b> hamburger-sheet s anchormi a 1 primárnym CTA.</li>
            <li><b>Readability:</b> font-size body 17 px, line-height 1.6, max 65 znakov na riadok.</li>
            <li><b>Touch:</b> minimálne 48×48 px hit target. Dlaždice typov zmlúv full-width pod sebou.</li>
            <li><b>Trust nad fold-line:</b> meno autora + dátum kontroly zostáva viditeľné aj na 360 px šírke.</li>
          </ul>
        </Sec>

        <Sec n="15" t="Output pre design tím">
          <H4>A) Wireframe outline</H4>
          <pre style={{ background: 'var(--ivory-2)', padding: 20, fontSize: 12, fontFamily: 'var(--mono)', overflowX: 'auto', borderRadius: 4 }}>{`├── Header (sticky)
│   ├── Top utility bar: SAK · NAP
│   └── Main: Logo · Anchor nav · CTA "Vytvoriť zmluvu"
├── Hero (96 px gap)
│   ├── L: H1 + sub + 2× CTA + atribúcia (autor / dátum / count)
│   └── R: Mock PDF náhľad
├── Authority strip (band)
├── 03 Generátor [2/3 form + 1/3 sticky preview]
│   ├── Krok 01: Druh nehnuteľnosti (2×2 dlaždice)
│   ├── Krok 02-03: Strany (multi-party karty, +Pridať)
│   ├── Krok 04: Predmet nájmu
│   ├── Krok 05: Doba a nájomné
│   └── Krok 06: Ďalšie ustanovenia (akordeón)
├── 04 Benefits (2×2 grid s číslami)
├── 05 Ako to funguje (3-step row + Quick Answer)
├── 06 Typy zmlúv (2×2 grid kariet)
├── 07 Autor (portrét + bio + pull quote)
├── 08 FAQ (akordeón × 10)
├── 09 Súvisiace služby (3×2 grid)
├── 10 Final CTA (tmavá sekcia)
└── Footer (5 stĺpcov + bottom bar)`}</pre>

          <H4>B) Component inventory</H4>
          <ul>
            <li>Header (Sticky, TopBar, Nav, CTA), Logo (mark + wordmark), Eyebrow, SectionHeader (num + title + intro), Tag, Badge, AnswerBox, AccordionItem, Doctype tile, PartyCard, FormField, Button (primary/ghost/link), PullQuote, AuthorCard, FooterColumn, MobileStickyCTA.</li>
          </ul>

          <H4>C) Style direction summary</H4>
          <ul>
            <li>Editoriálny právnický look. Serif na titulky, sans na UI, mono na meta. Ivory + ink + oxblood. Žiadne gradienty, žiadne emoji, žiadne kreslené ilustrácie.</li>
          </ul>

          <H4>D) SEO/AEO/GEO checklist</H4>
          <ul>
            <li>☐ 1 H1 s primárnym keywordom</li>
            <li>☐ Title ≤ 60 znakov, Meta ≤ 160 znakov</li>
            <li>☐ FAQPage JSON-LD s 10 otázkami</li>
            <li>☐ LegalService + Person + Organization JSON-LD</li>
            <li>☐ Quick-answer blok v každej hlavnej sekcii</li>
            <li>☐ Dátum poslednej aktualizácie viditeľný 3×</li>
            <li>☐ Author byline s plnou identifikáciou</li>
            <li>☐ Internal links na 4 cluster pages</li>
            <li>☐ Image alts s primary/secondary keywordmi</li>
            <li>☐ Canonical, hreflang sk-SK</li>
          </ul>

          <H4>E) Mistakes to avoid</H4>
          <ul>
            <li>Pseudo-recenzie / hviezdičkové ratingy.</li>
            <li>SaaS-style purple/blue gradienty.</li>
            <li>Stockové fotky ľudí v oblekoch potriasajúcich si rukami.</li>
            <li>Emoji v CTA tlačidlách.</li>
            <li>„Naša revolučná AI šablóna“ formulácie.</li>
            <li>Hero bez konkrétneho mena autora.</li>
            <li>FAQ s 3 otázkami namiesto 10+.</li>
            <li>Skrývanie SAK identifikácie pod footer.</li>
            <li>Wizard formulár — preskakuje strany, mätie na mobile.</li>
            <li>„Free template“ messaging — devalvuje produkt.</li>
          </ul>
        </Sec>

        <div style={{ paddingTop: 64, borderTop: '1px solid var(--rule)', textAlign: 'center' }}>
          <div className="mono">— KONIEC DOKUMENTU —</div>
        </div>
      </div>
    </article>
  );
};

const Sec = ({ n, t, children }) => (
  <section style={{ paddingTop: 64, paddingBottom: 8 }}>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, paddingBottom: 24, borderBottom: '1px solid var(--rule)', marginBottom: 24 }}>
      <span className="mono" style={{ color: 'var(--oxblood)' }}>§ {n}</span>
      <h2 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(1.6rem, 2.4vw, 2.2rem)', fontWeight: 400, margin: 0, letterSpacing: '-0.01em' }}>{t}</h2>
    </div>
    <div style={{ fontSize: '1rem', lineHeight: 1.7, color: 'var(--ink-2)' }}>{children}</div>
  </section>
);

const H4 = ({ children }) => <h4 style={{ fontFamily: 'var(--serif)', fontSize: '1.1rem', fontWeight: 500, color: 'var(--ink)', margin: '24px 0 12px' }}>{children}</h4>;

const IARow = ({ n, s, b, seo, ux }) => (
  <tr>
    <td><code>{n}</code></td>
    <td><b>{s}</b></td>
    <td>{b}</td>
    <td>{seo}</td>
    <td>{ux}</td>
  </tr>
);

window.StrategyDoc = StrategyDoc;