// Įrangos priežiūra — Solution page (Maintenance module, built on Odoo)

function MaintenancePage() {
  const url = window.__erp_url;

  const features = [
    { icon: 'boxes',         title: 'Įrangos registras',            desc: 'Vidinė ir išorinė įranga vienoje vietoje — nuo biuro kompiuterių iki gamybos staklių. Kategorijos, vietos, atsakingi asmenys, serijos numeriai.' },
    { icon: 'clipboard-list', title: 'Priežiūros užduotys',          desc: 'Prevencinės, korekcinės ar planuotos patikros — kurkite bet kokio tipo užduotis ir susiekite jas su konkrečia įranga bei atsakingais darbuotojais.' },
    { icon: 'user-check',    title: 'Atsakingų priskyrimas',        desc: 'Priskirkite įrangos savininką arba priežiūros komandą. Pranešimai ir eigos stebėjimas — realiu laiku, be papildomų įrankių.' },
    { icon: 'shield-check',  title: 'Garantijos sekimas',           desc: 'Garantijos pradžios ir pabaigos datos, tiekėjo duomenys, sutarties sąlygos. Sistema įspėja prieš artėjantį garantijos pabaigimą.' },
    { icon: 'paperclip',     title: 'Priedai ir specifikacijos',    desc: 'Prisegkite nuotraukas, techninius dokumentus, instrukcijas, sąskaitas faktūras. Viskas apie įrangą — vienoje kortelėje.' },
    { icon: 'bar-chart-3',   title: 'Statistika ir KPI',            desc: 'MTBF, MTTR, vidutinis remonto laikas, suvestinės ataskaitos. Objektyvūs duomenys sprendimams apie pakeitimą ar priežiūros dažnį.' },
    { icon: 'timer',         title: 'Darbo laiko sekimas',          desc: 'Žymėkite prie kiekvienos užduoties sugaištą laiką. Matysite realią priežiūros sąnaudą pagal įrangą, komandą ar laikotarpį.' },
    { icon: 'file-check-2',  title: 'Patikros dokumentai',          desc: 'Spausdinkite, pasirašykite ir tvirtinkite patikros aktus. Elektroniniai pasirašymai ir PDF generavimas — tiesiogiai iš sistemos.' },
    { icon: 'share-2',       title: 'Dalinimasis su tiekėjais',     desc: 'Siųskite įrangos informaciją išoriniams servisams ir tiekėjams vienu paspaudimu — saugios nuorodos be papildomų prisijungimų.' },
  ];

  return (
    <>
      {/* === HERO === */}
      <section className="erp-pagehead erp-rivile-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>Įrangos priežiūra</span>
            </div>
            <div className="erp-eyebrow">Sprendimai · Mūsų modulis</div>
            <h1>Įrangos priežiūra. <span className="erp-accent">Planuokite, ne gesinkite.</span></h1>
            <p>ERP365 sukurtas modulis, leidžiantis centralizuotai prižiūrėti visą įmonės įrangą — vidinę ir išorinę. Stebėkite garantijas, kurkite užduotis, fiksuokite darbo laiką ir turėkite objektyvius duomenis apie kiekvieną įrenginį.</p>
          </div>
        </div>

        {/* Equipment list mockup — authentic Odoo Enterprise look */}
        <div className="erp-container">
          <EquipmentMockPrieziura />
        </div>
      </section>

      {/* === VALUE STRIP === */}
      <section className="erp-riv-valuestrip">
        <div className="erp-container">
          <div className="erp-riv-valuestrip-grid">
            <div>
              <div className="erp-riv-valuestrip-n">1</div>
              <div className="erp-riv-valuestrip-l">vieta visai įrangos<br/>informacijai saugoti</div>
            </div>
            <div>
              <div className="erp-riv-valuestrip-n">9</div>
              <div className="erp-riv-valuestrip-l">funkcijų grupės<br/>jau realizuota modulyje</div>
            </div>
            <div>
              <div className="erp-riv-valuestrip-n">MTBF<br/>MTTR</div>
              <div className="erp-riv-valuestrip-l">automatiškai skaičiuojami<br/>rodikliai kiekvienai įrangai</div>
            </div>
            <div>
              <div className="erp-riv-valuestrip-n">0</div>
              <div className="erp-riv-valuestrip-l">Excel lentelių<br/>garantijoms ir patikroms</div>
            </div>
          </div>
        </div>
      </section>

      {/* === FUNCTIONALITY GRID === */}
      <section className="erp-section">
        <div className="erp-container">
          <div className="erp-section-head">
            <div className="erp-eyebrow">Ką modulis apima</div>
            <h2 className="erp-section-title">Devynios funkcijų grupės — veikia iš karto.</h2>
            <p className="erp-section-lede">Modulis sukurtas realiems gamybos, paslaugų ir IT padalinių poreikiams. Nuo įrangos kortelės iki patikros akto — viskas sujungta viename sraute, be atskirų Excel ar popierinių dokumentų.</p>
          </div>

          <div className="erp-riv-feat-grid">
            {features.map((f, i) => (
              <div key={f.title} className="erp-riv-feat-card">
                <div className="erp-riv-feat-num">0{i + 1}</div>
                <div className="erp-feature-icon"><i data-lucide={f.icon}></i></div>
                <h3>{f.title}</h3>
                <p>{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* === FLOW DIAGRAM === */}
      <section className="erp-section erp-section-gray">
        <div className="erp-container">
          <div className="erp-section-head erp-section-head-center">
            <div className="erp-eyebrow">Kaip tai veikia</div>
            <h2 className="erp-section-title" style={{marginLeft: 'auto', marginRight: 'auto'}}>Keturi žingsniai — nuo užklausos iki patvirtinto akto.</h2>
          </div>
          <MaintenanceFlow />
        </div>
      </section>

      {/* === REAL INTERFACE: REQUESTS KANBAN === */}
      <section className="erp-section">
        <div className="erp-container">
          <div className="erp-section-head">
            <div className="erp-eyebrow">Kaip atrodo realiai</div>
            <h2 className="erp-section-title">Priežiūros užklausos — vienu žvilgsniu.</h2>
            <p className="erp-section-lede">Kanban vaizdas iš realaus modulio. Užklausos juda per stadijas — nuo „Naujos" iki „Sutaisyta" — su prioritetu, atsakingu technikeriu, susieta įranga ir terminu. Skaičiai stulpelių viršuje rodo, kiek darbų laukia kiekvienoje stadijoje.</p>
          </div>
          <DashboardMockPrieziura />
        </div>
      </section>

      {/* === USE CASES === */}
      <section className="erp-section erp-section-gray">
        <div className="erp-container">
          <div className="erp-section-head">
            <div className="erp-eyebrow">Kam tinka</div>
            <h2 className="erp-section-title">Bet kuriai įmonei, turinčiai įrangą.</h2>
          </div>
          <div className="erp-mnt-cases">
            {[
              { icon: 'factory',   t: 'Gamyba',            d: 'Staklės, linijos, įrankiai, formų priežiūra. Prevencinė priežiūra pagal darbo valandas ar ciklus.' },
              { icon: 'building-2', t: 'Paslaugų įmonės',  d: 'Šaldytuvai, oro kondicionieriai, HVAC sistemos pas klientus. Serviso istorija vienoje vietoje.' },
              { icon: 'monitor',   t: 'IT ir biuras',      d: 'Kompiuteriai, serveriai, spausdintuvai. Garantijos, pakeitimo planas, pranešimai atsakingam.' },
              { icon: 'truck',     t: 'Transportas',       d: 'Automobilių parkas, priekabos, pakrovos įranga. TA ir draudimo terminų sekimas.' },
            ].map(c => (
              <div key={c.t} className="erp-mnt-case">
                <div className="erp-mnt-case-ic"><i data-lucide={c.icon}></i></div>
                <div className="erp-mnt-case-t">{c.t}</div>
                <div className="erp-mnt-case-d">{c.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* === PRICING + REQUIREMENTS === */}
      <section className="erp-section">
        <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 naudojimo mokestis — be ribojimų įrangos ar užduočių kiekiui. Papildomai — standartinis ERP365 mėnesinis mokestis už Odoo licencijas.</p>
              <ul className="erp-riv-price-list">
                <li>Neribotas įrangos vienetų kiekis</li>
                <li>Neribotas priežiūros užduočių skaičius</li>
                <li>Visi 9 funkciniai blokai įtraukti</li>
                <li>Nuolatiniai atnaujinimai ir palaikymas</li>
              </ul>
              <a href="https://appt.link/meet-with-erp365-7L7tGvrg" 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>Odoo licencijos ir modulio aktyvavimas</h3>
              <p>Modulis veikia ant standartinės ERP365 Odoo platformos. Mes sudiegsime, importuosime turimą įrangos sąrašą ir apmokysime komandą — dažniausiai užtenka vienos darbo dienos.</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">Odoo licencijos</div>
                    <div className="erp-riv-req-d">Standartinis ERP365 paketas naudotojams</div>
                  </div>
                </div>
                <div className="erp-riv-req-step">
                  <span className="erp-riv-req-num">2</span>
                  <div>
                    <div className="erp-riv-req-t">Įrangos sąrašas</div>
                    <div className="erp-riv-req-d">Turimus duomenis importuojame iš Excel ar kitų sistemų</div>
                  </div>
                </div>
                <div className="erp-riv-req-step">
                  <span className="erp-riv-req-num">3</span>
                  <div>
                    <div className="erp-riv-req-t">Įrangos priežiūros modulis</div>
                    <div className="erp-riv-req-d">50 €/mėn. · diegimą ir apmokymus atliekame mes</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* === CUSTOMISATION === */}
      <section className="erp-section erp-section-dark erp-riv-customize">
        <div className="erp-container">
          <div className="erp-riv-customize-grid">
            <div>
              <div className="erp-eyebrow erp-eyebrow-picton">Papildomi poreikiai</div>
              <h2 className="erp-section-title" style={{margin: '0 0 18px'}}>Specifinė pramonė? Papildysime.</h2>
              <p style={{font: '400 18px/1.6 var(--erp-font-body)', color: 'var(--erp-maastricht-200)', margin: '0 0 28px', maxWidth: 520}}>
                Modulis apima pagrindinius priežiūros procesus — bet kiekviena pramonė turi savų niuansų. Galime praplėsti funkcionalumą pagal konkretų verslo atvejį: specifines ataskaitas, sąrašus, darbo srautus.
              </p>
              <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
                <a href={url('kontaktai')} className="erp-btn erp-btn-yellow erp-btn-lg">Aptarti atvejį →</a>
                <a href={url('funkcionalumas')} className="erp-btn erp-btn-ghost erp-btn-lg" style={{borderColor: 'rgba(255,255,255,0.2)', color: '#fff'}}>Peržiūrėti modulius</a>
              </div>
            </div>
            <div className="erp-riv-custom-list">
              {[
                ['QR kodų sprendimai', 'Kiekvieno įrenginio QR kodas — nuskaito telefonu, atidaro kortelę, registruoja patikrą vietoje.'],
                ['Mobili programėlė', 'Technikai fiksuoja darbą, fotografuoja ir pasirašo aktus tiesiai iš telefono.'],
                ['Integracijos su IoT', 'Sensorių rodmenys automatiškai paleidžia priežiūros užklausą — be žmogaus įsikišimo.'],
                ['Individualios ataskaitos', 'Pramonei pritaikyti patikros aktai, TA protokolai, atitikties dokumentai.'],
              ].map(([t, d]) => (
                <div key={t} className="erp-riv-custom-item">
                  <span className="erp-riv-custom-dot"></span>
                  <div>
                    <div className="erp-riv-custom-t">{t}</div>
                    <div className="erp-riv-custom-d">{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CTASection
        title="Pabandykime jūsų įrangą."
        lede="30 min. demo. Parodysime, kaip modulis valdo realų įrangos parką — su jūsų pavyzdžiais."
        primary="Išbandyti ERP365 →"
        secondary="Peržiūrėti kainas"
      />
    </>
  );
}

/* =====================================================
   EQUIPMENT MOCKUP — hero (matches DashboardMockPrieziura style)
   ===================================================== */
function EquipmentMockPrieziura() {
  const items = [
    { name: 'Eigos variklis (Buehler ECOMET30 49-10070)', code: 'EC30SM-190381', owner: 'Administrator', icon: 'cog',      reqs: 2, extra: 'avatar' },
    { name: 'Alkotesteris Dräger Alcotest 7000 (Li-ion akumuliatorius)', code: '7000/123', owner: 'Marius', icon: 'activity', reqs: 3, extra: 'upload' },
    { name: 'Eigos variklis NK3700 (Buehler ECOMET30 49-10070)', owner: 'Karolis', icon: 'cog',     reqs: 1 },
    { name: 'Sandėlio lentynos KLP', owner: 'Karolis', icon: 'archive', reqs: 1 },
    { name: 'Izoliacijos varžos matuoklis CAT III 600V', owner: 'Karolis', icon: 'gauge',  reqs: 1 },
    { name: 'Pramoninis analizatorius Siemens ULTRAMAT 23', owner: 'Marius', icon: 'cpu',  reqs: 1 },
    { name: 'Pramoniniai spausdintuvai TSC ML340P-4 coliai', owner: 'Olesia', icon: 'printer', reqs: 1 },
    { name: 'Hidraulinė rankinė pompa 4T YATO', owner: 'Tadas', icon: 'droplet', reqs: 1 },
    { name: 'Makita DHR202Z perforatorius', owner: 'Marius', icon: 'wrench', reqs: 1 },
    { name: 'Graveris-šlifuoklis VTHD05 su aksesuarais', owner: 'Marius', icon: 'wrench', reqs: 1 },
    { name: 'Spaustuvas Okko VG135, ketus, 31 cm x 16.5 cm', owner: 'Karolis', icon: 'wrench', reqs: 1 },
    { name: 'Galvutė šešiakampė 1/4" 14mm BGS-technic', owner: 'Karolis', icon: 'wrench', reqs: 1 },
    { name: 'Dinamometrinis raktas Faster Tools 3369, 480 mm', owner: 'Marius', icon: 'wrench', reqs: 1 },
    { name: 'Dinamometrinis raktas vienpusis iki 800 Nm', owner: 'Tadas', icon: 'wrench', reqs: 1 },
  ];

  const reqCounters = items.map(it => useCounter(it.reqs, { duration: 1400 }));

  const reqLabel = (n) => n === 1 ? 'Užklausa' : 'Užklausos';

  return (
    <div className="erp-odoo erp-prie">
      {/* Top bar */}
      <div className="erp-prie-topbar">
        <div className="erp-prie-topbar-left">
          <span className="erp-prie-app-icon"><img src="assets/odoo-maintenance.svg" alt="" /></span>
          <span className="erp-prie-app-name">Priežiūra</span>
          <span className="erp-prie-nav-link">Valdymo skydelis</span>
          <span className="erp-prie-nav-link">Priežiūra</span>
          <span className="erp-prie-nav-link is-active">Įranga</span>
          <span className="erp-prie-nav-link">Ataskaitos</span>
          <span className="erp-prie-nav-link">Konfigūracija</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">20</span>
          </span>
          <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"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            <span className="erp-prie-badge">8</span>
          </span>
          <svg className="erp-prie-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
          <span className="erp-prie-company">UAB Demonstracija</span>
          <span className="erp-prie-avatar">A</span>
        </div>
      </div>

      {/* Action bar */}
      <div className="erp-prie-actions">
        <div className="erp-prie-actions-left">
          <span className="erp-prie-new">Naujas</span>
          <span className="erp-prie-pagetitle">
            Įranga
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </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>
            <span className="erp-prie-search-chip">
              Vykdoma priežiūra
              <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">
          <span className="erp-prie-paging">1-14 / 14</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>
          <span className="erp-prie-views">
            <span className="is-active" 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 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>
        </div>
      </div>

      {/* Equipment grid */}
      <div className="erp-prie-eqboard">
        {items.map((it, i) => (
          <div key={i} className="erp-prie-eqcard">
            <div className="erp-prie-eqcard-content">
              <div className="erp-prie-eqcard-name">{it.name}</div>
              {it.code && <div className="erp-prie-eqcard-code">{it.code}</div>}
              {it.owner && <div className="erp-prie-eqcard-owner">{it.owner}</div>}
              <span className="erp-prie-eqcard-tag">{reqCounters[i]} {reqLabel(it.reqs)}</span>
            </div>
            <div className="erp-prie-eqcard-side">
              <div className="erp-prie-eqcard-thumb">
                <i data-lucide={it.icon}></i>
              </div>
              <div className="erp-prie-eqcard-icons">
                <svg className="erp-prie-eqcard-clock" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                {it.extra === 'avatar' && <span className="erp-prie-eqcard-av">A</span>}
                {it.extra === 'upload' && (
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#16A34A" strokeWidth="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/></svg>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* === Maintenance flow: 4 steps === */
function MaintenanceFlow() {
  const stages = [
    { title: '1 · Užklausa',   desc: 'Darbuotojas arba sensorius sukuria priežiūros užklausą — su nuotrauka, aprašymu, susieta įranga.',  icon: 'file-plus',     color: '#0080FF', bg: 'var(--erp-freedom-50)' },
    { title: '2 · Planavimas', desc: 'Priskiriamas atsakingas technikas, pasirenkamas prioritetas ir suplanuojamas darbo laikas.',           icon: 'calendar-check', color: '#8B5CF6', bg: '#EDE9FE' },
    { title: '3 · Darbas',     desc: 'Technikas atlieka priežiūrą, fiksuoja sugaištą laiką, naudotas medžiagas ir prideda nuotraukas.',     icon: 'wrench',        color: '#B8860B', bg: 'var(--erp-yellow-50)' },
    { title: '4 · Patikra',    desc: 'Sugeneruojamas patikros aktas, elektroniškai pasirašomas, išsaugomas prie įrangos istorijos.',         icon: 'file-check-2',  color: '#16A34A', bg: '#DCFCE7' },
  ];
  return (
    <div className="erp-riv-flow erp-mnt-flow">
      {stages.map((s, i) => (
        <React.Fragment key={s.title}>
          <div className="erp-riv-flow-step">
            <div className="erp-riv-flow-icon" style={{background: s.bg, color: s.color}}>
              <i data-lucide={s.icon}></i>
            </div>
            <div className="erp-riv-flow-t">{s.title}</div>
            <div className="erp-riv-flow-d">{s.desc}</div>
          </div>
          {i < stages.length - 1 && (
            <div className="erp-riv-flow-arrow">
              <svg width="36" height="20" viewBox="0 0 36 20" fill="none"><path d="M0 10 L30 10 M24 4 L30 10 L24 16" stroke="#0080FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

window.MaintenancePage = MaintenancePage;