// PaintingDetail.jsx — modal overlay for a single work
const PaintingDetail = ({ work, onClose, onInquire, onAddToCart, inCart }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [work]);
  if (!work) return null;
  const series = window.seriesById(work.series);
  const sold      = work.status === 'sold';
  const hasPrice  = !!work.price;   // fixed price — can go in cart
  const inquireOnly = !sold && !hasPrice; // available but price on inquiry

  return (
    <div className="overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="mclose" onClick={onClose} aria-label="Close">&#x2715;</button>
        <div className="mimg">
          {work.img
            ? <img src={work.img} alt={work.title} />
            : <div className="ph">
                <div className="eyebrow on-dark">{series?.title}</div>
                <div className="pht">{work.title}</div>
                <div className="meta on-dark">Not currently pictured — inquire for images</div>
              </div>}
        </div>
        <div className="minfo">
          <div className="eyebrow">{series?.title}</div>
          <h2 className="mtitle">{work.title}</h2>
          <p className="body dim" style={{fontStyle:'italic', fontSize:15, marginTop:2, marginBottom:8}}>
            {work.note}
          </p>
          <div style={{marginTop:6}}>
            <div className="mrow"><span className="k">Medium</span><span className="v">{work.medium}</span></div>
            <div className="mrow"><span className="k">Dimensions</span><span className="v">{work.size}</span></div>
            <div className="mrow"><span className="k">Year</span><span className="v">{work.year}</span></div>
            <div className="mrow">
              <span className="k">{sold ? 'Status' : 'Price'}</span>
              <span className={"v" + (sold ? "" : " flare")}>{window.fmtPrice(work)}</span>
            </div>
          </div>

          <div style={{marginTop:'auto', paddingTop:24, display:'flex', flexDirection:'column', gap:14}}>
            {sold ? (
              <>
                <button className="btn btn-ink" onClick={() => onInquire(work)}>
                  Inquire about similar work &#x2192;
                </button>
                <p className="meta">This piece has been collected. The studio can talk you through related or commissioned work.</p>
              </>
            ) : inquireOnly ? (
              <>
                <button className="btn btn-flare" onClick={() => onInquire(work)}>
                  Inquire to collect &#x2192;
                </button>
                <p className="meta">Price on inquiry — no deposit, no pressure. We'll confirm details before anything is decided.</p>
              </>
            ) : (
              <>
                <button
                  className={"btn " + (inCart ? "btn-ink" : "btn-flare")}
                  onClick={() => inCart ? null : onAddToCart(work)}
                  disabled={inCart}
                  style={{opacity: inCart ? 0.7 : 1}}
                >
                  {inCart ? 'Added to cart &#x2713;' : 'Add to cart &#x2192;'}
                </button>
                <p className="meta">Secure checkout via Stripe &middot; Ships tracked &amp; insured</p>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};
Object.assign(window, { PaintingDetail });