// Darbuotojų sauga ir sveikata (DSS) — Solution page (mūsų modulių paketas Odoo 19 Community)

const DSS_AREAS = [
  {
    id: 'instruktavimas',
    label: 'Instruktavimas',
    icon: 'file-signature',
    title: 'Instruktavimas ir elektroninis patvirtinimas',
    desc: '„Susipažinau“ reikia įrodyti, ne pasakyti. Kiekvienas patvirtinimas išsaugomas su laiko žyma, IP adresu, konkrečia dokumento redakcija ir SHA-256 grandine — įrašo pakeisti ar ištrinti negali niekas, įskaitant administratorių.',
    points: [
      ['Instrukcijos su versijomis', 'juodraštinė → patvirtinta → aktyvi; priskiriama tik patvirtinta redakcija, istorija lieka prie ankstesnės.'],
      ['Priskyrimo taisyklės', 'pagal pareigas, padalinį, darbo vietą, saugos profilį ar rizikos veiksnį. Suveikia įdarbinant, keičiant pareigas ir patvirtinus naują redakciją.'],
      ['Užduotys su terminais', 'pirmas terminas ir periodiškumas iš instrukcijos tipo; praleisti terminai žymimi naktiniu cron’u.'],
      ['Parašo lygiai', 'nuo patvirtinimo paspaudimu iki kvalifikuoto parašo. Be susitarimo dėl el. parašo užduotis nesiunčiama — tai blokuojantis patikrinimas.'],
      ['Instruktavimų žurnalas', 'PDF ir XLSX, filtruojamas pagal padalinį, tipą ir laikotarpį.'],
      ['Nekeičiami įrašai', 'redagavimo ir šalinimo teisės išjungtos, o įrašus sieja prev_hash ir chain_hash grandinė su audito seka.'],
    ],
    mock: 'ack',
  },
  {
    id: 'mokymai',
    label: 'Mokymai ir testai',
    icon: 'graduation-cap',
    title: 'Mokymai, testai ir pažymėjimai',
    desc: 'Mokymo programos su temomis, žinių testai ir pažymėjimai su QR kodu. Pasibaigusi kompetencija matoma darbuotojo būsenoje, o ne tik ataskaitoje.',
    points: [
      ['Programos ir temos', 'turinys tekstu, failu, nuoroda ar vaizdo įrašu; trukmė valandomis, galiojimas mėnesiais, bandymų limitas.'],
      ['Žinių testai', 'per įmontuotą apklausų modulį, išlaikymo riba pagal nustatymą (numatyta 75 %).'],
      ['Sertifikaciniai testai', 'niekada nerodo teisingų atsakymų — nei per testą, nei po jo.'],
      ['Pažymėjimai su QR', 'PDF su QR kodu į viešą tikrinimo puslapį: galioja, pasibaigęs ar panaikintas. Be prisijungimo.'],
      ['Naujoko paruošimo šablonai', 'pirmoji darbo savaitė viename šablone: kurie instruktavimai ir mokymai, po kelių dienų nuo įdarbinimo.'],
      ['Praktinių įgūdžių vertinimas', 'kontrolinis sąrašas su specialisto parašu, kai dalyko negalima patikrinti klausimu.'],
    ],
    mock: 'training',
  },
  {
    id: 'aap',
    label: 'Apsaugos priemonės',
    icon: 'hard-hat',
    title: 'Asmeninės apsaugos priemonės',
    desc: 'Normos pagal darbo vietą, pareigas, padalinį, saugos profilį ar rizikos veiksnį. Apskaita pertvarkyta pagal A1-331 redakciją nuo 2025-11-01: be panaikintos kortelės ir žiniaraščio.',
    points: [
      ['Momentinės kopijos', 'pavadinimas, savybės ir apsaugos klasė fiksuojami išdavimo metu — nomenklatūros pakeitimas nekeičia istorinio įrašo.'],
      ['Dydžių lentelės', 'darbuotojo dydžiai priemonių grupėms; išduodant siūlomas jo dydis.'],
      ['Apskaitos išrašas', 'PDF ir XLSX pagal A1-331 5.18 p. turinį.'],
      ['Trūkumų cron’as', 'neišduotos normos virsta juodraštiniais išdavimais, o privalomos trūkstamos priemonės perveda darbuotoją į blokuotą būseną.'],
      ['Terminai', 'tinkamumo pabaiga ir eilinis keitimas praneša iš anksto.'],
      ['Atleidimas', 'grąžinimo lapas ir integracija su atleidimo vedliu.'],
    ],
    mock: 'ppe',
  },
  {
    id: 'sveikata',
    label: 'Sveikatos patikrinimai',
    icon: 'stethoscope',
    title: 'Sveikatos patikrinimai',
    desc: 'Periodiškumai yra duomenys, ne kodas: kiekviena eilutė turi galiojimo datą, privalomą nuorodą į teisės aktą ir patikrinimo datą. Jei eilutės nėra, sistema rodo, kad periodiškumas nepatikrintas, o ne spėja reikšmę.',
    points: [
      ['Versijuojami periodiškumai', 'nauja teisės akto redakcija suvedama kaip nauja eilutė su data nuo, o ne kaip modulio atnaujinimas.'],
      ['Sąrašas ir grafikas', 'tvirtinamas dokumentas; patvirtinus, kiekvienam jame esančiam darbuotojui sukuriama supažindinimo užduotis.'],
      ['Siuntimas ir išvada', '„gali“, „gali ribotai“ arba „negali“; nušalinimo įspėjimas ir formos kodas iš katalogo.'],
      ['BDAR 9 str.', 'vadovas mato tik išvadą. Ribojimai ir medicininė informacija prieinami tik profesinės sveikatos rolei.'],
      ['Blokuojanti išvada', 'išvada „negali“ arba pasibaigęs galiojimas iškart perveda darbuotoją į blokuotą būseną.'],
      ['Laukų lygio teisės', 'apribojimas realizuotas modelio laukuose, o ne tik paslepiant vaizdą.'],
    ],
    mock: 'health',
  },
  {
    id: 'portalas',
    label: 'Darbuotojo portalas',
    icon: 'smartphone',
    title: 'Darbuotojo portalas telefone',
    desc: 'Telefonui pritaikyti puslapiai: mano užduotys, mano mokymai, mano AAP, mano sveikatos patikrinimai. Atskiros sistemos paskyros darbuotojui nereikia.',
    points: [
      ['Keturi prisijungimo būdai', 'portalo naudotojas, PIN kodas, vienkartinė nuoroda arba kiosko režimas cechui.'],
      ['Mokymo turinys telefone', 'vaizdo įrašas, failas, nuoroda ar tekstas peržiūrimi prieš testą; testas pradedamas iš to paties puslapio.'],
      ['Patvirtinimas vietoje', 'instrukcija perskaitoma ir patvirtinama telefone — su laiko žyma ir IP.'],
      ['Griežta prieigos taisyklė', 'kiekvienas portalo modelis apribotas iki paties darbuotojo įrašų.'],
      ['IDOR patikros', 'bandymai atidaryti kito darbuotojo įrašą yra automatinių testų dalis.'],
      ['Be antro registro', 'duomenys tie patys, kurie jau yra ERP365 darbuotojų kortelėse.'],
    ],
    mock: 'portal',
  },
  {
    id: 'ataskaitos',
    label: 'Ataskaitos ir skydelis',
    icon: 'layout-dashboard',
    title: 'Ataskaitos, skydelis ir paketas inspekcijai',
    desc: 'Devyni atitikties rodikliai, galiojimų vaizdas iš keturių šaltinių ir mokymų atitikties matrica, skaičiuojama nuo reikalavimo — todėl matomas ir tas, kuris į privalomą programą apskritai nebuvo registruotas.',
    points: [
      ['Atitikties skydelis', 'devyni rodikliai; paspaudus rodiklį atsidaro būtent tie įrašai, kuriuos jis suskaičiavo.'],
      ['Galiojimų vaizdas', 'vienas sąrašas iš keturių šaltinių: instruktavimai, pažymėjimai, AAP, sveikata.'],
      ['Mokymų atitikties matrica', 'darbuotojas × programa su būsenomis „atlikta“, „reikalinga“ ir „neregistruota“.'],
      ['Prenumeratos', 'PDF arba XLSX pagal padalinius, periodiškai į el. paštą.'],
      ['VDI paketas', 'vienas ZIP su registrais ir įrašais, paruoštas atsisiųsti.'],
      ['Istorija', 'naktiniai atitikties momentiniai vaizdai, retinami laikui bėgant.'],
    ],
    mock: 'matrix',
  },
];

