const { useState, useEffect } = React;

const COPY = {
  ua: { back: '← На головну', label: 'Блог', title: '*Корисно* знати.', sub: 'Кейси з автоматизації e-commerce та новини AI. Підбірка з реального досвіду.', tabs: ['Усе', 'Кейси', 'AI Новини', 'Гайди'], read: 'Читати ›', minutes: 'хв читання', chars: 'символів' },
  en: { back: '← Back to home', label: 'Blog', title: '*Worth* knowing.', sub: 'E-commerce automation case studies and AI news. From real-world projects.', tabs: ['All', 'Cases', 'AI News', 'Tutorials'], read: 'Read ›', minutes: 'min read', chars: 'characters' },
};

function readTimeFromBody(body) {
  const chars = (body || '').length;
  const words = Math.ceil(chars / 5.5);
  const min = Math.max(1, Math.round(words / 200));
  return { chars, min };
}

function renderItalic(s) {
  return s.split(/(\*[^*]+\*)/g).map((p, i) =>
    p.startsWith('*') && p.endsWith('*')
      ? <span key={i} style={{fontWeight:700}}>{p.slice(1,-1)}</span>
      : <span key={i}>{p}</span>
  );
}

function getSlug(a) {
  return (a.langs && a.langs.ua && a.langs.ua.seoUrl) ||
         (a.langs && a.langs.en && a.langs.en.seoUrl) ||
         ('article-' + a.id);
}

