// Hero — editorial, with author attribution & paragraph motif
const HERO_VARIANTS = {
  classic: {
    h1: <>Návrh na rozvod manželstva, <em>pripravený</em><br/> advokátskou kanceláriou.</>,
    sub: "Vytvorte právne správny návrh na rozvod manželstva podľa zákona č. 36/2005 Z. z. o rodine a zákona č. 160/2015 Z. z. — online, bez registrácie, PDF okamžite.",
  },
  trust: {
    h1: <>Online generátor <em>návrhu na rozvod</em><br/> od advokátov.</>,
    sub: "Návrh, ktorý podáte na súd, je len taký silný, ako jeho obsah. Naše znenia píše tím Ficek & Partners — pre obe strany konania.",
  },
  outcome: {
    h1: <>Rozvod bez zbytočných prieťahov —<br/> <em>začnite tu</em>.</>,
    sub: "Generátor návrhu na rozvod s procesne správnymi formuláciami, ktoré roky používame v advokátskej praxi.",
  },
};

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 so zákonom č. 36/2005 Z. z. o rodine a CSP</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ť návrh
                <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 }}>PRÍPADOV RIEŠENÝCH</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: '1rem' }}>500+</div>
                <div className="small">Rozvodové konania v praxi kancelárie</div>
              </div>
            </div>
          </div>

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

const HeroDocPreview = () => {
  return (
    <div className="hero-doc-preview" style={{ position: 'relative' }}>
      <a href="vzor.html" style={{ textDecoration: 'none', display: 'block', cursor: 'pointer' }} title="Otvoriť generátor návrhu">
      <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ávrh na rozvod manželstva</div>
        <div style={{ textAlign: 'center', fontSize: 11, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 24 }}>podľa § 23 a nasl. zákona č. 36/2005 Z. z. o rodine</div>

        <div className="article">Čl. I — Účastníci konania</div>
        <p style={{ margin: '6px 0' }}><b>Navrhovateľ:</b> <span className="highlight">Ing. Tomáš Novák</span>, nar. 15. 05. 1985, bytom Vajanského 18, 917 01 Trnava</p>
        <p style={{ margin: '6px 0' }}><b>Odporca:</b> <span className="highlight">Mária Nováková, rod. Kováčová</span>, nar. 14. 03. 1987, bytom Záhradnícka 12, 821 08 Bratislava</p>

        <div className="article">Čl. II — Manželstvo a jeho rozvrat</div>
        <p style={{ margin: '6px 0' }}>Účastníci uzavreli manželstvo dňa <span className="highlight">12. júna 2015</span> na Matričnom úrade Bratislava I. Manželstvo je hlboko a trvalo rozvrátené ...</p>

        <div className="article">Čl. III — Návrh výroku</div>
        <p style={{ margin: '6px 0' }}>Navrhovateľ navrhuje, aby súd vydal rozsudok, ktorým <span className="highlight">rozviaže manželstvo účastníkov</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;