// Activa Soluciones — Executive testimonial

const Testimonial = () => {
  return (
    <section className="section muted">
      <div className="container t-wrap">
        <Reveal from="up">
          <div className="t-quote-mark">"</div>
          <blockquote className="t-quote">
            Activa no llegó a "ayudarnos" — llegaron a operar con nosotros. En seis meses tuvimos
            un dashboard ejecutivo único, un funnel limpio y un equipo comercial mejor entrenado.
            <span className="t-em"> El número se movió. Y siguió moviéndose.</span>
          </blockquote>
        </Reveal>
        <Reveal from="up" delay={150}>
          <div className="t-person">
            <div className="t-avatar">MR</div>
            <div className="t-info">
              <div className="t-name">Mariana Reátegui</div>
              <div className="t-role">CCO · Grupo Pacífico Retail</div>
            </div>
            <div className="t-divider"></div>
            <div className="t-kpi">
              <span className="t-kpi-v"><CountUp value="+42%" /></span>
              <span className="t-kpi-l">ventas omnicanal</span>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        .t-wrap { max-width: 920px; margin: 0 auto; text-align: left; position: relative; }
        .t-quote-mark {
          font-family: var(--font-display); font-weight: 800;
          color: var(--color-accent); opacity: 0.42;
          font-size: 200px; line-height: 0.6;
          position: absolute; left: -10px; top: -10px;
          pointer-events: none;
        }
        .t-quote {
          font-family: var(--font-display); font-weight: 600;
          font-size: clamp(24px, 2.8vw, 34px); line-height: 1.35;
          color: var(--color-fg-1); letter-spacing: -0.015em;
          margin: 0 0 36px; position: relative; z-index: 1;
        }
        .t-em { color: var(--activa-blue-700); }
        .t-person {
          display: flex; align-items: center; gap: 18px;
          padding-top: 24px; border-top: 1px solid var(--color-border);
        }
        .t-avatar {
          width: 56px; height: 56px; border-radius: 999px;
          background: var(--gradient-brand); color: #fff;
          display: grid; place-items: center;
          font-family: var(--font-display); font-weight: 700; font-size: 18px;
          letter-spacing: 0.04em;
        }
        .t-info { flex: 1; }
        .t-name {
          font-family: var(--font-display); font-weight: 700; font-size: 15px;
          color: var(--color-fg-1); letter-spacing: -0.005em;
        }
        .t-role {
          font-family: var(--font-body); font-size: 12px; font-weight: 500;
          color: var(--color-fg-3); margin-top: 3px;
        }
        .t-divider { width: 1px; height: 36px; background: var(--color-border); }
        .t-kpi { display: flex; flex-direction: column; align-items: flex-end; }
        .t-kpi-v {
          font-family: var(--font-display); font-weight: 800; font-size: 28px;
          color: var(--color-accent); line-height: 1; letter-spacing: -0.02em;
        }
        .t-kpi-l {
          font-family: var(--font-body); font-size: 10px; font-weight: 600;
          color: var(--color-fg-3); letter-spacing: 0.1em;
          text-transform: uppercase; margin-top: 4px;
        }
      `}</style>
    </section>
  );
};