// Step 4 — PDP for Stanley Tucci 11-Piece Cookware Set
// Both modes show the same hero/details. The 'You may also like' carousel
// is where the contrast happens:
//   - GreenPan (alpha): just more cookware sets (same category, no real complement)
//   - Malachyte: a complete kitchen — knife block, bakeware, steak knives, pizza oven

const PDP_PRODUCT_ID = 'valencia-pro-19pc-sage';

// Hand-picked recs by mode
const ALPHA_RECS = [
  'valencia-pro-19pc-gray',
  'valencia-pro-19pc-cream',
  'reserve-pro-10pc-cream',
  'spectra-thermobond-10pc',
];

const MAL_RECS = [
  'reserve-bakeware-8pc-cream',
  'premiere-ovenware-6pc-taupe',
  'valencia-pro-frypan-set-sage',
  'premiere-silicone-utensil-bisque',
];

const MAL_REASONS = [
  'Same Cream/Sage finish family',
  'Ceramic ovenware · pairs at the table',
  'Sage frypans · match the 19-piece set',
  'PFAS-free silicone · protects ceramic',
];

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

  const recIds = mode === 'malachyte' ? MAL_RECS : ALPHA_RECS;
  const recs = recIds.map(id => products.find(p => p.id === id)).filter(Boolean);

  const [color, setColor] = React.useState(product?.colors[0] || 'Marino Blue');
  const [size, setSize] = React.useState('Standard');

  if (!product) return <div className="pdp-root">Product not found.</div>;

  const isSale = product.cats.includes('sale') && product.originalPrice && product.originalPrice > product.price;

  return (
    <div className="pdp-root">
      <div className="pdp-crumbs">
        <span>Cookware</span>
        <span className="pdp-crumbs-sep">/</span>
        <span>Cookware Sets</span>
        <span className="pdp-crumbs-sep">/</span>
        <span>Valencia Pro</span>
        <span className="pdp-crumbs-sep">/</span>
        <span className="pdp-crumbs-current">{product.name}</span>
      </div>

      <div className="pdp-main">
        <div className="pdp-gallery">
          <div className="pdp-gallery-hero">
            <img src={product.img} alt={product.name} />
          </div>
          <div className="pdp-gallery-thumbs">
            {[product.img, product.img, product.img, product.img].map((src, i) => (
              <button key={i} className={`pdp-thumb ${i === 0 ? 'is-active' : ''}`}>
                <img src={src} alt="" />
              </button>
            ))}
          </div>
        </div>

        <div className="pdp-info">
          {product.badge && <div className="pdp-badge">{product.badge}</div>}
          <h1 className="pdp-title">{product.name}</h1>
          <div className="pdp-price">
            {isSale && <span className="pdp-price-was">Sugg. Price ${product.originalPrice.toFixed(2)}</span>}
            <span className={isSale ? 'pdp-price-sale' : ''}>Special ${product.price.toFixed(2)}</span>
          </div>
          <p className="pdp-desc">
            PFAS-free ceramic nonstick cookware in our signature Sage finish.
            19 pieces — every pan, lid, and tool you need to outfit a full kitchen,
            with stay-cool stainless handles. Diamond-reinforced, oven-safe to 600°F,
            dishwasher-safe.
          </p>

          <div className="pdp-option">
            <div className="pdp-option-label">
              <span>Color</span>
              <span className="pdp-option-value">{color}</span>
            </div>
            <div className="pdp-swatches">
              {product.colors.map(c => (
                <button
                  key={c}
                  className={`pdp-swatch pdp-swatch--${c.toLowerCase().replace(/\s+/g, '-')} ${c === color ? 'is-active' : ''}`}
                  onClick={() => setColor(c)}
                  aria-label={c}
                />
              ))}
            </div>
          </div>

          <div className="pdp-option">
            <div className="pdp-option-label">
              <span>Set Size</span>
              <span className="pdp-option-value">{size}</span>
            </div>
            <div className="pdp-sizes">
              {['11-Piece', '13-Piece', '19-Piece'].map(s => (
                <button
                  key={s}
                  className={`pdp-size ${s === size || (size === 'Standard' && s === '19-Piece') ? 'is-active' : ''}`}
                  onClick={() => setSize(s)}
                >
                  {s}
                </button>
              ))}
            </div>
          </div>

          <button className="pdp-cta">Add to Cart — ${product.price.toFixed(2)}</button>

          <div className="pdp-perks">
            <div className="pdp-perk"><span>✓</span> PFAS-free since day 1</div>
            <div className="pdp-perk"><span>✓</span> Free shipping over $125</div>
            <div className="pdp-perk"><span>✓</span> 60-day returns</div>
          </div>
        </div>
      </div>

      <div className="pdp-recs">
        <div className="pdp-recs-head">
          {mode === 'malachyte' ? (
            <>
              <h2>Complete your kitchen</h2>
              <p className="pdp-recs-sub">
                Pieces that pair with the {product.name} — same Sage/Cream finish family,
                PFAS-free ceramic, scaled to a full home kitchen.
              </p>
            </>
          ) : (
            <>
              <h2>You may also like</h2>
              <p className="pdp-recs-sub">More from the cookware sets category.</p>
            </>
          )}
        </div>

        <div className={`pdp-recs-grid pdp-recs-grid--${mode}`}>
          {recs.map((p, i) => (
            <RecCard
              key={p.id}
              p={p}
              mode={mode}
              reason={mode === 'malachyte' ? MAL_REASONS[i] : null}
            />
          ))}
        </div>

        {mode === 'malachyte' && (
          <button className="pdp-bundle-cta">
            Add complete kitchen bundle to cart · save 10% on 4 items
          </button>
        )}
      </div>
    </div>
  );
}

function RecCard({ p, mode, reason }) {
  const isSale = p.cats.includes('sale') && p.originalPrice && p.originalPrice > p.price;
  return (
    <div className="pdp-rec-card">
      <div className="pdp-rec-img">
        {p.img ? <img src={p.img} alt={p.name} /> : <div className="pdp-rec-ph" />}
      </div>
      <div className="pdp-rec-name">{p.name}</div>
      <div className="pdp-rec-price">
        {isSale && <span style={{textDecoration:'line-through',color:'#999',marginRight:6}}>${p.originalPrice.toFixed(2)}</span>}
        <span style={{color: isSale ? '#B83227' : '#555', fontWeight: isSale ? 700 : 500}}>${p.price.toFixed(2)}</span>
      </div>
      {reason && (
        <div className="pdp-rec-reason">
          <span className="pdp-rec-reason-dot" />
          {reason}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { StepPDP });