// Rivilė integracija — Solution page

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

  const features = [
    { icon: 'users', title: 'Kontaktų sinchronizacija', desc: 'Sukurtų Odoo kontaktų siuntimas į Rivilę su visais būtinais laukais — klientų, tiekėjų ir partnerių duomenys visada sutampa.' },
    { icon: 'package', title: 'Prekių kortelės', desc: 'Prekių kortelės iš Odoo perkeliamos į Rivilę su visais privalomais laukais. Vieną kartą sukūrę — turite abiejose sistemose.' },
    { icon: 'shopping-cart', title: 'Pirkimo ir pardavimo užsakymai', desc: 'Abiejų krypčių užsakymai automatiškai perduodami į Rivilę. Nebereikia dvigubo įvedimo — viskas atsiranda ten, kur reikia.' },
    { icon: 'lock', title: 'Prekių rezervavimas', desc: 'Pardavimo užsakymo prekės automatiškai rezervuojamos Rivilėje — likučiai atspindi realią situaciją, be rankinio derinimo.' },
    { icon: 'file-text', title: 'Sąskaitos faktūros', desc: 'Odoo išrašytos sąskaitos faktūros perkeliamos į Rivilę — apskaita vyksta toliau kaip įprasta, be atskiro dokumento suvedimo.' },
    { icon: 'arrow-left-right', title: 'Vidiniai perkėlimai', desc: 'Tarp sandėlių ar padalinių vykdomos vidinių perkėlimų operacijos perduodamos ir registruojamos Rivilėje automatiškai.' },
    { icon: 'factory', title: 'Gamybos operacijos', desc: 'Gamybos užsakymų registracija Rivilėje — nuo medžiagų nurašymo iki pagamintų produktų pajamavimo.' },
    { icon: 'trash-2', title: 'Prekių nurašymai', desc: 'Nurašymo operacijos iš Odoo perduodamos į Rivilę, kad atsargos ir apskaita visada būtų sinchronizuotos.' },
  ];

  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>Rivilė integracija</span>
            </div>
            <div className="erp-eyebrow">Sprendimai · Integracija</div>
            <h1>Odoo <span className="erp-accent">↔</span> Rivilė. Be rankinio duomenų vedimo.</h1>
            <p>Įmonėms, naudojančioms Rivilės apskaitos sistemą — praplėskite funkcionalumą su mūsų Odoo ⇄ Rivilės integracija per Rivilės API. Komanda dirba modernioje aplinkoje, o visi būtini dokumentai ir duomenys keliauja į Rivilę automatiškai.</p>
          </div>
        </div>

        {/* Integration diagram */}
        <div className="erp-container">
          <IntegrationDiagram />
        </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">100%</div>
              <div className="erp-riv-valuestrip-l">dokumentų perduodama<br/>automatiškai</div>
            </div>
            <div>
              <div className="erp-riv-valuestrip-n">0</div>
              <div className="erp-riv-valuestrip-l">rankinių<br/>pakartotinių įvedimų</div>
            </div>
            <div>
              <div className="erp-riv-valuestrip-n">8</div>
              <div className="erp-riv-valuestrip-l">operacijų tipų<br/>jau realizuota</div>
            </div>
            <div>
              <div className="erp-riv-valuestrip-n">API</div>
              <div className="erp-riv-valuestrip-l">jungtis per oficialų<br/>Rivilė REST API</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ą esame realizavę</div>
            <h2 className="erp-section-title">Aštuonios operacijų grupės — veikia iš karto.</h2>
            <p className="erp-section-lede">Sukurta integracija jau šiuo metu apima visas pagrindines kasdienes operacijas. Esant poreikiui — papildome pagal konkretaus kliento atvejį.</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'}}>Du žingsniai — nuo Odoo dokumento iki Rivilės įrašo.</h2>
          </div>
          <DataFlow />
        </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">100 €</span>
                <span className="erp-riv-price-u">/ mėn.</span>
              </div>
              <p className="erp-riv-price-desc">Mėnesinis integracijos modulio naudojimo mokestis. Papildomai — standartinis ERP365 mėnesinis mokestis už Odoo licencijas.</p>
              <ul className="erp-riv-price-list">
                <li>8 operacijų grupės jau realizuotos</li>
                <li>Nuolatiniai atnaujinimai ir palaikymas</li>
                <li>Dvikryptis duomenų perdavimas</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>Rivilė API licencija</h3>
              <p>Norint naudoti integraciją, reikia įsigyti Rivilė API tiesiai iš Rivilės. Tai yra atskiras, vienkartinis įsigijimas iš Rivilės — mes padėsime su konfigūracija ir sujungimu.</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">Rivilė API</div>
                    <div className="erp-riv-req-d">Įsigyjama tiesiogiai iš Rivilės</div>
                  </div>
                </div>
                <div className="erp-riv-req-step">
                  <span className="erp-riv-req-num">2</span>
                  <div>
                    <div className="erp-riv-req-t">Odoo licencijos</div>
                    <div className="erp-riv-req-d">Standartinis ERP365 paketas</div>
                  </div>
                </div>
                <div className="erp-riv-req-step">
                  <span className="erp-riv-req-num">3</span>
                  <div>
                    <div className="erp-riv-req-t">Integracijos modulis</div>
                    <div className="erp-riv-req-d">100 €/mėn. · diegimą atliekame mes</div>
                  </div>
                </div>
              </div>

              <a href="https://gidas.rivile.lt/internetiniai_moduliai/api_rest" target="_blank" rel="noopener" className="erp-riv-doclink">
                <i data-lucide="book-open" style={{width: 16, height: 16}}></i>
                <span>Rivilės API dokumentacija</span>
                <i data-lucide="external-link" style={{width: 14, height: 14}}></i>
              </a>
            </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'}}>Reikia daugiau? Patobulinsime.</h2>
              <p style={{font: '400 18px/1.6 var(--erp-font-body)', color: 'var(--erp-maastricht-200)', margin: '0 0 28px', maxWidth: 520}}>
                Sukurta integracija jau apima visų pagrindinių operacijų perdavimą. Tačiau galime praplėsti funkcionalumą pagal konkretaus kliento poreikius — papildomi laukai, specifinės operacijos, individualūs darbo srautai.
              </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">
              {[
                ['Papildomi duomenų laukai', 'Bet kurio Odoo objekto papildomų laukų sinchronizacija su Rivile.'],
                ['Specifinės operacijos', 'Klientui būdingų dokumentų tipų perdavimas, jei esami netinka.'],
                ['Individualios taisyklės', 'Sudėtinga verslo logika — kada, ką ir kaip siųsti į Rivilę.'],
                ['Ataskaitos ir stebėsena', 'Perdavimų žurnalai, klaidų pranešimai, sinchronizacijos būsena.'],
              ].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="Integruokime su Rivile."
        lede="30 min. demo. Parodysime, kaip Odoo dokumentai atsiranda Rivilėje realiu laiku."
        primary="Išbandyti ERP365 →"
        secondary="Peržiūrėti kainas"
      />
    </>
  );
}

