/* Clara v2 — Casos de uso en vértebra zigzag con relleno rosa por scroll */

const USE_CASES_V2 = [
  {
    n: '01',
    title: 'Fugas de rentabilidad',
    desc: 'Detecta dónde se filtra tu margen real entre lo que vendes y lo que llega a caja. Cruza ventas con devoluciones, fletes, comisiones y descuentos.',
    insight: 'Tu margen bruto reportado es 42%, pero después de descontar costos ocultos, tu margen operativo real es 17.4%.',
  },
  {
    n: '02',
    title: 'Inventario zombie',
    desc: 'Identifica los SKUs que ocupan bodega sin generar rotación. Calcula el capital inmovilizado y sugiere acciones concretas.',
    insight: '12 SKUs con más de 90 días sin rotación inmovilizan $8.4M. Pausar pauta en 3 de ellos liberaría $1.2M en 30 días.',
  },
  {
    n: '03',
    title: 'Rentabilidad geográfica',
    desc: 'Compara márgenes reales por región o ciudad, incluyendo el costo logístico de cada zona.',
    insight: 'Tu segunda región más rentable en ventas brutas se vuelve la menos rentable después de costos logísticos.',
  },
  {
    n: '04',
    title: 'Auditoría pago contra entrega',
    desc: 'Detecta dónde se bloquea tu flujo de caja en envíos no entregados, devoluciones no cobradas y cuentas por cobrar vencidas.',
    insight: 'El 14% de tu cartera mayor a 60 días está concentrada en 8 clientes. Tres de ellos crecieron en volumen este trimestre.',
  },
  {
    n: '05',
    title: 'Lifetime value por fuente',
    desc: 'Compara el valor real de un cliente según venga de pauta, orgánico, referido o cuenta directa.',
    insight: 'Los clientes adquiridos por pauta en mayo tienen LTV 38% menor que los adquiridos por referido. Estás pagando más por el cliente menos rentable.',
  },
];

function UseCasesSpine() {
  return (
    <div className="usecases-spine-wrap">
      <div className="spine-line"><div className="fill" /></div>

      {USE_CASES_V2.map((c, i) => {
        const side = i % 2 === 0 ? 'left' : 'right';
        return (
          <div key={c.n} className={`spine-row ${side}`}>
            {side === 'left' ? (
              <React.Fragment>
                <div className="spine-card">
                  <div className="n">CASO {c.n}</div>
                  <div className="title">{c.title}</div>
                  <div className="desc">{c.desc}</div>
                  <div className="insight">
                    <span className="pip" />
                    <div>
                      <div className="who">Clara dice</div>
                      {c.insight}
                    </div>
                  </div>
                </div>
                <div className="spine-node"><span className="pin" /></div>
                <div />
              </React.Fragment>
            ) : (
              <React.Fragment>
                <div />
                <div className="spine-node"><span className="pin" /></div>
                <div className="spine-card">
                  <div className="n">CASO {c.n}</div>
                  <div className="title">{c.title}</div>
                  <div className="desc">{c.desc}</div>
                  <div className="insight">
                    <span className="pip" />
                    <div>
                      <div className="who">Clara dice</div>
                      {c.insight}
                    </div>
                  </div>
                </div>
              </React.Fragment>
            )}
          </div>
        );
      })}
    </div>
  );
}

window.UseCasesSpine = UseCasesSpine;