// Product detail modal — simplified.

const ProductModal = ({ product, onClose }) => {
  const { addToCart } = useStore();
  const [qty, setQty] = useState(1);
  if (!product) return null;

  const cat = window.DATA.categoryById(product.category);

  return (
    <Modal open={!!product} onClose={onClose} size="lg">
      <div className="grid md:grid-cols-2 gap-0">

        {/* Image */}
        <div className="p-5 md:p-7">
          <ProductVisual product={product} size="big" />
        </div>

        {/* Info */}
        <div className="p-5 md:p-7 border-l border-paper-100 flex flex-col">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-2 flex-wrap">
              <Badge stock={product.stock} />
              <span className="chip">{cat.name}</span>
            </div>
            <button
              onClick={onClose}
              className="w-9 h-9 rounded-full hover:bg-paper-100 flex items-center justify-center text-ink-500 shrink-0"
              aria-label="Закрыть"
            >
              <Icon name="close" size={18} />
            </button>
          </div>

          <h2 className="font-display font-bold text-2xl text-ink-900 leading-tight">
            {product.title}
          </h2>
          <div className="font-display font-bold text-2xl text-brand-600 mt-2 tabular-nums">
            {fmtPrice(product.price)}
          </div>

          <p className="text-ink-600 leading-relaxed mt-5 text-[15px]">
            {product.desc}
          </p>

          <div className="mt-5 bg-brand-50 rounded-xl p-3.5 flex items-start gap-2.5">
            <Icon name="handshake" size={16} className="text-brand-600 mt-0.5 shrink-0" />
            <div className="text-sm text-brand-800">
              Самовывоз в офисе или передача через коллег — детали уточнит продавец.
            </div>
          </div>

          <div className="flex-1" />

          <div className="mt-6 pt-5 border-t border-paper-100">
            <div className="flex items-center justify-between mb-4">
              <span className="text-sm font-medium text-ink-700">Количество</span>
              <Stepper value={qty} onChange={setQty} />
            </div>
            <button
              onClick={() => { addToCart(product.id, qty); onClose(); }}
              className="btn-primary w-full inline-flex items-center justify-center gap-2 text-base"
            >
              <Icon name="bag" size={18} />
              Добавить · {fmtPrice(product.price * qty)}
            </button>
          </div>
        </div>

      </div>
    </Modal>
  );
};

window.ProductModal = ProductModal;