frontend/src/components/BlogIndex.js

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Calendar, Clock, ArrowRight, BookOpen } from 'lucide-react';
import { BlogLayout } from './BlogLayout';

export const BLOG_POSTS = [
  {
    slug: 'ioi-circuit-variance',
    title: 'Phonetic Shifts and Pronoun Clues: Analyzing Causal Path Variance across 50 IOI Prompts',
    subtitle: 'How phonetic names, relative clauses, and anaphoric coreference reshape mechanistic pathways',
    abstract: 'We perform a systematic 50-prompt causal tracing sweep across four experimental groups. We discover that multi-token name splits break the Induction pathway (Layer 5) by over 60%, forcing reliance on semantic S-Inhibition (Layer 7), while pronoun cues prime coreference circuits to maximize logit recovery.',
    badges: [{ text: 'Original Research', color: 'green' }, { text: 'Causal Sweep', color: 'blue' }, { text: 'TransformerLens', color: 'violet' }],
    readTime: '15 min',
    date: '2026',
    keyFinding: 'Multi-token names degrade Induction recovery by 60%, compensated by Layer 7 S-Inhibition',
    color: '#00E676',
  },
  {
    slug: 'induction-heads-python-shadowing',
    title: 'Induction Heads Partially Activate on Python Variable Shadowing',
    subtitle: 'Evidence for Mechanistic Universality in GPT-2 Small',
    abstract: 'We test whether the induction heads in GPT-2 Small\'s IOI circuit generalize beyond English name coreference to Python variable shadowing — and find partial activation at 37–52% of IOI-level, suggesting the mechanism detects syntactic repetition in general.',
    badges: [{ text: 'Original Research', color: 'green' }, { text: 'Induction Heads', color: 'blue' }],
    readTime: '18 min',
    date: '2025',
    keyFinding: '37–52% activation on Python variable shadowing vs IOI baseline',
    color: '#00E676',
  },
  {
    slug: 'backup-name-movers',
    title: 'Backup Name Mover Heads: The Hidden Redundancy in GPT-2\'s IOI Circuit',
    subtitle: 'How ablation reveals dormant circuit components that activate under failure',
    abstract: 'When we ablate the primary Name Mover Heads (L9H9, L10H0), backup heads at layers 10–11 activate to partially recover the IOI task. This built-in redundancy suggests transformers develop fault-tolerant circuits during training — with implications for alignment.',
    badges: [{ text: 'Circuit Analysis', color: 'teal' }, { text: 'Ablation Study', color: 'amber' }],
    readTime: '14 min',
    date: '2025',
    keyFinding: 'Backup heads recover 34% of logit difference when primaries ablated',
    color: '#00D9C0',
  },
  {
    slug: 'cross-layer-features',
    title: 'Cross-Layer Feature Composition: How SAE Features Build on Each Other',
    subtitle: 'Training SAEs on layers 4, 6, and 8 reveals hierarchical feature composition',
    abstract: 'We train separate sparse autoencoders on layers 4, 6, and 8 of GPT-2 Small and measure feature overlap. ~30% of high-level features at layer 6 have identifiable lower-level components at layer 4, consistent with Anthropic\'s findings on hierarchical representation.',
    badges: [{ text: 'SAE Analysis', color: 'violet' }, { text: 'Feature Hierarchy', color: 'blue' }],
    readTime: '16 min',
    date: '2025',
    keyFinding: '30% of layer 6 features compose from layer 4 sub-features',
    color: '#9B59F5',
  },
  {
    slug: 'dead-feature-graveyard',
    title: 'The Dead Feature Graveyard: Neuron Resampling and the Limits of Sparse Autoencoders',
    subtitle: 'Why 7% of SAE features never activate and what we can do about it',
    abstract: 'Despite neuron resampling every 50K steps, our SAE retains ~7% dead features — directions in the encoder that never activate on any validation text. We characterize these dead features, compare resampling strategies, and identify the fundamental tension between sparsity and feature utilization.',
    badges: [{ text: 'SAE Training', color: 'red' }, { text: 'Dead Features', color: 'amber' }],
    readTime: '12 min',
    date: '2025',
    keyFinding: 'Neuron resampling reduces dead features from 25% to 7% — but no further',
    color: '#FFB347',
  },
];

