// blog.jsx — Blog & Resurse

const { useState: useStateBl, useMemo: useMemoBl } = React;

const BL_POSTS = [
  { id: 1, title: 'Top 10 hook-uri pentru primele 30 secunde de live', cat: 'Strategii', author: 'Andrei M.', date: '18 Apr 2026', read: '6 min', hue: 82, hot: true },
  { id: 2, title: 'De ce orele 19-22 nu sunt mereu cele mai bune', cat: 'Strategii', author: 'Cristina T.', date: '15 Apr 2026', read: '4 min', hue: 50 },
  { id: 3, title: 'De la 200 la 50K followers în 90 zile', cat: 'Studii de caz', author: 'Mihai R.', date: '11 Apr 2026', read: '8 min', hue: 280, hot: true },
  { id: 4, title: 'Cum să recuperezi un live care nu merge', cat: 'Tehnică', author: 'Ioana V.', date: '08 Apr 2026', read: '5 min', hue: 200 },
  { id: 5, title: 'Diamond strategy: arta tip-urilor coordonate', cat: 'Strategii', author: 'Andrei M.', date: '04 Apr 2026', read: '7 min', hue: 50 },
  { id: 6, title: 'Ce să faci când ești la primul match', cat: 'Tehnică', author: 'Cristina T.', date: '01 Apr 2026', read: '5 min', hue: 320 },
  { id: 7, title: 'Burnout în creator economy — cum îl previi', cat: 'Inspirație', author: 'Ioana V.', date: '28 Mar 2026', read: '9 min', hue: 120 },
  { id: 8, title: '4U Agency: 4 țări noi în 2026', cat: 'Anunțuri 4U', author: 'Echipa 4U', date: '24 Mar 2026', read: '3 min', hue: 82 },
  { id: 9, title: 'Top 3 creatori 4U ai lunii', cat: 'Inspirație', author: 'Echipa 4U', date: '20 Mar 2026', read: '4 min', hue: 30 },
];

const BL_CATS = ['Toate', 'Strategii', 'Tehnică', 'Inspirație', 'Studii de caz', 'Anunțuri 4U'];
const BL_CAT_COLOR = { 'Strategii': '#52F20F', 'Tehnică': '#FFD700', 'Inspirație': '#A855F7', 'Studii de caz': '#3B82F6', 'Anunțuri 4U': '#52F20F', 'Pentru începători': '#FF6B6B' };

function BlogPage({ onNav }) {
  return (
    <div className="page">
      <BlHero onNav={onNav} />
      <BlFeatured />
      <BlGrid />
      <BlNewsletter />
      <BlCategories />
      <BlCTA onNav={onNav} />
    </div>
  );
}

