// Managed.jsx — "What the audit finds" content, rendered in the Before-We-Meet
// (control-sec) shell so it keeps that section's background and color.
function WorkerBody({ w, open, statik }) {
  return (
    <React.Fragment>
      <div className="worker-card__head">
        <Orb icon={w.icon} tone={w.tone} size={48} />
        <div style={{ flex: 1 }}>
          <div className="worker-card__name">{w.name}</div>
          <div className="worker-card__role">{w.role}</div>
        </div>
      </div>
      <p className="worker-card__flow">{w.flow}</p>
      <div style={{ marginTop: 14 }}><Pill kind={w.statusKind}>{w.status}</Pill></div>

      <div className={"worker-detail" + (statik ? " is-static" : "")}
        style={statik ? undefined : { maxHeight: open ? 620 : 0, opacity: open ? 1 : 0, marginTop: open ? 18 : 0 }}>
        <div className="worker-meta-row">
          <i className="ri-checkbox-circle-line" />
          <span className="lbl">Includes</span>
          <span className="val" style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
            {w.includes.map((t) => <ToolChip key={t}>{t}</ToolChip>)}
          </span>
        </div>
        <div className="worker-meta-row">
          <i className="ri-search-eye-line" />
          <span className="lbl">Common finding</span>
          <span className="val">{w.finding}</span>
        </div>
      </div>
    </React.Fragment>
  );
}

