function Servicios({ variant = 'accordion' }) {
  const [open, setOpen] = React.useState(0);

  const servicios = [
    {
      num: '01',
      name: 'Estrategia',
      em: 'de marca',
      suit: '♠',
      desc: <>El cimiento. Diagnóstico de mercado, posicionamiento, arquitectura de marca y narrativa. Definimos <strong>la jugada</strong> antes de tirar la primera carta.</>,
      features: ['Diagnóstico de mercado', 'Arquitectura de marca', 'Posicionamiento', 'Narrativa estratégica'],
    },
    {
      num: '02',
      name: 'Identidad',
      em: 'visual',
      suit: '♣',
      desc: <>El rostro. Sistema de identidad completo: logotipo, tipografía, paleta, iconografía y guía editorial. Una marca que <strong>se sostiene</strong> en cualquier formato.</>,
      features: ['Logotipo y marca', 'Sistema tipográfico', 'Lenguaje visual', 'Guía de marca'],
    },
    {
      num: '03',
      name: 'Producto',
      em: 'digital',
      suit: '♦',
      desc: <>El sistema. UX/UI, design systems, prototipos y handoff a desarrollo. Producto que <strong>escala</strong> sin perder coherencia ni performance.</>,
      features: ['Investigación UX', 'Diseño UI', 'Design system', 'Prototipo y handoff'],
    },
    {
      num: '04',
      name: 'Crecimiento',
      em: '& performance',
      suit: '♥',
      desc: <>El movimiento. Marketing de contenido, paid media, optimización de conversión y reportes. Para que la jugada <strong>genere retorno</strong>, no solo aplausos.</>,
      features: ['Estrategia de contenido', 'Paid media', 'CRO & analítica', 'Reporting mensual'],
    },
  ];

  return (
    <section className="servicios" id="servicios">
      <div className="servicios__head">
        <div>
          <div className="eyebrow reveal">03 · Servicios</div>
          <h2 className="h-section reveal" style={{ marginTop: 24, '--delay': '100ms' }}>
            Cuatro cartas.<br/><span className="italic-display" style={{ color: 'var(--accent)' }}>Una jugada</span> completa.
          </h2>
        </div>
        <p className="lede reveal" style={{ '--delay': '200ms' }}>
          Trabajamos bajo una metodología modular: tomas la carta que necesitas hoy, integras las demás cuando estés listo. Sin paquetes inflados ni alcances ambiguos.
        </p>
      </div>

      <div className="servicios__list">
        {servicios.map((s, i) => (
          <div key={i} className={`servicio ${open === i ? 'open' : ''}`}>
            <div className="servicio__row" onClick={() => setOpen(open === i ? -1 : i)} data-hover>
              <span className="servicio__num">{s.num}</span>
              <h3 className="servicio__name">
                {s.name} <em>{s.em}</em>
              </h3>
              <span className="servicio__suit">{s.suit}</span>
              <span className="servicio__toggle" />
            </div>
            <div className="servicio__panel">
              <div className="servicio__panel-inner">
                <div className="servicio__panel-spacer" />
                <p className="servicio__desc">{s.desc}</p>
                <ul className="servicio__features">
                  {s.features.map((f, j) => <li key={j}>{f}</li>)}
                </ul>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.Servicios = Servicios;