// Process: engagement steps as a connected flow diagram (horizontal on desktop/tablet, vertical on mobile).
const NS_PROC = window.AnsysDigitalDesignSystem_4543d7;

function Process() {
  const { SectionHeading } = NS_PROC;
  const steps = [
    { n: "01", icon: "search", title: "Discover", desc: "We audit your store, funnel, and goals — then map the highest-leverage opportunities." },
    { n: "02", icon: "pen-tool", title: "Design", desc: "Conversion-focused UX and premium UI, prototyped and validated before a line of code." },
    { n: "03", icon: "code-2", title: "Build", desc: "Custom Shopify or Plus development — fast, accessible, and QA'd across every device." },
    { n: "04", icon: "trending-up", title: "Optimize", desc: "Launch, measure, and iterate with a continuous CRO program that compounds returns." },
  ];
  return (
    <section id="process" style={{ background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--section-y) var(--gutter)" }}>
        <div className="reveal" style={{ marginBottom: "clamp(2.5rem,5vw,3.5rem)" }}>
          <SectionHeading eyebrow="How we work" title="A proven path from audit to revenue" description="Senior-led, transparent, and built to move fast without cutting corners." align="center" />
        </div>

        <div className="flow-diagram">
          <div className="reveal flow-track" aria-hidden="true"><span className="flow-fill"></span></div>
          {steps.map((s, i) => (
            <div key={s.n} className="reveal flow-node" style={{ transitionDelay: (i * 110) + "ms" }}>
              <div className="flow-marker">
                <span className="flow-ring">
                  <span style={{ width: 54, height: 54, borderRadius: "50%", background: "var(--grad-brand)", color: "#fff", display: "grid", placeItems: "center", boxShadow: "var(--shadow-brand,0 10px 26px -8px rgba(14,71,192,.5))" }}><Ic name={s.icon} size={23} /></span>
                </span>
                <span className="flow-num">{s.n}</span>
              </div>
              <div className="flow-body">
                <h3 style={{ margin: "0 0 8px", fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700, letterSpacing: "var(--tracking-tight)" }}>{s.title}</h3>
                <p style={{ margin: 0, fontSize: 14.5, color: "var(--text-secondary)", lineHeight: "var(--leading-normal)", textWrap: "pretty" }}>{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Process });