// Work.jsx — S2: The Work That Keeps Coming Back (light section, dark cards w/ cursor-following blur)
function WorkSection() {
  const tasks = [
    { i: "ri-refresh-line",       t: "Looks dated next to the work you actually do" },
    { i: "ri-question-line",      t: "Visitors cannot understand the offer in five seconds" },
    { i: "ri-star-off-line",      t: "Your strongest proof is buried, vague, or missing" },
    { i: "ri-route-line",         t: "No clear path from interest to inquiry" },
    { i: "ri-smartphone-line",    t: "Mobile feels like an afterthought" },
    { i: "ri-message-2-line",     t: "The message sounds generic next to better competitors" },
    { i: "ri-dashboard-3-line",   t: "Slow, fragile, or hard to update" },
    { i: "ri-code-s-slash-line",  t: "Every small change means chasing a developer" },
  ];
  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>Your business has grown. Your reputation, offer, and quality are stronger than they used to be. But if the site still feels dated, unclear, or thin, prospects feel that gap before they ever talk to you.<br /><br /><span className="work-bridge">It's rarely just a design problem.<br />It's a trust problem, a clarity problem, and a next-step problem.</span></React.Fragment>}>
          People are checking you out. Your website is making them 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 });