// Hero — editorial, with author attribution & paragraph motif
const HERO_VARIANTS = {
  classic: {
    h1: <>Nájomná zmluva, <em>pripravená</em><br/> advokátskou kanceláriou.</>,
    sub: "Vytvorte právne korektnú nájomnú zmluvu na byt, dom, garáž, pozemok alebo nebytový priestor — online, za 9 minút, bez stiahnutia univerzálneho vzoru z internetu.",
  },
  trust: {
    h1: <>Online generátor <em>nájomnej zmluvy</em><br/> od advokátov.</>,
    sub: "Zmluva, ktorú podpíšete, je len taká silná, ako jej slová. Naše znenia píše tím Ficek & Partners — pre prenajímateľov, nájomcov aj spoluvlastníkov.",
  },
  outcome: {
    h1: <>Predíďte sporu skôr,<br/> než <em>podpíšete</em>.</>,
    sub: "Generátor nájomnej zmluvy s ustanoveniami, ktoré roky používame v advokátskej praxi. Pre byt, dom, garáž, pozemok aj nebytový priestor.",
  },
};

const Hero = ({ variant = 'classic' }) => {
  const v = HERO_VARIANTS[variant];
  return (
    <section className="section" style={{ paddingTop: 80, paddingBottom: 80, borderTop: 0 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 80, alignItems: 'start' }} className="hero-grid">
          <div>
            <div className="badge-row mb-6">
              <span className="tag tag-accent"><span className="dot"></span> Verzia 2.4 · aktualizované apríl 2026</span>
              <span className="tag"><span className="dot"></span> V súlade s Občianskym zákonníkom a zákonom č. 98/2014</span>
            </div>
            <h1 className="display">{v.h1}</h1>
            <p className="lede mt-6" style={{ maxWidth: 580 }}>{v.sub}</p>
            <div className="flex gap-4 mt-8" style={{ flexWrap: 'wrap' }}>
              <a href="vzor.html" className="btn btn-primary btn-lg">
                Začať vytvárať zmluvu
                <span style={{ fontSize: 18, marginLeft: 4 }}>→</span>
              </a>
              <a href="#ako-funguje" className="btn btn-ghost btn-lg">Ako to funguje</a>
            </div>
            <div className="mt-12" style={{ display: 'flex', gap: 32, alignItems: 'center', flexWrap: 'wrap', paddingTop: 32, borderTop: '1px solid var(--rule)' }}>
              <div>
                <div className="mono" style={{ marginBottom: 4 }}>AUTOR ZNENIA</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: '1rem' }}>JUDr. Milan Ficek · advokát · SAK č. 5144</div>
                <div className="small">16 rokov praxe</div>
              </div>
              <div style={{ width: 1, height: 40, background: 'var(--rule)' }}></div>
              <div>
                <div className="mono" style={{ marginBottom: 4 }}>POSLEDNÁ KONTROLA</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: '1rem' }}>14. apríla 2026</div>
                <div className="small">Editorial review tímom kancelárie</div>
              </div>
              <div style={{ width: 1, height: 40, background: 'var(--rule)' }}></div>
              <div>
                <div className="mono" style={{ marginBottom: 4 }}>ZMLÚV VYTVORENÝCH</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: '1rem' }}>14 286</div>
                <div className="small">Od spustenia v r. 2022</div>
              </div>
            </div>
          </div>

          <HeroDocPreview />
        </div>
      </div>
    </section>
  );
};

const HeroDocPreview = () => {
  return (
    <div style={{ position: 'relative' }}>
      <a href="vzor.html" style={{ textDecoration: 'none', display: 'block', cursor: 'pointer' }} title="Otvoriť generátor zmluvy">
      <div className="preview-panel" style={{ transform: 'rotate(0.6deg)', boxShadow: 'var(--shadow-md)', transition: 'box-shadow 0.2s, transform 0.2s' }}
        onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; e.currentTarget.style.transform = 'rotate(0.6deg) scale(1.01)'; }}
        onMouseLeave={e => { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'rotate(0.6deg)'; }}>

        <div className="doc-header">Nájomná zmluva</div>
        <div style={{ textAlign: 'center', fontSize: 11, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 24 }}>uzatvorená podľa § 663 a nasl. Občianskeho zákonníka</div>

        <div className="article">Čl. I — Zmluvné strany</div>
        <p style={{ margin: '6px 0' }}><b>Prenajímateľ:</b> <span className="highlight">Mária Kováčová</span>, nar. 14. 03. 1981, bytom Záhradnícka 12, 821 08 Bratislava</p>
        <p style={{ margin: '6px 0' }}><b>Nájomca:</b> <span className="highlight">Ing. Tomáš Novák</span>, nar. 02. 11. 1992, bytom Vajanského 18, 917 01 Trnava</p>

        <div className="article">Čl. II — Predmet nájmu</div>
        <p style={{ margin: '6px 0' }}>Predmetom nájmu je <span className="highlight">2-izbový byt</span> č. 14 nachádzajúci sa na 4. poschodí bytového domu súp. č. 482 na ulici Záhradnícka 12, Bratislava, kat. úz. Ružinov, zapísaný na LV č. 1232.</p>

        <div className="article">Čl. III — Doba nájmu a nájomné</div>
        <p style={{ margin: '6px 0' }}>Nájom sa uzatvára na dobu určitú od <span className="highlight">1. mája 2026</span> do 30. apríla 2027. Mesačné nájomné je dohodnuté vo výške <span className="highlight">740 €</span> ...</p>

        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 80, background: 'linear-gradient(to bottom, transparent, var(--paper))' }}></div>
      </div>
      </a>
      <div style={{ position: 'absolute', top: -16, right: -16, background: 'var(--ink)', color: 'var(--paper)', padding: '10px 14px', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
        Živý náhľad
      </div>
    </div>
  );
};

window.Hero = Hero;