const services = [
  {
    title: 'Implementación de Agentes',
    desc: 'Diseño y desarrollo de agentes autónomos con LLMs. Orquestación multi-modelo, tool-use, RAG y evaluación de pipelines.',
    duration: '',
    price: '',
    color: '#C9B8E6',
    tag: 'CORE',
  },
  {
    title: 'Servidores MCP',
    desc: 'Arquitectura e implementación de servidores Model Context Protocol. Integración con Claude, OpenAI y modelos open-source.',
    duration: '',
    price: '',
    color: '#A8D9B9',
    tag: 'INFRA',
  },
  {
    title: 'Automatización con n8n',
    desc: 'Workflows de automatización end-to-end. Conexión de APIs, triggers inteligentes y orquestación de tareas con IA.',
    duration: '',
    price: '',
    color: '#F7D46B',
    tag: 'AUTOMACIÓN',
  },
  {
    title: 'Cloud Backup (AWS/GCP)',
    desc: 'Infraestructura de respaldo, despliegue y monitoreo en la nube. CI/CD, containerización y alta disponibilidad.',
    duration: '',
    price: '',
    color: '#F4B890',
    tag: 'CLOUD',
  },
];

const ServiceCard = ({ s, i, cardStyle }) => {
  const [ref, visible] = window.useReveal({ threshold: 0.12 });
  return (
    <div ref={ref} className={`service-card reveal ${visible ? 'is-visible' : ''}`} style={{
      background: s.color,
      border: '2px solid #111',
      borderRadius: cardStyle === 'rounded' ? 16 : 0,
      padding: 28,
      boxShadow: cardStyle === 'rounded' ? '4px 4px 0 #111' : '6px 6px 0 #111',
      cursor: 'pointer',
      display: 'flex', flexDirection: 'column', gap: 16,
      '--reveal-delay': `${i * 90}ms`,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700,
          color: '#111', margin: 0, lineHeight: 1.2,
        }}>{s.title}</h3>
        <span className="card-tag">
          <Stamp text={s.tag} color="#111" size={10} />
        </span>
      </div>
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.55,
        color: '#333', margin: 0, flex: 1,
      }}>{s.desc}</p>
      {(s.duration || s.price) && <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 12, color: '#111',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        borderTop: '1.5px solid rgba(0,0,0,0.15)', paddingTop: 16,
      }}>
        <span>{s.duration}</span>
        <span style={{ fontWeight: 700 }}>{s.price}</span>
      </div>}
    </div>
  );
};

const ServicesSection = ({ tweaks }) => {
  const cardStyle = tweaks.cardStyle || 'rounded';
  const [headRef, headVisible] = window.useReveal({ threshold: 0.2 });

  return (
    <section id="servicios" 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' }}>02 — CAPACIDADES</span>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4vw, 52px)',
              fontWeight: 800, color: '#111', margin: '8px 0 0', letterSpacing: '-0.02em',
            }}>¿Qué puedo construir?</h2>
          </div>
          <a href="#servicios" style={{
            fontFamily: 'var(--font-mono)', fontSize: 13, color: '#111',
            textDecoration: 'none', borderBottom: '2px solid #111',
          }}>Ver todos →</a>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 24,
        }}>
          {services.map((s, i) => (
            <ServiceCard key={i} s={s} i={i} cardStyle={cardStyle} />
          ))}
        </div>
      </div>
    </section>
  );
};

window.ServicesSection = ServicesSection;