/* Variation B — The Split. Left-aligned narrative led by the before/after
   "day in the life" contrast that the ICP doc sells on. */

function VariationB() {
  React.useEffect(() => {if (window.lucide) window.lucide.createIcons();});
  return (
    <div className="sz vb" data-screen-label="B · The Split">
      <div className="grain"></div>
      <div className="cols"></div>
      <div className="atmo-glow"></div>

      <Nav />

      <header className="vb-hero">
        <div>
          <span className="eyebrow">For scaled Shopify founders</span>
          <h1>You're the <span className="red">bottleneck</span> in your own business.</h1>
          <p className="sub">
            A profitable e-commerce brand doing $50K–$500K a month, and it still can't run for a day
            without you. We systemize &amp; automate the operations so it finally can.
          </p>
          <div className="actions">
            <button className="sz-cta solid lg" onClick={() => gtag('event', 'cta_click', { cta_location: 'hero' })}>Book a Systems Audit</button>
          </div>
        </div>
        <div className="vb-herocard">
          <div className="cap">What that sounds like</div>
          {[
          ["layers", "“I have 10 tools that don't talk to each other.”"],
          ["inbox", "“If I take a day off, things break.”"],
          ["brain", "“Everything's in my head.”"],
          ["flame", "“My team is busy but nothing moves.”"]].
          map(([ic, q]) =>
          <div className="vb-mini" key={q}>
              <span className="ico"><Ico name={ic} /></span>
              <span>{q}</span>
            </div>
          )}
        </div>
      </header>

      <div className="vb-band">
        <p>Every problem in your business is a <span className="red">systems problem</span> in disguise.</p>
      </div>

      {/* BEFORE / AFTER */}
      <section className="vb-sec">
        <div className="vb-head">
          <span className="eyebrow">The shift we sell</span>
          <h2>Same business. Two completely different days.</h2>
          <p>This is the life we get founders out of — and the one we build them into.</p>
        </div>
        <div className="vb-ba">
          <div className="col before">
            <div className="colhead">
              <span className="ico"><Ico name="cloud-rain" /></span>
              <span className="k">Before the system</span>
            </div>
            {SZ.ba.map((r) =>
            <div className="vb-row" key={r.t}>
                <span className="t">{r.t}</span>{r.before}
              </div>
            )}
          </div>
          <div className="col after">
            <div className="colhead">
              <span className="ico"><Ico name="sun" /></span>
              <span className="k">After the system</span>
            </div>
            {SZ.ba.map((r) =>
            <div className="vb-row" key={r.t}>
                <span className="t">{r.t}</span>{r.after}
              </div>
            )}
          </div>
        </div>
      </section>

      {/* SOLUTION */}
      <section className="vb-sec" style={{ paddingTop: 0 }}>
        <div className="vb-head">
          <span className="eyebrow">How we get you there</span>
          <h2>Systems first. Then automation.</h2>
          <p>We don't automate chaos. We organize it, document it, then let AI run what's left.</p>
        </div>
        <div className="vb-steps">
          {SZ.steps.map((s, i) =>
          <div className="vb-step" key={s.h}>
              <span className="n">0{i + 1}</span>
              <span className="ico"><Ico name={s.ico} /></span>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
          )}
        </div>
      </section>

      {/* QUALIFIER */}
      <section className="vb-sec" style={{ paddingTop: 0 }}>
        <div className="vb-head">
          <span className="eyebrow">Who we work with</span>
          <h2>We stay narrow on purpose.</h2>
        </div>
        <div className="vb-qual">
          <div className="vb-qcol yes">
            <h3><span className="ico"><Ico name="check" /></span> This is for you</h3>
            {SZ.forYou.map((t) =>
            <div className="vb-qrow" key={t}><span className="dot"><Ico name="check" /></span>{t}</div>
            )}
          </div>
          <div className="vb-qcol no">
            <h3><span className="ico"><Ico name="x" /></span> This isn't</h3>
            {SZ.notYou.map((t) =>
            <div className="vb-qrow" key={t}><span className="dot"><Ico name="minus" /></span>{t}</div>
            )}
          </div>
        </div>
      </section>

      {/* CLOSE */}
      <section className="vb-close">
        <div>
          <span className="eyebrow" style={{ display: "block", marginBottom: 16 }}>The free Systems Audit</span>
          <h2>An X-ray on your business systems.</h2>
          <p>
            We map your operation, find where you're bleeding time and money, and give you a
            visual blueprint plus a roadmap. No pitch, no credit card — just a clear path forward.
          </p>
        </div>
        <button className="sz-cta solid lg" onClick={() => gtag('event', 'cta_click', { cta_location: 'close' })}>Book a free Systems Audit</button>
      </section>

      <div className="vb-statsrow">
        <div className="vb-stats">
          <StatsInline />
        </div>
      </div>

      <Footer />
    </div>);

}

window.VariationB = VariationB;