// PROYECTOS DESTACADOS
const projectsData = [
  {
    id: 1,
    name: 'I.E. Tecnoeducando — Sistema de gestión escolar',
    sector: 'Educación',
    year: '2025',
    image: 'assets/proj-colegio.png',
    desc: 'Plataforma SaaS para colegios: matrícula, notas, asistencia, horarios, docentes, conducta y comunicación con padres. Reemplaza varios sistemas en uno solo.',
    impact: ['11 módulos integrados', 'Multi-colegio en una sola plataforma', 'Chat con padres en tiempo real'],
    accent: '#4F8CFF',
    stack: ['React', 'Node.js', 'PostgreSQL', 'AWS'],
  },
  {
    id: 2,
    name: 'Code — Asistente legal con IA',
    sector: 'Legal · SaaS',
    year: '2025',
    image: 'assets/proj-code.png',
    desc: 'Plataforma de consultas legales asistidas por IA, biblioteca de normativas SEACE, plantillas de documentos y panel administrativo con múltiples planes de suscripción.',
    impact: ['Scraper SEACE automático', '5 planes de suscripción', 'Integración con Claude API'],
    accent: '#22D3EE',
    stack: ['Next.js', 'Python', 'PostgreSQL', 'Claude API'],
  },
  {
    id: 3,
    name: 'Makipura — Punto de venta móvil',
    sector: 'Comercio · Fintech',
    year: '2024',
    image: 'assets/proj-makipura.png',
    desc: 'App móvil para puestos de mercado, bodegas y distribuidoras de Arequipa. Gestión de ventas, créditos, inventario y caja — con sincronización offline-first.',
    impact: ['Funciona offline + sync automático', 'Créditos y caja chica integrados', 'Optimizado para mercados de barrio'],
    accent: '#F59E0B',
    stack: ['React Native', 'Node.js', 'SQLite', 'WhatsApp API'],
  },
];

function ProjectCard({ p, i }) {
  return (
    <article className="surface" style={{
      padding: 0,
      overflow: 'hidden',
      gridColumn: i === 0 ? 'span 2' : 'span 1',
      display: 'flex',
      flexDirection: i === 0 ? 'row' : 'column',
      minHeight: i === 0 ? 420 : 480,
    }}>
      {/* Visual */}
      <div style={{
        flex: i === 0 ? '0 0 50%' : 'initial',
        height: i === 0 ? 'auto' : 240,
        position: 'relative',
        background: `
          radial-gradient(circle at 30% 30%, ${p.accent}33, transparent 60%),
          linear-gradient(135deg, #0a0e1f, #13182d)
        `,
        borderRight: i === 0 ? '1px solid var(--line)' : 'none',
        borderBottom: i !== 0 ? '1px solid var(--line)' : 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
        padding: i === 0 ? '32px' : '20px',
      }}>
        <div style={{
          position: 'absolute', top: 16, left: 16,
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.16em',
          textTransform: 'uppercase', color: p.accent, zIndex: 2,
          padding: '4px 10px', borderRadius: 999,
          background: 'rgba(5,6,15,0.6)', border: `1px solid ${p.accent}44`,
          backdropFilter: 'blur(8px)',
        }}>
          {String(p.id).padStart(2,'0')} · Caso
        </div>
        <img src={p.image} alt={p.name} style={{
          maxWidth: '100%',
          maxHeight: i === 0 ? 420 : 200,
          width: 'auto', height: 'auto',
          borderRadius: 8,
          border: '1px solid rgba(255,255,255,0.08)',
          boxShadow: `0 30px 80px -20px ${p.accent}55, 0 10px 40px rgba(0,0,0,.5)`,
          transform: i === 0 ? 'perspective(1400px) rotateY(-4deg) rotateX(2deg)' : 'none',
          transition: 'transform .5s ease',
        }}/>
      </div>

      {/* Content */}
      <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 16, flex: 1 }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <span className="badge" style={{ color: p.accent, borderColor: `${p.accent}44` }}>{p.sector}</span>
          <span className="badge">{p.year}</span>
        </div>
        <h3 style={{ fontSize: i === 0 ? 28 : 22, letterSpacing: '-0.02em' }}>{p.name}</h3>
        <p style={{ fontSize: 15 }}>{p.desc}</p>

        <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: '1px solid var(--line)' }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '.16em', textTransform: 'uppercase',
            color: 'var(--fg-3)', marginBottom: 12,
          }}>Impacto</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {p.impact.map(im => (
              <div key={im} style={{ display:'flex', gap: 10, fontSize: 13.5 }}>
                <span style={{ color: p.accent }}>↗</span> {im}
              </div>
            ))}
          </div>

          <div style={{ marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {p.stack.map(s => (
              <span key={s} style={{
                padding: '4px 10px', borderRadius: 6,
                background: 'rgba(120,140,255,0.06)',
                border: '1px solid var(--line)',
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'var(--fg-3)',
              }}>{s}</span>
            ))}
          </div>
        </div>
      </div>
    </article>
  );
}

function Projects() {
  return (
    <section id="proyectos" style={{ position: 'relative' }}>
      <div className="glow-blob" style={{ left: '-200px', top: '30%', background: 'radial-gradient(circle, rgba(168,85,247,0.2), transparent 60%)' }}/>
      <div className="container">
        <div className="section-head" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end', maxWidth: '100%', flexWrap: 'wrap', gap: 24 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 760 }}>
            <span className="eyebrow">Proyectos</span>
            <h2>Sistemas que <span className="gradient-text">funcionan</span> en producción.</h2>
            <p style={{ fontSize: 17 }}>
              Una selección de proyectos donde el software a medida resolvió problemas que el software genérico no podía.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
            {['Todos', 'Educación', 'Legal', 'Comercio'].map((f, i) => (
              <button key={f} style={{
                padding: '8px 14px', borderRadius: 999,
                background: i === 0 ? 'rgba(79,140,255,0.12)' : 'transparent',
                border: '1px solid ' + (i === 0 ? 'var(--line-3)' : 'var(--line)'),
                color: i === 0 ? 'var(--fg)' : 'var(--fg-3)',
                fontSize: 13, fontFamily: 'var(--font-mono)',
                transition: 'all .2s',
              }}>{f}</button>
            ))}
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 20,
        }} className="projects-grid">
          {projectsData.map((p, i) => <ProjectCard key={p.id} p={p} i={i}/>)}
        </div>
      </div>

      <style>{`
        @media (max-width: 920px){
          .projects-grid{ grid-template-columns: 1fr !important; }
          .projects-grid > article{ grid-column: span 1 !important; flex-direction: column !important; }
          .projects-grid > article > div:first-child{ flex: 0 0 240px !important; border-right: none !important; border-bottom: 1px solid var(--line) !important; }
        }
      `}</style>
    </section>
  );
}
window.Projects = Projects;