// Activa Soluciones — Case studies
// Card grid with realistic enterprise placeholders.

const cases = [
  {
    industry: 'Retail · Perú',
    name: 'Cadena multicategoría — 18 tiendas',
    body: 'Rediseño completo del funnel comercial omnicanal. Migración de CRM legacy, modelo de atribución y squad de RevOps inhouse durante 9 meses.',
    kpis: [
      { v: '+42%', l: 'ventas omnicanal' },
      { v: '−28%', l: 'CAC blended' },
      { v: '4.2×', l: 'LTV/CAC' },
    ],
    accent: 'blue',
  },
  {
    industry: 'Banca · LATAM',
    name: 'Banca corporativa regional',
    body: 'Diseño de nuevo modelo comercial para banca empresarial. BI ejecutivo + plan de capacitación a fuerza de ventas en 3 países.',
    kpis: [
      { v: '+S/120M', l: 'colocaciones netas' },
      { v: '+31%', l: 'cross-sell empresa' },
      { v: '90d', l: 'a primer KPI' },
    ],
    accent: 'orange',
  },
  {
    industry: 'Industrial · Chile',
    name: 'Grupo industrial — 3 unidades de negocio',
    body: 'Diagnóstico ejecutivo, plan 100 días y ejecución de la estrategia comercial post-fusión de tres unidades de negocio.',
    kpis: [
      { v: '+19%', l: 'EBITDA consolidado' },
      { v: '−40%', l: 'tiempo de cotización' },
      { v: '2', l: 'unidades integradas' },
    ],
    accent: 'blue',
  },
];

const CaseStudies = () => {
  return (
    <section className="section muted" id="casos">
      <div className="container">
        <div className="cs-head">
          <Reveal from="up">
            <div>
              <span className="s-eyebrow">Casos de éxito</span>
              <h2 className="s-title">Marcas que ya están <span className="accent">acelerando</span>.</h2>
            </div>
          </Reveal>
          <Reveal from="up" delay={120}>
            <a className="btn ghost">Ver todos los casos <span className="arr arrow-rise">→</span></a>
          </Reveal>
        </div>
        <div className="cs-grid">
          {cases.map((c, i) => (
            <Reveal key={i} from="right" delay={i * 140}>
              <article className="card case">
                <div className="corner-line"></div>
                <div className="case-cover" data-accent={c.accent}>
                  <div className="case-tag">{c.industry}</div>
                </div>
                <div className="case-body">
                  <h3 className="case-name">{c.name}</h3>
                  <p className="case-txt">{c.body}</p>
                  <div className="case-kpis">
                    {c.kpis.map((k, j) => (
                      <React.Fragment key={j}>
                        <div className="ck-v" style={{ gridColumn: j + 1, gridRow: 1 }}><CountUp value={k.v} /></div>
                        <div className="ck-l" style={{ gridColumn: j + 1, gridRow: 2 }}>{k.l}</div>
                      </React.Fragment>
                    ))}
                  </div>
                  <a className="case-more more">Leer caso completo <span className="arr arrow-rise">→</span></a>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .cs-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; gap: 24px; flex-wrap: wrap; }
        .cs-head .s-title { margin-top: 0; }
        .cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
        .cs-grid > .reveal { display: flex; }
        .cs-grid > .reveal > .case { flex: 1; }
        @media (max-width: 1000px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 720px) { .cs-grid { grid-template-columns: 1fr; } }

        .case { padding: 0; overflow: hidden; }
        .case-cover {
          height: 140px; position: relative; overflow: hidden;
          display: flex; align-items: flex-end; padding: 18px;
        }
        .case-cover[data-accent="blue"]   { background: var(--gradient-brand); }
        .case-cover[data-accent="orange"] { background: linear-gradient(135deg, #1B3A6B 0%, #E67E22 100%); }
        .case-cover::before {
          content: ""; position: absolute; inset: 0;
          background-image: repeating-linear-gradient(-22deg, transparent 0, transparent 36px, rgba(255,255,255,0.10) 36px, rgba(255,255,255,0.10) 37px);
        }
        .case-tag {
          position: relative; z-index: 1;
          font-family: var(--font-body); font-weight: 700; font-size: 11px;
          letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
          padding: 6px 12px; background: rgba(0,0,0,0.18);
          border: 1px solid rgba(255,255,255,0.24);
          border-radius: 999px;
        }
        .case-body { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
        .case-name {
          font-family: var(--font-display); font-weight: 700; font-size: 19px;
          color: var(--color-fg-1); letter-spacing: -0.01em; margin: 0 0 8px;
          line-height: 1.25;
          min-height: 48px;
          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .case-txt {
          font-family: var(--font-body); font-size: 14px; line-height: 1.55;
          color: var(--color-fg-2); margin: 0 0 20px;
          min-height: 65px;
          display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
        }
        .case-kpis {
          display: grid; grid-template-columns: repeat(3, 1fr);
          grid-template-rows: auto auto;
          column-gap: 12px; row-gap: 6px;
          padding: 16px 0; margin-bottom: 16px;
          border-top: 1px solid var(--color-border);
          border-bottom: 1px solid var(--color-border);
        }
        .ck-v {
          font-family: var(--font-display); font-weight: 800; font-size: 20px;
          color: var(--color-accent); letter-spacing: -0.02em; line-height: 1;
          font-variant-numeric: tabular-nums;
          align-self: end;
        }
        .ck-l {
          font-family: var(--font-body); font-size: 10.5px;
          color: var(--color-fg-3); letter-spacing: 0.04em;
          text-transform: uppercase; font-weight: 600;
          line-height: 1.3;
        }
        .case-more {
          font-family: var(--font-display); font-weight: 700; font-size: 13px;
          color: var(--activa-blue-700); cursor: pointer;
          display: inline-flex; align-items: center; gap: 8px;
          transition: color 220ms var(--ease-rise);
        }
        .card:hover .case-more { color: var(--color-accent); }
      `}</style>
    </section>
  );
};