// Generator section — simplified static overview (live generator is on vzor.html)

const DOCTYPES = [
  { id: 'navrh',      label: 'Návrh na rozvod manželstva',                l: '§ 23 zák. č. 36/2005 Z. z.',         d: 'Pre manželstvá bez maloletých detí. Opis rozvratu manželstva a návrh výroku adresovaný príslušnému okresnému súdu.' },
  { id: 'navrh-deti', label: 'Návrh na rozvod s maloletými deťmi',        l: '§ 23 a § 26 zák. č. 36/2005 Z. z.',  d: 'Súd musí pred rozvodom upraviť výkon rodičovských práv. Návrh obsahuje aj zverenie detí, výživné a styk s rodičom.' },
  { id: 'dohoda',     label: 'Dohoda rodičov o výkone rodičovských práv', l: '§ 24 zák. č. 36/2005 Z. z.',         d: 'Súdom schvaľovaná dohoda — zverenie do osobnej starostlivosti, výška výživného a úprava styku. Urýchľuje rozvodové konanie.' },
];

const STEPS = [
  { n: '01', t: 'Zvolíte typ dokumentu',       d: 'Návrh — bezdetný, návrh s maloletými deťmi alebo dohoda rodičov o deťoch.' },
  { n: '02', t: 'Vyplníte údaje účastníkov',   d: 'Navrhovateľ, odporca, maloleté deti, majetok. Pri každom poli tooltip od advokáta.' },
  { n: '03', t: 'Doplníte okolnosti prípadu',  d: 'Dĺžka manželstva, dôvody rozvratu, starostlivosť o deti, výška výživného.' },
  { n: '04', t: 'Stiahnete dokument',          d: 'PDF pripravený na podanie na príslušný okresný súd. Bez registrácie, okamžite.' },
];

const Generator = () => (
  <section className="section" id="generator" data-screen-label="03 Generátor">
    <div className="container">
      <SectionHeader
        num="§ 03"
        eyebrow="Generátor návrhu"
        title="Vytvorte návrh, ktorý obstojí pred súdom."
        intro="Vyberte typ dokumentu a spustite generátor. Formulár vedie krok za krokom — vyplníte účastníkov, okolnosti, stiahnete hotový dokument."
      />

      {/* Doctype cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 48 }} className="doctypes-grid-sm">
        {DOCTYPES.map((t, i) => (
          <a key={t.id} href={window.VZOR_URLS[t.id]}
            style={{ textDecoration: 'none', color: 'inherit', display: 'block', padding: '24px 28px', border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', background: 'var(--paper)', transition: 'box-shadow 0.15s, transform 0.15s, border-color 0.15s', cursor: 'pointer' }}
            onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = 'var(--ink-4)'; }}
            onMouseLeave={e => { e.currentTarget.style.boxShadow = ''; e.currentTarget.style.transform = ''; e.currentTarget.style.borderColor = 'var(--rule)'; }}>
            <div className="mono mb-4" style={{ fontSize: 10 }}>{String(i + 1).padStart(2, '0')} · {t.l}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: '1.2rem', fontWeight: 400, marginBottom: 8, letterSpacing: '-0.01em' }}>{t.label}</div>
            <div className="body" style={{ fontSize: '0.88rem', color: 'var(--ink-2)', margin: 0, lineHeight: 1.5 }}>{t.d}</div>
            <div style={{ marginTop: 16, fontSize: 12, color: 'var(--oxblood)', fontFamily: 'var(--sans)' }}>Spustiť generátor →</div>
          </a>
        ))}
      </div>

      {/* Steps */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--rule)', borderRadius: 'var(--r-sm)', overflow: 'hidden' }} className="steps-grid">
        {STEPS.map((s, i) => (
          <div key={s.n} style={{ padding: '28px 24px', borderRight: i < 3 ? '1px solid var(--rule)' : 'none' }}>
            <div className="step-num">{s.n}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: '1.05rem', fontWeight: 400, margin: '12px 0 8px' }}>{s.t}</div>
            <div className="body" style={{ fontSize: '0.85rem', margin: 0, color: 'var(--ink-2)' }}>{s.d}</div>
          </div>
        ))}
      </div>

      <div style={{ textAlign: 'center', marginTop: 40 }}>
        <a href="vzor.html" className="btn btn-lg">Spustiť generátor návrhu →</a>
      </div>

      <style>{`
        @media (max-width: 800px) {
          .doctypes-grid-sm { grid-template-columns: 1fr !important; }
          .steps-grid { grid-template-columns: 1fr !important; }
          .steps-grid > * { border-right: 0 !important; border-bottom: 1px solid var(--rule); }
          .steps-grid > :last-child { border-bottom: 0; }
        }
      `}</style>
    </div>
  </section>
);

window.Generator = Generator;