// Workers.jsx — "Before we meet" concept content, rendered in the raised shell
// (section--raised) so it keeps that section's background and color.
function WorkerCards() {
  const concept = [
    { t: "A full funnel diagnosis", d: "Shopify, analytics, tracking, PDPs, collections, cart, checkout, mobile, proof, and buyer journey." },
    { t: "5 priority recommendations", d: "What is wrong, where it happens, why it matters, and what to do next." },
    { t: "Visual implementation guidance", d: "Screenshots, examples, competitive context, and plain-English direction." },
    { t: "A ranked CRO roadmap", d: "Quick wins and bigger opportunities scored by impact, effort, and confidence." },
    { t: "A walkthrough and next-step plan", d: "Audit doc, presentation, Loom, follow-up call, and implementation/testing options." },
  ];
  const secRef = useReveal();
  return (
    <section ref={secRef} id="workers" className="section section--raised control-sec">
      <div className="haze-bloom" style={{ opacity: 0.18 }} />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 56, alignItems: "start" }} className="control-grid">
          {/* left — message */}
          <div className="control-left">
            <div className="eyebrow"><span className="dot" />What you get</div>
            <h2 className="h-section" style={{ maxWidth: 500 }}>A one-week audit your team can <span className="gradient-text">actually act on.</span></h2>
            <p className="p-lead" style={{ maxWidth: 490 }}>
              Most CRO audits stop at opinions, screenshots, and vague best practices. Conversion Works gives you the diagnosis, the reasoning, and the priority order behind every recommendation.
            </p>
            <div className="callout" style={{ marginTop: 30, maxWidth: 490 }}>
              <i className="ri-compass-3-line" />
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, color: "var(--fg1)" }}>You are not buying a list of tips.</div>
                <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, lineHeight: 1.55, color: "var(--fg2)", margin: "6px 0 0" }}>
                  You are buying clarity on what is actually suppressing conversion, why it matters, and how to fix it without guessing.
                </p>
              </div>
            </div>
            <div className="hero-cta-row" style={{ display: "flex", gap: 14, marginTop: 30, flexWrap: "wrap" }}>
              <a href="#cta" className="btn btn-primary">Book a Shopify audit consult <i className="ri-arrow-right-line" /></a>
              <a href="#cta" className="btn btn-secondary">Get 5 free fixes</a>
            </div>
            <div className="control-micro">
              <i className="ri-time-line" />Audits are delivered in one week after required access is received.
            </div>
          </div>

          {/* right — what your concept includes */}
          <div className="glass glass--featured concept-panel control-right" style={{ padding: 28 }}>
            <span className="card-beam" aria-hidden="true" />
            <div className="peek-head" style={{ marginBottom: 18 }}>
              <span className="peek-title"><i className="ri-file-list-3-line" />What's inside the audit</span>
              <span className="pay-badge pay-badge--violet"><span className="pay-badge-dot" />Deliverables</span>
            </div>
            <div className="concept-list">
              {concept.map((c, idx) => (
                <div className="concept-item" key={c.t}>
                  <span className="concept-num">{idx + 1}</span>
                  <div>
                    <div className="concept-t">{c.t}</div>
                    <p className="concept-d">{c.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { WorkerCards });