/* eslint-disable */
function ProductDetail({ product, onAdd, onClose }) {
  const [qty, setQty] = React.useState(1);
  const [optSel, setOptSel] = React.useState({});
  if (!product) return null;
  const opts = product.options || [];
  React.useEffect(() => {
    if (!opts.length) return;
    const seed = {};
    opts.forEach(o => { seed[o.name] = o.values?.[0]; });
    setOptSel(seed);
  }, [product?.id]);
  const variant = (product.variants || []).find(v =>
    v.selectedOptions?.every(o => optSel[o.name] === o.value)
  ) || product.variants?.[0] || null;
  return (
    <div className="pdp-overlay" onClick={onClose}>
      <div className="pdp" onClick={e => e.stopPropagation()}>
        <button className="pdp-close" onClick={onClose} aria-label="Close">×</button>
        <div className="pdp-gallery">
          <div className="pdp-img" style={{backgroundImage:`url(${product.img})`}}></div>
          <div className="pdp-thumbs">
            <div className="pdp-thumb active" style={{backgroundImage:`url(${product.img})`}}></div>
            <div className="pdp-thumb" style={{backgroundImage:`url(assets/hero-necklaces.jpg)`}}></div>
            <div className="pdp-thumb" style={{backgroundImage:`url(assets/hero-mens.jpg)`}}></div>
            <div className="pdp-thumb" style={{backgroundImage:`url(assets/banner-bundles.jpg)`}}></div>
          </div>
        </div>
        <div className="pdp-info">
          <div className="eyebrow">{product.meta}</div>
          <h1 className="pdp-title">{product.name}</h1>
          <div className="pdp-rating">
            <span className="stars">★★★★★</span>
            <span className="rating-num">4.9</span>
            <a className="rating-link">2,481 reviews</a>
          </div>
          <div className="pdp-price">
            {product.was && <span className="strike">${product.was}</span>}
            <span className={product.was ? "now" : ""}>${product.price}</span>
            {product.was && <span className="save">Save ${product.was - product.price}</span>}
          </div>

          {product.lowStock && (
            <div className="urgency">
              <span className="urgency-dot"></span>
              Only {product.lowStock} left — selling fast
            </div>
          )}

          {opts.map(opt => (
            <div key={opt.name} className="pdp-section">
              <div className="pdp-label">{opt.name.toUpperCase()} — <em style={{textTransform:"none", letterSpacing:0, fontStyle:"normal"}}>{optSel[opt.name]}</em></div>
              <div className="size-row">
                {opt.values.map(v => (
                  <button key={v} className={"size-chip " + (optSel[opt.name]===v?"active":"")}
                    onClick={() => setOptSel(s => ({...s, [opt.name]: v}))}>{v}</button>
                ))}
              </div>
            </div>
          ))}

          <div className="pdp-section">
            <div className="pdp-label">QUANTITY</div>
            <div className="qty">
              <button onClick={() => setQty(Math.max(1, qty-1))}>−</button>
              <span>{qty}</span>
              <button onClick={() => setQty(qty+1)}>+</button>
            </div>
          </div>

          <button className="btn-primary btn-block" onClick={() => onAdd(product, qty, variant)}>
            ADD TO BAG — ${product.price * qty}
          </button>
          <button className="btn-shoppay btn-block">
            <span>Buy now with</span> <span className="shoppay-logo">shop<strong>Pay</strong></span>
          </button>

          <div className="pdp-trust">
            <div className="t"><strong>Free shipping</strong><span>over $75</span></div>
            <div className="t"><strong>30-day returns</strong><span>no questions</span></div>
            <div className="t"><strong>Tarnish-free</strong><span>or your money back</span></div>
          </div>

          {product.description && (
            <details className="pdp-acc" open>
              <summary>Details & care</summary>
              <p>{product.description}</p>
            </details>
          )}
          <details className="pdp-acc">
            <summary>Shipping & returns</summary>
            <p>Ships within 1–2 business days. Free shipping on orders over $75. Returns accepted within 30 days, unworn, in original packaging.</p>
          </details>
        </div>
      </div>
    </div>
  );
}
window.ProductDetail = ProductDetail;