const projects = [
  {
    title: 'Pipeline de agentes para análisis financiero — Fintech MX',
    category: 'AGENTES DE IA',
    year: '2026',
    desc: 'Orquestación de 4 agentes especializados (extracción, análisis, validación, reporte) sobre datos regulatorios. Reducción de 80% en tiempo de procesamiento.',
    tags: ['langchain', 'RAG', 'python', 'AWS'],
  },
  {
    title: 'Servidor MCP para gestión de conocimiento — Estudio Legal',
    category: 'INFRAESTRUCTURA MCP',
    year: '2025',
    desc: 'Servidor Model Context Protocol que conecta Claude con bases documentales internas. Búsqueda semántica, citación automática y control de acceso.',
    tags: ['MCP', 'Claude', 'vector DB', 'TypeScript'],
  },
  {
    title: 'Automatización end-to-end — E-commerce LATAM',
    category: 'AUTOMATIZACIÓN',
    year: '2025',
    desc: 'Workflow completo en n8n: ingesta de órdenes, clasificación con IA, ruteo inteligente y notificaciones. 200+ triggers diarios sin intervención humana.',
    tags: ['n8n', 'APIs', 'GCP', 'webhooks'],
  },
];

const WorkCard = ({ p, i }) => {
  const [ref, visible] = window.useReveal({ threshold: 0.1 });
  return (
    <div ref={ref} className={`reveal ${visible ? 'is-visible' : ''}`} style={{ '--reveal-delay': `${i * 110}ms` }}>
      <OSWindow title={`caso_${String(i+1).padStart(3,'0')}.md`} style={{ cursor: 'pointer' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.4fr', minHeight: 200,
        }} className="work-card-inner">
          <div className="work-diagram" style={{
            background: 'repeating-linear-gradient(45deg, #E8E3D8 0, #E8E3D8 1px, #F4EFE6 1px, #F4EFE6 14px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            borderRight: '2px solid #111',
            padding: 24,
          }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#999', textAlign: 'center' }}>
              [ diagrama de arquitectura ]
            </span>
          </div>
          <div style={{ padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.08em', marginBottom: 8 }}>
              {p.category} — {p.year}
            </div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700,
              color: '#111', margin: '0 0 12px', lineHeight: 1.25,
            }}>{p.title}</h3>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.55,
              color: '#555', margin: '0 0 16px',
            }}>{p.desc}</p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {p.tags.map(t => (
                <span key={t} style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  color: '#666', background: '#F4EFE6',
                  padding: '3px 8px', border: '1px solid #C9C2B4',
                  transition: 'background 0.2s ease, color 0.2s ease',
                }}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      </OSWindow>
    </div>
  );
};

const WorkSection = ({ tweaks }) => {
  const [headRef, headVisible] = window.useReveal({ threshold: 0.2 });
  return (
    <section id="trabajo" style={{
      padding: 'clamp(60px, 8vh, 100px) clamp(16px, 4vw, 48px)',
      position: 'relative', zIndex: 1,
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div ref={headRef} className={`reveal ${headVisible ? 'is-visible' : ''}`} style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 48, flexWrap: 'wrap', gap: 16,
        }}>
          <div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)', letterSpacing: '0.08em' }}>03 — TRABAJO</span>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4vw, 52px)',
              fontWeight: 800, color: '#111', margin: '8px 0 0', letterSpacing: '-0.02em',
            }}>Casos de estudio técnicos</h2>
          </div>
          <a href="#trabajo" style={{
            fontFamily: 'var(--font-mono)', fontSize: 13, color: '#111',
            textDecoration: 'none', borderBottom: '2px solid #111',
          }}>Ver archivo completo →</a>
        </div>

        <div style={{ display: 'grid', gap: 24 }}>
          {projects.map((p, i) => (
            <WorkCard key={i} p={p} i={i} />
          ))}
        </div>
      </div>
    </section>
  );
};

window.WorkSection = WorkSection;