const DSS_FAQ = [
  { q: 'Ar darbuotojui reikia atskiros sistemos paskyros?', a: 'Ne. Portalas veikia keturiais būdais: portalo naudotojas, PIN kodas, vienkartinė nuoroda arba kiosko režimas cechui. Pasirenkate tą, kuris tinka jūsų žmonėms.' },
  { q: 'Ar galima naudoti tik saugos modulius, be viso ERP?', a: 'Taip — pakanka darbuotojų modulio. Bet didžiausią naudą gausite ten, kur darbuotojų, pareigų ir padalinių duomenys jau yra ERP365 sistemoje: antro darbuotojų registro nebereikia.' },
  { q: 'Kas atsitinka pasikeitus teisės aktui?', a: 'Periodiškumai, instruktavimo tipai, medicininių formų kodai ir rizikos veiksniai yra duomenys, o ne kodas. Suvedate naują eilutę su galiojimo data ir nuoroda į aktą — modulio versijos keisti nereikia.' },
  { q: 'Ar patvirtinimą galima suklastoti?', a: 'Patvirtinimų ir audito sekos lentelėse išjungtos redagavimo ir šalinimo teisės, o įrašai sujungti SHA-256 grandine: kiekvienas įrašas laiko ankstesniojo maišos reikšmę. Bet kokia intervencija į duomenų bazę nutraukia grandinę ir yra pastebima.' },
  { q: 'Ar tinka kvalifikuotam el. parašui su Smart-ID?', a: 'Kvalifikuotas parašas eina per mūsų dokumentų modulį. Pats DSS parašo lygį nurodo ir tikrina, ar su darbuotoju yra pasirašytas susitarimas dėl elektroninio parašo — be jo pasirašymo užduotis nesiunčiama.' },
  { q: 'Kiek užtrunka paleisti?', a: 'Duomenys suvedami per aštuonis XLSX importo šablonus — įskaitant istoriją: jau turimus patvirtinimus, jau išduotą AAP ir jau atliktus patikrinimus. Paruošimo vedlys visą laiką rodo, kiek sistema sukonfigūruota ir ko dar trūksta.' },
  { q: 'Ar modulis garantuoja atitiktį?', a: 'Ne. Modulis padeda vykdyti reikalavimus: sudeda registrus, terminus, įrodymus ir ataskaitas. Už instruktavimų turinį, periodiškumų teisingumą ir sprendimus atsako darbdavys.' },
];

