// Activa Soluciones — Methodology
// Diagonal 4-step "trayectoria" timeline. Click a step to expand.

const steps = [
  {
    n: '01', title: 'Diagnóstico',
    weeks: '2 semanas',
    body: 'Auditoría comercial 360°: pipeline, oferta, CAC/LTV, equipo, tecnología. Salida: tablero priorizado de palancas de crecimiento con impacto cuantificado en P&L.',
  },
  {
    n: '02', title: 'Diseño',
    weeks: '3 semanas',
    body: 'Diseñamos las palancas priorizadas — go-to-market, comercial, tecnología, datos — con OKRs trimestrales y plan de implementación detallado, semana a semana.',
  },
  {
    n: '03', title: 'Ejecución',
    weeks: 'Trimestres rotativos',
    body: 'Squad senior dentro de tu organización. Comité quincenal con directorio. Auditoría de resultados semana a semana en un dashboard único de BI.',
  },
  {
    n: '04', title: 'Auditoría',
    weeks: 'Continua',
    body: 'Cada trimestre, auditoría independiente de resultados. Si las palancas no entregan, no facturamos performance. Así operamos.',
  },
];

const Methodology = () => {
  const [active, setActive] = React.useState(0);
  return (
    <section className="section" id="metodologia">
      <div className="container">
        <Reveal from="up"><span className="s-eyebrow">Metodología</span></Reveal>
        <Reveal from="up" delay={80}>
          <h2 className="s-title">Una <span className="accent">trayectoria</span> en cuatro tiempos.</h2>
        </Reveal>
        <Reveal from="up" delay={160}>
          <p className="s-lead">
            No vendemos proyectos eternos. Vendemos resultados con un calendario claro,
            metas trimestrales y auditoría independiente.
          </p>
        </Reveal>

        <Reveal from="up" delay={240}>
          <div className="method">
          <div className="method-track">
            {steps.map((s, i) => (
              <button
                key={s.n}
                className={"step " + (i === active ? "active" : "")}
                onClick={() => setActive(i)}
              >
                <span className="step-n">{s.n}</span>
                <span className="step-t">{s.title}</span>
                <span className="step-w">{s.weeks}</span>
              </button>
            ))}
            <div className="method-line"></div>
          </div>
          <div className="method-body">
            <p>{steps[active].body}</p>
          </div>
        </div>
        </Reveal>
      </div>

      <style>{`
        .method { margin-top: 56px; }
        .method-track {
          display: grid; grid-template-columns: repeat(4, 1fr);
          gap: 0;
          position: relative;
          background: #fff; border: 1px solid var(--color-border);
          border-radius: 16px; padding: 8px;
          overflow: hidden;
        }
        .step {
          background: transparent; border: 0; cursor: pointer; text-align: left;
          padding: 24px 22px; border-radius: 12px;
          display: flex; flex-direction: column; gap: 6px;
          font-family: var(--font-body);
          color: var(--color-fg-2);
          transition: all 220ms var(--ease-rise);
          position: relative; z-index: 2;
        }
        .step:hover { background: var(--color-bg-muted); }
        .step.active {
          background: var(--gradient-brand);
          color: #fff;
          box-shadow: 0 12px 28px rgba(27,58,107,0.20);
        }
        .step-n {
          font-family: var(--font-display); font-weight: 800; font-size: 28px;
          color: var(--color-accent); line-height: 1; letter-spacing: -0.02em;
        }
        .step.active .step-n { color: #F5B143; }
        .step-t {
          font-family: var(--font-display); font-weight: 700; font-size: 18px;
          color: var(--color-fg-1); letter-spacing: -0.01em;
        }
        .step.active .step-t { color: #fff; }
        .step-w {
          font-family: var(--font-body); font-size: 11px; font-weight: 600;
          letter-spacing: 0.10em; text-transform: uppercase;
          color: var(--color-fg-3);
        }
        .step.active .step-w { color: rgba(255,255,255,0.78); }
        .method-line {
          position: absolute; left: 0; right: 0; top: 50%;
          height: 1px; background: var(--color-accent); opacity: 0.30;
          transform: rotate(-2deg); transform-origin: left;
          z-index: 1;
          pointer-events: none;
        }
        .method-body {
          margin-top: 22px;
          padding: 28px 32px;
          background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
          font-family: var(--font-body); font-size: 17px; line-height: 1.6;
          color: var(--color-fg-2);
          box-shadow: var(--shadow-sm);
          border-left: 3px solid var(--color-accent);
        }
        .method-body p { margin: 0; }
        @media (max-width: 880px) { .method-track { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};