function ProductModal({ product, onClose, onAddToCart }) {
  const [qty, setQty] = React.useState(1);
  const [added, setAdded] = React.useState(false);
  const [active, setActive] = React.useState(0);
  const [variantName, setVariantName] = React.useState(null);

  // reset the gallery + scent whenever a different product opens
  React.useEffect(() => {
    setActive(0);
    setVariantName(product && product.variants ? defaultVariant(product).name : null);
  }, [product && product.id]);

  if (!product) return null;

  const variant = product.variants
    ? (product.variants.find(v => v.name === variantName) || defaultVariant(product))
    : null;
  const soldOut = variant ? !variant.available : false;

  const handleAdd = () => {
    if (soldOut) return;
    onAddToCart(cartItemFor(product, variant), qty);
    setAdded(true);
    setTimeout(() => setAdded(false), 2000);
  };

  const selectVariant = (v) => {
    setVariantName(v.name);
    setActive(0);
  };

  const gallery = variant && variant.images && variant.images.length
    ? variant.images
    : (product.images && product.images.length ? product.images : [product.image]);
  const activeImg = gallery[Math.min(active, gallery.length - 1)];

  return (
    <>
      <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.55)', zIndex:3000 }}/>
      <div style={{
        position:'fixed', top:'50%', left:'50%', transform:'translate(-50%,-50%)',
        background:'#FAF6EE', zIndex:3001, borderRadius:12, border:'3px solid #111',
        width:'90%', maxWidth:820, maxHeight:'90vh', overflowY:'auto',
        fontFamily:"'DM Sans', sans-serif", boxShadow:'8px 8px 0 #111',
      }}>
        <div className="modal-grid" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', minHeight:480 }}>
          {/* Left - product gallery */}
          <div className="modal-visual" style={{ minHeight:480, borderRadius:'9px 0 0 9px', borderRight:'3px solid #111', background:'#FAF6EE', display:'flex', flexDirection:'column', padding:20, gap:12 }}>
            {/* Main image */}
            <div style={{ flex:1, minHeight:0, borderRadius:8, overflow:'hidden', border:'2px solid #111', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <img src={activeImg} alt={`${product.name} ${product.subtitle}`} style={{ width:'100%', height:'100%', objectFit:'contain', display:'block' }}/>
            </div>
            {/* Thumbnails */}
            {gallery.length > 1 && (
              <div style={{ display:'flex', gap:8, justifyContent:'center' }}>
                {gallery.map((im, i) => (
                  <button key={im} onClick={() => setActive(i)} aria-label={`View photo ${i+1}`} style={{
                    width:54, height:54, borderRadius:6, overflow:'hidden', padding:0, cursor:'pointer', flexShrink:0,
                    background:'#fff', border: i === Math.min(active, gallery.length-1) ? '3px solid #111' : '2px solid #c9c4ba',
                    transition:'border-color 0.15s',
                  }}>
                    <img src={im} alt="" style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Right - details */}
          <div style={{ padding:'40px 36px', display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
            <div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'start', marginBottom:16 }}>
                <div>
                  <span style={{ background:'#111', color:'#F5C400', fontSize:11, fontWeight:800, padding:'3px 10px', borderRadius:4, letterSpacing:1 }}>{product.tag}</span>
                  <h2 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:28, margin:'8px 0 2px', color:'#111', letterSpacing:0.5 }}>{product.name}</h2>
                  <p style={{ color:'#666', fontWeight:600, margin:0, fontSize:16 }}>{product.subtitle}</p>
                </div>
                <button onClick={onClose} style={{ background:'none', border:'2px solid #111', borderRadius:4, width:32, height:32, cursor:'pointer', fontSize:16, fontWeight:900 }}>✕</button>
              </div>

              <p style={{ fontSize:38, fontWeight:900, color:'#111', margin:'16px 0' }}>${product.price.toFixed(2)}</p>
              <p style={{ color:'#555', fontSize:15, lineHeight:1.6, marginBottom:20 }}>{product.desc}</p>

              <ul style={{ listStyle:'none', padding:0, margin:'0 0 24px', display:'flex', flexDirection:'column', gap:8 }}>
                {product.features.map(f => (
                  <li key={f} style={{ display:'flex', alignItems:'center', gap:8, fontSize:14, fontWeight:600, color:'#333' }}>
                    <span style={{ background:'#F5C400', border:'2px solid #111', borderRadius:'50%', width:20, height:20, display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:900, flexShrink:0 }}>✓</span>
                    {f}
                  </li>
                ))}
              </ul>
            </div>

            <div>
              {product.variants && (
                <div style={{ marginBottom:20 }}>
                  <p style={{ fontWeight:700, margin:'0 0 10px' }}>{product.optionLabel || 'Scents'}</p>
                  <div style={{ display:'flex', flexWrap:'wrap', gap:10 }}>
                    {product.variants.map(v => {
                      const isSelected = variant && v.name === variant.name;
                      return (
                        <button key={v.name} onClick={() => selectVariant(v)} style={{
                          padding:'8px 18px', borderRadius:999, cursor:'pointer',
                          fontFamily:"'DM Sans', sans-serif", fontSize:14, fontWeight:800,
                          transition:'all 0.15s',
                          background: isSelected ? '#111' : '#fff',
                          color: isSelected ? '#F5C400' : (v.available ? '#111' : '#999'),
                          border: isSelected ? '2px solid #111' : (v.available ? '2px solid #111' : '2px solid #c9c4ba'),
                          textDecoration: v.available ? 'none' : 'line-through',
                        }}>
                          {v.name}
                        </button>
                      );
                    })}
                  </div>
                </div>
              )}

              <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
                <span style={{ fontWeight:700 }}>Qty:</span>
                <button onClick={() => setQty(q => Math.max(1, q-1))} style={qBtnM}>−</button>
                <span style={{ fontWeight:800, fontSize:18, minWidth:28, textAlign:'center' }}>{qty}</span>
                <button onClick={() => setQty(q => q+1)} style={qBtnM}>+</button>
              </div>
              <button onClick={handleAdd} disabled={soldOut} style={{
                width:'100%',
                background: soldOut ? '#c9c4ba' : (added ? '#22c55e' : '#111'),
                color: soldOut ? '#666' : (added ? '#fff' : '#F5C400'),
                border: soldOut ? '3px solid #c9c4ba' : '3px solid #111',
                borderRadius:6, padding:'14px',
                fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:20, fontWeight:900,
                cursor: soldOut ? 'not-allowed' : 'pointer', letterSpacing:1, transition:'all 0.2s',
              }}>
                {soldOut ? 'SOLD OUT' : (added ? '✓ ADDED TO CART' : 'ADD TO CART')}
              </button>
            </div>
          </div>
        </div>
      </div>

      <style>{`@media (max-width: 640px) {
        .modal-grid { grid-template-columns: 1fr !important; }
        .modal-visual { min-height: 340px !important; border-right: none !important; border-bottom: 3px solid #111 !important; border-radius: 9px 9px 0 0 !important; }
      }`}</style>
    </>
  );
}

const qBtnM = {
  width:36, height:36, background:'#F5C400', border:'2px solid #111',
  borderRadius:4, cursor:'pointer', fontWeight:900, fontSize:18,
};

Object.assign(window, { ProductModal });