// Approach — 4-step process with animated connecting line
const { Compass: AComp, Hammer: AHam, Layers: ALay, Rocket: ARock } = window.Icons;

function Approach() {
  const stepRef = useRef(null);
  const [run, setRun] = useState(false);

  useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setRun(true); return; }
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setRun(true); io.disconnect(); }
    }, { threshold: 0.3 });
    if (stepRef.current) io.observe(stepRef.current);
    return () => io.disconnect();
  }, []);

  const steps = [
    {
      idx: '01',
      icon: AComp,
      title: 'Discover',
      body: 'Workshops, audits, and stakeholder interviews to surface the real problem and shape a credible target state.',
      deliverable: 'Opportunity map · Risk register',
    },
    {
      idx: '02',
      icon: ALay,
      title: 'Architect',
      body: 'System design, model & vendor selection, and a sequenced roadmap that derisks delivery and aligns budgets.',
      deliverable: 'Reference architecture · RFC',
    },
    {
      idx: '03',
      icon: AHam,
      title: 'Build',
      body: 'Senior squads ship in tight cycles — paired with your team, with evaluations and observability from week one.',
      deliverable: 'Production releases · Runbooks',
    },
    {
      idx: '04',
      icon: ARock,
      title: 'Scale',
      body: 'Operate, harden, and grow — cost optimization, model performance, governance, and rollout to new business units.',
      deliverable: 'Scale plan · Handover or co-op',
    },
  ];

  return (
    <section id="approach" className="relative py-28 lg:py-36" style={{background: 'var(--surface-1)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)'}}>
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16">
          <div className="lg:col-span-7">
            <div className="reveal eyebrow mb-5">Our approach</div>
            <h2 className="reveal font-display text-[36px] sm:text-[44px] lg:text-[60px] leading-[1.0] tracking-[-0.04em] font-medium" data-delay="80">
              Four phases. <span className="serif-em" style={{color: 'var(--ink-warm)'}}>One team.</span>
              <br />
              No handoffs.
            </h2>
          </div>
          <p className="lg:col-span-4 lg:col-start-9 reveal text-[15px] leading-[1.6] self-end" style={{color: 'var(--muted)'}} data-delay="160">
            The same senior engineers who scope your engagement write the code, ship the system,
            and stand behind it in production. Continuity <em className="serif-em" style={{color: 'var(--ink)'}}>is</em> the differentiator.
          </p>
        </div>

        <div ref={stepRef} className="relative">
          {/* Connecting line — desktop */}
          <div className="hidden lg:block absolute left-0 right-0 top-[44px] h-px" style={{background: 'var(--border)'}}>
            <div className={`step-line ${run ? 'run' : ''}`}></div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
            {steps.map((s, i) => (
              <div key={s.idx} className="reveal relative" data-delay={i * 120}>
                {/* Node */}
                <div className="relative flex items-center justify-center w-[88px] h-[88px] rounded-2xl mb-6 z-10"
                     style={{background: 'var(--bg)', border: '1px solid var(--border)'}}>
                  <s.icon size={26} stroke={1.4} />
                  <span className="absolute -top-2 -right-2 font-mono text-[10px] tracking-[0.18em] px-2 py-1 rounded-md"
                        style={{background: 'var(--surface-3)', color: 'var(--ink)', border: '1px solid var(--border)'}}>
                    {s.idx}
                  </span>
                </div>
                <h3 className="font-display text-[22px] font-semibold tracking-tight mb-3" style={{color: 'var(--ink)'}}>
                  {s.title}
                </h3>
                <p className="text-[14.5px] leading-[1.55] mb-5" style={{color: 'var(--muted)'}}>
                  {s.body}
                </p>
                <div className="pt-4 border-t" style={{borderColor: 'var(--border)'}}>
                  <div className="font-mono text-[10px] tracking-[0.18em] uppercase mb-1.5" style={{color: 'var(--dim)'}}>Deliverable</div>
                  <div className="text-[13px]" style={{color: 'var(--ink)'}}>{s.deliverable}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Approach = Approach;