// Apie ERP365 — about, mission, timeline, team

function AboutPage() {
  const url = window.__erp_url;
  return (
    <>
      <section className="erp-pagehead">
        <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>Apie ERP365</span>
            </div>
            <div className="erp-eyebrow">Apie ERP365</div>
            <h1>Odoo ERP — kaip nuomos paslauga, su komanda greta.</h1>
            <p>ERP365 yra Odoo ERP nuomos paslauga Lietuvos verslams. Gaunate pasaulinę platformą, mūsų priežiūrą bei 10 metų patirtį ir specializuotus sprendimus — viename mėnesiniame mokestyje, be didelių pradinių investicijų.</p>
          </div>
        </div>
      </section>

      {/* Stack — Ką gaunate */}
      <section className="erp-section">
        <div className="erp-container">
          <div className="erp-section-head erp-section-head-center" style={{textAlign: 'center'}}>
            <div className="erp-eyebrow">Ką gaunate</div>
            <h2 className="erp-section-title erp-section-title-sm" style={{margin: '0 auto 14px'}}>ERP365 — vienas paketas, trys jėgos.</h2>
            <p className="erp-section-lede">Pasaulinė Odoo platforma, mūsų priežiūra ir specializuoti sprendimai — apjungti į vieną nuomos paslaugą.</p>
          </div>
          <StackCake />
        </div>
      </section>

      {/* Benefits — Kodėl nuoma */}
      <section className="erp-section erp-section-gray">
        <div className="erp-container">
          <div className="erp-section-head erp-section-head-center" style={{textAlign: 'center'}}>
            <div className="erp-eyebrow">Naudos</div>
            <h2 className="erp-section-title erp-section-title-sm" style={{margin: '0 auto 14px'}}>Kodėl nuoma vietoj nuosavybės?</h2>
            <p className="erp-section-lede">Vienas mėnesinis mokestis vietoj didelės pradinės investicijos. Vienas tiekėjas vietoj trijų. Viena komanda vietoj išsklaidyto know‑how.</p>
          </div>
          <div className="erp-benefits-grid">
            {[
              ['wallet', 'Be pradinės investicijos', 'Mokate fiksuotą mėnesinį mokestį. Be licencijų pirkimo, be serverių, be CapEx.'],
              ['refresh-cw', 'Atnaujinimai įskaityti', 'Naujos Odoo versijos, saugumo pataisymai, mūsų sprendimų patobulinimai — viskas kainoje.'],
              ['shield-check', 'SLA ir monitoringas', '24/7 sistemos stebėjimas. Reaguojame iki 4 val. Garantuojamas veikimas — sutartyje.'],
              ['map-pin', 'Lokalizuota Lietuvai', 'Rivilės integracija, VMI ataskaitos, lietuvių kalba, lietuvių komanda — paruošta nuo pirmos dienos.'],
              ['trending-up', 'Auga su jumis', 'Pradėkite nuo 5 vartotojų, plėskitės iki 200. Pridėkite modulių, kai prireikia. Be perdiegimų.'],
              ['users', 'Vienas tiekėjas', 'Platforma, priežiūra, sprendimai, mokymai, palaikymas — viskas iš vienų rankų. Ne 5 sutartys, viena.'],
            ].map(([icon, title, desc]) => (
              <div key={title} className="erp-benefit-card">
                <div className="erp-benefit-icon"><i data-lucide={icon}></i></div>
                <h3>{title}</h3>
                <p>{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Mission */}
      <section className="erp-section">
        <div className="erp-container">
          <div className="erp-about-grid">
            <div>
              <div className="erp-eyebrow">Mūsų misija</div>
              <h2 className="erp-section-title erp-section-title-sm">ERP neturi būti brangus ar sudėtingas.</h2>
              <p style={{font: '400 17px/1.65 var(--erp-font-body)', color: 'var(--erp-gray-600)', margin: '0 0 18px'}}>
                10 metų dirbdami su Odoo pamatėme vieną dalyką — dauguma Lietuvos verslų
                netinka tipinis ERP diegimas. Ne todėl, kad jie per maži, o todėl, kad
                taisyklės rinkoje nesąžiningos.
              </p>
              <p style={{font: '400 17px/1.65 var(--erp-font-body)', color: 'var(--erp-gray-600)', margin: 0}}>
                „Susisiekite dėl kainos". 12 mėnesių diegimai. Mokesčiai už kiekvieną pakeitimą.
                Mes kuriame priešingai — skaidru, greitai, ilgalaikei partnerystei.
              </p>
            </div>
            <div className="erp-about-values">
              {[
                ['01', 'Skaidru', 'Konkretus skaičius pirmą pokalbį. Jokio „nuo". Jokio „priklausomai nuo".'],
                ['02', 'Greitai', 'Diegimas per 4–6 savaites, ne metus. Standartinius šablonus naudojame kaip startą.'],
                ['03', 'Partneriškai', 'Mes dirbame 5, 8, 10 metų su tais pačiais klientais. Ne projektas — ryšys.'],
                ['04', 'Praktiškai', 'Ne „teorinis" ERP. Klientai naudoja iš tikrųjų. Komandos taupo laiką.'],
              ].map(([n, t, d]) => (
                <div key={n} className="erp-value-card">
                  <div className="erp-value-num">{n}</div>
                  <h3>{t}</h3>
                  <p>{d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Stats band */}
      <section className="erp-section erp-section-dark" style={{padding: '72px 0'}}>
        <div className="erp-container">
          <div className="erp-stats-grid" style={{color: '#fff'}}>
            {[
              ['180+', 'Lietuvos klientų', 'var(--erp-freedom)'],
              ['10+', 'metų patirties', 'var(--erp-yellow)'],
              ['96%', 'klientų lieka po pirmo kontrakto', 'var(--erp-picton)'],
              ['24', 'darbuotojai — inžinieriai, konsultantai, analitikai', '#fff'],
            ].map(([n, l, c]) => (
              <div key={l}>
                <div className="erp-stat-n" style={{color: c}}>{n}</div>
                <div className="erp-stat-l" style={{color: 'var(--erp-maastricht-200)'}}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="erp-section erp-section-gray">
        <div className="erp-container">
          <div className="erp-about-grid">
            <div>
              <div className="erp-eyebrow">Mūsų kelias</div>
              <h2 className="erp-section-title erp-section-title-sm">Nuo pirmo Odoo diegimo iki SaaS platformos.</h2>
              <p style={{font: '400 16px/1.6 var(--erp-font-body)', color: 'var(--erp-gray-600)', marginTop: 14}}>
                Kiekvienas etapas — tikri klientai, tikri sprendimai. Štai kaip ERP365 tapo tuo, kuo yra dabar.
              </p>
            </div>
            <div className="erp-timeline">
              {[
                ['2015', 'Pradžia Vilniuje', 'Pirmieji trys Odoo diegimai gamybos ir prekybos įmonėms.', false],
                ['2018', '50+ klientų', 'Auga komanda ir patirtis — specializuojamės Odoo ekspertizėje.', false],
                ['2021', 'SaaS modelis', 'Paleidžiame ERP365 — standartizuotą Odoo SaaS Lietuvos rinkai.', true],
                ['2024', '150+ klientų', 'ERP365 tampa populiariausiu Odoo tiekėju Lietuvos SMB segmente.', false],
                ['2026', 'Šiandien', '180+ aktyvių klientų. 24 darbuotojai. Diegimas per 4–6 savaites — standartas.', false],
              ].map(([y, t, d, yellow]) => (
                <div key={y} className="erp-timeline-item">
                  <div className={`erp-timeline-dot ${yellow ? 'erp-timeline-dot-yellow' : ''}`}></div>
                  <div className="erp-timeline-year">{y}</div>
                  <div className="erp-timeline-title">{t}</div>
                  <p>{d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="erp-section">
        <div className="erp-container">
          <div className="erp-section-head erp-section-head-center" style={{textAlign: 'center'}}>
            <div className="erp-eyebrow">Komanda</div>
            <h2 className="erp-section-title erp-section-title-sm" style={{margin: '0 auto 14px'}}>Žmonės, kurie dirba su jūsų ERP.</h2>
            <p className="erp-section-lede">Inžinieriai ir konsultantai su realia verslo patirtimi — ne „call centras".</p>
          </div>
          <div className="erp-team-grid">
            {[
              ['Marius Petraitis', 'CEO · Odoo partneris', 'MP', ''],
              ['Rasa Jankauskienė', 'Projektų vadovė', 'RJ', 'erp-team-photo-2'],
              ['Tomas Bartkus', 'Vyr. inžinierius', 'TB', 'erp-team-photo-3'],
              ['Eglė Kazlauskaitė', 'Apskaitos ekspertė', 'EK', 'erp-team-photo-4'],
              ['Andrius Šimkus', 'Integracijų inžinierius', 'AŠ', 'erp-team-photo-4'],
              ['Giedrė Vaitkutė', 'CRM konsultantė', 'GV', ''],
              ['Rokas Venckus', 'DevOps', 'RV', 'erp-team-photo-3'],
              ['Monika Urbonienė', 'Klientų parama', 'MU', 'erp-team-photo-2'],
            ].map(([n, r, i, c]) => (
              <div key={n} className="erp-team-card">
                <div className={`erp-team-photo ${c}`}>{i}</div>
                <h4 className="erp-team-name">{n}</h4>
                <p className="erp-team-role">{r}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Values / testimonial */}
      <section className="erp-section erp-section-dark" style={{padding: '80px 0'}}>
        <div className="erp-container">
          <div className="erp-testimonial-inner">
            <div className="erp-eyebrow erp-eyebrow-picton">Klientų žodžiai</div>
            <blockquote className="erp-quote">
              „Dirbame kartu nuo 2019. ERP365 komanda žino mūsų verslą geriau nei kai kurie mūsų vadovai. Tai nebe tiekėjas — tai partneris."
            </blockquote>
            <div className="erp-testimonial-author">
              <div className="erp-avatar" style={{background: 'var(--erp-yellow)', color: 'var(--erp-maastricht)'}}>MP</div>
              <div>
                <div className="erp-author-name">Mindaugas Paulauskas</div>
                <div className="erp-author-role">Vadovas · Agroferma LT</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTASection title="Norite pasikalbėti?" lede="30 min. pokalbis su mūsų konsultantu. Parodysim, kaip veikia, atsakysime į klausimus." primary="Užsisakyti pokalbį →" secondary="Peržiūrėti funkcionalumą" />
    </>
  );
}

/* === Stack layers — top-to-bottom render order === */
const STACK_LAYERS = [
  {
    key: 'team',
    title: 'Mūsų priežiūra ir patirtis',
    desc: '24 inžinieriai ir konsultantai. Atnaujinimai, monitoringas, SLA, mokymai. 10 metų patirtis su Odoo Lietuvos rinkoje.',
  },
  {
    key: 'odoo',
    title: 'Odoo — pasaulinė ERP platforma',
    desc: 'Atviro kodo verslo platforma iš Belgijos. Vienoje sistemoje — CRM, pardavimai, atsargos, gamyba, apskaita, projektai.',
    stats: [
      ['15M+', 'vartotojų pasaulyje'],
      ['210K+', 'Enterprise klientų'],
      ['12K+', 'partnerių 120+ šalių'],
      ['€619M', 'apyvarta 2025'],
    ],
  },
  {
    key: 'solutions',
    title: 'Mūsų specializuoti sprendimai',
    desc: 'Lietuvos lokalizacija, Rivilės integracija, įrangos priežiūros modulis, sektoriniai šablonai — paruošta naudoti nuo pirmos dienos.',
  },
];

function StackLayerIcon({ layerKey }) {
  if (layerKey === 'odoo') {
    return (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
        <rect x="3" y="3" width="7" height="7" rx="1.4"/>
        <rect x="14" y="3" width="7" height="7" rx="1.4"/>
        <rect x="3" y="14" width="7" height="7" rx="1.4"/>
        <rect x="14" y="14" width="7" height="7" rx="1.4"/>
      </svg>
    );
  }
  if (layerKey === 'team') return <i data-lucide="users" style={{width: 28, height: 28}}></i>;
  return <i data-lucide="puzzle" style={{width: 28, height: 28}}></i>;
}

function StackCake() {
  return (
    <div className="erp-stack-cake-wrap">
      <div className="erp-stack-cake">
        {STACK_LAYERS.map((l) => (
          <div key={l.key} className={`erp-stack-cake-layer is-${l.key}`}>
            <div className="erp-stack-cake-icon"><StackLayerIcon layerKey={l.key} /></div>
            <div>
              <div className="erp-stack-cake-t">{l.title}</div>
              <div className="erp-stack-cake-d">{l.desc}</div>
              {l.stats && (
                <div className="erp-stack-cake-stats">
                  {l.stats.map(([n, lbl]) => (
                    <div key={lbl} className="erp-stack-cake-stat">
                      <div className="erp-stack-cake-stat-n">{n}</div>
                      <div className="erp-stack-cake-stat-l">{lbl}</div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.AboutPage = AboutPage;