// Activa Soluciones — Hero
// Full-bleed deep-brand gradient + trajectory pattern + glowing orange accent.
// H1 has a single accented word in orange. KPI strip below the lead copy.

const Hero = ({ onOpenDialog }) => {
  return (
    <section className="hero" id="top">
      <div className="hero-photo"></div>
      <div className="hero-tint"></div>
      <div className="bg-trajectory"></div>
      <div className="hero-glow"></div>
      <div className="container hero-inner">
        <Reveal from="up"><span className="s-eyebrow">El motor de las grandes marcas · LATAM</span></Reveal>
        <Reveal from="up" delay={80}>
          <h1 className="hero-title">
            Activamos el crecimiento que tu <span className="accent">P&amp;L</span> necesita.
          </h1>
        </Reveal>
        <Reveal from="up" delay={160}>
          <p className="hero-lead">
            Diseñamos, operamos y medimos las palancas que mueven a las grandes marcas del Perú, Chile y México — estrategia, marketing, tecnología y ejecución, en un solo equipo.
          </p>
        </Reveal>
        <Reveal from="up" delay={240}>
          <div className="hero-cta">
            <button className="btn primary" onClick={onOpenDialog}>
              Agendar diagnóstico ejecutivo <span className="arr arrow-rise">→</span>
            </button>
            <a href="#casos" className="btn dark-secondary">Ver casos de éxito</a>
          </div>
        </Reveal>

        <div className="kpi-strip">
          <KpiRow items={[
            { v: '+38%',   l: 'crecimiento promedio en ventas para clientes activos' },
            { v: 'S/240M', l: 'EBITDA generado para clientes desde 2018' },
            { v: '90d',    l: 'time-to-first-result desde el diagnóstico' },
            { v: '42',     l: 'grandes marcas activas en PE, CL y MX' },
          ]} />
        </div>
      </div>

      <style>{`
        .hero {
          position: relative; overflow: hidden;
          padding: 96px 0 80px;
          background: var(--gradient-hero);
          color: #fff;
        }
        .hero-photo {
          position: absolute; inset: -20px;
          background-image: url('../../assets/hero-buildings.png');
          background-size: cover;
          background-position: center 30%;
          filter: blur(2px) saturate(0.7);
          opacity: 0.75;
          mix-blend-mode: multiply;
          pointer-events: none;
          transform: scale(1.05);
        }
        .hero-tint {
          position: absolute; inset: 0;
          background:
            linear-gradient(180deg, rgba(10,26,53,0.35) 0%, rgba(10,26,53,0.10) 40%, rgba(10,26,53,0.65) 100%),
            linear-gradient(95deg, rgba(10,26,53,0.55) 0%, rgba(27,58,107,0.10) 55%, rgba(46,92,158,0.0) 100%);
          pointer-events: none;
        }
        .hero-glow {
          position: absolute; right: -120px; top: -120px;
          width: 520px; height: 520px; border-radius: 999px;
          background: radial-gradient(circle at 30% 30%, rgba(243,156,18,0.32), transparent 70%);
          filter: blur(12px);
          pointer-events: none;
        }
        .hero-inner { position: relative; z-index: 2; }
        .hero-title {
          font-family: var(--font-display); font-weight: 800;
          font-size: clamp(44px, 6.2vw, 76px); line-height: 1.02;
          letter-spacing: -0.025em; color: #fff; margin: 16px 0 22px;
          max-width: 900px;
        }
        .hero-title .accent { color: var(--color-accent); }
        .hero-lead {
          font-family: var(--font-body); font-size: 20px; line-height: 1.55;
          color: rgba(255,255,255,0.82); max-width: 640px; margin: 0;
        }
        .hero-cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
        .kpi-strip {
          margin-top: 80px;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: auto auto;
          column-gap: 32px;
          row-gap: 14px;
          padding-top: 36px;
          align-items: start;
          border-top: 1px solid rgba(255,255,255,0.14);
          position: relative;
        }
        .kpi-num {
          font-family: var(--font-display); font-weight: 800;
          color: var(--color-accent);
          font-size: clamp(36px, 4vw, 52px); line-height: 1;
          letter-spacing: -0.03em;
          font-variant-numeric: tabular-nums;
          align-self: end;
        }
        .kpi-lbl {
          font-family: var(--font-body); font-size: 13px;
          line-height: 1.45;
          color: rgba(255,255,255,0.72);
        }
        .kpi-strip::before {
          content: ""; position: absolute; left: 0; top: -1px;
          width: 180px; height: 1px; background: var(--color-accent);
          transform-origin: left; transform: rotate(0deg);
        }
      `}</style>
    </section>
  );
};

const KpiRow = ({ items }) => (
  <>
    {items.map((it, i) => (
      <div key={'n' + i} className="kpi-num" style={{ gridColumn: i + 1, gridRow: 1 }}>
        <CountUp value={it.v} />
      </div>
    ))}
    {items.map((it, i) => (
      <div key={'l' + i} className="kpi-lbl" style={{ gridColumn: i + 1, gridRow: 2 }}>{it.l}</div>
    ))}
  </>
);