// Services — bento grid con variedad de tamaños
const SERVICES = [
  {
    k: '01',
    title: 'Sitios web corporativos',
    desc: 'Landing pages y webs institucionales pensadas para convertir. Astro, rendimiento extremo, SEO on-page.',
    bullets: ['Astro / Next.js', 'CMS headless', '< 1s de carga'],
    size: 'lg',
    accent: true,
  },
  {
    k: '02',
    title: 'E-commerce',
    desc: 'Tiendas online con Shopify, WooCommerce o headless. Pagos, inventario y analítica.',
    bullets: ['Shopify / Medusa', 'Stripe & Redsys', 'Checkout optimizado'],
    size: 'md',
  },
  {
    k: '03',
    title: 'Aplicaciones SaaS',
    desc: 'Producto web a medida con autenticación, facturación y paneles de administración.',
    bullets: ['Next + tRPC', 'Supabase / Postgres', 'Stripe Billing'],
    size: 'md',
  },
  {
    k: '04',
    title: 'Apps móviles',
    desc: 'Experiencias nativas en iOS y Android con una base compartida.',
    bullets: ['React Native', 'Expo EAS', 'Push & offline'],
    size: 'sm',
  },
  {
    k: '05',
    title: 'Automatizaciones',
    desc: 'Conecta tus herramientas, elimina tareas manuales, integra LLMs en tu operativa.',
    bullets: ['n8n / Zapier', 'APIs & webhooks', 'Agentes IA'],
    size: 'sm',
  },
  {
    k: '06',
    title: 'SEO & performance',
    desc: 'Auditorías, Core Web Vitals, SEO técnico y de contenido para posicionar orgánico.',
    bullets: ['Lighthouse 95+', 'Schema.org', 'Keyword strategy'],
    size: 'sm',
  },
  {
    k: '07',
    title: 'Mantenimiento',
    desc: 'Soporte continuo, monitorización 24/7, actualizaciones y evolución del producto.',
    bullets: ['SLA definido', 'Uptime 99.9%', 'Reportes mensuales'],
    size: 'sm',
  },
  {
    k: '08',
    title: 'Consultoría técnica',
    desc: 'Due diligence, arquitectura, elección de stack, code review y mentoring a equipos.',
    bullets: ['Arquitectura', 'Code review', 'Tech strategy'],
    size: 'sm',
  },
];

const ServiceCard = ({ s }) => (
  <article className={`svc-card svc-card--${s.size} ${s.accent ? 'is-accent' : ''}`}>
    <div className="svc-card__head">
      <span className="svc-card__num mono">{s.k}</span>
      <span className="svc-card__dot" />
    </div>
    <div className="svc-card__body">
      <h3 className="svc-card__title">{s.title}</h3>
      <p className="svc-card__desc">{s.desc}</p>
    </div>
    <ul className="svc-card__bullets mono">
      {s.bullets.map((b, i) => <li key={i}>{b}</li>)}
    </ul>
    <div className="svc-card__arrow" aria-hidden="true">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M7 7h10v10"/></svg>
    </div>
  </article>
);

const Services = () => (
  <section id="servicios" className="services">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">servicios · 01 / 05</div>
        <h2>Todo lo que necesita<br/>tu <em>producto digital</em>.</h2>
        <p>Desde la primera idea hasta el mantenimiento continuo. Un único equipo, un único contacto, entregas rápidas.</p>
      </div>

      <div className="svc-grid">
        {SERVICES.map(s => <ServiceCard key={s.k} s={s} />)}
      </div>
    </div>
  </section>
);

window.Services = Services;