// Funkcionalumas — Odoo Apps mirror, 27 Community modulių 8 kategorijose

function FeaturesPage() {
  const url = window.__erp_url;
  const [active, setActive] = React.useState('visi');

  const cats = [
    { id: 'visi', label: 'Visi' },
    { id: 'finance', label: 'Finansai' },
    { id: 'sales', label: 'Pardavimai' },
    { id: 'supply', label: 'Tiekimas' },
    { id: 'hr', label: 'Žmonės' },
    { id: 'marketing', label: 'Rinkodara' },
    { id: 'services', label: 'Paslaugos' },
    { id: 'productivity', label: 'Produktyvumas' },
  ];

  const sections = [
    {
      id: 'finance', eyebrow: 'Finansai', title: 'Pinigai, kuriuos matote realiu laiku',
      lede: 'Sąskaitos, išlaidos ir dokumentai vienoje vietoje — be Excel lapų ir popierinių aplankų.',
      spotlight: { id: 'invoicing', mock: 'saskaitos' },
      modules: [
        { id: 'invoicing', logo: 'odoo-invoicing.svg', name: 'Sąskaitų valdymas',
          lede: 'Sąskaitų faktūrų išrašymas, siuntimas ir mokėjimų sekimas — su VMI i.SAF integracija.',
          points: ['Sąskaitų faktūrų išrašymas', 'Automatinis siuntimas el. paštu', 'Banko operacijų suvedimas', 'VMI i.SAF/i.VAZ integracija', 'Mokėjimų stebėjimas realiu laiku'] },
        { id: 'expenses', logo: 'odoo-expenses.svg', name: 'Išlaidos',
          lede: 'Darbuotojų išlaidų ataskaitos, kvitų skaitymas ir kompensavimas — be popierinės košės.',
          points: ['Kvitų skenavimas mobiliuoju', 'Išlaidų patvirtinimo srautas', 'Automatinis perkėlimas į apskaitą', 'Daugiavaliutė', 'Komandiruočių paketai'] },
      ],
    },
    {
      id: 'sales', eyebrow: 'Pardavimai', title: 'Nuo pirmo kontakto iki sumokėtos sąskaitos',
      lede: 'CRM, pasiūlymai, užsakymai ir kasos sistema — viename pardavimų sraute.',
      spotlight: { id: 'crm', mock: 'crm' },
      modules: [
        { id: 'crm', logo: 'odoo-crm.svg', name: 'CRM',
          lede: 'Pardavimų piltuvas, klientų istorija ir veiklos sekimas — viskas, kas iki šiol gulėjo Excelʼyje.',
          points: ['Potencialių klientų valdymas', 'Pardavimų piltuvas (Kanban)', 'El. laiškų šablonai', 'Veiklos planavimas ir priminimai', 'Komandos efektyvumo ataskaitos'] },
        { id: 'sales', logo: 'odoo-sales.svg', name: 'Pardavimai',
          lede: 'Pasiūlymų rengimas, užsakymų valdymas ir sąskaitų generavimas iš vienos vietos.',
          points: ['Pasiūlymų generavimas', 'Kainoraščiai pagal klientą', 'Užsakymų patvirtinimas', 'Sąskaitų generavimas vienu paspaudimu', 'Nuolaidų valdymas'] },
      ],
    },
    {
      id: 'supply', eyebrow: 'Tiekimo grandinė', title: 'Atsargos, gamyba ir pirkimai sinchronizuoti',
      lede: 'Vienas šaltinis sandėlio likučiams, gamybos užsakymams ir tiekėjų valdymui.',
      spotlight: { id: 'inventory', mock: 'atsargos' },
      modules: [
        { id: 'inventory', logo: 'odoo-inventory.svg', name: 'Sandėlis',
          lede: 'Atsargų valdymas, brūkšninių kodų skenavimas ir kelių sandėlių logistika — be Excel lapų.',
          points: ['Realaus laiko atsargos', 'Brūkšniniai kodai ir QR', 'Kelių sandėlių valdymas', 'Inventorizacija', 'Partijos ir galiojimo datos'] },
        { id: 'mfg', logo: 'odoo-manufacturing.svg', name: 'Gamyba',
          lede: 'Bazinė gamybos sistema — medžiagų sąrašai (BOM), gamybos užsakymai ir darbo centrai.',
          points: ['Medžiagų sąrašai (BOM)', 'Gamybos užsakymai', 'Darbo centrų valdymas', 'Atsargų rezervavimas', 'Gamybos ataskaitos'] },
        { id: 'purchase', logo: 'odoo-purchase.svg', name: 'Pirkimai',
          lede: 'Tiekėjų užsakymai, kainų palyginimas ir automatinis pirkimas pagal atsargų likutį.',
          points: ['Pirkimo užsakymai (PO)', 'Tiekėjų katalogas', 'Kainų palyginimas', 'Užklausų generavimas (RFQ)', 'Pristatymo terminų sekimas'] },
        { id: 'maintenance', logo: 'odoo-maintenance.svg', name: 'Priežiūra',
          lede: 'Įrangos priežiūros planavimas ir gedimų registravimas — prevencinė ir korektyvinė.',
          points: ['Įrangos kartotekos', 'Prevencinės priežiūros grafikai', 'Gedimų užklausos', 'Kalendoriaus rodinys', 'MTBF ir MTTR statistika'] },
      ],
    },
    {
      id: 'hr', eyebrow: 'Žmogiškieji ištekliai', title: 'Komandos valdymas be popierių',
      lede: 'Darbuotojai, įdarbinimas, atostogos ir transportas — vienoje sistemoje.',
      modules: [
        { id: 'employees', logo: 'odoo-employees.svg', name: 'Darbuotojai',
          lede: 'Darbuotojų kartotekos, organizacinė struktūra ir prieigos teisės vienoje vietoje.',
          points: ['Asmens kartotekos', 'Organizacinė schema', 'Skyriai ir komandos', 'Sutartys ir dokumentai', 'Darbuotojų savitarna'] },
        { id: 'recruitment', logo: 'odoo-recruitment.svg', name: 'Įdarbinimas',
          lede: 'Kandidatų valdymas — nuo skelbimo iki pasirašytos sutarties.',
          points: ['Karjeros puslapis svetainėje', 'Kandidatų piltuvas (Kanban)', 'Pokalbių planavimas', 'Vertinimai ir komentarai', 'Talentų bazė'] },
        { id: 'timeoff', logo: 'odoo-timeoff.svg', name: 'Atostogos',
          lede: 'Atostogų ir nedarbingumo prašymai — su patvirtinimo srautu ir kalendoriaus rodiniu.',
          points: ['Prašymų teikimas', 'Vadovo patvirtinimas', 'Komandos kalendorius', 'Atostogų likučio sekimas', 'Nedarbingumo lapai'] },
        { id: 'fleet', logo: 'odoo-fleet.svg', name: 'Transportas',
          lede: 'Įmonės automobilių parko valdymas — sutartys, draudimas, kuro suvartojimas.',
          points: ['Automobilių kartotekos', 'Lizingo ir draudimo sutartys', 'Kuro ir techninės išlaidos', 'Vairuotojų priskyrimas', 'TA ir KASKO terminai'] },
      ],
    },
    {
      id: 'marketing', eyebrow: 'Rinkodara', title: 'Pasiekite klientus per visus kanalus',
      lede: 'El. paštas, SMS, renginiai ir apklausos — segmentuoti tiesiai iš jūsų CRM.',
      modules: [
        { id: 'mass_mailing', logo: 'odoo-email-marketing.svg', name: 'El. pašto rinkodara',
          lede: 'El. pašto kampanijos su drag-and-drop redaktoriumi ir kontaktų segmentavimu.',
          points: ['Vizualus laiškų redaktorius', 'Segmentai ir filtrai', 'A/B testavimas', 'Atidarymų ir paspaudimų statistika', 'Atsisakymo valdymas'] },
        { id: 'sms', logo: 'odoo-sms-marketing.svg', name: 'SMS rinkodara',
          lede: 'SMS žinučių siuntimas tiksliniam klientų segmentui — su pristatymo ataskaitomis.',
          points: ['Masinis SMS siuntimas', 'Šablonai ir kintamieji', 'Pristatymo ataskaitos', 'Segmentavimas pagal CRM', 'Atsisakymo nuoroda'] },
        { id: 'events', logo: 'odoo-events.svg', name: 'Renginiai',
          lede: 'Renginių registracija ir bilietų pardavimas — su QR kodais įėjimo kontrolei.',
          points: ['Renginio puslapis svetainėje', 'Bilietų pardavimas', 'QR kodų registracija', 'Pranešėjų agendos', 'Lankytojų atsiliepimai'] },
        { id: 'surveys', logo: 'odoo-surveys.svg', name: 'Apklausos',
          lede: 'Klientų ir darbuotojų apklausos — su sąlyginiais klausimais ir realaus laiko ataskaitomis.',
          points: ['Vizualus klausimų konstruktorius', 'Sąlyginiai klausimai', 'Žinių patikrinimo testai', 'Statistika ir grafikai', 'Anonimiškos arba personalizuotos'] },
      ],
    },
    {
      id: 'services', eyebrow: 'Paslaugos', title: 'Projektai ir laikas vienoje vietoje',
      lede: 'Užduotys, terminai ir laiko apskaita — be atskirų įrankių komandai ir buhalterijai.',
      spotlight: { id: 'project', mock: 'projektai' },
      modules: [
        { id: 'project', logo: 'odoo-project.svg', name: 'Projektai',
          lede: 'Užduotys, terminai ir komandos darbo krūvis. Kanban, Gantt ir sąrašo rodiniai.',
          points: ['Kanban, sąrašo ir Gantt rodiniai', 'Užduočių priklausomybės', 'Tarpiniai etapai', 'Diskusijos užduotyje', 'Projektų šablonai'] },
        { id: 'timesheet', logo: 'odoo-timesheets.svg', name: 'Darbo laikas',
          lede: 'Laiko apskaita projektuose ir užduotyse — su mobiliąja aplikacija ir savaitės rodiniu.',
          points: ['Laiko įrašymas pagal projektą', 'Savaitės rodinys', 'Apvalinimo taisyklės', 'Klientų sąskaitų generavimas', 'Vadovo patvirtinimas'] },
        { id: 'field_service', logo: 'odoo-field-service.svg', name: 'Lauko darbai',
          lede: 'Vietos paslaugų komanda — užduotys, maršrutai ir parašai vienoje mobiliojoje aplikacijoje.',
          points: ['Užduočių planavimas (Kanban, Gantt, kalendorius)', 'Žemėlapio rodinys ir maršrutų optimizavimas', 'Mobilioji aplikacija su laiko apskaita', 'Kliento parašas tiesiog vietoje', 'Sąskaitos ir atsarginių dalių registravimas po vizito'] },
      ],
    },
    {
      id: 'productivity', eyebrow: 'Produktyvumas', title: 'Vidinė komunikacija',
      lede: 'Komandos pokalbiai ir žinučių srautas — be papildomų įrankių licencijų.',
      modules: [
        { id: 'discuss', logo: 'odoo-discuss.svg', name: 'Komunikacija',
          lede: 'Vidinė įmonės komunikacija — pokalbių kanalai, žinutės ir failų dalinimasis.',
          points: ['Komandos kanalai', 'Asmeninės žinutės', 'Failų dalinimasis', '@paminėjimai ir pranešimai', 'Integracija su el. paštu'] },
      ],
    },
  ];

  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>Funkcionalumas</span>
            </div>
            <div className="erp-eyebrow">Funkcionalumas</div>
            <h1>Vienas ERP, kuris apima visą jūsų verslą.</h1>
            <p>20 Odoo modulių, sukurti vienas su kitu dirbti. Pasirenkate, ką naudojate — visada galite pridėti daugiau.</p>
          </div>
          <div className="erp-modnav">
            {cats.map(c => (
              <button key={c.id} className={`erp-modnav-pill ${active === c.id ? 'is-active' : ''}`} onClick={() => setActive(c.id)}>
                {c.label}
              </button>
            ))}
          </div>
        </div>
      </section>

      {sections.map(sec => {
        const visible = active === 'visi' || active === sec.id;
        const spotlightMod = sec.spotlight ? sec.modules.find(m => m.id === sec.spotlight.id) : null;
        const restMods = spotlightMod ? sec.modules.filter(m => m.id !== sec.spotlight.id) : sec.modules;
        return (
          <section key={sec.id} id={sec.id} className={`erp-modcat ${visible ? '' : 'is-hidden'}`}>
            <div className="erp-container">
              <div className="erp-section-head">
                <div className="erp-eyebrow">{sec.eyebrow}</div>
                <h2 className="erp-section-title">{sec.title}</h2>
                <p className="erp-section-lede">{sec.lede}</p>
              </div>

              {spotlightMod && (
                <div className="erp-modcat-spotlight">
                  <div className="erp-modblock-grid">
                    <div className="erp-modblock-copy">
                      <img src={`assets/${spotlightMod.logo}`} alt="" style={{width: 48, height: 48, marginBottom: 18}} />
                      <h2>{spotlightMod.name}</h2>
                      <p>{spotlightMod.lede}</p>
                      <ul className="erp-modblock-list">
                        {spotlightMod.points.map(p => <li key={p}>{p}</li>)}
                      </ul>
                    </div>
                    <div>
                      <MockVariant kind={sec.spotlight.mock} />
                    </div>
                  </div>
                </div>
              )}

              <div className="erp-modcard-grid">
                {restMods.map(m => (
                  <article key={m.id} className="erp-modcard">
                    <img src={`assets/${m.logo}`} className="erp-modcard-logo" alt="" />
                    <h3 className="erp-modcard-title">{m.name}</h3>
                    <p className="erp-modcard-lede">{m.lede}</p>
                    <ul className="erp-modcard-list">
                      {m.points.map(p => <li key={p}>{p}</li>)}
                    </ul>
                  </article>
                ))}
              </div>
            </div>
          </section>
        );
      })}

      <CTASection title="Trūksta modulio?" lede="Odoo turi 100+ modulių. Pasakysime, kurie tinka jūsų atvejui." primary="Aptarti su mumis →" secondary="Peržiūrėti kainas" />
    </>
  );
}

function MockVariant({ kind }) {
  if (kind === 'invoices') return <MockInvoices />;
  if (kind === 'saskaitos') return <DashboardMockSaskaitos />;
  if (kind === 'atsargos') return <DashboardMockAtsargos />;
  if (kind === 'crm') return <DashboardMock />;
  if (kind === 'warehouse') return <MockWarehouse />;
  if (kind === 'kanban') return <MockKanban />;
  if (kind === 'projektai') return <DashboardMockProjektai />;
  if (kind === 'gantt') return <MockGantt />;
  if (kind === 'hr') return <MockHR />;
  if (kind === 'shop') return <MockShop />;
  if (kind === 'mfg') return <MockMfg />;
  if (kind === 'reports') return <MockReports />;
  return <DashboardMock />;
}

window.FeaturesPage = FeaturesPage;