function BlogPage() {
  const initialLang = /^\/en(\/|$)/.test(window.location.pathname) ? 'en' : 'ua';
  const [lang, setLang] = useState(initialLang);
  const [tab, setTab] = useState(0);
  const [articles, setArticles] = useState([]);
  const [menuOpen, setMenuOpen] = useState(false);
  const c = COPY[lang];

  useEffect(() => {
    fetch('/api/articles')
      .then(r => r.json())
      .then(data => setArticles((data.items || []).filter(a => a.status === 'enabled')))
      .catch(() => {});
  }, []);

  useEffect(() => {
    history.replaceState({}, '', '/' + lang + '/blog');
  }, [lang]);

  useEffect(() => {
    if (!menuOpen) return;
    const onResize = () => { if (window.innerWidth > 720) setMenuOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [menuOpen]);

  const items = articles.filter(a => {
    if (tab === 0) return true;
    if (tab === 1) return a.kind === 'case';
    if (tab === 2) return a.kind === 'news';
    return a.kind === 'tutorial';
  });

  return (
    <div style={{position:'relative', minHeight:'100vh'}}>
      <Particles/>
      <ScrollProgress/>
      <Grain/>

      <nav className="haiq-blog-nav" style={{
        position:'fixed', top:0, left:0, right:0, zIndex:100,
        padding:'18px 32px',
        display:'flex', alignItems:'center', justifyContent:'space-between',
        background:'var(--scrim55)', backdropFilter:'blur(20px)',
        borderBottom:'1px solid var(--w4)',
      }}>
        <a href={`/${lang}/`} style={{
          display:'flex', alignItems:'center', gap:10, textDecoration:'none', color:'var(--w100)',
        }}>
          <span style={{width:18, height:18, borderRadius:'50%',
            background:'radial-gradient(circle at 30% 30%, var(--w100) 0%, var(--w40) 40%, transparent 70%)',
            opacity:0.7,
          }}/>
          <span style={{fontFamily:'var(--font-sans)', fontWeight:700, fontSize:22, letterSpacing:'-0.03em'}}>HAIQ.</span>
        </a>

        <a href={`/${lang}/`} className="haiq-blog-nav-center" style={{
          fontFamily:'var(--font-sans)', fontSize:13, color:'var(--w60)',
          textDecoration:'none', letterSpacing:'0.05em',
        }}>{c.back}</a>

        <div className="haiq-blog-nav-right" style={{display:'flex', alignItems:'center', gap:18}}>
          <div style={{display:'flex', alignItems:'center', gap:8, fontFamily:'var(--font-sans)', fontSize:12, fontWeight:500}}>
            <button onClick={()=>setLang('ua')} style={{
              background:'none', border:'none', cursor:'pointer', padding:'4px 2px',
              color: lang==='ua' ? 'var(--w100)' : 'var(--w35)',
              borderBottom: lang==='ua' ? '1px solid var(--w100)' : '1px solid transparent',
              letterSpacing:'0.1em',
            }}>UA</button>
            <span style={{color:'var(--w20)'}}>·</span>
            <button onClick={()=>setLang('en')} style={{
              background:'none', border:'none', cursor:'pointer', padding:'4px 2px',
              color: lang==='en' ? 'var(--w100)' : 'var(--w35)',
              borderBottom: lang==='en' ? '1px solid var(--w100)' : '1px solid transparent',
              letterSpacing:'0.1em',
            }}>EN</button>
          </div>
        </div>

        <button className="haiq-blog-burger" onClick={() => setMenuOpen(m => !m)} aria-label="Menu">
          {menuOpen ? (
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
              <line x1="4" y1="4" x2="16" y2="16"/><line x1="16" y1="4" x2="4" y2="16"/>
            </svg>
          ) : (
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
              <line x1="3" y1="5" x2="17" y2="5"/><line x1="3" y1="10" x2="17" y2="10"/><line x1="3" y1="15" x2="17" y2="15"/>
            </svg>
          )}
        </button>
      </nav>

      {menuOpen && (
        <div className="haiq-blog-mobile-menu">
          <a href={`/${lang}/`} onClick={() => setMenuOpen(false)} style={{
            fontFamily:'var(--font-sans)', fontSize:15, color:'var(--w70)',
            textDecoration:'none', paddingBottom:20,
            borderBottom:'1px solid var(--w6)',
          }}>{c.back}</a>
          <div style={{paddingTop:20, display:'flex', alignItems:'center', gap:10,
            fontFamily:'var(--font-sans)', fontSize:14, fontWeight:500}}>
            <span style={{color:'var(--w40)', letterSpacing:'0.05em', fontSize:12, marginRight:4}}>
              {lang === 'ua' ? 'Мова' : 'Language'}
            </span>
            <button onClick={() => { setLang('ua'); setMenuOpen(false); }} style={{
              cursor:'pointer', padding:'6px 14px', borderRadius:100, letterSpacing:'0.08em',
              background: lang==='ua' ? 'var(--w12)' : 'transparent',
              color: lang==='ua' ? 'var(--w100)' : 'var(--w40)',
              border: lang==='ua' ? '1px solid var(--w20)' : '1px solid transparent',
            }}>UA</button>
            <button onClick={() => { setLang('en'); setMenuOpen(false); }} style={{
              cursor:'pointer', padding:'6px 14px', borderRadius:100, letterSpacing:'0.08em',
              background: lang==='en' ? 'var(--w12)' : 'transparent',
              color: lang==='en' ? 'var(--w100)' : 'var(--w40)',
              border: lang==='en' ? '1px solid var(--w20)' : '1px solid transparent',
            }}>EN</button>
          </div>
        </div>
      )}

      <header className="haiq-blog-header" style={{
        position:'relative', padding:'160px 60px 60px',
        textAlign:'center', overflow:'hidden',
      }}>
        <div style={{
          position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
          opacity:0.35, pointerEvents:'none',
        }}>
          <Spiral size={Math.min(600, typeof window!=='undefined' ? window.innerWidth*0.5 : 500)}/>
        </div>
        <div style={{position:'absolute', inset:0, background:'radial-gradient(ellipse at center, transparent 30%, var(--scrim85) 100%)'}}/>

        <div style={{position:'relative', zIndex:2, maxWidth:900, margin:'0 auto'}}>
          <Reveal as="div" className="eyebrow" style={{justifyContent:'center', display:'flex', alignItems:'center', gap:14, marginBottom:18}}>
            <span style={{width:24, height:1, background:'var(--w30)'}}/>
            {c.label}
            <span style={{width:24, height:1, background:'var(--w30)'}}/>
          </Reveal>
          <Reveal delay={0.1} as="h1" style={{
            fontFamily:'var(--font-sans)', fontWeight:700,
            fontSize:'clamp(46px, 7vw, 88px)', lineHeight:1.1, letterSpacing:'-0.03em',
            color:'var(--w100)', margin:0,
          }}>{renderItalic(c.title)}</Reveal>
          <Reveal delay={0.2} as="p" style={{
            marginTop:24, fontFamily:'var(--font-sans)', fontSize:17, lineHeight:1.7,
            color:'var(--w60)', maxWidth:620, marginInline:'auto',
          }}>{c.sub}</Reveal>

          <Reveal delay={0.3} as="div" style={{display:'flex', gap:8, marginTop:36, flexWrap:'wrap', justifyContent:'center'}}>
            {c.tabs.map((label, i) => (
              <button key={i} onClick={()=>setTab(i)} style={{
                padding:'10px 20px', borderRadius:100, cursor:'pointer',
                background: tab===i ? 'var(--w100)' : 'transparent',
                color: tab===i ? 'var(--k)' : 'var(--w70)',
                border:`1px solid ${tab===i ? 'var(--w100)' : 'var(--w18)'}`,
                fontFamily:'var(--font-sans)', fontSize:13, fontWeight:500,
                transition:'all 0.3s ease',
              }}>{label}</button>
            ))}
          </Reveal>
        </div>
      </header>

      <section className="haiq-blog-section" style={{padding:'40px 60px 120px', position:'relative', zIndex:2}}>
        <div className="haiq-blog-grid" style={{
          maxWidth:1300, margin:'0 auto',
          display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20,
        }}>
          {items.map((a, i) => {
            const ldata = (a.langs && a.langs[lang]) || {};
            const slug  = ldata.seoUrl || getSlug(a);
            const rt    = readTimeFromBody(ldata.text);
            return (
              <Reveal key={a.id} delay={(i%3)*0.08}>
                <ArticleCard
                  slug={slug}
                  title={ldata.title || ''}
                  sub={ldata.shortDesc || ''}
                  tag={ldata.tag || ''}
                  date={ldata.date || ''}
                  image={a.image || ''}
                  kind={a.kind}
                  rt={rt}
                  c={c}
                  lang={lang}
                />
              </Reveal>
            );
          })}
        </div>
      </section>

      <footer className="haiq-blog-footer" style={{
        padding:'40px 60px', borderTop:'1px solid var(--w5)',
        textAlign:'center', position:'relative', zIndex:2,
      }}>
        <span style={{fontFamily:'var(--font-sans)', fontSize:12, color:'var(--w40)'}}>
          © 2026 HAIQ — AI Automation Agency. Made in Ukraine.
        </span>
      </footer>

      <Chatbot lang={lang}/>
    </div>
  );
}

function ArticleCard({slug, title, sub, tag, date, image, kind, rt, c, lang}) {
  const [h, setH] = React.useState(false);
  return (
    <a href={`/${lang}/${slug}`} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)} style={{
      display:'flex', flexDirection:'column',
      borderRadius:16, overflow:'hidden',
      background:'var(--s2)',
      border:`1px solid ${h ? 'var(--w18)' : 'var(--w6)'}`,
      transform: h ? 'translateY(-6px)' : 'none',
      transition:'all 0.4s cubic-bezier(0.16,1,0.3,1)',
      textDecoration:'none', color:'inherit', height:'100%',
    }}>
      <div style={{height:200, position:'relative', overflow:'hidden', flexShrink:0, background:'var(--s1)'}}>
        {image && (
          <img src={image} alt="" style={{
            position:'absolute', inset:0, width:'100%', height:'100%',
            objectFit:'cover', objectPosition:'center', display:'block',
            transform: h ? 'scale(1.05)' : 'scale(1)',
            transition:'transform 0.7s cubic-bezier(0.16,1,0.3,1)',
          }}/>
        )}
        <div style={{position:'absolute', inset:0, background:'radial-gradient(transparent 30%, var(--sh7) 100%)'}}/>
      </div>
      <div style={{padding:'24px 22px', display:'flex', flexDirection:'column', flex:1}}>
        <div style={{display:'flex', alignItems:'center', flexWrap:'wrap', gap:'6px 10px', marginBottom:14}}>
          <span style={{
            padding:'4px 10px', borderRadius:100,
            background:'var(--w6)', border:'1px solid var(--w10)',
            fontFamily:'var(--font-mono)', fontSize:10, color:'var(--w100)',
            letterSpacing:'0.05em', textTransform:'uppercase', flexShrink:0,
          }}>{tag}</span>
          <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--w40)', flexShrink:0}}>{date}</span>
          <span style={{marginLeft:'auto', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--w45)', flexShrink:0}}>
            {rt.min} {c.minutes}
          </span>
        </div>
        <h3 style={{
          fontFamily:'var(--font-sans)', fontWeight:700, fontSize:20, lineHeight:1.25,
          color:'var(--w100)', margin:'0 0 12px',
        }}>{title}</h3>
        <p style={{
          fontFamily:'var(--font-sans)', fontSize:13, lineHeight:1.6,
          color:'var(--w50)', margin:0, flex:1,
        }}>{sub}</p>
        <div style={{
          marginTop:18, fontFamily:'var(--font-sans)', fontSize:12, color:'var(--w100)', letterSpacing:'0.05em',
          opacity: h ? 1 : 0.6, transition:'opacity 0.3s ease',
        }}>{c.read}</div>
      </div>
    </a>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<BlogPage/>);