const TAG_TONE = { 'Bestseller': 'oxblood', 'Breast Meat': 'gold-solid', 'Real Heat': 'oxblood', 'Combo': 'neutral' };
const TAG_STYLE = {
  gold: { background: 'transparent', border: '1px solid var(--border-metallic)', color: 'var(--accent-gold)' },
  'gold-solid': { background: 'var(--gold-500)', border: '1px solid transparent', color: 'var(--text-on-gold)' },
  oxblood: { background: 'var(--accent-primary)', border: '1px solid transparent', color: 'var(--text-on-oxblood)' },
  neutral: { background: 'var(--bg-surface-raised)', border: '1px solid var(--border-subtle)', color: 'var(--text-secondary)' },
};
const PRODUCTS = [
  { id: 'burger', name: 'Signature Burger', price: '฿180', tag: ['Bestseller','Breast Meat'], heat: 2, image: '/assets/burger.jpg', desc: 'Crispy, spicy coated chicken breast, fried to perfection and served on our specialty toasted bun with shredded lettuce, signature sauce and pickles.' },
  { id: 'wings', name: '5 Classic Hot Wings', price: '฿170', tag: 'Real Heat', heat: 3, image: '/assets/wings.jpg', desc: 'Crispy hot wings. Our take on a classic.' },
  { id: 'tenders', name: '5 Hand Cut Tenders', price: '฿160', tag: 'Breast Meat', heat: 1, image: '/assets/tenders.jpg', desc: 'Chicken tenders coated in our signature blend of herbs and spices.' },
  { id: 'chips', name: 'Chunky Chips', price: '฿90', tag: 'Combo', heat: 0, image: '/assets/chips.jpg', desc: 'Thick cut, fried to order. Served with our signature sauce, Maggie Mayo.' },
];
function Menu({ onProductClick }) {
  return (
    <section id="menu" style={{padding:'96px 48px',background:'var(--charcoal-950)'}}>
      <h2 style={{fontFamily:'var(--font-display)',fontSize:'clamp(2rem,4vw,3.2rem)',color:'var(--cream-050)',textTransform:'uppercase',margin:'0 0 40px'}}>The Menu</h2>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(280px,100%),1fr))',gap:24}}>
        {PRODUCTS.map(p => (
          <div key={p.id} style={{background:'var(--bg-surface)',border:'1px solid var(--border-subtle)',display:'flex',flexDirection:'column'}}>
            <div style={{position:'relative',height:220,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',overflow:'hidden'}}>
              {p.image && <img src={p.image} onClick={() => onProductClick(p)} className="clickable-image" style={{height:'88%',objectFit:'contain',cursor:'pointer'}} alt={p.name} />}
              {p.tag && <div style={{position:'absolute',top:14,left:14,display:'flex',gap:6}}>{(Array.isArray(p.tag)?p.tag:[p.tag]).map(t => <span key={t} style={{display:'inline-block',padding:'4px 12px',borderRadius:'var(--radius-pill)',fontFamily:'var(--font-body)',fontSize:11,fontWeight:700,letterSpacing:'0.08em',textTransform:'uppercase',...(TAG_STYLE[TAG_TONE[t]||'neutral'])}}>{t}</span>)}</div>}
            </div>
            <div style={{padding:22,display:'flex',flexDirection:'column',gap:10,flex:1}}>
              <div style={{fontFamily:'var(--font-display)',fontSize:24,color:'var(--cream-050)',textTransform:'uppercase'}}>{p.name}</div>
              <div style={{fontFamily:'var(--font-body)',fontSize:14,color:'var(--text-secondary)',lineHeight:1.5,flex:1}}>{p.desc}</div>
              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginTop:6}}>
                <span style={{fontFamily:'var(--font-body)',fontWeight:700,fontSize:18,color:'var(--accent-gold)'}}>{p.price}</span>
                {p.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={p.heat} />
                </div>}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Menu = Menu;