import React from 'react';

const STACK_COLUMNS = [
  {
    title: 'Interpretability',
    color: '#00D9C0',
    items: [
      {
        name: 'TransformerLens',
        desc: 'Created by Neel Nanda (ex-Anthropic). De facto standard for mechanistic interpretability. HookPoints on every activation. 2,900+ GitHub stars.',
      },
      {
        name: 'GPT-2 Small',
        desc: 'Small enough to analyze exhaustively (12 layers, 12 heads). Identical to model used in Wang et al. (2022) and Anthropic\'s Towards Monosemanticity.',
      },
    ],
  },
  {
    title: 'Sparse Autoencoder',
    color: '#9B59F5',
    items: [
      {
        name: 'Custom SAE (PyTorch)',
        desc: 'Building from scratch > using pre-trained SAE. Understanding training loop, dead feature problem, L1 tuning — what interviewers ask about.',
      },
      {
        name: 'W&B',
        desc: 'Track L1 coefficient sweeps, dead feature percentages, reconstruction loss across expansion factors.',
      },
    ],
  },
  {
    title: 'Visualization',
    color: '#FFB347',
    items: [
      {
        name: 'Plotly',
        desc: 'Interactive attention heatmaps with hover. Zoom into specific (layer, head) combinations. Publication-quality figures.',
      },
    ],
  },
  {
    title: 'AI Layer',
    color: '#4A9EFF',
    items: [
      {
        name: 'Google Gemini 2.5 Flash',
        desc: 'Generates mechanistic interpretability explanations for user-provided prompts in the live demo. Makes the app interactive without running PyTorch in-browser.',
      },
    ],
  },
];

export const TechStack = () => {
  return (
    <section data-testid="section-tech-stack" style={{ padding: '80px 0' }}>
      <div className="section-container">
        <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 30, color: '#E8EEF8', marginBottom: 32 }}>
          The Stack
        </h2>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {STACK_COLUMNS.map((col, i) => (
            <div key={i} className="research-card" style={{ borderTop: `2px solid ${col.color}` }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: col.color, marginBottom: 12 }}>{col.title}</div>
              <div className="space-y-4">
                {col.items.map((item, j) => (
                  <div key={j}>
                    <div data-testid="tech-stack-chip" style={{ fontSize: 13, fontWeight: 600, color: '#E8EEF8', marginBottom: 4 }}>{item.name}</div>
                    <p style={{ fontSize: 12, color: '#8A9BC4', lineHeight: 1.6 }}>{item.desc}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};