// BlogContent.jsx — blog index. Posts are sourced from the blogs/ directory; add an
// entry here for each new markdown file dropped in (slug = filename without .md).
const BLOG_POSTS = [
  {
    slug: 'agent_data_plane',
    tag: 'Perspective',
    date: 'Apr 27, 2026',
    readTime: '8 min',
    title: 'Why an Agent Data Plane',
    excerpt: 'Skardi is an agent data plane that gives AI agents data autonomy. One execution engine over every data source — build RAG, hybrid search, memory, and data APIs in plain SQL.',
    author: 'Xin Wei',
  },
];

const BlogContent = () => {
  const featured = BLOG_POSTS[0];
  const posts = BLOG_POSTS.slice(1);
  const tags = ['All', ...Array.from(new Set(BLOG_POSTS.map(p => p.tag)))];
  const [activeTag, setActiveTag] = React.useState('All');
  const visible = activeTag === 'All' ? posts : posts.filter(p => p.tag === activeTag);

  return (
    <>
      <section style={{ padding: '130px 32px 40px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(rgba(125,211,252,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(125,211,252,0.06) 1px, transparent 1px)',
          backgroundSize: '32px 32px',
          maskImage: 'radial-gradient(ellipse 70% 80% at 50% 20%, #000 30%, transparent 85%)',
          WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 20%, #000 30%, transparent 85%)',
          pointerEvents: 'none',
        }} />
        <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto' }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
            letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
            color: '#2ee89a', marginBottom: 16,
          }}>// blog</div>
          <h1 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(48px, 6vw, 72px)', fontWeight: 700,
            letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0, marginBottom: 20,
            color: '#e6eef9',
          }}>Notes from the engine room.</h1>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.6,
            color: '#8ea3c0', margin: 0, maxWidth: 680,
          }}>
            Announcements, engineering deep-dives, and perspectives on building data infrastructure
            for the agent era. Written in public, same as the code.
          </p>
        </div>
      </section>

      <section style={{ padding: '40px 32px 0' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <a href={`/blog/post?slug=${featured.slug}`}
            onClick={() => window.skardiTrack?.('blog_post_opened', { slug: featured.slug })}
            style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40,
            padding: 40, borderRadius: 16,
            background: '#0a1220',
            border: '1px solid rgba(125,211,252,0.08)',
            borderTop: '1px solid rgba(46,232,154,0.5)',
            boxShadow: '0 0 0 1px rgba(29,168,105,0.15), 0 8px 32px rgba(29,168,105,0.12)',
            alignItems: 'center', textDecoration: 'none',
            transition: 'transform 150ms ease-out',
          }}
          onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
          onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
          >
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
                <span style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                  padding: '4px 10px', borderRadius: 4,
                  background: 'linear-gradient(90deg, rgba(46,232,154,0.15), rgba(26,143,224,0.15))',
                  border: '1px solid rgba(46,232,154,0.3)',
                  color: '#2ee89a', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500,
                }}>Featured · {featured.tag}</span>
                <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#6b7e9a' }}>{featured.date} · {featured.readTime}</span>
              </div>
              <h2 style={{
                fontFamily: 'Inter, sans-serif', fontSize: 'clamp(28px, 3vw, 38px)', fontWeight: 700,
                letterSpacing: '-0.025em', lineHeight: 1.15,
                margin: 0, marginBottom: 16, color: '#e6eef9',
              }}>{featured.title}</h2>
              <p style={{
                fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.6,
                color: '#8ea3c0', margin: 0, marginBottom: 24,
              }}>{featured.excerpt}</p>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                color: '#2ee89a', fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600,
              }}>
                Read the post
                <span>→</span>
              </div>
            </div>
            <div style={{
              aspectRatio: '1.3 / 1',
              borderRadius: 12, overflow: 'hidden',
              background: 'radial-gradient(ellipse at 30% 30%, rgba(46,232,154,0.4) 0%, rgba(26,143,224,0.3) 40%, #0a1220 70%)',
              border: '1px solid rgba(125,211,252,0.1)',
              position: 'relative',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{
                position: 'absolute', inset: 0,
                backgroundImage: 'linear-gradient(rgba(125,211,252,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(125,211,252,0.12) 1px, transparent 1px)',
                backgroundSize: '24px 24px',
              }}/>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 42, fontWeight: 700,
                color: '#e6eef9', textAlign: 'center', lineHeight: 1.1,
                padding: 24, position: 'relative',
                textShadow: '0 2px 20px rgba(0,0,0,0.5)',
              }}>spark<br/>
                <span style={{
                  background: 'linear-gradient(90deg,#2ec47a,#1a8fe0)',
                  WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                  fontStyle: 'italic',
                }}>for agents</span>
              </div>
            </div>
          </a>
        </div>
      </section>

      {posts.length > 0 && (
        <section style={{ padding: '80px 32px 40px' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto' }}>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 40 }}>
              {tags.map(t => (
                <button key={t} onClick={() => setActiveTag(t)} style={{
                  padding: '8px 16px', borderRadius: 9999,
                  border: `1px solid ${activeTag === t ? 'rgba(46,232,154,0.4)' : 'rgba(125,211,252,0.1)'}`,
                  background: activeTag === t ? 'rgba(46,232,154,0.08)' : 'transparent',
                  color: activeTag === t ? '#2ee89a' : '#c4d2e2',
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 12, fontWeight: 500,
                  letterSpacing: '0.04em', cursor: 'pointer',
                  transition: 'all 150ms',
                }}>{t}</button>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
              {visible.map(p => (
                <a key={p.slug} href={`/blog/post?slug=${p.slug}`}
                  onClick={() => window.skardiTrack?.('blog_post_opened', { slug: p.slug })}
                  style={{
                  display: 'flex', flexDirection: 'column',
                  padding: 24, borderRadius: 12,
                  background: '#0a1220',
                  border: '1px solid rgba(125,211,252,0.08)',
                  textDecoration: 'none',
                  transition: 'border-color 150ms, transform 150ms',
                  minHeight: 260,
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(46,232,154,0.25)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(125,211,252,0.08)'; e.currentTarget.style.transform = 'translateY(0)'; }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                    <span style={{
                      fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                      padding: '3px 8px', borderRadius: 3,
                      background: 'rgba(46,232,154,0.08)',
                      color: '#2ee89a', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500,
                    }}>{p.tag}</span>
                    <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#6b7e9a' }}>{p.date}</span>
                  </div>
                  <h3 style={{
                    fontFamily: 'Inter, sans-serif', fontSize: 19, fontWeight: 600,
                    letterSpacing: '-0.015em', lineHeight: 1.25,
                    margin: 0, marginBottom: 12, color: '#e6eef9',
                  }}>{p.title}</h3>
                  <p style={{
                    fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.55,
                    margin: 0, color: '#8ea3c0', flex: 1,
                  }}>{p.excerpt}</p>
                  <div style={{
                    marginTop: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    paddingTop: 16, borderTop: '1px solid rgba(125,211,252,0.06)',
                  }}>
                    <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#8ea3c0' }}>{p.author}</span>
                    <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#6b7e9a' }}>{p.readTime}</span>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      <section style={{ padding: '80px 32px 100px' }}>
        <div style={{
          maxWidth: 840, margin: '0 auto',
          padding: '40px 44px', borderRadius: 16,
          background: '#0a1220',
          border: '1px solid rgba(125,211,252,0.08)',
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
        }}>
          <div>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
              color: '#2ee89a', marginBottom: 12,
            }}>// subscribe</div>
            <h3 style={{
              fontFamily: 'Inter, sans-serif', fontSize: 24, fontWeight: 600,
              letterSpacing: '-0.015em', margin: 0, marginBottom: 8, color: '#e6eef9',
            }}>New posts, in your inbox.</h3>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 14.5, lineHeight: 1.55, color: '#8ea3c0', margin: 0 }}>
              Monthly-ish. Engineering deep-dives, releases, and agent-stack notes. No marketing.
            </p>
          </div>
          <form onSubmit={e => e.preventDefault()} style={{ display: 'flex', gap: 8 }}>
            <input placeholder="you@example.com" style={{
              padding: '12px 16px', borderRadius: 8,
              border: '1px solid rgba(125,211,252,0.15)',
              background: '#060b14', color: '#e6eef9',
              fontFamily: 'JetBrains Mono, monospace', fontSize: 13, outline: 'none',
              minWidth: 240,
            }}/>
            <button style={{
              background: 'linear-gradient(90deg,#2ec47a,#1a8fe0)',
              border: 'none', color: '#fff',
              padding: '12px 22px', borderRadius: 8,
              fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600, cursor: 'pointer',
            }}>Subscribe</button>
          </form>
        </div>
      </section>
    </>
  );
};

window.BlogContent = BlogContent;
