// PDP step — side-by-side: "you may also like" (more of the same) vs "complete the look"
function StepPDP({ state, setState }) {
  const persona = window.PERSONAS.find(p => p.id === state.persona) || window.PERSONAS[0];
  const favorites = state.favorites || [];

  // Anchor product: a navy pique polo — the Golf Collection's classic hero.
  const anchorId = 'holland-pique-polo-in-midnight-navy';
  const anchor = window.PRODUCTS.find(p => p.id === anchorId) || window.PRODUCTS.find(p => p.type === 'Polo');

  return (
    <div className="sbs-shell">
      <div className="sbs-grid">
        <PDPColumn mode="alpha" anchor={anchor} persona={persona} favorites={favorites} />
        <PDPColumn mode="malachyte" anchor={anchor} persona={persona} favorites={favorites} />
      </div>
    </div>
  );
}

function PDPColumn({ mode, anchor, persona, favorites }) {
  const isMal = mode === 'malachyte';
  const favWeights = window.buildFavWeights ? window.buildFavWeights(favorites) : null;
  const handleImgErr = (e) => { e.target.src = window.PRODUCT_FALLBACK; };

  // ---- BEFORE: more of the same — same product type (more polos), collection order ----
  const sameType = window.PRODUCTS.filter(p => p.id !== anchor.id && p.type === anchor.type);
  const alphaRecs = window.defaultOrder(sameType).slice(0, 6).map(p => ({ p, slot: 'Polo' }));

  // ---- AFTER: complete the look — complementary categories, persona-ranked ----
  const topOf = (filterFn, n = 1) =>
    window.rankProducts(
      window.PRODUCTS.filter(p => p.id !== anchor.id && filterFn(p)),
      persona, favWeights
    ).slice(0, n);

  const malRecs = [
    ...topOf(p => p.cats.includes('trouser')).map(p => ({ p, slot: 'Trousers' })),
    ...topOf(p => p.cats.includes('short')).map(p => ({ p, slot: 'Shorts' })),
    ...topOf(p => p.cats.includes('layer'), 2).map(p => ({ p, slot: 'Layer' })),
    ...topOf(p => p.cats.includes('shoe')).map(p => ({ p, slot: 'Footwear' })),
    ...topOf(p => p.cats.includes('hat')).map(p => ({ p, slot: 'Headwear' })),
  ].slice(0, 6);

  const recs = isMal ? malRecs : alphaRecs;

  return (
    <div className={`sbs-col sbs-col--${mode}`}>
      <div className="sbs-col__head">
        <span className="sbs-col__tag">{isMal ? 'AFTER' : 'BEFORE'}</span>
        <img
          src={isMal ? 'assets/malachyte-logo-gradient.png' : 'assets/redvanly-logo.png'}
          alt={isMal ? 'Malachyte' : 'Redvanly'}
          className={`sbs-col__logo sbs-col__logo--${isMal ? 'mal' : 'wiha'}`}
        />
        <span className="sbs-col__caption">{isMal ? 'Complete the look' : 'More of the same'}</span>
      </div>

      <div className="sbs-col__viewport">
        <div className="demo-urlbar">
          <div className="demo-urlbar__dots"><span /><span /><span /></div>
          <div className="demo-urlbar__url">
            redvanly.com/products/{anchor.url ? anchor.url.split('/').pop() : 'holland-pique-polo'}
            {isMal ? ' · personalized by malachyte' : ''}
          </div>
        </div>

        <WihaChrome />

        <div className="wiha-plp-root">
          <div className="wiha-crumbs">
            <a>Home</a><span className="sep">/</span>
            <a>Polos</a><span className="sep">/</span>
            <span className="current">{anchor.name}</span>
          </div>

          <div className="pdp-anchor">
            <div className="pdp-anchor__img">
              <img src={anchor.img} alt={anchor.name} onError={handleImgErr} />
            </div>
            <div className="pdp-anchor__body">
              <h2 className="pdp-anchor__name">{anchor.name}</h2>
              <div className="pdp-anchor__price">${anchor.price.toFixed(2)} · {anchor.color}</div>
              <p className="pdp-anchor__desc">
                Tailored pique knit in midnight navy. Four-way stretch, moisture-wicking, and a
                clean ribbed collar that holds its shape from the first tee to the 19th hole.
              </p>
            </div>
          </div>

          <div className="pdp-recs">
            <div className="pdp-recs__head">
              {isMal ? (
                <h3 className="pdp-recs__title">Complete the look — styled for {persona.chips[0].toLowerCase()}</h3>
              ) : (
                <h3 className="pdp-recs__title">You may also like</h3>
              )}
            </div>

            <div className="pdp-carousel">
              {recs.map(({ p, slot }, i) => (
                <a key={p.id} className="pdp-rec-mini" href="#" onClick={(e) => e.preventDefault()}>
                  <div className="pdp-rec-mini__img">
                    <img src={p.img} alt={p.name} onError={handleImgErr} />
                  </div>
                  <div className="pdp-rec-mini__name">{p.name}</div>
                  <div className="pdp-rec-mini__price">${p.price.toFixed(2)}</div>
                  {isMal
                    ? <div className="pdp-rec-mini__rank pdp-rec-mini__rank--slot">{slot}</div>
                    : <div className="pdp-rec-mini__rank pdp-rec-mini__rank--dim">Polo</div>}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StepPDP });