function ProductModal({ product, onClose }) {
  React.useEffect(() => {
    if (!product) return;
    const handleKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handleKey);
    return () => window.removeEventListener('keydown', handleKey);
  }, [product, onClose]);

  if (!product) return null;

  return (
    <div
      onClick={onClose}
      style={{position:'fixed',inset:0,zIndex:100,display:'flex',alignItems:'center',justifyContent:'center',background:'rgba(0,0,0,0.7)',padding:24,overflowY:'auto',overflowX:'hidden',boxSizing:'border-box'}}
    >
      <div
        onClick={e => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-labelledby="product-modal-title"
        style={{position:'relative',background:'var(--bg-surface)',border:'2px solid var(--border-metallic)',maxWidth:'min(90vw,800px)',width:'100%',display:'flex',flexWrap:'wrap',boxSizing:'border-box',overflow:'hidden'}}
      >
        <button
          onClick={onClose}
          aria-label="Close"
          className="nav-link"
          style={{position:'absolute',top:12,right:12,zIndex:1,background:'rgba(15,12,10,0.65)',border:'none',color:'var(--cream-050)',fontSize:22,lineHeight:1,cursor:'pointer',width:36,height:36,borderRadius:'50%',display:'flex',alignItems:'center',justifyContent:'center'}}
        >&times;</button>

        <div style={{flex:'1 1 min(360px,100%)',minWidth:'min(360px,100%)',maxWidth:'100%',boxSizing:'border-box',background:'radial-gradient(ellipse 70% 80% at 50% 40%, rgba(240,166,62,0.3), transparent 70%), var(--charcoal-900)',display:'flex',alignItems:'center',justifyContent:'center',minHeight:280,padding:24}}>
          <img src={product.image} alt={product.name} style={{maxWidth:'100%',height:'auto',maxHeight:340,objectFit:'contain'}} />
        </div>

        <div style={{flex:'1 1 min(320px,100%)',minWidth:'min(320px,100%)',maxWidth:'100%',boxSizing:'border-box',padding:'40px 36px',display:'flex',flexDirection:'column',gap:16,justifyContent:'center'}}>
          <h2 id="product-modal-title" style={{fontFamily:'var(--font-display)',fontSize:'clamp(1.8rem,4vw,2.4rem)',color:'var(--cream-050)',textTransform:'uppercase',margin:0,lineHeight:1,overflowWrap:'break-word'}}>{product.name}</h2>
          <p style={{fontFamily:'var(--font-body)',fontSize:15,color:'var(--text-secondary)',lineHeight:1.6,margin:0,overflowWrap:'break-word',wordWrap:'break-word'}}>{product.desc}</p>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginTop:8,gap:12,flexWrap:'wrap'}}>
            <div style={{fontFamily:'var(--font-body)',fontSize:14,color:'var(--text-secondary)',display:'flex',alignItems:'baseline',gap:6,flexWrap:'wrap'}}>
              <span style={{fontWeight:700,fontSize:22,color:'var(--accent-gold)'}}>{product.price.inHouse}</span>
              <span>In-House</span>
              <span style={{opacity:0.5}}>&middot;</span>
              <span style={{fontWeight:700,fontSize:16,color:'var(--text-secondary)'}}>{product.price.grab}</span>
              <span>Grab</span>
            </div>
            {product.heat > 0 && (
              <div style={{display:'flex',alignItems:'center',padding:'6px 12px',borderRadius:'var(--radius-pill)',background:'var(--bg-surface-raised)',border:'1px solid var(--border-subtle)'}}>
                <PepperRating level={product.heat} />
              </div>
            )}
          </div>
          <a href="https://food.grab.com/th/en/restaurant/maggie-mays-fried-chicken---%E0%B8%8A%E0%B8%B1%E0%B8%A2%E0%B8%9E%E0%B8%A4%E0%B8%81%E0%B8%A9%E0%B9%8C-4/1/3-C8DEJ6LELE6YBA" target="_blank" rel="noopener" onClick={onClose} className="btn-primary" style={{background:'var(--accent-primary)',color:'var(--text-on-oxblood)',border:'none',borderRadius:'var(--radius-pill)',padding:'16px 34px',fontFamily:'var(--font-body)',fontWeight:700,fontSize:15,letterSpacing:'0.04em',textTransform:'uppercase',textDecoration:'none',display:'inline-flex',alignItems:'center',justifyContent:'center',cursor:'pointer',marginTop:8}}>Order on Grab</a>
        </div>
      </div>
    </div>
  );
}

window.ProductModal = ProductModal;