function Managed() {
  const workers = [
    {
      id: "pdp", name: "Product Pages & Offer Clarity", role: "Decision moment", tab: "Product Pages", icon: "ri-shopping-bag-3-line", tone: "halo",
      flow: "We check whether your PDPs make the product, value, price, options, proof, and next step clear enough for shoppers to buy with confidence.",
      includes: ["Product-page hierarchy", "Price and value clarity", "Variant and subscription clarity", "Shipping, returns, and guarantee visibility", "Add-to-cart friction", "FAQ and objection handling"],
      finding: "The product may be strong, but the page does not answer the buyer's biggest questions before the CTA.",
      status: "PDP focus", statusKind: "active",
    },
    {
      id: "cart", name: "Cart & Checkout Friction", role: "Purchase path", tab: "Cart & Checkout", icon: "ri-shopping-cart-2-line", tone: "violet",
      flow: "We look for the small moments that slow down purchase intent: cart confusion, weak totals, missing reassurance, checkout hesitation, or unnecessary steps.",
      includes: ["Cart drawer UX", "Checkout path clarity", "Payment and shipping reassurance", "Discount and subtotal behavior", "Upsell or cross-sell friction", "Drop-off points before purchase"],
      finding: "Shoppers are interested enough to add to cart, but the final path creates doubt instead of momentum.",
      status: "Revenue leak", statusKind: "escalated",
    },
    {
      id: "tracking", name: "Tracking & Analytics Accuracy", role: "Data quality", tab: "Tracking", icon: "ri-pulse-line", tone: "magenta",
      flow: "We review whether Shopify, GA4, GTM, events, funnels, and tracking gaps are giving you a clean enough picture to make decisions.",
      includes: ["Shopify funnel data", "GA4 event quality", "GTM setup", "Add-to-cart and checkout tracking", "Funnel drop-off visibility", "Measurement gaps before testing"],
      finding: "The store is making decisions from incomplete data, so teams optimize what is visible instead of what matters.",
      status: "Clean data", statusKind: "approved",
    },
    {
      id: "mobile", name: "Mobile UX & Page Flow", role: "Shopper experience", tab: "Mobile UX", icon: "ri-smartphone-line", tone: "violet",
      flow: "We check whether mobile shoppers can understand the offer, compare options, see proof, and move toward purchase without fighting the layout.",
      includes: ["Mobile PDP hierarchy", "Sticky CTA behavior", "Content order and scannability", "Image and proof visibility", "Mobile cart experience", "Thumb-zone and tap friction"],
      finding: "The desktop experience looks acceptable, but most buyers see a weaker mobile version of the funnel.",
      status: "Mobile first", statusKind: "pending",
    },
    {
      id: "nav", name: "Navigation, Collections & Discovery", role: "Product finding", tab: "Navigation", icon: "ri-layout-grid-line", tone: "magenta",
      flow: "We inspect how shoppers move from interest to the right product, category, offer, or buying path without getting lost.",
      includes: ["Main navigation clarity", "Collection-page structure", "Filters and sorting", "Category entry points", "Product discovery paths", "Homepage-to-product journey"],
      finding: "Shoppers want the product, but the store makes them work too hard to find the right one.",
      status: "Findability", statusKind: "monitored",
    },
  ];
  const [open, setOpen] = useState({ pdp: true });
  const [glow, setGlow] = useState("pdp");
  const [active, setActive] = useState(0);
  const toggle = (id) => setOpen((o) => ({ ...o, [id]: !o[id] }));
  const isMobile = useIsMobile(720);
  const secRef = useReveal();
  const gridRef = useReveal();
  const tabRef = useReveal();

  const ctaCard = (
    <div className="worker-card card-mat worker-card--cta" style={{ "--bi": 5, justifyContent: "center", alignItems: "flex-start", borderStyle: "dashed", cursor: "default", background: "transparent" }}>
      <span className="card-beam" aria-hidden="true" style={{ "--bi": 5 }} />
      <i className="ri-add-circle-line" style={{ fontSize: 26, color: "var(--magenta-300)" }} />
      <div className="worker-card__name" style={{ marginTop: 14 }}>Not sure where the leak is?</div>
      <p className="worker-card__flow" style={{ marginTop: 8 }}>Send your store through a quick scan or book a consult. We will help you see whether the next step is a quick fix, a full audit, or a testing roadmap.</p>
      <div className="worker-cta-actions" style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 18 }}>
        <a href="#cta" className="btn btn-primary btn-sm">Book a Shopify audit consult <i className="ri-arrow-right-line" /></a>
        <a href="#cta" className="btn btn-secondary btn-sm">Get 5 free fixes</a>
      </div>
    </div>
  );

  return (
    <section ref={secRef} id="control" className="section control-sec">
      <div className="haze-bloom" style={{ opacity: 0.16 }} />
      <div className="control-streaks" aria-hidden="true" />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <SectionHead eyebrow="What the audit finds" maxWidth={760}
          lead="The audit looks across your Shopify funnel and data to find the few constraints most likely suppressing conversion. Then we turn those findings into a prioritized roadmap your team can implement, test, and measure.">
          We inspect the moments where buyers <span className="gradient-text">decide, doubt, or drop off.</span>
        </SectionHead>

        {isMobile ? (
          <div ref={tabRef} className="reveal worker-tabwrap">
            <div className="worker-tabs" role="tablist">
              {workers.map((w, i) => (
                <button key={w.id} role="tab" aria-selected={active === i}
                  className={"worker-tab" + (active === i ? " on" : "")} onClick={() => setActive(i)}>
                  <i className={w.icon} /><span>{w.tab}</span>
                </button>
              ))}
            </div>
            <div key={workers[active].id} className="worker-card is-open worker-tab-card">
              <WorkerBody w={workers[active]} open={true} statik={true} />
            </div>
            {ctaCard}
          </div>
        ) : (
          <div ref={gridRef} className="reveal worker-grid" style={{ marginTop: 52 }}>
            {workers.map((w, i) => {
              const isOpen = !!open[w.id];
              return (
                <div key={w.id} className={`worker-card card-mat ${isOpen ? "is-open" : ""} ${glow === w.id ? "is-glow" : ""}`} style={{ "--bi": i }} onClick={() => toggle(w.id)} onMouseEnter={() => setGlow(w.id)}>
                  <span className="card-beam" aria-hidden="true" style={{ "--bi": i }} />
                  <WorkerBody w={w} open={isOpen} />
                  <button className="worker-card__toggle" onClick={(e) => { e.stopPropagation(); toggle(w.id); }}>
                    {isOpen ? "Hide details" : "See what's included"}
                    <i className={isOpen ? "ri-arrow-up-s-line" : "ri-arrow-down-s-line"} style={{ fontSize: 17 }} />
                  </button>
                </div>
              );
            })}
            {ctaCard}
          </div>
        )}

        <p className="examples-note">
          <i className="ri-bar-chart-grouped-line" />
          Every audit is prioritized by impact, effort, confidence, and where the issue sits in the buyer journey.
        </p>
      </div>
    </section>
  );
}
Object.assign(window, { Managed, WorkerBody });