function SafetyPage() {
  const url = window.__erp_url;
  const [area, setArea] = React.useState(DSS_AREAS[0].id);
  const cur = DSS_AREAS.find(a => a.id === area) || DSS_AREAS[0];

  // Lucide ikonos perkuriamos po kiekvieno perrenderinimo (srities perjungimas
  // grąžina <i data-lucide> elementus į DOM'ą).
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  return (
    <>
      {/* === HERO === */}
      <section className="erp-pagehead erp-dss-hero">
        <img src="/assets/orbit-pattern.svg" className="erp-pagehead-orbit" alt="" />
        <div className="erp-container">
          <div className="erp-pagehead-inner">
            <div className="erp-breadcrumb">
              <a href={url('home')}>Pradžia</a>
              <span>/</span>
              <span>Sprendimai</span>
              <span>/</span>
              <span>Darbuotojų sauga</span>
            </div>
            <div className="erp-eyebrow erp-dss-hero-eyebrow">
              <img src="/assets/dss-sauga.png" alt="" />
              Sprendimai · Mūsų modulis
            </div>
            <h1>Darbuotojų sauga, mokymai ir sveikata. <span className="erp-accent">Reikalavimas tampa užduotimi.</span></h1>
            <p>Darbuotojų saugos ir sveikatos valdymas ERP365 (Odoo) viduje: instruktavimai, mokymai, apsaugos priemonės ir sveikatos patikrinimai paverčiami užduotimis darbuotojui ir atitikties būsena, kuri blokuoja darbą — o ne dar viena ataskaita, kurią kas nors perskaito po įvykio.</p>
            <div className="erp-dss-hero-cta">
              <a href="/kontaktai" onClick={(e) => { e.preventDefault(); window.__erp_book_demo && window.__erp_book_demo(); }} className="erp-btn erp-btn-primary erp-btn-lg">Pažiūrėti demo →</a>
              <a href={url('kainos')} className="erp-btn erp-btn-ghost-dark erp-btn-lg">Peržiūrėti kainas</a>
            </div>
            <div className="erp-dss-claims">
              <span className="erp-dss-claim"><span className="erp-dss-claim-dot" /><b>Duomenys jau yra.</b> Darbuotojai imami iš tos pačios ERP365 sistemos</span>
              <span className="erp-dss-claim"><span className="erp-dss-claim-dot" /><b>Būsena, o ne pastaba.</b> Trūkstamą reikalavimą mato atsakingi ir pats darbuotojas</span>
              <span className="erp-dss-claim"><span className="erp-dss-claim-dot" /><b>Teisės aktai yra duomenys.</b> Keičiate įrašą, ne modulio versiją</span>
            </div>
          </div>
        </div>

        <div className="erp-container">
          <div className="erp-dss-hero-mock">
            <DssDashboardMock />
          </div>
        </div>
      </section>

      {/* === PROBLEMA → SPRENDIMAS === */}
      <section className="erp-section">
        <div className="erp-container">
          <div className="erp-section-head">
            <h2 className="erp-section-title">Keturios vietos, kur saugos apskaita trūkinėja.</h2>
            <p className="erp-section-lede">Ne dėl to, kad kas nors nesistengia. Dėl to, kad reikalavimas gyvena Excel’yje ir segtuve, o darbas vyksta kitoje sistemoje. Kairėje — kaip būna. Dešinėje — ką modulis daro su tuo.</p>
          </div>
          <div className="erp-dss-pairs">
            {[
              {
                pt: '„Susipažinau“ reikia įrodyti, ne pasakyti',
                pd: 'Popierinis lapas su parašais arba Excel su datomis. Po įvykio klausiama, kurią redakciją darbuotojas skaitė ir kada.',
                ft: 'Patvirtinimas, kurio pakeisti negali niekas',
                fd: 'Laiko žyma, IP adresas, konkreti dokumento redakcija ir SHA-256 grandinė. Lentelėje išjungtos redagavimo ir šalinimo teisės — įskaitant administratoriui.',
              },
              {
                pt: 'Pasibaigęs sveikatos patikrinimas tampa priminimu, ne stabdžiu',
                pd: 'Kalendoriaus įrašas arba pastaba darbuotojo kortelėje. Žmogus dirba toliau, nes niekas techniškai jo nesustabdo.',
                ft: 'Išvada „negali“ perveda į blokuotą būseną',
                fd: 'Neigiama išvada arba pasibaigęs galiojimas keičia atitikties būseną, kuri matoma darbuotojo kortelėje, sąrašuose, skydelyje ir ataskaitose.',
              },
              {
                pt: 'AAP apskaitos taisyklės pasikeitė',
                pd: 'Nuo 2025-11-01 senoji AAP kortelė ir žiniaraštis panaikinti, o senos formos ir toliau pildomos iš inercijos.',
                ft: 'Apskaita pagal A1-331 5.18 p. turinį',
                fd: 'Išrašas PDF ir XLSX be panaikintų formų. Visi laukai — momentinės kopijos, todėl nomenklatūros keitimas neperrašo istorinių įrašų.',
              },
              {
                pt: 'Tie patys darbuotojai dviejose sistemose',
                pd: 'Vienas registras personalui, kitas saugai. Naujas žmogus atsiranda viename, o užduotys — kai kas nors prisimena perkelti.',
                ft: 'Viskas kabinasi ant darbuotojo kortelės',
                fd: 'Pareigos, padaliniai ir darbo vietos imami iš ERP365 darbuotojų modulio. Naujas darbuotojas užduotis gauna kūrimo metu, o ne po naktinio cron’o.',
              },
            ].map((p) => (
              <div key={p.pt} className="erp-dss-pair">
                <div className="erp-dss-pair-side erp-dss-pair-side--problem">
                  <span className="erp-dss-pair-tag">Kaip būna</span>
                  <h3 className="erp-dss-pair-t">{p.pt}</h3>
                  <p className="erp-dss-pair-d">{p.pd}</p>
                </div>
                <div className="erp-dss-pair-arrow" aria-hidden="true">
                  <svg width="24" height="14" viewBox="0 0 24 14" fill="none"><path d="M0 7h20M15 2l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </div>
                <div className="erp-dss-pair-side erp-dss-pair-side--fix">
                  <span className="erp-dss-pair-tag">Ką daro modulis</span>
                  <h3 className="erp-dss-pair-t">{p.ft}</h3>
                  <p className="erp-dss-pair-d">{p.fd}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* === ATITIKTIES BŪSENA === */}
      <section className="erp-section erp-section-gray">
        <div className="erp-container">
          <div className="erp-dss-status-grid">
            <div>
              <div className="erp-eyebrow">Atitikties būsena</div>
              <h2 className="erp-section-title" style={{ margin: '0 0 16px' }}>Viena būsena, kurią sudeda visos sritys.</h2>
              <p className="erp-section-lede" style={{ margin: 0 }}>Kiekvienas darbuotojas turi vieną iš trijų būsenų. Ji skaičiuojama vienoje vietoje, todėl kortelė, sąrašas, skydelis ir ataskaita niekada nerodo skirtingų skaičių.</p>

              <div className="erp-dss-status-list">
                <div className="erp-dss-status-row">
                  <span className="erp-dss-status-pill erp-dss-status-pill--ok"><span className="erp-dss-status-dot" />Tvarkoje</span>
                  <p className="erp-dss-status-d">Visi <b>privalomi reikalavimai atlikti ir galioja</b>: instruktavimai patvirtinti, kompetencijos nepasibaigusios, AAP išduota, sveikatos patikrinimas galioja.</p>
                </div>
                <div className="erp-dss-status-row">
                  <span className="erp-dss-status-pill erp-dss-status-pill--warn"><span className="erp-dss-status-dot" />Įspėjimas</span>
                  <p className="erp-dss-status-d"><b>Terminas artėja</b> arba medicininė išvada yra „gali ribotai“. Darbas nestoja, bet vadovas mato, kas nutiks po dviejų savaičių.</p>
                </div>
                <div className="erp-dss-status-row">
                  <span className="erp-dss-status-pill erp-dss-status-pill--block"><span className="erp-dss-status-dot" />Blokuota</span>
                  <p className="erp-dss-status-d">Neišduota <b>privaloma AAP</b>, pasibaigęs arba neigiamas <b>sveikatos patikrinimas</b>, praleistas <b>privalomas instruktavimas</b>. Tai būsena, ne pastaba lauke.</p>
                </div>
              </div>

              <p className="erp-dss-status-note">Būsena persiskaičiuoja iškart po įvykio: patvirtinus instrukciją, išdavus priemonę ar įregistravus išvadą. Naktinis cron’as tik pažymi praleistus terminus — nelaukia jo niekas kitas.</p>
            </div>

            <DssEmployeeCard />
          </div>
        </div>
      </section>

      {/* === ŠEŠIOS SRITYS === */}
      <section className="erp-section">
        <div className="erp-container">
          <div className="erp-section-head">
            <h2 className="erp-section-title">Šešios sritys vienoje sistemoje.</h2>
            <p className="erp-section-lede">Visos sritys veikia iš karto ir skaičiuoja vieną bendrą atitikties būseną. Pasirinkite sritį — parodysime, kas jau veikia sistemoje.</p>
          </div>

          <div className="erp-dss-areas">
            <div className="erp-dss-arealist" role="tablist" aria-label="DSS sritys">
              {DSS_AREAS.map(a => (
                <button
                  key={a.id}
                  type="button"
                  role="tab"
                  aria-selected={area === a.id}
                  className={`erp-dss-areabtn ${area === a.id ? 'is-active' : ''}`}
                  onClick={() => setArea(a.id)}
                >
                  <span className="erp-dss-areabtn-ic"><i data-lucide={a.icon}></i></span>
                  <span>
                    <span className="erp-dss-areabtn-t">{a.label}</span>
                  </span>
                </button>
              ))}
            </div>

            <div className="erp-dss-areapanel">
              <div className="erp-dss-areapanel-head">
                <h3 className="erp-dss-areapanel-t">{cur.title}</h3>
                <p className="erp-dss-areapanel-d">{cur.desc}</p>
              </div>
              <div className="erp-dss-areapanel-list">
                {cur.points.map(([t, d]) => (
                  <div key={t} className="erp-dss-areapanel-li">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
                    <span><b>{t}</b> — {d}</span>
                  </div>
                ))}
              </div>
              <div className="erp-dss-areapanel-mock" key={cur.id}>
                <DssAreaMock kind={cur.mock} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* === KAM SKIRTA === */}
      <section className="erp-section erp-section-gray">
        <div className="erp-container">
          <div className="erp-section-head">
            <h2 className="erp-section-title">Penki žmonės, kurie atsidaro skirtingus ekranus.</h2>
            <p className="erp-section-lede">Nuo EVR I grupės įmonės, kurioje saugos funkcijas vykdo pats darbdavys, iki gamybos su keliais tūkstančiais darbuotojų. Kiekvienas mato tai, ko jam reikia, ir nemato to, ko neturi matyti.</p>
          </div>
          <div className="erp-dss-roles">
            {[
              ['shield-check', 'Darbų saugos specialistas', 'Instrukcijų registras, priskyrimo taisyklės, patikrinimų grafikai, AAP normos ir paruoštas paketas inspekcijai.'],
              ['users', 'Padalinio vadovas', 'Savo žmonių būsena ir terminai. Prenumeruojama ataskaita į el. paštą, kad nereikėtų atsidarinėti sistemos.'],
              ['user-plus', 'Personalo skyrius', 'Naujo darbuotojo seka nuo pirmos dienos ir grąžinimo lapas atleidimo metu — abu iš darbuotojo kortelės.'],
              ['smartphone', 'Darbuotojas', 'Telefone: mano užduotys, mano mokymai, mano AAP, mano patikrinimai. Be kompiuterio ir be atskiros paskyros.'],
              ['file-search', 'Vadovybė ir auditas', 'Atitikties skydelis, istorija ir nekeičiama audito seka — su galimybe pasitikrinti, iš kur atsirado skaičius.'],
            ].map(([icon, t, d]) => (
              <div key={t} className="erp-dss-role">
                <div className="erp-dss-role-ic"><i data-lucide={icon}></i></div>
                <div className="erp-dss-role-t">{t}</div>
                <div className="erp-dss-role-d">{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* === NAUJIENA: DI TESTŲ IMPORTAS === */}
      <section className="erp-section">
        <div className="erp-container">
          <div className="erp-dss-ai-grid">
            <div>
              <div className="erp-eyebrow erp-eyebrow-yellow">Nauja 2026 m. rugpjūtį</div>
              <h2 className="erp-section-title" style={{ margin: '0 0 16px' }}>Turimas testas Word faile tampa testu sistemoje.</h2>
              <p className="erp-section-lede" style={{ margin: 0 }}>Įkeliate <code>.docx</code> arba <code>.pdf</code> su jau paruoštu žinių patikrinimu. Dirbtinis intelektas atpažįsta klausimus, atsakymų variantus, paveikslėlius ir — kai dokumente pažymėta — teisingus atsakymus. Perrašinėti klausimų po vieną nebereikia.</p>

              <div className="erp-dss-ai-providers">
                {['Anthropic Claude', 'OpenAI', 'Google Gemini'].map(p => (
                  <span key={p} className="erp-dss-ai-provider"><span />{p}</span>
                ))}
              </div>

              <p className="erp-dss-ai-note"><b>Neaiškių atsakymų DI nespėlioja.</b> Ten, kur dokumente teisingas variantas nepažymėtas, klausimas paliekamas specialistui pažymėti — ne užpildomas spėjimu. Tiekėjas pasirenkamas nustatymuose, o API raktas yra kliento, ne mūsų.</p>

            </div>

            <div className="erp-dss-convert">
              <div className="erp-dss-doc">
                <div className="erp-dss-doc-bar">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></svg>
                  gaisrine-sauga-testas.docx
                </div>
                <div className="erp-dss-doc-body">
                  <p className="erp-dss-doc-q">3. Kokį gesintuvą naudoti degant elektros skirstomajai spintai?</p>
                  <div className="erp-dss-doc-opt"><em>a)</em> vandens</div>
                  <div className="erp-dss-doc-opt is-right"><em>b)</em> anglies dioksido (CO₂)</div>
                  <div className="erp-dss-doc-opt"><em>c)</em> putų</div>
                  <div className="erp-dss-doc-skel" />
                  <div className="erp-dss-doc-skel" />
                  <div className="erp-dss-doc-skel" />
                </div>
                <div className="erp-dss-doc-foot">12 klausimų · 3 paveikslėliai · atsakymai pažymėti pusjuodžiu</div>
              </div>

              <div className="erp-dss-convert-arrow" aria-hidden="true">
                <svg width="30" height="18" viewBox="0 0 30 18" fill="none"><path d="M0 9h24M19 3l5 6-5 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>

              <div className="erp-dss-doc">
                <div className="erp-dss-doc-bar">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 11l3 3L22 4" /><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" /></svg>
                  Gaisrinė sauga · žinių patikrinimas
                </div>
                <div className="erp-dss-doc-body">
                  <p className="erp-dss-doc-q">3 klausimas · vienas atsakymas</p>
                  <div className="erp-dss-doc-opt"><span className="erp-dss-doc-check" />vandens</div>
                  <div className="erp-dss-doc-opt is-right"><span className="erp-dss-doc-check is-on"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg></span>anglies dioksido (CO₂)</div>
                  <div className="erp-dss-doc-opt"><span className="erp-dss-doc-check" />putų</div>
                  <div className="erp-dss-doc-skel" />
                  <div className="erp-dss-doc-opt"><span className="erp-dss-doc-check is-unsure" />7 klausimas: atsakymas nepažymėtas</div>
                </div>
                <div className="erp-dss-doc-foot erp-dss-doc-foot--flag">11 klausimų importuota · 1 paliktas patikrinti specialistui</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* === PORTALAS TELEFONE === */}
      <section className="erp-section erp-section-dark erp-dss-portal">
        <div className="erp-container">
          <div className="erp-dss-portal-grid">
            <div>
              <div className="erp-eyebrow erp-eyebrow-picton">Darbuotojo portalas</div>
              <h2 className="erp-section-title" style={{ margin: '0 0 18px' }}>Cecho darbuotojas neturi darbinio pašto. Ir vis tiek patvirtina.</h2>
              <p className="erp-dss-portal-lede">Saugos apskaita sustoja ten, kur darbuotojas negali prisijungti. Todėl portalas veikia keturiais būdais — pasirenkate tą, kuris tinka jūsų žmonėms. Pranešimai eina el. paštu arba SMS per atskirą adapterį.</p>

              <div className="erp-dss-logins">
                {[
                  ['user-check', 'Portalo naudotojas', 'Įprastas prisijungimas su el. paštu ir slaptažodžiu — prieiga tik prie savo saugos duomenų.'],
                  ['key-round', 'PIN kodas', 'Trumpas kodas, kurį darbuotojas įsimena. Patogu ten, kur el. pašto adreso nėra.'],
                  ['link', 'Vienkartinė nuoroda', 'Atsiunčiama SMS ar el. paštu, veikia vieną kartą — konkrečiai užduočiai.'],
                  ['monitor-smartphone', 'Kiosko režimas', 'Bendras planšetės ar terminalo ekranas cechuose ir sandėliuose.'],
                ].map(([icon, t, d]) => (
                  <div key={t} className="erp-dss-login">
                    <div className="erp-dss-login-ic"><i data-lucide={icon}></i></div>
                    <div className="erp-dss-login-t">{t}</div>
                    <div className="erp-dss-login-d">{d}</div>
                  </div>
                ))}
              </div>

              <p className="erp-dss-portal-note">Kiekvienas portalo įrašas apribotas iki paties darbuotojo duomenų, o bandymai atidaryti kito žmogaus įrašą yra automatinių testų dalis.</p>
            </div>

            <DssPhoneMock />
          </div>
        </div>
      </section>

      {/* === PAKETAS INSPEKCIJAI === */}
      <section className="erp-section erp-section-gray">
        <div className="erp-container">
          <div className="erp-dss-vdi-grid">
            <div>
              <div className="erp-eyebrow">Paketas inspekcijai</div>
              <h2 className="erp-section-title" style={{ margin: '0 0 16px' }}>Atėjo inspektorius. Vienas ZIP, 11,4 sekundės.</h2>
              <p className="erp-section-lede" style={{ margin: '0 0 22px' }}>Vietoje savaitės, praleistos renkant segtuvus ir Excel failus, suformuojamas vienas archyvas su visais registrais ir įrašais už pasirinktą laikotarpį bei padalinį. Tas pats paketas naudingas ir vidiniam auditui.</p>
              <div className="erp-dss-perf">
                {[
                  ['Portalo užduočių sąrašas', '0,00 s'],
                  ['Darbuotojų sąrašas su atitikties būsena (80 eil.)', '0,01 s'],
                  ['Galiojimų vaizdas, sugrupuotas', '0,32 s'],
                  ['Naktinis priskyrimo taisyklių cron’as', '20,5 s'],
                  ['VDI paketas: 5 000 darbuotojų, 170 000 įrašų', '11,4 s'],
                ].map(([l, v]) => (
                  <div key={l} className="erp-dss-perf-row">
                    <span className="erp-dss-perf-l">{l}</span>
                    <span className="erp-dss-perf-v">{v}</span>
                  </div>
                ))}
              </div>
              <p className="erp-dss-perf-note">Matuota duomenų bazėje su 100 001 darbuotoju, 4 mln. užduočių ir 3,4 mln. patvirtinimų.</p>
            </div>

            <div className="erp-dss-zip">
              <div className="erp-dss-zip-head">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 8v13H3V8" /><path d="M1 3h22v5H1z" /><path d="M10 12h4" /></svg>
                <span className="erp-dss-zip-name">dss-vdi-2026-08.zip</span>
                <span className="erp-dss-zip-time">11,4 s</span>
              </div>
              {[
                ['Instruktavimų žurnalas su patvirtinimų grandine', 'PDF'],
                ['Instrukcijų registras ir jų redakcijos', 'XLSX'],
                ['Mokymų registras, testų rezultatai, pažymėjimai', 'XLSX'],
                ['AAP apskaitos išrašas pagal A1-331 5.18 p.', 'PDF'],
                ['Sveikatos patikrinimų sąrašas ir išvadų suvestinė', 'XLSX'],
                ['Sveikatos periodiškumai su nuorodomis į aktus', 'XLSX'],
                ['Atitikties būsenos momentinis vaizdas', 'PDF'],
                ['Audito seka su maišos reikšmėmis', 'CSV'],
              ].map(([n, ext]) => (
                <div key={n} className="erp-dss-zip-row">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></svg>
                  <span>{n}</span>
                  <span className="erp-dss-zip-ext">{ext}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* === TEISINIS PAGRINDAS === */}
      <section className="erp-section erp-section-dark erp-dss-legal">
        <div className="erp-container">
          <div className="erp-dss-legal-grid">
            <div>
              <div className="erp-eyebrow erp-eyebrow-picton">Teisinis pagrindas</div>
              <h2 className="erp-section-title" style={{ margin: '0 0 18px' }}>Reikšmės teisės aktuose kinta. Kode jų nėra.</h2>
              <p className="erp-dss-legal-lede">Periodiškumai, instruktavimo tipai, medicininių formų kodai ir rizikos veiksniai yra duomenys su galiojimo data ir nuoroda į aktą. Pasikeitus redakcijai suvedate naują eilutę — nelaukiate modulio atnaujinimo.</p>
              <div className="erp-dss-legal-disclaimer">
                <b>Pastaba:</b> modulis padeda vykdyti reikalavimus, bet atitikties negarantuoja. Už instruktavimų turinį, periodiškumų teisingumą ir priimtus sprendimus atsako darbdavys.
              </div>
            </div>
            <div className="erp-dss-acts">
              {[
                ['VDI Nr. V-240', <>Instruktavimo tvarką, apimtį ir periodiškumą <b>nustato darbdavys</b>. Senosios penkios instruktavimų rūšys galiojančiuose aktuose nebeegzistuoja, todėl tipai yra konfigūracija, o ne fiksuotas sąrašas.</>, null],
                ['LR Nr. XIII-1120', <>5 str. 1 d.: elektroninis parašas prilygsta rašytiniam <b>tik esant išankstiniam rašytiniam susitarimui</b>. Be jo pasirašymo užduotis nesiunčiama.</>, null],
                ['A1-331', <>AAP apskaitos turinys, redakcija nuo <b>2025-11-01</b>. Senoji kortelė ir žiniaraštis panaikinti — išrašas formuojamas pagal 5.18 p.</>, null],
                ['SAM Nr. 301', <>Medicininių formų katalogas: 047/a, 048/a, E047 ir E048 ESPBI IS. Nauja redakcija nuo <b>2026-11-01</b> suvedama kaip nauja dokumento eilutė.</>, 'Ruošiamės'],
                ['A1-276', <>Kompetencijos tobulinimas — ne mažiau kaip <b>50 val. per 5 metus</b>; žinių tikrinimo riba — 75 %.</>, null],
                ['Saugojimo terminai', <>Instruktavimai — <b>3 m.</b>, nelaimingų atsitikimų aktai — <b>25 m.</b>, profesinių ligų aktai — <b>50 m.</b></>, null],
              ].map(([code, desc, flag]) => (
                <div key={code} className="erp-dss-act">
                  <div className="erp-dss-act-code">{code}</div>
                  <div className="erp-dss-act-d">{desc}{flag && <span className="erp-dss-act-flag">{flag}</span>}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* === PALEIDIMAS === */}
      <section className="erp-section">
        <div className="erp-container">
          <div className="erp-dss-start-grid">
            <div>
              <div className="erp-eyebrow">Paleidimas</div>
              <h2 className="erp-section-title" style={{ margin: '0 0 16px' }}>Aštuoni XLSX šablonai, įskaitant istoriją.</h2>
              <p className="erp-section-lede" style={{ margin: 0 }}>Importuojami ne tik katalogai, bet ir tai, kas jau atlikta: turimi patvirtinimai, išduota AAP, atlikti patikrinimai. Sistema paleidžiama su tikra būsena, o ne su tuščiu registru, kurį reikia atkurti ranka.</p>
              <p style={{ font: '400 14px/1.65 var(--erp-font-body)', color: 'var(--erp-gray-600)', margin: '22px 0 0' }}>Paruošimo vedlys visą laiką rodo, kiek sistema sukonfigūruota ir ko dar trūksta. Diegimą, importą ir apmokymus atliekame mes.</p>
              <a href="/kontaktai" onClick={(e) => { e.preventDefault(); window.__erp_book_demo && window.__erp_book_demo(); }} className="erp-btn erp-btn-primary erp-btn-lg" style={{ marginTop: 26 }}>Aptarti diegimą →</a>
            </div>

            <div className="erp-dss-imports">
              {[
                'Darbuotojai ir saugos profiliai',
                'Instrukcijos ir jų tipai',
                'AAP priemonių katalogas',
                'AAP normos pagal pareigas',
                'Sveikatos periodiškumai',
                'Jau turimi patvirtinimai',
                'Jau išduota AAP',
                'Jau atlikti patikrinimai',
              ].map(t => (
                <div key={t} className="erp-dss-import">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
                  {t}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* === MODULIO KAINA === */}
      <section className="erp-section erp-section-gray">
        <div className="erp-container">
          <div className="erp-riv-price-grid">
            <div className="erp-riv-price-card">
              <div className="erp-eyebrow">Modulio kaina</div>
              <div className="erp-riv-price-row">
                <span className="erp-riv-price-n">50 €</span>
                <span className="erp-riv-price-u">/ mėn.</span>
              </div>
              <p className="erp-riv-price-desc">Mėnesinis modulio mokestis be darbuotojų, instruktavimų ar įrašų kiekio ribojimų. Veikia su visais ERP365 planais, o mokestis prisideda prie pasirinkto plano.</p>
              <ul className="erp-riv-price-list">
                <li>Neribotas darbuotojų skaičius</li>
                <li>Visos šešios sritys iš karto</li>
                <li>Darbuotojo portalas ir SMS pranešimai</li>
                <li>Paketas inspekcijai ir prenumeruojamos ataskaitos</li>
                <li>Nuolatiniai atnaujinimai ir palaikymas</li>
              </ul>
              <a href="/kontaktai" onClick={(e) => { e.preventDefault(); window.__erp_book_demo && window.__erp_book_demo(); }} className="erp-btn erp-btn-primary erp-btn-lg">Išbandyti ERP365 →</a>
            </div>

            <div className="erp-riv-req-card">
              <div className="erp-eyebrow erp-eyebrow-yellow">Ko reikia pradžiai</div>
              <h3>Trys žingsniai iki paleidimo</h3>
              <p>Modulis veikia su visais ERP365 planais. Mes sudiegsime, importuosime turimus saugos duomenis ir apmokysime komandą.</p>

              <div className="erp-riv-req-checklist">
                <div className="erp-riv-req-step">
                  <span className="erp-riv-req-num">1</span>
                  <div>
                    <div className="erp-riv-req-t">Sutartis</div>
                    <div className="erp-riv-req-d">Standartinis ERP365 planas jūsų komandai</div>
                  </div>
                </div>
                <div className="erp-riv-req-step">
                  <span className="erp-riv-req-num">2</span>
                  <div>
                    <div className="erp-riv-req-t">Turimi saugos duomenys</div>
                    <div className="erp-riv-req-d">Instrukcijas, AAP normas, periodiškumus ir istoriją importuojame per aštuonis XLSX šablonus</div>
                  </div>
                </div>
                <div className="erp-riv-req-step">
                  <span className="erp-riv-req-num">3</span>
                  <div>
                    <div className="erp-riv-req-t">Darbuotojų saugos modulis</div>
                    <div className="erp-riv-req-d">50 €/mėn. · diegimą ir apmokymus atliekame mes</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* === KELRODIS === */}
      <section className="erp-section">
        <div className="erp-container">
          <div className="erp-section-head">
            <h2 className="erp-section-title">Ateities planai</h2>
            <p className="erp-section-lede">Žemiau surašyta, kas jau veikia sistemoje ir kas dar planuojama.</p>
          </div>
          <div className="erp-dss-road">
            <div className="erp-dss-road-col">
              <div className="erp-dss-road-v"><span />Veikia dabar</div>
              <div className="erp-dss-road-li">Instruktavimai su nekeičiamu patvirtinimu</div>
              <div className="erp-dss-road-li">Mokymai, testai, pažymėjimai su QR</div>
              <div className="erp-dss-road-li">AAP normos, išdavimas, apskaitos išrašas</div>
              <div className="erp-dss-road-li">Sveikatos periodiškumai ir išvados</div>
              <div className="erp-dss-road-li">Darbuotojo portalas ir SMS pranešimai</div>
              <div className="erp-dss-road-li">Atitikties skydelis ir paketas inspekcijai</div>
            </div>
            <div className="erp-dss-road-col">
              <div className="erp-dss-road-v"><span />Artimiausi planai</div>
              <div className="erp-dss-road-li">Rizikos vertinimas, incidentai ir NA aktai</div>
              <div className="erp-dss-road-li">ISO 45001 palaikymas</div>
              <div className="erp-dss-road-li">Darbo leidimai (PTW) ir auditai</div>
              <div className="erp-dss-road-li">AAP sąsaja su sandėlio atsargomis</div>
            </div>
            <div className="erp-dss-road-col">
              <div className="erp-dss-road-v"><span />Vėliau</div>
              <div className="erp-dss-road-li">SCORM mokymo turinio palaikymas</div>
              <div className="erp-dss-road-li">Viešas API išorinėms sistemoms</div>
              <div className="erp-dss-road-li">ESPBI IS integracija (E047 / E048)</div>
              <div className="erp-dss-road-li">RU, LV, PL, UK vertimai</div>
            </div>
          </div>
          <p className="erp-dss-road-note">Jei jums reikia kurios nors planuojamos funkcijos, pasakykite — į tai atsižvelgiame nustatydami prioritetus.</p>
        </div>
      </section>

      {/* === DUK === */}
      <section className="erp-section erp-section-gray">
        <div className="erp-container">
          <div className="erp-section-head erp-section-head-center">
            <h2 className="erp-section-title" style={{ marginLeft: 'auto', marginRight: 'auto' }}>Dažni klausimai apie DSS modulį</h2>
          </div>
          <DssFAQ items={DSS_FAQ} />
        </div>
      </section>

      <CTASection
        title="Parodysime su jūsų duomenimis."
        lede="30 min. demo: paimame vieną jūsų padalinį ir parodome, kaip atrodo jo atitikties būsena."
        primary="Pažiūrėti demo →"
        secondary="Peržiūrėti kainas"
      />
    </>
  );
}

/* =====================================================
   DUK akordeonas
   ===================================================== */
function DssFAQ({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="erp-faq">
      {items.map((it, i) => (
        <div key={i} className={`erp-faq-item ${open === i ? 'is-open' : ''}`}>
          <div className="erp-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span>
            <span className="erp-faq-icon">+</span>
          </div>
          <div className="erp-faq-a">
            <div className="erp-faq-a-inner"><p>{it.a}</p></div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* =====================================================
   Bendras „Sauga“ programos chrome (Odoo maketas, ERP365 spalvomis)
   ===================================================== */
function DssChrome({ active, children, actions }) {
  const links = ['Instrukcijos', 'Organizacija', 'Mokymai', 'Sveikata', 'Apsaugos priemonės', 'Žmonės', 'Ataskaitos', 'Audito seka', 'Konfigūracija'];
  return (
    <div className="erp-odoo erp-prie erp-dss-mock">
      <div className="erp-prie-topbar">
        <div className="erp-prie-topbar-left">
          <span className="erp-prie-app-icon"><img src="/assets/dss-sauga.png" alt="" /></span>
          <span className="erp-prie-app-name">Sauga</span>
          {links.map(l => (
            <span key={l} className={`erp-prie-nav-link ${l === active ? 'is-active' : ''}`}>{l}</span>
          ))}
        </div>
        <div className="erp-prie-topbar-right">
          <span className="erp-prie-badge-wrap">
            <svg className="erp-prie-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>
            <span className="erp-prie-badge">48</span>
          </span>
          <svg className="erp-prie-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></svg>
          <span className="erp-prie-company">UAB Demonstracija</span>
          <span className="erp-prie-avatar">A</span>
        </div>
      </div>
      {actions}
      {children}
    </div>
  );
}

function DssActionBar({ title, paging, chip, views = true }) {
  return (
    <div className="erp-prie-actions">
      <div className="erp-prie-actions-left">
        <span className="erp-prie-new">Naujas</span>
        <span className="erp-prie-pagetitle">{title}</span>
      </div>
      <div className="erp-prie-actions-center">
        <div className="erp-prie-search">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></svg>
          {chip && (
            <span className="erp-prie-search-chip">
              {chip}
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M18 6L6 18M6 6l12 12" /></svg>
            </span>
          )}
          <span className="erp-prie-search-placeholder">Ieškoti…</span>
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6" /></svg>
        </div>
      </div>
      <div className="erp-prie-actions-right">
        {paging && <span className="erp-prie-paging">{paging}</span>}
        <span className="erp-prie-paging-arrow"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M15 18l-6-6 6-6" /></svg></span>
        <span className="erp-prie-paging-arrow"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M9 18l6-6-6-6" /></svg></span>
        {views && (
          <span className="erp-prie-views">
            <span className="is-active" title="Sąrašas">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18" /></svg>
            </span>
            <span title="Kanban">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="18" rx="1" /><rect x="14" y="3" width="7" height="12" rx="1" /></svg>
            </span>
          </span>
        )}
      </div>
    </div>
  );
}

/* =====================================================
   HERO: atitikties skydelis su 9 rodikliais
   ===================================================== */
function DssDashboardMock() {
  const kpis = [
    { l: 'Vėluojančios saugos užduotys', n: 38, d: '−46,2 %', tone: 'alert' },
    { l: 'Atviros saugos užduotys', n: 73, d: '−12,4 %', tone: 'alert' },
    { l: 'Pasibaigę mokymai', n: 6, d: '76,9 %', tone: 'alert' },
    { l: 'Baigiasi pažymėjimai', n: 6, d: '30 d.', tone: 'warn' },
    { l: 'Trūksta privalomos AAP', n: 8, d: '69,2 %', tone: 'alert' },
    { l: 'AAP pasibaigęs tinkamumas', n: 8, d: '69,2 %', tone: 'alert' },
    { l: 'Pasibaigę sveikatos patikrinimai', n: 5, d: '80,8 %', tone: 'alert' },
    { l: 'Netinkami darbui pagal išvadą', n: 0, d: '100 %', tone: 'ok' },
    { l: 'Neleidžiami dirbti darbuotojai', n: 21, d: '19,2 %', tone: 'alert' },
  ];
  const counters = kpis.map(k => useCounter(k.n, { duration: 1300 }));
  const bars = [34, 41, 38, 46, 52, 44, 39, 47, 55, 48, 43, 36, 29, 25, 21];

  return (
    <DssChrome active="Ataskaitos">
      <div className="erp-dss-dash">
        <div className="erp-dss-dash-head">
          <div>
            <div className="erp-dss-dash-t">Darbuotojų saugos būklė</div>
            <div className="erp-dss-dash-s">UAB Demonstracija · 26 darbuotojai · 2026-08-19</div>
          </div>
          <div className="erp-dss-dash-sel">
            Visa įmonė
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6" /></svg>
          </div>
        </div>

        <div className="erp-dss-kpis">
          {kpis.map((k, i) => (
            <div key={k.l} className={`erp-dss-kpi erp-dss-kpi--${k.tone}`}>
              <div className="erp-dss-kpi-top">
                <span className="erp-dss-kpi-l">{k.l}</span>
                <span className={`erp-dss-kpi-b erp-dss-kpi-b--${k.tone}`}>{k.d}</span>
              </div>
              <div className="erp-dss-kpi-n">{counters[i]}</div>
              <div className="erp-dss-kpi-s">iš 26 darbuotojų</div>
            </div>
          ))}
        </div>

        <div className="erp-dss-dash-chart">
          <div className="erp-dss-dash-chart-t">Neleidžiamų dirbti darbuotojų kitimas · 15 mėn.</div>
          <div className="erp-dss-dash-bars">
            {bars.map((h, i) => (
              <span key={i} style={{ height: `${h}%`, animationDelay: `${i * 26}ms` }} />
            ))}
          </div>
        </div>
      </div>
    </DssChrome>
  );
}

/* =====================================================
   Darbuotojo kortelė su blokuota būsena
   ===================================================== */
function DssEmployeeCard() {
  return (
    <div className="erp-dss-empcard">
      <div className="erp-dss-empcard-head">
        <span className="erp-dss-empcard-av">VG</span>
        <div>
          <div className="erp-dss-empcard-name">Vytautas Grigas</div>
          <div className="erp-dss-empcard-role">Vairuotojas-ekspeditorius · Pirkimai ir logistika</div>
        </div>
        <span className="erp-dss-empcard-state">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="10" /><path d="M15 9l-6 6M9 9l6 6" /></svg>
          Blokuota
        </span>
      </div>
      <div className="erp-dss-empcard-rows">
        {[
          ['file-signature', 'Instruktavimai', '4 iš 4 patvirtinti', 'ok', 'galioja'],
          ['graduation-cap', 'Mokymai ir kompetencijos', 'Krautuvo valdymas baigiasi', 'warn', '18 d.'],
          ['hard-hat', 'Apsaugos priemonės', 'Neišduota: apsauginė avalynė S3', 'block', 'privaloma'],
          ['stethoscope', 'Sveikatos patikrinimas', 'Pasibaigė 2026-07-31', 'block', 'negalioja'],
          ['bell', 'Pranešimai', 'SMS išsiųsta darbuotojui ir vadovui', 'ok', '2 d.'],
        ].map(([icon, t, d, tone, v]) => (
          <div key={t} className="erp-dss-empcard-row">
            <span className={`erp-dss-empcard-ic erp-dss-empcard-ic--${tone}`}><i data-lucide={icon}></i></span>
            <div>
              <div className="erp-dss-empcard-rt">{t}</div>
              <div className="erp-dss-empcard-rd">{d}</div>
            </div>
            <span className="erp-dss-empcard-rv">{v}</span>
          </div>
        ))}
      </div>
      <div className="erp-dss-empcard-foot">
        Būsena <code>blocked</code> uždega dvi priežastys: trūksta privalomos AAP ir pasibaigęs sveikatos patikrinimas. Pašalinus abi, būsena persiskaičiuoja iškart.
      </div>
    </div>
  );
}

/* =====================================================
   Telefono maketas (portalas)
   ===================================================== */
function DssPhoneMock() {
  return (
    <div className="erp-dss-phone">
      <div className="erp-dss-phone-screen">
        <div className="erp-dss-phone-top">
          <div className="erp-dss-phone-notch" />
          <div className="erp-dss-phone-user">
            <span className="erp-dss-phone-av">RJ</span>
            <div>
              <div className="erp-dss-phone-name">Rasa Jankauskienė</div>
              <div className="erp-dss-phone-sub">Operatorė · Gamyba</div>
            </div>
          </div>
          <div className="erp-dss-phone-tabs">
            <span className="erp-dss-phone-tab is-active">Užduotys</span>
            <span className="erp-dss-phone-tab">Mokymai</span>
            <span className="erp-dss-phone-tab">AAP</span>
            <span className="erp-dss-phone-tab">Sveikata</span>
          </div>
        </div>
        <div className="erp-dss-phone-body">
          <div className="erp-dss-phone-item">
            <div className="erp-dss-phone-item-top">
              <span className="erp-dss-phone-item-t">Darbo vietos instrukcija DV-14, red. 3</span>
              <span className="erp-dss-phone-chip erp-dss-phone-chip--late">Vėluoja</span>
            </div>
            <div className="erp-dss-phone-item-m">Terminas 2026-08-15 · patvirtinimas paspaudimu</div>
            <span className="erp-dss-phone-btn">Skaityti ir patvirtinti</span>
          </div>
          <div className="erp-dss-phone-item">
            <div className="erp-dss-phone-item-top">
              <span className="erp-dss-phone-item-t">Gaisrinė sauga: žinių patikrinimas</span>
              <span className="erp-dss-phone-chip erp-dss-phone-chip--soon">6 d.</span>
            </div>
            <div className="erp-dss-phone-item-m">Vaizdo įrašas 8 min. · testas 12 klausimų · riba 75 %</div>
            <span className="erp-dss-phone-btn erp-dss-phone-btn--ghost">Peržiūrėti turinį</span>
          </div>
          <div className="erp-dss-phone-item">
            <div className="erp-dss-phone-item-top">
              <span className="erp-dss-phone-item-t">Ausų kištukai SNR 32 dB</span>
              <span className="erp-dss-phone-chip erp-dss-phone-chip--ok">Išduota</span>
            </div>
            <div className="erp-dss-phone-item-m">2026-06-07 · eilinis keitimas po 4 mėn.</div>
          </div>
          <div className="erp-dss-phone-item">
            <div className="erp-dss-phone-item-top">
              <span className="erp-dss-phone-item-t">Periodinis sveikatos patikrinimas</span>
              <span className="erp-dss-phone-chip erp-dss-phone-chip--soon">24 d.</span>
            </div>
            <div className="erp-dss-phone-item-m">Siuntimas 047/a paruoštas · išvada dar negauta</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* =====================================================
   Sričių maketai
   ===================================================== */
function DssAreaMock({ kind }) {
  switch (kind) {
    case 'ack':      return <DssAckMock />;
    case 'training': return <DssTrainingMock />;
    case 'ppe':      return <DssPpeMock />;
    case 'health':   return <DssHealthMock />;
    case 'portal':   return <DssPortalMock />;
    case 'matrix':   return <DssMatrixMock />;
    default:         return <DssAckMock />;
  }
}

/* --- Instruktavimas: patvirtinimų grandinė --- */
function DssAckMock() {
  const rows = [
    ['Vytautas Grigas', 'Įvadinė saugos instrukcija', 'BDR-01 red. 4', '2026-08-18 07:41', '10.20.4.18', 'a91f4c…7b02'],
    ['Rasa Jankauskienė', 'Darbo vietos instrukcija DV-14', 'DV-14 red. 3', '2026-08-17 14:06', '10.20.4.31', '7b02de…c15a'],
    ['Karolis Petraitis', 'Saugus darbas su medienos staklėmis', 'ST-07 red. 2', '2026-08-17 09:22', '10.20.5.02', 'c15a90…44f8'],
    ['Marius Adomaitis', 'Elektrosauga: I kvalifikacinė grupė', 'EL-02 red. 5', '2026-08-14 16:55', '10.20.4.77', '44f8b1…2e6d'],
    ['Olesia Kravec', 'Krautuvo eksploatavimo instrukcija', 'KR-03 red. 1', '2026-08-14 11:10', '10.20.5.19', '2e6d07…9aa3'],
  ];
  return (
    <DssChrome
      active="Instrukcijos"
      actions={<DssActionBar title="Patvirtinimai" paging="1-5 / 3 412 806" chip="Šis mėnuo" />}
    >
      <div className="erp-dss-tbl-wrap">
        <table className="erp-dss-tbl">
          <thead>
            <tr>
              <th>Darbuotojas</th>
              <th>Dokumentas</th>
              <th>Redakcija</th>
              <th>Laiko žyma</th>
              <th>IP adresas</th>
              <th>Grandinės maiša</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(r => (
              <tr key={r[0]}>
                <td className="is-link">{r[0]}</td>
                <td>{r[1]}</td>
                <td><span className="erp-dss-tag erp-dss-tag--blue">{r[2]}</span></td>
                <td className="is-mono">{r[3]}</td>
                <td className="is-mono">{r[4]}</td>
                <td className="is-mono">{r[5]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="erp-dss-note-strip">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
        Nekeičiama lentelė: redagavimo ir šalinimo teisės išjungtos, o kiekvienas įrašas laiko ankstesniojo maišos reikšmę
      </div>
    </DssChrome>
  );
}

/* --- Mokymai: mokymo programų sąrašas --- */
function DssTrainingMock() {
  const rows = [
    ['MOK-01', 'Darbuotojų saugos ir sveikatos mokymai (bendrieji)', '8,00', '70 %', '60', '25', 'Aktyvus'],
    ['MOK-02', 'Priešgaisrinė sauga', '4,00', '60 %', '12', '15', 'Aktyvus'],
    ['MOK-03', 'Saugus darbas su medienos apdirbimo staklėmis', '6,00', '75 %', '36', '3', 'Aktyvus'],
    ['FIRE-SAFE', 'Gaisrinė sauga: praktinis gesinimas', '0,60', '75 %', '12', '2', 'Aktyvus'],
    ['FORKLIFT', 'Krautuvo (šakinio pakrovėjo) vairavimas', '4,00', '75 %', '24', '9', 'Aktyvus'],
    ['ELSAFE-1', 'Elektrosauga: I kvalifikacinė grupė', '2,00', '75 %', '12', '6', 'Juodraštis'],
  ];
  return (
    <DssChrome
      active="Mokymai"
      actions={<DssActionBar title="Mokymo programos" paging="1-6 / 8" />}
    >
      <div className="erp-dss-tbl-wrap">
        <table className="erp-dss-tbl">
          <thead>
            <tr>
              <th>Kodas</th>
              <th>Pavadinimas</th>
              <th className="is-num">Trukmė (val.)</th>
              <th className="is-num">Išlaikymo riba</th>
              <th className="is-num">Galiojimas (mėn.)</th>
              <th className="is-num">Užregistruota</th>
              <th>Būsena</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(r => (
              <tr key={r[0]}>
                <td className="is-mono">{r[0]}</td>
                <td>{r[1]}</td>
                <td className="is-num">{r[2]}</td>
                <td className="is-num">{r[3]}</td>
                <td className="is-num">{r[4]}</td>
                <td className="is-num">{r[5]}</td>
                <td>
                  <span className={`erp-dss-tag ${r[6] === 'Aktyvus' ? 'erp-dss-tag--ok' : 'erp-dss-tag--draft'}`}>{r[6]}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="erp-dss-note-strip">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z" /></svg>
        Programos kortelėje: „Registruoti pagal profilius“ ir „Importuoti testą iš dokumento“
      </div>
    </DssChrome>
  );
}

/* --- AAP: išdavimo dokumentas --- */
function DssPpeMock() {
  return (
    <DssChrome active="Apsaugos priemonės">
      <div className="erp-dss-form">
        <div className="erp-dss-form-status">
          <span className="erp-dss-form-stage">Juodraštis</span>
          <span className="erp-dss-form-stage is-active">Išduota</span>
          <span className="erp-dss-form-stage">Grąžinta</span>
        </div>
        <div className="erp-dss-form-body">
          <h4 className="erp-dss-form-title">AAP/2026/00012</h4>
          <div className="erp-dss-form-fields">
            <div className="erp-dss-form-f"><span className="erp-dss-form-k">Darbuotojas</span><span className="erp-dss-form-v is-link">Vytautas Grigas</span></div>
            <div className="erp-dss-form-f"><span className="erp-dss-form-k">Išdavimo data</span><span className="erp-dss-form-v">2026-06-07</span></div>
            <div className="erp-dss-form-f"><span className="erp-dss-form-k">Pareigos</span><span className="erp-dss-form-v">Vairuotojas-ekspeditorius</span></div>
            <div className="erp-dss-form-f"><span className="erp-dss-form-k">Išdavė</span><span className="erp-dss-form-v">Simona Vaitkutė</span></div>
            <div className="erp-dss-form-f"><span className="erp-dss-form-k">Padalinys</span><span className="erp-dss-form-v">Pirkimai ir logistika</span></div>
            <div className="erp-dss-form-f"><span className="erp-dss-form-k">Pagrindas</span><span className="erp-dss-form-v">Norma NRM-08</span></div>
          </div>
        </div>
        <div className="erp-dss-form-tabs">
          <span className="erp-dss-form-tab is-active">Priemonės</span>
          <span className="erp-dss-form-tab">Pastaba</span>
        </div>
        <div className="erp-dss-tbl-wrap">
          <table className="erp-dss-tbl">
            <thead>
              <tr>
                <th>Priemonė</th>
                <th>Apsaugos klasė</th>
                <th>Dydis</th>
                <th className="is-num">Kiekis</th>
                <th>Išdavimo data</th>
                <th>Tinkamumas iki</th>
                <th>Būsena</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>[AAP-11] Gerai matoma liemenė</td>
                <td>EN ISO 20471, 2 kl.</td>
                <td>Apranga L</td>
                <td className="is-num">1</td>
                <td>2026-06-07</td>
                <td>2027-06-07</td>
                <td><span className="erp-dss-tag erp-dss-tag--issued">Išduota</span></td>
              </tr>
              <tr>
                <td>[AAP-09] Apsauginė avalynė S3</td>
                <td>EN ISO 20345, S3</td>
                <td>Avalynė 41</td>
                <td className="is-num">1</td>
                <td>2026-06-07</td>
                <td>2027-06-07</td>
                <td><span className="erp-dss-tag erp-dss-tag--alert">Grąžinta</span></td>
              </tr>
              <tr>
                <td>[AAP-04] Apsauginės pirštinės, mech. rizika</td>
                <td>EN 388, 4X42B</td>
                <td>Pirštinės 10</td>
                <td className="is-num">2</td>
                <td>2026-06-07</td>
                <td>2026-12-07</td>
                <td><span className="erp-dss-tag erp-dss-tag--warn">Baigiasi</span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="erp-dss-note-strip">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
          Pavadinimas, savybės ir apsaugos klasė — momentinės kopijos: nomenklatūros keitimas šio įrašo neperrašo
        </div>
      </div>
    </DssChrome>
  );
}

/* --- Sveikata: versijuojami periodiškumai --- */
function DssHealthMock() {
  const rows = [
    ['Rizikos veiksnys: triukšmas ≥ 80 dB(A)', '12 mėn.', '2024-01-01', 'SAM Nr. 301, 1 priedas', '047/a', 'Patikrinta'],
    ['Rizikos veiksnys: darbas aukštyje', '12 mėn.', '2024-01-01', 'SAM Nr. 301, 1 priedas', '047/a', 'Patikrinta'],
    ['Profesija: vairuotojas (C, CE)', '24 mėn.', '2025-05-01', 'SAM Nr. 301, 2 priedas', '048/a', 'Patikrinta'],
    ['Rizikos veiksnys: cheminės medžiagos', '12 mėn.', '2025-11-01', 'SAM Nr. 301 (nauja red.)', 'E047', 'Patikrinta'],
    ['Profesija: krautuvo operatorius', '—', '—', 'Nesuvesta', '—', 'Nepatikrinta'],
  ];
  return (
    <DssChrome
      active="Sveikata"
      actions={<DssActionBar title="Patikrinimų periodiškumai" paging="1-5 / 42" chip="Galiojantys" />}
    >
      <div className="erp-dss-tbl-wrap">
        <table className="erp-dss-tbl">
          <thead>
            <tr>
              <th>Pagrindas</th>
              <th>Periodiškumas</th>
              <th>Galioja nuo</th>
              <th>Teisės aktas</th>
              <th>Forma</th>
              <th>Būsena</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(r => (
              <tr key={r[0]}>
                <td>{r[0]}</td>
                <td>{r[1]}</td>
                <td className="is-mono">{r[2]}</td>
                <td>{r[3]}</td>
                <td className="is-mono">{r[4]}</td>
                <td>
                  <span className={`erp-dss-tag ${r[5] === 'Patikrinta' ? 'erp-dss-tag--ok' : 'erp-dss-tag--warn'}`}>{r[5]}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="erp-dss-note-strip">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 8v4M12 16h.01" /></svg>
        Nesuvesto periodiškumo sistema nespėlioja: rodo „Nepatikrinta“, kol nebus eilutės su data ir nuoroda į aktą
      </div>
    </DssChrome>
  );
}

/* --- Portalas: telefono maketas sričių skiltyje --- */
function DssPortalMock() {
  return (
    <div style={{ padding: '8px 0 4px' }}>
      <DssPhoneMock />
    </div>
  );
}

/* --- Ataskaitos: mokymų atitikties matrica --- */
function DssMatrixMock() {
  const programs = ['MOK-01', 'MOK-02', 'FORKLIFT', 'ELSAFE-1', 'FIRE-SAFE'];
  const rows = [
    ['Vytautas Grigas', ['done', 'done', 'req', 'na', 'done']],
    ['Rasa Jankauskienė', ['done', 'done', 'na', 'na', 'req']],
    ['Karolis Petraitis', ['done', 'none', 'done', 'req', 'done']],
    ['Marius Adomaitis', ['done', 'done', 'na', 'done', 'done']],
    ['Olesia Kravec', ['none', 'req', 'done', 'na', 'na']],
    ['Tadas Jurgelevičius', ['done', 'done', 'done', 'na', 'req']],
  ];
  const label = { done: 'Atlikta', req: 'Reikalinga', none: 'Neregistr.', na: '—' };
  return (
    <DssChrome
      active="Ataskaitos"
      actions={<DssActionBar title="Mokymų atitikties matrica" paging="1-6 / 26" chip="Gamyba" views={false} />}
    >
      <div className="erp-dss-tbl-wrap" style={{ padding: '4px 12px 0' }}>
        <table className="erp-dss-matrix">
          <thead>
            <tr>
              <th>Darbuotojas</th>
              {programs.map(p => <th key={p}>{p}</th>)}
            </tr>
          </thead>
          <tbody>
            {rows.map(([name, cells]) => (
              <tr key={name}>
                <td>{name}</td>
                {cells.map((c, i) => (
                  <td key={i}><span className={`erp-dss-cell erp-dss-cell--${c}`}>{label[c]}</span></td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="erp-dss-note-strip">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18" /><path d="M7 15l4-4 3 3 5-6" /></svg>
        Skaičiuojama nuo reikalavimo, todėl matomas ir tas, kuris į privalomą programą apskritai nebuvo registruotas
      </div>
    </DssChrome>
  );
}

window.SafetyPage = SafetyPage;
