/* global React, window */
const { useEffect, useRef } = React;
const { Icon, SectionHead } = window;

// Micro copy updated per client edits
const MICROS = {
  "01": "DESDE LO QUE TE HACE DISTINTO E IDENTIFICA.",
  "02": "CADA PIEZA TIENE DIRECCIÓN Y UN POR QUÉ.",
  "03": "LA RENTABILIDAD EN PAUTA SE GANA CUANDO TENÉS UN DIFERENCIAL CLARO.",
  "04": "EL \"QUE TENGO QUE HACER\" NACE DEL DIAGNÓSTICO.",
};

const BentoServices = () => {
  const sectionRef = useRef(null);
  const gradRef = useRef(null);

  useEffect(() => {
    const section = sectionRef.current;
    const grad = gradRef.current;
    if (!section || !grad) return;

    let raf = 0;
    let tx = 25, ty = 30;        // current target % (for blob 1)
    let cx = 25, cy = 30;        // smoothed
    let active = false;

    const onMove = (e) => {
      const rect = section.getBoundingClientRect();
      const x = ((e.clientX - rect.left) / rect.width) * 100;
      const y = ((e.clientY - rect.top) / rect.height) * 100;
      tx = Math.max(0, Math.min(100, x));
      ty = Math.max(0, Math.min(100, y));
      active = true;
    };
    const onLeave = () => { active = false; tx = 25; ty = 30; };

    const tick = () => {
      // ease toward target
      cx += (tx - cx) * 0.08;
      cy += (ty - cy) * 0.08;
      grad.style.setProperty("--gx",  cx + "%");
      grad.style.setProperty("--gy",  cy + "%");
      // mirrored, slower for the lime blob
      grad.style.setProperty("--gx2", (100 - cx * 0.6) + "%");
      grad.style.setProperty("--gy2", (100 - cy * 0.6) + "%");
      raf = requestAnimationFrame(tick);
    };
    tick();

    section.addEventListener("pointermove", onMove);
    section.addEventListener("pointerleave", onLeave);
    return () => {
      cancelAnimationFrame(raf);
      section.removeEventListener("pointermove", onMove);
      section.removeEventListener("pointerleave", onLeave);
    };
  }, []);

  return (
  <section id="services" data-theme="light" ref={sectionRef} className="section services-light">
    <div className="services-gradient" ref={gradRef} aria-hidden="true">
      <div className="svc-blob svc-blob-1" />
      <div className="svc-blob svc-blob-2" />
      <div className="svc-blob svc-blob-3" />
    </div>
    <div className="container" style={{ position: "relative" }}>
      <SectionHead
        tag="01 · Servicios"
        title={<>Cuatro capacidades. <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontWeight: 400 }}>Un solo sistema.</span></>}
        kicker="Nos contratás para pensar, no solo para ejecutar. Cada servicio se conecta con el anterior — por eso lo llamamos sistema, no paquete."
      />
      <div className="bento">
        {window.DATA.SERVICES.map((s, i) => (
          <div key={s.number} className={`bento-card reveal reveal-d${(i % 4) + 1}`} onClick={() => window.open(window.DATA.WHATSAPP_SERVICES, "_blank")}>
            <div className="bento-top">
              <div>
                <div className="bento-num">{s.number} / 04</div>
                <div className="bento-tag" style={{ marginTop: 20 }}>{s.tag}</div>
                <div className="bento-title">{s.title}</div>
                <div className="bento-desc">{s.description}</div>
                {s.extraTags && (
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 14 }}>
                    {s.extraTags.map(tag => (
                      <span key={tag} style={{ fontSize: 12, fontFamily: "var(--font-mono)", letterSpacing: ".08em", textTransform: "uppercase", padding: "4px 10px", borderRadius: 999, border: "1px solid var(--border)", color: "var(--fg-muted)" }}>{tag}</span>
                    ))}
                  </div>
                )}
              </div>
              <div className="bento-icon-stack">
                {s.aiPowered && <span className="ai-chip">◆ AI · Powered</span>}
                <div className="bento-icon"><Icon name={s.iconKey} size={22} /></div>
              </div>
            </div>
            <div className="bento-micro">{MICROS[s.number] || s.micro}</div>
          </div>
        ))}
      </div>

      <div className="reveal" style={{ marginTop: 32, padding: "24px 28px", border: "1px solid var(--border)", borderRadius: 16, background: "rgba(255,255,255,0.6)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--accent)" }} />
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg-muted)" }}>¿No sabés cuál necesitas?</span>
        </div>
        <a className="btn btn-ghost btn-sm" href={window.DATA.WHATSAPP_SERVICES} target="_blank" rel="noreferrer" style={{ fontSize: 14 }}>
          Contactanos <Icon name="arrow" size={14} />
        </a>
      </div>
    </div>
  </section>
  );
};

window.BentoServices = BentoServices;