function BlHero({ onNav }) {
  const [q, setQ] = useStateBl('');
  return (
    <section style={{ minHeight: '40vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 60 }}>
      <Mesh /><Particles count={28} />
      <div className="container" style={{ position: 'relative', zIndex: 2, textAlign: 'center', maxWidth: 880 }}>
        <Reveal><div className="pill" style={{ marginBottom: 24, display: 'inline-flex' }}><span className="dot" /><span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em' }}>BLOG & RESURSE</span></div></Reveal>
        <Reveal delay={120}>
          <h1 className="display" style={{ fontSize: 'clamp(40px, 6vw, 84px)', margin: 0, lineHeight: 1.02 }}>
            Învață, crește, <span style={{ background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>repetă</span>.
          </h1>
        </Reveal>
        <Reveal delay={220}>
          <p style={{ fontSize: 'clamp(16px, 1.2vw, 19px)', color: 'var(--txt-2)', marginTop: 20, maxWidth: 640, marginInline: 'auto', lineHeight: 1.55 }}>
            Strategii, studii de caz, anunțuri și ghiduri pentru creatorii TikTok. Scris de echipa 4U Agency.
          </p>
        </Reveal>
        <Reveal delay={260}>
          <div style={{ marginTop: 24, display: 'flex', justifyContent: 'center' }}><BackButton onNav={onNav} /></div>
        </Reveal>
        <Reveal delay={300}>
          <div style={{ marginTop: 32, maxWidth: 560, marginInline: 'auto', position: 'relative' }}>
            <span style={{ position: 'absolute', left: 18, top: '50%', transform: 'translateY(-50%)', fontSize: 16, color: 'var(--txt-3)' }}>🔍</span>
            <input className="input" value={q} onChange={e => setQ(e.target.value)} placeholder="Caută un articol..." style={{ paddingLeft: 48, height: 52, fontSize: 14 }} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function BlFeatured() {
  return (
    <section style={{ padding: '40px 0 80px' }}>
      <div className="container">
        <Reveal>
          <div className="card hov bl-feat" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
            <div style={{ aspectRatio: '4/3', background: 'linear-gradient(135deg, hsl(82, 70%, 28%), hsl(50, 60%, 12%))', position: 'relative', minHeight: 360 }} className="bl-feat-img">
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.18), transparent 60%)' }} />
              <div style={{ position: 'absolute', top: 20, left: 20, padding: '6px 14px', background: 'var(--accent-2)', color: '#000', borderRadius: 999, fontSize: 11, fontWeight: 700, fontFamily: 'JetBrains Mono', letterSpacing: '.1em' }}>★ FEATURED</div>
              <div style={{ position: 'absolute', bottom: 28, left: 28, fontSize: 90, opacity: 0.5 }}>📈</div>
            </div>
            <div style={{ padding: 'clamp(28px, 4vw, 48px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 16 }}>
                <span className="pill" style={{ background: 'rgba(82,242,15,.10)', color: '#52F20F', borderColor: 'rgba(82,242,15,.3)' }}>STUDIU DE CAZ</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--txt-3)' }}>22 Apr 2026 · 12 min citire</span>
              </div>
              <h2 className="display" style={{ fontSize: 'clamp(24px, 3vw, 38px)', margin: '0 0 16px', lineHeight: 1.15 }}>Cum am crescut audiența cu 350% în 60 de zile — studiu de caz complet.</h2>
              <p style={{ color: 'var(--txt-2)', fontSize: 15, lineHeight: 1.6, margin: '0 0 24px' }}>De la 80K la 360K followers, cu strategie publicată integral. Conținut, schedule, hook-uri, momente de inflexiune — totul aici.</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
                <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))' }} />
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>Andrei Munteanu</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--txt-3)' }}>HEAD OF STRATEGY</div>
                </div>
              </div>
              <button className="btn btn-primary btn-lg" style={{ alignSelf: 'flex-start' }}>Citește articolul →</button>
            </div>
          </div>
        </Reveal>
        <style>{`@media (max-width: 900px) { .card.hov[class2="bl-feat"], .bl-feat-img { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
}

function BlGrid() {
  const [cat, setCat] = useStateBl('Toate');
  const [sort, setSort] = useStateBl('Recente');
  const items = useMemoBl(() => cat === 'Toate' ? BL_POSTS : BL_POSTS.filter(p => p.cat === cat), [cat]);
  return (
    <section style={{ padding: '60px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 24 }}>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {BL_CATS.map(c => (
                <button key={c} onClick={() => setCat(c)} className="hov" style={{ padding: '8px 16px', borderRadius: 999, border: '.5px solid', cursor: 'pointer', borderColor: cat === c ? 'var(--accent-1)' : 'var(--line)', background: cat === c ? 'rgba(82,242,15,.10)' : 'transparent', color: cat === c ? 'var(--accent-1)' : 'var(--txt-2)', fontSize: 12, fontWeight: 500 }}>{c}</button>
              ))}
            </div>
            <select value={sort} onChange={e => setSort(e.target.value)} className="input" style={{ width: 200, height: 36, fontSize: 12 }}>
              <option>Recente</option><option>Cele mai citite</option><option>Cele mai vechi</option>
            </select>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="bl-grid">
          {items.map((p, i) => (
            <Reveal key={p.id} delay={(i % 3) * 60}>
              <article className="card hov" style={{ overflow: 'hidden', cursor: 'pointer', height: '100%', display: 'flex', flexDirection: 'column' }}>
                <div style={{ aspectRatio: '16/10', background: `linear-gradient(135deg, hsl(${p.hue}, 70%, 28%), hsl(${p.hue}, 50%, 8%))`, position: 'relative', display: 'grid', placeItems: 'end', padding: 18 }}>
                  <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.15), transparent 60%)' }} />
                  <div className="display" style={{ fontSize: 'clamp(15px, 1.5vw, 18px)', color: '#fff', position: 'relative', maxWidth: '90%', lineHeight: 1.2, textShadow: '0 0 20px rgba(0,0,0,.3)' }}>{p.title}</div>
                  {p.hot && <div style={{ position: 'absolute', top: 12, right: 12, padding: '4px 10px', background: 'rgba(0,0,0,.5)', backdropFilter: 'blur(8px)', borderRadius: 999, fontSize: 10, color: 'var(--accent-2)', fontFamily: 'JetBrains Mono', letterSpacing: '.1em' }}>🔥 HOT</div>}
                </div>
                <div style={{ padding: 18, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <span className="pill" style={{ alignSelf: 'flex-start', marginBottom: 10, background: `${BL_CAT_COLOR[p.cat]}20`, color: BL_CAT_COLOR[p.cat], borderColor: `${BL_CAT_COLOR[p.cat]}40` }}>{p.cat.toUpperCase()}</span>
                  <h3 className="display" style={{ fontSize: 16, margin: '0 0 8px', lineHeight: 1.3 }}>{p.title}</h3>
                  <p style={{ color: 'var(--txt-2)', fontSize: 13, lineHeight: 1.55, margin: '0 0 16px', flex: 1 }}>Citat scurt din articol, sumar care invită la lectură fără să spună totul.</p>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 12, borderTop: '.5px solid var(--line)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ width: 22, height: 22, borderRadius: '50%', background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))' }} />
                      <span style={{ fontSize: 11.5, color: 'var(--txt-2)' }}>{p.author}</span>
                    </div>
                    <span className="mono" style={{ fontSize: 10.5, color: 'var(--txt-3)' }}>{p.date} · {p.read}</span>
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
        <Reveal delay={400}>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8, marginTop: 56, flexWrap: 'wrap' }}>
            <button className="btn btn-glass btn-sm">← Prev</button>
            {[1,2,3].map(n => <button key={n} className={n === 1 ? 'btn btn-primary btn-sm' : 'btn btn-glass btn-sm'} style={{ minWidth: 36 }}>{n}</button>)}
            <span style={{ color: 'var(--txt-3)', padding: '0 6px' }}>…</span>
            <button className="btn btn-glass btn-sm" style={{ minWidth: 36 }}>8</button>
            <button className="btn btn-glass btn-sm">Next →</button>
            <span style={{ marginLeft: 16, fontSize: 12, color: 'var(--txt-3)' }}>Pagina 1 din 8</span>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 900px) { .bl-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 600px) { .bl-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function BlNewsletter() {
  return (
    <section style={{ padding: '120px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container" style={{ maxWidth: 760 }}>
        <Reveal>
          <div className="card-glass" style={{ padding: 'clamp(32px, 5vw, 56px)', textAlign: 'center', background: 'linear-gradient(135deg, rgba(82,242,15,.08), rgba(255,215,0,.04))' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '.15em', marginBottom: 14 }}>● NEWSLETTER</div>
            <h2 className="display" style={{ fontSize: 'clamp(26px, 3.5vw, 40px)', margin: '0 0 12px' }}>Primește articole noi direct pe email.</h2>
            <p style={{ color: 'var(--txt-2)', fontSize: 15, marginBottom: 24 }}>O dată pe săptămână. Doar conținut valoros, fără spam.</p>
            <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', gap: 8, maxWidth: 460, margin: '0 auto', flexWrap: 'wrap' }}>
              <input className="input" type="email" placeholder="adresa@email.ro" style={{ flex: 1, minWidth: 200, height: 48 }} />
              <button className="btn btn-primary" style={{ height: 48 }}>Abonează-mă</button>
            </form>
            <div className="mono" style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: 14 }}>+3.500 abonați · cancel anytime</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function BlCategories() {
  const cats = [
    { ico: '🎯', t: 'Strategii', count: 24 },
    { ico: '🛠', t: 'Tehnică', count: 18 },
    { ico: '💡', t: 'Inspirație', count: 32 },
    { ico: '📊', t: 'Studii de caz', count: 12 },
    { ico: '📢', t: 'Anunțuri 4U', count: 15 },
    { ico: '🎓', t: 'Pentru începători', count: 28 },
  ];
  return (
    <section style={{ padding: '120px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal><div style={{ marginBottom: 56 }}><div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● CATEGORII POPULARE</div><h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0 }}>Explorează pe categorii.</h2></div></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="bl-cats">
          {cats.map((c, i) => (
            <Reveal key={c.t} delay={i * 50}>
              <a className="card hov" style={{ padding: 24, display: 'flex', alignItems: 'center', gap: 18, cursor: 'pointer' }}>
                <div style={{ width: 52, height: 52, borderRadius: 12, background: `${BL_CAT_COLOR[c.t] || '#52F20F'}1A`, border: `.5px solid ${BL_CAT_COLOR[c.t] || '#52F20F'}40`, display: 'grid', placeItems: 'center', fontSize: 26 }}>{c.ico}</div>
                <div style={{ flex: 1 }}>
                  <div className="display" style={{ fontSize: 17, marginBottom: 4 }}>{c.t}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--txt-3)' }}>{c.count} articole</div>
                </div>
                <span style={{ color: 'var(--txt-3)', fontSize: 18 }}>→</span>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .bl-cats { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 500px) { .bl-cats { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function BlCTA({ onNav }) {
  return (
    <section style={{ padding: '80px 0 120px' }}>
      <div className="container">
        <Reveal>
          <div className="card-glass" style={{ padding: 'clamp(40px, 6vw, 72px)', textAlign: 'center', background: 'linear-gradient(135deg, rgba(82,242,15,.12), rgba(255,215,0,.06))', border: '.5px solid rgba(82,242,15,.25)' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● PASUL URMĂTOR</div>
            <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 48px)', margin: '0 0 12px' }}>Vrei conținut exclusiv? Ai cont 4U?</h2>
            <p style={{ color: 'var(--txt-2)', fontSize: 16, marginBottom: 28 }}>Articole premium și ghiduri sunt disponibile membrilor 4U.</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-glass btn-lg" onClick={() => onNav('login')}>Login →</button>
              <button className="btn btn-primary btn-lg" onClick={() => onNav('signup')}>Înscrie-te →</button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.BlogPage = BlogPage;