// Welcome step — pitch card + before/after compare
function StepWelcome({ onStart, mode }) {
  return (
    <>
      <div className="pitch-card">
        <div className="pitch-logos">
          <img src="assets/cookwareco-logo.png" alt="Cookware Co" className="pitch-cookwareco" />
          <span className="sep" />
          <img src="assets/malachyte-logo-gradient.png" alt="Malachyte" />
        </div>
        <div className="eyebrow">Phase 2 POC · Personalized PLP</div>
        <h1>The GreenPan Best Sellers page, but it knows you.</h1>
        <p className="pitch-blurb">
          GreenPan's Best Sellers PLP today leads with the same Frost Pro, Stanley Tucci
          Pizza Oven, and Reserve Pro 12-piece for every visitor — no matter if they're a
          Tucci megafan, a first-apartment cook, or a PFAS-conscious replacer. Malachyte
          re-ranks the same Best Sellers pool against a live visitor signal — collection,
          color story, price tier — without changing the catalog.
        </p>
        <button className="btn btn-mal" onClick={onStart}>Walk through the demo →</button>
      </div>

      <div className="compare-strip">
        <div className="compare-before">
          <img src="assets/greenpan-logo.jpeg" alt="GreenPan" className="compare-logo compare-logo--simon" />
          <div className="compare-body">
            <h4>GreenPan today</h4>
            <p>Homepage leads with Frost Pro, Stanley Tucci Pizza Oven, Reserve Pro 12-piece,
              and Premiere Ovenware — same order for every visitor. A first-apartment cook
              scrolls past $849 cookware sets. A wellness shopper hunts past carbon-steel.</p>
          </div>
        </div>
        <div className="compare-after">
          <img src="assets/malachyte-symbol-gradient.png" alt="Malachyte" className="compare-logo compare-logo--mal" />
          <div className="compare-body">
            <h4>With Malachyte</h4>
            <p>Four live carousels re-rank against the visitor's persona vector — Cookware,
              Electrics, Bakeware, Cutlery & Tools. Each grid surfaces different hero
              products (Tucci-blue vs. sage-ceramic vs. value-frypan), with reasoning baked
              into every tile.</p>
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { StepWelcome });