export const BlogIndex = () => {
  const navigate = useNavigate();

  return (
    <BlogLayout>
      <div className="section-container" style={{ maxWidth: 900, padding: '60px 16px 80px' }}>
        {/* Header */}
        <div className="flex items-center gap-2 mb-4">
          <BookOpen size={20} style={{ color: '#00D9C0' }} />
          <span className="badge-teal">Research Findings</span>
        </div>
        <h1 data-testid="blog-index-title" style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 'clamp(32px, 5vw, 48px)', lineHeight: 1.1, color: '#E8EEF8', marginBottom: 12 }}>
          CircuitScope Research Blog
        </h1>
        <p style={{ fontSize: 16, color: '#8A9BC4', maxWidth: 600, lineHeight: 1.75, marginBottom: 40 }}>
          Original findings from reproducing Anthropic's mechanistic interpretability research. Each post documents a specific observation that required running experiments and thinking about the results.
        </p>

        <div style={{ fontSize: 13, color: '#4A5A7A', marginBottom: 24 }}>{BLOG_POSTS.length} posts</div>

        {/* Post Cards */}
        <div className="space-y-5">
          {BLOG_POSTS.map((post, i) => (
            <article
              key={post.slug}
              data-testid={`blog-card-${post.slug}`}
              className="research-card cursor-pointer"
              onClick={() => navigate(`/blog/${post.slug}`)}
              style={{
                borderLeft: `3px solid ${post.color}`,
                transition: 'border-color 200ms, box-shadow 200ms',
                cursor: 'pointer',
              }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = `0 0 0 1px ${post.color}22, 0 4px 20px ${post.color}08`; e.currentTarget.style.borderLeftColor = post.color; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; }}
            >
              <div className="flex items-center gap-2 mb-3 flex-wrap">
                {post.badges.map((b, j) => <span key={j} className={`badge-${b.color}`}>{b.text}</span>)}
                <span style={{ fontSize: 11, color: '#4A5A7A', marginLeft: 'auto' }} className="flex items-center gap-1">
                  <Calendar size={11} /> {post.date}
                  <span style={{ margin: '0 4px' }}>·</span>
                  <Clock size={11} /> {post.readTime}
                </span>
              </div>

              <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 20, color: '#E8EEF8', marginBottom: 4, lineHeight: 1.3 }}>
                {post.title}
              </h2>
              <p style={{ fontSize: 13, color: '#4A5A7A', marginBottom: 10, fontStyle: 'italic' }}>{post.subtitle}</p>

              <p style={{ fontSize: 14, color: '#8A9BC4', lineHeight: 1.7, marginBottom: 12 }}>{post.abstract}</p>

              <div className="flex items-center justify-between flex-wrap gap-3">
                <div style={{ fontSize: 12, color: post.color, fontFamily: "'JetBrains Mono', monospace" }}>
                  Key finding: {post.keyFinding}
                </div>
                <span className="flex items-center gap-1" style={{ fontSize: 13, color: '#00D9C0', fontWeight: 600 }}>
                  Read post <ArrowRight size={14} />
                </span>
              </div>
            </article>
          ))}
        </div>

        {/* Bottom note */}
        <div className="mt-10" style={{ borderTop: '1px solid #1E2B45', paddingTop: 24 }}>
          <p style={{ fontSize: 13, color: '#4A5A7A', lineHeight: 1.7 }}>
            These findings emerged from reproducing the IOI circuit (Wang et al., 2022) and training sparse autoencoders (Bricken et al., 2023) on GPT-2 Small. Each observation required running actual experiments — not just reading the papers. Even small findings are research contributions when they're honest and methodologically sound.
          </p>
        </div>
      </div>
    </BlogLayout>
  );
};