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

const DOCTYPES = [
  { id: 'byt',    label: 'Nájomná zmluva — byt',             l: '§ 663 OZ · zák. č. 98/2014 Z. z.',           d: 'Klasický nájom bytu i krátkodobý nájom. Výpovedné dôvody, depozit a doba nájmu podľa zvoleného režimu.' },
  { id: 'dom',    label: 'Nájomná zmluva — stavba / garáž',   l: '§ 663 OZ',                                    d: 'Stavba, garáž, prístrešok. Vrátane priľahlého pozemku, príslušenstva a voliteľných klauzúl.' },
  { id: 'nebyt',  label: 'Nájomná zmluva — nebytový priestor',l: 'zák. č. 116/1990 Zb.',                        d: 'Kancelárie, predajne, sklady, výrobné priestory. Taxatívne výpovedné dôvody podľa zákona.' },
  { id: 'pozemok',label: 'Nájomná zmluva — pozemok',          l: '§ 663 OZ',                                    d: 'Záhrada, orná pôda, parkovisko, stavebný pozemok. Osobitný režim pri poľnohospodárskej pôde.' },
];

const STEPS = [
  { n: '01', t: 'Zvolíte typ zmluvy',       d: 'Byt, stavba, pozemok alebo nebytový priestor. Formulár sa dynamicky prispôsobí platnému zákonu.' },
  { n: '02', t: 'Vyplníte zmluvné strany',  d: 'Fyzické osoby, spoluvlastníci alebo podnikatelia. Až 10 osôb na každej strane.' },
  { n: '03', t: 'Nastavíte podmienky',      d: 'Doba nájmu, nájomné, depozit, energie. Voliteľné klauzuly — inflácia, zvieratá, rozhodca.' },
  { n: '04', t: 'Stiahnete dokument',       d: 'PDF na podpis alebo Word na ďalšie úpravy. 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 zmluvy"
        title="Vytvorte zmluvu, ktorá obstojí v praxi."
        intro="Vyberte typ zmluvy a spustite generátor. Formulár vedie krok za krokom — vyplníte strany, podmienky, stiahnete hotový dokument."
      />

      {/* Doctype cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginBottom: 48 }} className="doctypes-grid-sm">
        {DOCTYPES.map((t, i) => (
          <a key={t.id} href={`vzor.html?type=${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 zmluvy →</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;