// Services overview grid — 4 services with brand-hue tints, used on home + services index.
const ServicesGrid = ({ heading = true } = {}) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const cards = ref.current.querySelectorAll(".scard");
    window.gsap.from(cards, {
      scrollTrigger: { trigger: ref.current, start: "top 80%" },
      y: 36, opacity: 0, duration: 0.9, stagger: 0.08, ease: "expo.out",
    });
  }, []);

  const items = [
    {
      n: "01", t: "Programmatic Advertising",
      d: "DSP-led buying across web, mobile, audio, and DOOH. Audience design, creative ops, brand-safety, and full-funnel attribution — without hidden tech-tax.",
      tint: "var(--brand-cobalt)",
      chip: "Demand-side",
      href: "programmatic.html",
      kpis: ["DSPs: DV360, TTD, Yahoo, Xandr", "MMP: AppsFlyer, Adjust", "Verification: IAS, DV"],
    },
    {
      n: "02", t: "CTV Advertising",
      d: "Premium streaming inventory with creative QA, frequency control, and incremental reach lift modeling. Move TV budgets to the channel where attention actually lives.",
      tint: "var(--brand-violet)",
      chip: "Streaming + OTT",
      href: "ctv.html",
      kpis: ["Direct + biddable supply", "ACR-based reach planning", "Brand-lift studies"],
    },
    {
      n: "03", t: "Mobile Development",
      d: "iOS, Android, and React Native apps shipped end-to-end. Product strategy, design, native engineering, store ops, and a release cadence you can plan a roadmap on.",
      tint: "var(--brand-orange)",
      chip: "Engineering",
      href: "mobile-development.html",
      kpis: ["Swift, Kotlin, RN", "App Store + Play Store ops", "Live ops & analytics"],
    },
    {
      n: "04", t: "Cloud Computing",
      d: "AWS and GCP architecture, DevOps, and managed runtime. We move you to infrastructure-as-code, set the on-call rotation, and keep the bill predictable.",
      tint: "var(--brand-crimson)",
      chip: "Infra",
      href: "cloud-computing.html",
      kpis: ["AWS / GCP / Azure", "Terraform · Kubernetes", "24/7 SRE on-call"],
    },
  ];

  return (
    <section ref={ref} style={{
      padding: "clamp(88px, 11vw, 160px) clamp(16px, 4vw, 48px)",
      background: "var(--paper)",
      borderTop: "1px solid var(--border)",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        {heading && (
          <div style={{ marginBottom: 72, maxWidth: 900 }}>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
              letterSpacing: "0.14em", textTransform: "uppercase",
              color: "var(--cobalt-700)", marginBottom: 24,
            }}>What we do</div>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 400,
              fontSize: "clamp(44px, 6vw, 76px)", lineHeight: 1.05,
              letterSpacing: "-0.025em", margin: 0,
            }}>
              Four practices, <span className="brand-grad-text" style={{ fontStyle: "italic" }}>one operating model.</span>
            </h2>
            <p style={{
              fontSize: 19, lineHeight: 1.6, color: "var(--fg-muted)",
              maxWidth: 720, marginTop: 22,
            }}>
              We combine media operators with software engineers — so the campaign,
              the app it runs in, and the dashboard you watch it on all belong to
              the same team.
            </p>
          </div>
        )}

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 18,
        }}>
          {items.map(s => (
            <a key={s.n} href={s.href} className="scard" style={{
              position: "relative",
              background: "var(--paper-raised)",
              border: "1px solid var(--border)",
              borderRadius: 28,
              padding: "clamp(24px, 3vw, 36px) clamp(20px, 3vw, 36px) clamp(22px, 3vw, 32px)",
              minHeight: 280,
              display: "flex", flexDirection: "column",
              textDecoration: "none", color: "var(--ink-900)",
              overflow: "hidden",
              transition: "transform 380ms var(--ease-out-expo), border-color 300ms, box-shadow 300ms",
            }}
            onMouseEnter={e => {
              e.currentTarget.style.transform = "translateY(-4px)";
              e.currentTarget.style.borderColor = s.tint;
              e.currentTarget.style.boxShadow = "var(--sh-lg)";
            }}
            onMouseLeave={e => {
              e.currentTarget.style.transform = "translateY(0)";
              e.currentTarget.style.borderColor = "var(--border)";
              e.currentTarget.style.boxShadow = "none";
            }}>
              <div aria-hidden style={{
                position: "absolute", top: -80, right: -80,
                width: 220, height: 220, borderRadius: "50%",
                background: s.tint, opacity: 0.12, filter: "blur(40px)",
                pointerEvents: "none",
              }}/>
              <div style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                marginBottom: 28,
              }}>
                <span style={{
                  fontSize: 11, letterSpacing: "0.12em",
                  textTransform: "uppercase", fontWeight: 600,
                  padding: "5px 11px", borderRadius: 9999,
                  color: s.tint,
                  background: `color-mix(in oklab, ${s.tint} 12%, transparent)`,
                  fontFamily: "var(--font-mono)",
                }}>{s.chip}</span>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: "0.14em", textTransform: "uppercase",
                  color: "var(--fg-subtle)",
                }}>{s.n}</span>
              </div>
              <h3 style={{
                fontFamily: "var(--font-display)",
                fontSize: 36, fontWeight: 400,
                letterSpacing: "-0.02em", lineHeight: 1.1,
                margin: 0, marginBottom: 16,
              }}>{s.t}</h3>
              <p style={{
                fontSize: 16, lineHeight: 1.6,
                color: "var(--fg-muted)", margin: "0 0 22px",
              }}>{s.d}</p>
              <div style={{
                marginTop: "auto",
                display: "flex", flexWrap: "wrap", gap: 6,
                paddingTop: 18, borderTop: "1px solid var(--border)",
              }}>
                {s.kpis.map(k => (
                  <span key={k} style={{
                    fontFamily: "var(--font-mono)", fontSize: 11,
                    color: "var(--fg-muted)",
                    padding: "4px 9px", borderRadius: 6,
                    background: "var(--bg-sunken)",
                  }}>{k}</span>
                ))}
              </div>
              <div style={{
                marginTop: 22, display: "inline-flex", alignItems: "center", gap: 8,
                fontSize: 14, fontWeight: 600, color: s.tint,
              }}>
                Explore {s.t.split(" ")[0]}
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 8h10M9 4l4 4-4 4"/>
                </svg>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};
window.ServicesGrid = ServicesGrid;