/* === Integration diagram: Odoo ⇄ Rivilė === */
function IntegrationDiagram() {
  return (
    <div className="erp-riv-diagram">
      <div className="erp-riv-diagram-inner">
        <div className="erp-riv-sys erp-riv-sys-odoo">
          <div className="erp-riv-sys-head">
            <div className="erp-riv-sys-logo erp-riv-sys-logo-odoo">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
            </div>
            <div>
              <div className="erp-riv-sys-t">Odoo · ERP365</div>
              <div className="erp-riv-sys-s">Darbo aplinka</div>
            </div>
          </div>
          <ul className="erp-riv-sys-list">
            <li><span className="erp-riv-sys-dot"></span>Pardavimai ir CRM</li>
            <li><span className="erp-riv-sys-dot"></span>Pirkimai ir sandėlis</li>
            <li><span className="erp-riv-sys-dot"></span>Gamyba ir projektai</li>
            <li><span className="erp-riv-sys-dot"></span>Kontaktai ir prekės</li>
          </ul>
        </div>

        <div className="erp-riv-bridge">
          <div className="erp-riv-bridge-label">Rivilė REST API</div>
          <svg className="erp-riv-bridge-svg" viewBox="0 0 320 120" preserveAspectRatio="none">
            <defs>
              <linearGradient id="rivFlowRight" x1="0" x2="1" y1="0" y2="0">
                <stop offset="0" stopColor="#0080FF" stopOpacity="0"/>
                <stop offset="0.5" stopColor="#0080FF" stopOpacity="1"/>
                <stop offset="1" stopColor="#0080FF" stopOpacity="0"/>
              </linearGradient>
              <linearGradient id="rivFlowLeft" x1="1" x2="0" y1="0" y2="0">
                <stop offset="0" stopColor="#FFD143" stopOpacity="0"/>
                <stop offset="0.5" stopColor="#FFD143" stopOpacity="1"/>
                <stop offset="1" stopColor="#FFD143" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d="M 10 40 L 310 40" stroke="url(#rivFlowRight)" strokeWidth="2" fill="none" strokeDasharray="6 6">
              <animate attributeName="stroke-dashoffset" from="0" to="-24" dur="1.1s" repeatCount="indefinite"/>
            </path>
            <path d="M 310 80 L 10 80" stroke="url(#rivFlowLeft)" strokeWidth="2" fill="none" strokeDasharray="6 6">
              <animate attributeName="stroke-dashoffset" from="0" to="24" dur="1.4s" repeatCount="indefinite"/>
            </path>
            {/* arrowheads */}
            <polygon points="310,40 300,35 300,45" fill="#0080FF"/>
            <polygon points="10,80 20,75 20,85" fill="#FFD143"/>
          </svg>
          <div className="erp-riv-bridge-legend">
            <span><span className="erp-riv-legend-swatch" style={{background: '#0080FF'}}></span>Dokumentai → Rivilė</span>
            <span><span className="erp-riv-legend-swatch" style={{background: '#FFD143'}}></span>Būsenos ← Rivilė</span>
          </div>
        </div>

        <div className="erp-riv-sys erp-riv-sys-rivile">
          <div className="erp-riv-sys-head">
            <div className="erp-riv-sys-logo erp-riv-sys-logo-rivile">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#022C4A" strokeWidth="2.5" strokeLinecap="round"><path d="M4 22V4h10l6 6v12"/><path d="M14 4v6h6"/><path d="M8 14h8M8 18h5"/></svg>
            </div>
            <div>
              <div className="erp-riv-sys-t">Rivilė</div>
              <div className="erp-riv-sys-s">Apskaita</div>
            </div>
          </div>
          <ul className="erp-riv-sys-list">
            <li><span className="erp-riv-sys-dot"></span>Finansinė apskaita</li>
            <li><span className="erp-riv-sys-dot"></span>PVM ir deklaracijos</li>
            <li><span className="erp-riv-sys-dot"></span>DK ir operacijos</li>
            <li><span className="erp-riv-sys-dot"></span>Ataskaitos buhalteriui</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

/* === Data flow: document journey === */
function DataFlow() {
  const stages = [
    { title: '1 · Odoo', desc: 'Vartotojas sukuria dokumentą — pvz. pardavimo užsakymą, sąskaitą faktūrą arba gamybos operaciją.', icon: 'edit-3', color: '#0080FF', bg: 'var(--erp-freedom-50)' },
    { title: '2 · API', desc: 'Integracija pakviečia Rivilės REST API su visais privalomais laukais — be rankinio įvedimo.', icon: 'zap', color: '#B8860B', bg: 'var(--erp-yellow-50)' },
    { title: '3 · Rivilė', desc: 'Dokumentas registruojamas Rivilėje. Apskaitininkas mato duomenis tame pačiame kontekste, kaip visada.', icon: 'check-circle-2', color: '#16A34A', bg: '#DCFCE7' },
  ];
  return (
    <div className="erp-riv-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.RivilePage = RivilePage;