// PDP step — KEY DEMO: Hatch today shows more dresses; Malachyte shows complementary pieces

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

  // Anchor: The Sadie Dress — Green Tapioca ($228)
  // Has natural catalog companions: Cream Green Stripe buttondown, Side Tie Short, etc.
  const anchor = window.PRODUCTS.find(p => p.name === 'The Sadie Dress' && p.color === 'Green Tapioca')
    || window.PRODUCTS.find(p => p.name.includes('Sadie'))
    || window.PRODUCTS.find(p => p.cats.includes('dress') && p.cats.includes('color-pop'))
    || 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; };

  // BEFORE: Hatch today — just more dresses, alphabetical
  // No lifecycle context, no outfit building, no nursing signal
  const beforeRecs = window.PRODUCTS
    .filter(p => p.id !== anchor.id && p.cats.includes('dress'))
    .sort((a, b) => a.name.localeCompare(b.name))
    .slice(0, 6);

  // AFTER: Malachyte — tops, bottoms, one nursing dress if persona is new-mom
  // Diversified: button-downs, shorts, tanks, pants — things that genuinely go WITH the anchor
  const afterPool = window.PRODUCTS.filter(p =>
    p.id !== anchor.id && (
      p.cats.includes('pairs-with-dress') ||                          // all tops + bottoms
      (p.cats.includes('nursing') && p.cats.includes('dress'))       // nursing dress variant for new-mom
    )
  );
  const afterRecs = window.rankProducts(afterPool, persona, favWeights).slice(0, 6);

  const recs = isMal ? afterRecs : beforeRecs;

  const recTitle = isMal
    ? (persona.id === 'new-mom'
        ? 'Complete the Look'
        : persona.id === 'comfort-first'
        ? 'Complete the Look'
        : 'Complete the Look')
    : 'You may also like';

  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/hatch-logo.png'}
          alt={isMal ? 'Malachyte' : 'HATCH'}
          className={`sbs-col__logo sbs-col__logo--${isMal ? 'mal' : 'hatch'}`}
        />
        <span className="sbs-col__caption">{isMal ? 'Complementary recs' : '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">
            hatchcollection.com/products/the-sadie-dress{isMal ? ' · personalized' : ''}
          </div>
        </div>
        <HatchChrome />

        <div className="wiha-plp-root">
          <div className="wiha-crumbs">
            <a>Home</a><span className="sep">/</span>
            <a>New Arrivals</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)}</div>
              <p className="pdp-anchor__desc" style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: '#8C877F', lineHeight: 1.6 }}>
                {anchor.color} · New arrival. A relaxed silhouette with ruching detail — wears from bump to postpartum.
              </p>
            </div>
          </div>

          <div className="pdp-recs">
            <div className="pdp-recs__head">
              <h3 className="pdp-recs__title">{recTitle}</h3>
            </div>

            <div className="pdp-carousel">
              {recs.map((p, i) => (
                <a key={p.id} className="pdp-rec-mini" href="#" onClick={e => e.preventDefault()}>
                  {isMal && i < 3 && <div className="pdp-rec-mini__rank">#{i + 1}</div>}
                  <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 style={{ fontSize: 9.5, color: '#8C877F', marginBottom: 2 }}>{p.color}</div>
                  <div className="pdp-rec-mini__price">${p.price.toFixed(0)}</div>
                  {isMal && p.cats.includes('pairs-with-dress') && (
                    <div style={{ fontSize: 8.5, fontFamily: 'var(--font-mono)', color: '#5B8FA8', letterSpacing: '0.08em', marginTop: 2 }}>PAIRS WITH</div>
                  )}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StepPDP });