// Work.jsx — S2: The Work That Keeps Coming Back (light section, dark cards w/ cursor-following blur)
function WorkSection() {
  const tasks = [
    { i: "ri-shopping-bag-3-line",    t: "PDPs fail the five-second test" },
    { i: "ri-money-dollar-circle-line", t: "Value is unclear near the price" },
    { i: "ri-star-line",             t: "Proof is buried too low" },
    { i: "ri-shopping-cart-2-line",  t: "Cart creates unnecessary friction" },
    { i: "ri-smartphone-line",       t: "Mobile buying feels harder" },
    { i: "ri-pulse-line",            t: "Tracking hides the real leak" },
    { i: "ri-crosshair-2-line",      t: "Teams fix symptoms, not causes" },
    { i: "ri-flask-line",            t: "Tests start without a roadmap" },
  ];
  const gridRef = useReveal();
  const onMove = (e) => {
    const el = e.currentTarget;
    const r = el.getBoundingClientRect();
    el.style.setProperty("--mx", `${e.clientX - r.left}px`);
    el.style.setProperty("--my", `${e.clientY - r.top}px`);
  };
  return (
    <section id="work" className="section section--light">
      <div className="wrap">
        <SectionHead eyebrow="The real problem" maxWidth={680}
          lead={<React.Fragment>They click your ads, view your products, compare options, and almost buy. But when value, proof, shipping, mobile UX, or checkout flow creates doubt, they leave without telling you why.<br /><br /><span className="work-bridge">It is rarely just a product problem.<br />It is a trust problem, a tracking problem, and a prioritization problem.</span></React.Fragment>}>
          Revenue is leaking in the moments buyers hesitate.
        </SectionHead>

        <div ref={gridRef} className="reveal work-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 22, marginTop: 52 }}>
          {tasks.map((task, idx) => {
            const tone = idx % 2 === 0 ? "magenta" : "violet";
            return (
              <div key={task.t} className={`work-card card-mat acc-${tone}`} style={{ "--bi": idx }} onMouseMove={onMove}>
                <span className="card-beam" aria-hidden="true" style={{ "--bi": idx }} />
                <div className="work-card-glow" />
                <Orb icon={task.i} tone={tone} size={42} />
                <span className="wc-label">{task.t}</span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { WorkSection });