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: 'signature', name: 'Signature Burger', price: { inHouse: '฿230', grab: '฿320' }, tag: ['Bestseller','Breast Meat'], heat: 2, image: '/assets/signature.png', desc: 'Crispy, spicy coated chicken breast, fried to perfection and served on our specialty toasted bun with shredded lettuce, signature sauce and pickles.' },
  { id: 'supreme', name: 'Supreme Burger', price: { inHouse: '฿250', grab: '฿350' }, heat: 2, image: '/assets/supreme.png', desc: 'All the Signature, plus a double layer of melted cheddar for good measure.' },
];
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,gap:12,flexWrap:'wrap'}}>
                <div style={{fontFamily:'var(--font-body)',fontSize:13,color:'var(--text-secondary)',display:'flex',alignItems:'baseline',gap:6,flexWrap:'wrap'}}>
                  <span style={{fontWeight:700,fontSize:18,color:'var(--accent-gold)'}}>{p.price.inHouse}</span>
                  <span>In-House</span>
                  <span style={{opacity:0.5}}>&middot;</span>
                  <span style={{fontWeight:700,fontSize:14,color:'var(--text-secondary)'}}>{p.price.grab}</span>
                  <span>Grab</span>
                </div>
                {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>
      <div style={{textAlign:'center',marginTop:48}}>
        <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" 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',cursor:'pointer'}}>Order on Grab</a>
      </div>
    </section>
  );
}

window.Menu = Menu;