import React from 'react';
import { Database, Brain, Server } from 'lucide-react';

const COLUMNS = [
  {
    title: 'Database Layer',
    color: '#569CD6',
    icon: Database,
    items: [
      { name: 'PostgreSQL 17', reason: 'Only DB with pgvector + Apache AGE + full-text + JSONB + triggers + partitioning. Five paradigms, one query language.' },
      { name: 'pgvector 0.8.0', reason: '28× lower p95 vs Pinecone at 99% recall. 75% lower cost.' },
      { name: 'Apache AGE', reason: 'Cypher graph traversal without a separate graph DB. Fraud network analysis, product similarity graphs.' },
      { name: 'pgvectorscale', reason: 'StreamingDiskANN — disk-based HNSW variant for datasets larger than RAM.' },
    ],
  },
  {
    title: 'AI Layer',
    color: 'var(--purple-l)',
    icon: Brain,
    items: [
      { name: 'Google Gemini 2.0 Flash', reason: 'Demo layer AI (NL→SQL, sentiment, hybrid search simulation).' },
      { name: 'DistilBERT (ONNX)', reason: '<0.05ms inference via ONNX Runtime. No network call. 97% of BERT accuracy at 40% size.' },
      { name: 'XGBoost', reason: '0.008ms fraud scoring. In-process, no API call, ACID-safe.' },
      { name: 'LangGraph', reason: 'Stateful, recoverable, retry loops with conditional edges. Best for agents where failure costs money.' },
      { name: 'LangSmith', reason: 'Trace every agent run. Measure accuracy. Debug failures.' },
    ],
  },
  {
    title: 'Infrastructure',
    color: 'var(--teal)',
    icon: Server,
    items: [
      { name: 'Kafka + Redpanda', reason: 'Kafka for bulk (500K events/sec). Redpanda for critical write path (<2ms p99).' },
      { name: 'Redis', reason: 'Hot query cache. 70%+ cache hit rate target. 5min TTL.' },
      { name: 'Apache Airflow', reason: 'Materialized view refresh scheduling. Dependency-aware DAG.' },
      { name: 'MLflow', reason: 'Track model versions, trigger inference times, agent accuracy.' },
      { name: 'Grafana + Prometheus', reason: 'Index scan ratio monitoring. Trigger latency tracking. All the observability.' },
    ],
  },
];

export default function TechStack() {
  return (
    <div className="nv-section" data-testid="tech-stack-section">
      <div className="nv-container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="nv-badge nv-badge-gray" style={{ marginBottom: 12, display: 'inline-block' }}>Tech Stack</span>
          <h2 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 'clamp(28px, 4vw, 42px)', color: 'var(--text)', marginBottom: 12 }}>
            The Stack
          </h2>
          <p style={{ color: 'var(--text2)', maxWidth: 480, margin: '0 auto', fontSize: 15 }}>
            Every choice made for a reason — not resume padding.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="tech-stack-grid">
          {COLUMNS.map((col, ci) => {
            const Icon = col.icon;
            return (
              <div key={ci}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
                  <Icon size={20} style={{ color: col.color }} />
                  <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: 18, color: 'var(--text)', margin: 0 }}>{col.title}</h3>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {col.items.map((item, ii) => (
                    <div key={ii} style={{ borderLeft: `2px solid ${col.color}`, paddingLeft: 14 }}>
                      <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text)', marginBottom: 4 }}>{item.name}</div>
                      <p style={{ fontSize: 12, color: 'var(--text3)', margin: 0, lineHeight: 1.5 }}>{item.reason}</p>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>

        <style>{`
          @media (max-width: 768px) {
            .tech-stack-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </div>
  );
}