frontend/src/components/WhySection.js

import React from 'react';
import { AnimatedSection } from './AnimatedSection';

export const WhySection = () => {
  return (
    <section data-testid="section-why" style={{ padding: '60px 0 40px' }}>
      <div className="section-container">
        <AnimatedSection>
          <div className="research-card-accent" style={{ maxWidth: 900, margin: '0 auto', borderLeftColor: '#00D9C0' }}>
            <div className="flex items-center gap-2 mb-4 flex-wrap">
              <span className="badge-teal">Why This Project Exists</span>
              <span className="badge-violet">The Anthropic Hiring Signal</span>
            </div>

            <p style={{ fontSize: 15, color: '#E8EEF8', lineHeight: 1.75, marginBottom: 16 }}>
              This is the only portfolio project that replicates what Anthropic's safety team does as their <strong style={{ color: '#00D9C0' }}>actual daily job</strong>.
            </p>

            <p style={{ fontSize: 14, color: '#8A9BC4', lineHeight: 1.75, marginBottom: 20 }}>
              Every other project calls AI APIs, trains models, or builds infra. CircuitScope opens the model like a brain and asks: <em style={{ color: '#E8EEF8' }}>"Which specific neurons fired to produce this output? Which attention heads communicate to solve this task? What does this model actually know — and how does it represent it?"</em>
            </p>

            <div style={{ fontSize: 13, fontWeight: 600, color: '#E8EEF8', marginBottom: 12 }}>Three research artifacts this project produces:</div>

            <div className="space-y-4">
              <div className="flex gap-3">
                <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(0,217,192,0.15)', border: '1px solid rgba(0,217,192,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, color: '#00D9C0', flexShrink: 0 }}>1</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: '#00D9C0', marginBottom: 2 }}>A replicated IOI circuit</div>
                  <p style={{ fontSize: 13, color: '#8A9BC4', lineHeight: 1.6 }}>26 attention heads in GPT-2 Small, verified with activation patching and faithfulness scoring (87% recovered).</p>
                </div>
              </div>

              <div className="flex gap-3">
                <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(155,89,245,0.15)', border: '1px solid rgba(155,89,245,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, color: '#9B59F5', flexShrink: 0 }}>2</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: '#9B59F5', marginBottom: 2 }}>A Sparse Autoencoder trained from scratch</div>
                  <p style={{ fontSize: 13, color: '#8A9BC4', lineHeight: 1.6 }}>Reproducing Anthropic's Towards Monosemanticity findings: 70% interpretable features vs neuron-level baseline on GPT-2 Small MLP activations.</p>
                </div>
              </div>

              <div className="flex gap-3">
                <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(255,179,71,0.15)', border: '1px solid rgba(255,179,71,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, color: '#FFB347', flexShrink: 0 }}>3</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: '#FFB347', marginBottom: 2 }}>An original finding</div>
                  <p style={{ fontSize: 13, color: '#8A9BC4', lineHeight: 1.6 }}>A blog-published observation about where circuits generalize or break — partial induction head activation (37-52%) on Python variable shadowing patterns.</p>
                </div>
              </div>
            </div>
          </div>
        </AnimatedSection>
      </div>
    </section>
  );
};