// HowItWorks — engagement model for AdOpsify (replaces nutriAI scan steps)
const HowItWorks = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const steps = ref.current.querySelectorAll(".hstep");
    window.gsap.from(steps, {
      scrollTrigger: { trigger: ref.current, start: "top 70%" },
      y: 50, opacity: 0, duration: 0.9, stagger: 0.12, ease: "expo.out",
    });
  }, []);

  const steps = [
    {
      n: "01", tint: "var(--brand-cobalt)", chip: "Audit",
      t: "Audit your stack",
      d: "We inspect your DSP setup, tracking, attribution, and creative pipeline — and tell you what's leaking. Free, 48-hour turnaround.",
    },
    {
      n: "02", tint: "var(--brand-violet)", chip: "Plan",
      t: "Build the media plan",
      d: "Channels, audiences, creatives, KPIs, frequency caps, brand-safety rules. One page, signed off, before any dollar moves.",
    },
    {
      n: "03", tint: "var(--brand-orange)", chip: "Launch",
      t: "Activate & operate",
      d: "Senior traders run the buy daily. Creative is QA'd against IAS / DV. You see live spend, pacing, and KPI dashboards in your inbox.",
    },
    {
      n: "04", tint: "var(--brand-crimson)", chip: "Optimize",
      t: "Measure, then move",
      d: "Weekly readouts. Brand-lift, incrementality, MMM. We kill what doesn't work — fast — and double down on what does.",
    },
  ];

  return (
    <section ref={ref} style={{
      padding: "clamp(88px, 11vw, 160px) clamp(16px, 4vw, 48px)",
      background: "var(--ink-50)",
      borderTop: "1px solid var(--border)",
      borderBottom: "1px solid var(--border)",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <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,
          }}>How we engage</div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(44px, 6vw, 76px)", lineHeight: 1.05,
            letterSpacing: "-0.025em", margin: 0,
          }}>
            Four phases, <span className="brand-grad-text" style={{ fontStyle: "italic" }}>no hand-offs.</span>
          </h2>
          <p style={{ fontSize: 19, lineHeight: 1.6, color: "var(--fg-muted)", maxWidth: 720, marginTop: 22 }}>
            Same team plans, buys, and measures — so the strategist who pitched the
            plan is the one watching the dashboard at 11 p.m.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", gap: 18, position: "relative" }}>
          {steps.map(s => (
            <div key={s.n} className="hstep" style={{ display: "flex", flexDirection: "column" }}>
              <div style={{
                width: 56, height: 56, borderRadius: 9999,
                background: "var(--paper)",
                border: `1.5px solid ${s.tint}`,
                color: s.tint,
                display: "grid", placeItems: "center",
                fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 600,
                marginBottom: 26,
                boxShadow: "0 2px 6px rgba(0,0,0,0.04)",
              }}>{s.n}</div>
              <span style={{
                display: "inline-block", alignSelf: "flex-start",
                fontSize: 11, letterSpacing: "0.08em", fontFamily: "var(--font-mono)",
                textTransform: "uppercase", fontWeight: 600,
                padding: "4px 10px", borderRadius: 9999,
                color: s.tint,
                background: `color-mix(in oklab, ${s.tint} 12%, transparent)`,
                marginBottom: 14,
              }}>{s.chip}</span>
              <h3 style={{
                fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 400,
                letterSpacing: "-0.015em", lineHeight: 1.15,
                margin: "0 0 12px", color: "var(--ink-900)",
              }}>{s.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--fg-muted)", margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.HowItWorks = HowItWorks;