// Welcome / pitch screen
function StepWelcome({ onStart, state, setState }) {
  const personas = window.PERSONAS;
  const setPersona = (id) => setState(s => ({ ...s, persona: id, favorites: [] }));

  return (
    <div className="welcome-shell">
      <div className="welcome-logos">
        <img src="uploads/hoka-logo-removebg-preview.png" alt="HOKA" className="logo-brand" />
        <span className="sep" />
        <img src="assets/malachyte-logo-gradient.png" alt="Malachyte" className="logo-mal" />
      </div>

      <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center' }}>
        <div className="welcome-eye">Road Runner Collection · PLP · Search · PDP</div>
        <h1 className="welcome-title">HOKA Demo</h1>
      </div>

      <div className="welcome-compare">
        <div className="compare-card compare-card--before">
          <div className="compare-icon">
            <img src="uploads/hoka-logo-removebg-preview.png" alt="" />
          </div>
          <div>
            <h4>HOKA today</h4>
            <p>
              Road Runner collection sorted by bestsellers — same order for every visitor.
              Bondi 9 leads for a speed racer and a comfort seeker alike. No gender preference,
              no run profile, no real-time intent. Same shoes on PDP as "you may also like."
            </p>
          </div>
        </div>
        <div className="compare-card compare-card--after">
          <div className="compare-icon">
            <img src="assets/malachyte-symbol-gradient.png" alt="" />
          </div>
          <div>
            <h4>With Malachyte</h4>
            <p>
              Same catalog, re-ranked per visitor vector — shoe type · cushion level · gender ·
              browsing behavior. Race shoe leads for the sprint queen; max-cushion Bondi 9 leads
              for the comfort runner. PDP shows a full outfit, not more shoes.
            </p>
          </div>
        </div>
      </div>

      <button className="btn btn-mal" onClick={onStart}>Open the Road Runner PLP →</button>
    </div>
  );
}

// Shared: circular portrait + 4 signal chips
function PortraitWithSignals({ persona }) {
  const anchors = ['wp-sig--tl', 'wp-sig--tr', 'wp-sig--bl', 'wp-sig--br'];
  return (
    <div className="wp-portrait-wrap">
      <div className="wp-portrait">
        <img src={persona.img} alt={persona.name} />
      </div>
      {(persona.signals || []).slice(0, 4).map((s, i) => (
        <span key={i} className={`wp-sig ${anchors[i]} wp-sig--${s.tone || 'amber'}`}>
          {s.label}
        </span>
      ))}
    </div>
  );
}

Object.assign(window, { StepWelcome, PortraitWithSignals });