// PDP step — HOKA today: more shoes (same category)
//           With Malachyte: complementary products (complete the outfit)

function StepPDP({ state, setState }) {
  const persona = window.PERSONAS.find(p => p.id === state.persona) || window.PERSONAS[0];
  const favorites = state.favorites || [];

  // Anchor depends on visitor gender
  const anchorId = persona.gender === 'women' ? 'skyward-x-w' : 'bondi-9-m';
  const anchor = window.PRODUCTS.find(p => p.id === anchorId) || window.PRODUCTS[0];

  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; };
  const all = window.PRODUCTS;

  let recs;
  if (isMal) {
    // Malachyte: complementary apparel — socks, tops, shorts, bra, accessories
    // NOT more shoes — this is the key differentiator
    const complementary = all.filter(p =>
      p.id !== anchor.id &&
      !p.cats.includes('road-plp') &&
      (p.gender === persona.gender || p.gender === 'all') &&
      p.cats.some(c => ['top','bottom','sock','sports-bra','outwear','accessory'].includes(c))
    );
    recs = window.rankProducts(complementary, persona, favWeights).slice(0, 6);
  } else {
    // HOKA today: more running shoes from same collection (limited diversity)
    const moreShoes = all.filter(p =>
      p.id !== anchor.id &&
      p.cats.includes('shoe') &&
      (p.gender === persona.gender || p.gender === 'all')
    );
    recs = window.defaultOrder(moreShoes).slice(0, 6);
  }

  const shoeFeatures = anchor.cats
    .filter(c => ['max-cushion','plush','stable','performance','responsive','neutral','balanced','trail-shoe','race-shoe','everyday-shoe'].includes(c))
    .map(c => c.replace('-shoe','').replace('-',' '))
    .join(' · ');

  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' : 'uploads/hoka-logo-removebg-preview.png'}
          alt={isMal ? 'Malachyte' : 'HOKA'}
          className={`sbs-col__logo sbs-col__logo--${isMal ? 'mal' : 'brand'}`}
        />
        <span className="sbs-col__caption">
          {isMal ? 'Complete the look — outfit recs' : '"You may also like"'}
        </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">
            hoka.com/products/{anchor.name.toLowerCase().replace(/[^a-z0-9]+/g,'-')}
            {isMal ? ' · personalized by malachyte' : ''}
          </div>
        </div>

        <HokaChrome />

        <div className="wiha-plp-root">
          <div className="wiha-crumbs">
            <a>Home</a><span className="sep">/</span>
            <a>{anchor.type}</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(0)}
                {anchor.orig && (
                  <span style={{textDecoration:'line-through',fontSize:15,color:'#999',marginLeft:10,fontWeight:400}}>
                    ${anchor.orig.toFixed(0)}
                  </span>
                )}
              </div>
              {shoeFeatures && (
                <p className="pdp-anchor__desc" style={{textTransform:'capitalize'}}>
                  {shoeFeatures}
                </p>
              )}
              {anchor.reviews > 0 && (
                <p className="pdp-anchor__desc" style={{marginTop:8}}>
                  ★★★★★ {anchor.reviews.toLocaleString()} reviews
                </p>
              )}
            </div>
          </div>

          <div className="pdp-recs">
            <div className="pdp-recs__head">
              {isMal ? (
                <>
                  <span className="pdp-col-label pdp-col-label--after">MALACHYTE · OUTFIT PAIRING</span>
                  <h3 className="pdp-recs__title">Complete the look</h3>
                </>
              ) : (
                <>
                  <span className="pdp-col-label pdp-col-label--before">HOKA TODAY · MORE SHOES</span>
                  <h3 className="pdp-recs__title">You may also like</h3>
                </>
              )}
            </div>

            <div className="pdp-carousel">
              {recs.map((p, 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(0)}</div>
                  <div style={{
                    fontSize:9, fontFamily:'var(--font-mono)', color:'#999',
                    letterSpacing:'0.08em', textTransform:'uppercase', padding:'0 2px'
                  }}>{p.type}</div>
                  {isMal && i < 3 && <div className="pdp-rec-mini__rank">#{i+1}</div>}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StepPDP });