// Blogas — blog index with featured + grid + topics

function BlogPage() {
  const [topic, setTopic] = React.useState('visos');
  const url = window.__erp_url;

  const topics = ['visos', 'ERP diegimas', 'Odoo', 'Integracijos', 'Priežiūra', 'Verslo augimas'];

  const featured = {
    slug: 'erp-mazam-vidutiniam-verslui',
    tag: 'ERP diegimas',
    title: 'ERP sistema mažam ir vidutiniam verslui Lietuvoje: nuo ko pradėti',
    excerpt: 'Praktinis žvilgsnis, kaip Lietuvos mažos ir vidutinės įmonės pradeda diegti ERP — nuo ko pradėti ir ko tikėtis.',
    date: '2026 m. birželio 8',
    readTime: '7 min. skaitinys',
    thumb: 'rocket',
  };

  const posts = [
    { slug: 'kastu-taupymas', tag: 'Verslo augimas', title: 'Kaštų taupymas apjungiant procesus vienoje sistemoje', excerpt: 'Atskiras CRM, priežiūros programa, apskaita — kiekviena kainuoja licencijas, integracijas ir mokymus. Kiek sutaupoma sujungus visa tai į vieną ERP365 (Odoo) sistemą.', date: 'Birželio 10', readTime: '7 min.', thumb: 'chart' },
    { slug: 'matavimo-prietaisu-prieziura', tag: 'Priežiūra', title: 'Matavimo prietaisų priežiūra ir kalibravimas: skaitmenizacija prasideda nuo kontrolės', excerpt: 'Gamyboje, laboratorijose ir energetikoje matavimo prietaisų tikslumas lemia kokybę, saugumą ir atitiktį. Kaip suvaldyti kalibravimą ir patikras vienoje sistemoje.', date: 'Birželio 8', readTime: '6 min.', thumb: 'gauge' },
    { slug: '5-zenklai-reikia-erp', tag: 'Verslo augimas', title: '5 ženklai, kad jūsų verslui jau reikia ERP sistemos', excerpt: 'Kaip suprasti, kad Excel ir atskirų programų nebepakanka. Penki aiškūs ženklai — ir ką daryti toliau.', date: 'Birželio 5', readTime: '5 min.', thumb: 'alert' },
    { slug: 'erp365-crm', tag: 'Odoo', title: 'ERP365 (Odoo) CRM: kaip nepamesti nė vieno užsakymo', excerpt: 'Kiekviena prarasta užklausa — prarasti pinigai, kuriuos jau sumokėjote. Kaip CRM padaro, kad nė viena galimybė neiškristų pro tinklą.', date: 'Birželio 3', readTime: '6 min.', thumb: 'crm' },
    { slug: 'rivile-erp365', tag: 'Integracijos', title: 'Rivilė + ERP365 (Odoo): kaip dirbti moderniai neprarandant apskaitos', excerpt: 'Palikite Rivilę apskaitai, o kasdienį darbą perkelkite į ERP365 (Odoo). Dokumentai keliauja automatiškai — be dvigubo įvedimo.', date: 'Gegužės 30', readTime: '7 min.', thumb: 'refresh' },
    { slug: 'diegimo-eiga', tag: 'ERP diegimas', title: 'ERP365 (Odoo) diegimo eiga: ko tikėtis žingsnis po žingsnio', excerpt: 'Diegimas nebūtinai trunka metus. Štai etapinis kelias, duodantis pirmuosius rezultatus per kelias savaites.', date: 'Gegužės 27', readTime: '8 min.', thumb: 'steps' },
    { slug: 'ataskaitos-analitika', tag: 'Odoo', title: 'Ataskaitos ir verslo analitika realiu laiku su ERP365 (Odoo)', excerpt: 'Sprendimai pagal šiandienos, ne praėjusio mėnesio duomenis. Kaip realaus laiko analitika keičia valdymą.', date: 'Gegužės 22', readTime: '6 min.', thumb: 'chart' },
    { slug: 'kas-yra-cmms', tag: 'Priežiūra', title: 'Kas yra CMMS sistema ir kuo ji skiriasi nuo įprasto priežiūros žurnalo', excerpt: 'CMMS — įrangos priežiūros valdymo sistema. Kuo ji geresnė už Excel ar popierinį žurnalą ir kada jos prireikia.', date: 'Gegužės 19', readTime: '6 min.', thumb: 'gauge' },
    { slug: 'irangos-prieziura', tag: 'Priežiūra', title: 'Įrangos priežiūros valdymas su ERP365 (Odoo): nuo gedimo iki užbaigto darbo', excerpt: 'Visa priežiūra viename sraute — nuo užklausos su nuotrauka iki pasirašyto patikros akto. Mažiau prastovų, daugiau veikiančios įrangos.', date: 'Gegužės 15', readTime: '7 min.', thumb: 'wrench' },
  ];

  const allForTopic = [featured, ...posts];
  const filtered = topic === 'visos' ? posts : allForTopic.filter(p => p.tag === topic);

  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>Blogas</span>
            </div>
            <div className="erp-eyebrow">Blogas</div>
            <h1>ERP, Odoo ir verslo valdymas — konkrečiai ir dalykiškai.</h1>
            <p>Praktiniai gidai apie ERP365 (Odoo), integracijas ir įrangos priežiūrą. Rašome tik apie tai, kas iš tikrųjų veikia.</p>
          </div>
        </div>
      </section>

      {/* Topics */}
      <section style={{padding: '32px 0', borderBottom: '1px solid var(--erp-gray-100)'}}>
        <div className="erp-container">
          <div className="erp-blog-topics">
            {topics.map(t => (
              <button key={t} className={`erp-blog-topic ${topic === t ? 'is-active' : ''}`} onClick={() => setTopic(t)}>
                {t === 'visos' ? 'Visos temos' : t}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Featured */}
      {topic === 'visos' && (
        <section className="erp-section" style={{paddingTop: 72, paddingBottom: 0}}>
          <div className="erp-container">
            <div className="erp-blog-featured">
              <a href={`/blogas/${featured.slug}`} className="erp-blog-thumb" style={{aspectRatio: '16/11', display: 'block'}}>
                <img className="erp-blog-thumb-img" src={`/assets/blog/${featured.slug}.jpg`} alt="" />
              </a>
              <div>
                <div className="erp-blog-meta">
                  <span className="erp-blog-tag">{featured.tag}</span>
                  <span>{featured.date}</span>
                  <span>·</span>
                  <span>{featured.readTime}</span>
                </div>
                <h2 className="erp-blog-title-lg">
                  <a href={`/blogas/${featured.slug}`}>{featured.title}</a>
                </h2>
                <p className="erp-blog-excerpt">{featured.excerpt}</p>
                <a href={`/blogas/${featured.slug}`} className="erp-post-related-link">Skaityti straipsnį →</a>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Grid */}
      <section className="erp-section" style={{paddingTop: topic === 'visos' ? 0 : 48}}>
        <div className="erp-container">
          {topic === 'visos' && (
            <div style={{marginBottom: 36}}>
              <div className="erp-eyebrow">Naujausi straipsniai</div>
              <h2 className="erp-section-title erp-section-title-sm">Skaitykite toliau.</h2>
            </div>
          )}
          <div className="erp-blog-grid">
            {filtered.map((p, i) => (
              <a key={p.slug} href={`/blogas/${p.slug}`} className="erp-blog-card" style={{display: 'block', textDecoration: 'none', color: 'inherit'}}>
                <div className="erp-blog-thumb" style={{marginBottom: 18}}>
                  <img className="erp-blog-thumb-img" src={`/assets/blog/${p.slug}.jpg`} alt="" />
                </div>
                <div className="erp-blog-meta">
                  <span className="erp-blog-tag">{p.tag}</span>
                  <span>{p.date}</span>
                </div>
                <h3>{p.title}</h3>
                <p>{p.excerpt}</p>
                <div style={{marginTop: 14, font: '500 12px/1 var(--erp-font-body)', color: 'var(--erp-gray-500)'}}>
                  {p.readTime}
                </div>
              </a>
            ))}
          </div>
          {filtered.length === 0 && (
            <div style={{textAlign: 'center', padding: '60px 0', color: 'var(--erp-gray-500)'}}>
              Kol kas straipsnių šioje temoje nėra.
            </div>
          )}
        </div>
      </section>

      <CTASection />
    </>
  );
}

function BlogThumbIcon({ kind }) {
  return (
    <svg viewBox="0 0 100 100" fill="none" stroke="rgba(255,255,255,0.95)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{position: 'relative'}}>
      {kind === 'warehouse' && <><rect x="20" y="30" width="60" height="45" rx="2"/><path d="M20 45h60M40 30v45M60 30v45"/></>}
      {kind === 'alert' && <><path d="M50 25 L78 70 L22 70 Z"/><path d="M50 42v14M50 63v2"/></>}
      {kind === 'calc' && <><rect x="28" y="22" width="44" height="56" rx="4"/><rect x="34" y="28" width="32" height="10"/><circle cx="40" cy="50" r="2" fill="currentColor"/><circle cx="50" cy="50" r="2" fill="currentColor"/><circle cx="60" cy="50" r="2" fill="currentColor"/><circle cx="40" cy="62" r="2" fill="currentColor"/><circle cx="50" cy="62" r="2" fill="currentColor"/><circle cx="60" cy="62" r="2" fill="currentColor"/></>}
      {kind === 'rocket' && <><path d="M50 20 C60 30, 65 45, 60 60 L40 60 C35 45, 40 30, 50 20Z"/><path d="M40 60 L32 75 L42 70M60 60 L68 75 L58 70"/><circle cx="50" cy="40" r="4"/></>}
      {kind === 'chart' && <><path d="M20 70 L35 50 L50 58 L65 35 L80 42"/><circle cx="35" cy="50" r="3"/><circle cx="50" cy="58" r="3"/><circle cx="65" cy="35" r="3"/><circle cx="80" cy="42" r="3"/></>}
      {kind === 'store' && <><path d="M22 38 L28 25 L72 25 L78 38 Z"/><rect x="26" y="38" width="48" height="40"/><rect x="42" y="52" width="16" height="26"/></>}
      {kind === 'database' && <><ellipse cx="50" cy="30" rx="22" ry="7"/><path d="M28 30 L28 70 C28 74, 38 77, 50 77 C62 77, 72 74, 72 70 L72 30"/><path d="M28 48 C28 52, 38 55, 50 55 C62 55, 72 52, 72 48"/></>}
      {kind === 'crm' && <><rect x="22" y="26" width="16" height="48" rx="2"/><rect x="44" y="26" width="16" height="34" rx="2"/><rect x="66" y="26" width="16" height="22" rx="2"/></>}
      {kind === 'refresh' && <><path d="M28 38 A24 24 0 0 1 72 34"/><path d="M72 22v14H58"/><path d="M72 62 A24 24 0 0 1 28 66"/><path d="M28 78V64h14"/></>}
      {kind === 'steps' && <><path d="M24 72h14V58h14V44h14V30h10"/><circle cx="31" cy="72" r="2.5" fill="currentColor"/><circle cx="45" cy="58" r="2.5" fill="currentColor"/><circle cx="59" cy="44" r="2.5" fill="currentColor"/><circle cx="73" cy="30" r="2.5" fill="currentColor"/></>}
      {kind === 'wrench' && <><path d="M66 28 a12 12 0 0 0 -15 15 L28 66 a6 6 0 0 0 8 8 L59 51 a12 12 0 0 0 15 -15 l-9 9 -8 -2 -2 -8 z"/></>}
      {kind === 'gauge' && <><path d="M24 66 a26 26 0 1 1 52 0"/><path d="M50 66 L64 44"/><circle cx="50" cy="66" r="3.5" fill="currentColor"/></>}
    </svg>
  );
}

window.BlogPage = BlogPage;