const Blog = () => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const posts = [
    { tag: 'AI & ML', title: 'How We Built a Demand Forecasting Model That Outperformed 90% of Retail ERPs', excerpt: 'A deep dive into the data pipeline, model architecture, and integration strategy that reduced a client\'s excess inventory by 35% within a quarter.', date: 'Apr 12, 2026', readTime: '8 min read', color: '#1d4ed8' },
    { tag: 'SaaS', title: 'The Architecture Decisions That Let Our SaaS Client Reach 200 Customers in 6 Months', excerpt: 'Multi-tenancy, feature flags, billing infrastructure, and the technical choices that enabled rapid growth without technical debt.', date: 'Mar 28, 2026', readTime: '6 min read', color: '#7c3aed' },
    { tag: 'Blockchain', title: 'Smart Contract Security: 10 Vulnerabilities We\'ve Found in Production Audits', excerpt: 'Real examples from auditing DeFi protocols — reentrancy, flash loan exploits, oracle manipulation, and how to defend against them.', date: 'Mar 10, 2026', readTime: '11 min read', color: '#0891b2' },
    { tag: 'Cloud', title: 'Cutting a FinTech Client\'s Cloud Bill by 55%: A Microservices Migration Case Study', excerpt: 'Moving from a monolith to AWS microservices isn\'t just about performance — it\'s about right-sizing infrastructure. Here\'s how we did it.', date: 'Feb 22, 2026', readTime: '9 min read', color: '#059669' },
    { tag: 'Product', title: 'Why Most Startup MVPs Take Too Long (And How to Ship in 8 Weeks)', excerpt: 'The common traps that turn 8-week MVPs into 6-month projects — and the scope management framework we use to prevent them.', date: 'Feb 5, 2026', readTime: '5 min read', color: '#dc2626' },
    { tag: 'AI & ML', title: 'LangChain vs. Direct API: When to Use Each for Production AI Applications', excerpt: 'A pragmatic guide to choosing the right abstraction level for your AI use case — with performance benchmarks and real trade-off analysis.', date: 'Jan 18, 2026', readTime: '7 min read', color: '#d97706' },
  ];

  return (
    <section id="blog-section" data-screen-label="Blog" ref={ref} style={{ padding: '100px 0', background: 'var(--bg2, #f8fafc)' }}>
      <div className="inner-wrap" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 20, marginBottom: 48, opacity: visible ? 1 : 0, transition: 'all 0.6s ease' }}>
          <div style={{ maxWidth: 480 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 14px', borderRadius: 100, background: 'var(--accentbg)', border: '1px solid rgba(37,99,235,0.18)', marginBottom: 18 }}>
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: 'var(--accent, #1d4ed8)', letterSpacing: '0.07em' }}>INSIGHTS</span>
            </div>
            <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 700, color: 'var(--text, #0f172a)', letterSpacing: '-0.03em', lineHeight: 1.1, margin: 0 }}>
              Engineering insights from the field
            </h2>
          </div>
          <button style={{ padding: '10px 22px', borderRadius: 8, background: 'var(--bg3, #fff)', border: '1.5px solid var(--border)', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 600, color: 'var(--text, #0f172a)', transition: 'all 0.2s', boxShadow: 'var(--shadow)' }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent2)'; e.currentTarget.style.color = 'var(--accent)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--text)'; }}>
            View All Posts →
          </button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: 20 }}>
          {posts.map((p, i) => (
            <article key={i} className="dm-card" style={{
              borderRadius: 14, overflow: 'hidden', background: 'var(--bg3, #fff)',
              border: '1.5px solid var(--border)', boxShadow: 'var(--shadow)',
              cursor: 'pointer', transition: 'all 0.25s ease',
              opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(24px)',
              transitionDelay: `${i * 0.06}s`,
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = p.color; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = `0 12px 36px ${p.color}20`; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow)'; }}>
              {/* Color accent bar */}
              <div style={{ height: 3, background: p.color }}/>
              <div style={{ padding: '24px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                  <span style={{ padding: '3px 10px', borderRadius: 100, background: `${p.color}10`, border: `1px solid ${p.color}25`, fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 600, color: p.color }}>{p.tag}</span>
                  <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11.5, color: 'var(--text3, #94a3b8)' }}>{p.readTime}</span>
                </div>
                <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 16, fontWeight: 600, color: 'var(--text, #0f172a)', margin: '0 0 10px', lineHeight: 1.4, letterSpacing: '-0.01em' }}>{p.title}</h3>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13.5, color: 'var(--text2, #64748b)', lineHeight: 1.65, margin: '0 0 18px' }}>{p.excerpt}</p>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 14, borderTop: '1px solid var(--border2)' }}>
                  <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: 'var(--text3, #94a3b8)' }}>{p.date}</span>
                  <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 600, color: p.color }}>Read →</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Blog });