function Hero({ onGrabClick }) {
  return (
    <section className="hero-grid" style={{position:'relative',minHeight:640,alignItems:'center',gap:24,overflow:'hidden',background:'radial-gradient(ellipse 60% 70% at 72% 50%, rgba(240,166,62,0.28), transparent 65%), var(--charcoal-950)'}}>
      <div style={{zIndex:2,position:'relative'}}>
        <div style={{fontFamily:'var(--font-body)',fontWeight:700,fontSize:12,letterSpacing:'0.16em',color:'var(--accent-gold)',textTransform:'uppercase',marginBottom:18}}>Jomtien, Pattaya</div>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:'clamp(3rem,6vw,5.5rem)',lineHeight:0.95,color:'var(--cream-050)',textTransform:'uppercase',margin:'0 0 24px'}}>Real Chicken.<br/><span style={{color:'var(--oxblood-300)'}}>Real Heat.</span></h1>
        <p style={{fontFamily:'var(--font-body)',fontSize:18,color:'var(--text-secondary)',lineHeight:1.6,margin:'0 0 36px',maxWidth:460}}>Breast meat, hand cut, breaded fresh in our 13 secret herbs and spices. Delivered by Grab to your door, or order in our on-site restaurant at Maggie Mays Resort in Jomtien.</p>
        <div style={{display:'flex',gap:16,flexWrap:'wrap'}}>
          <button onClick={onGrabClick} 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',display:'inline-flex',alignItems:'center',cursor:'pointer'}}>Order on Grab</button>
          <a href="#menu" className="btn-outline" style={{background:'transparent',color:'var(--text-primary)',border:'2px solid var(--border-metallic)',borderRadius:'var(--radius-pill)',padding:'14px 32px',fontFamily:'var(--font-body)',fontWeight:700,fontSize:15,letterSpacing:'0.04em',textTransform:'uppercase',textDecoration:'none',display:'inline-flex',alignItems:'center'}}>See the Menu</a>
          <a href="https://maps.app.goo.gl/p9xYpW2WQLFfHvSo8" target="_blank" rel="noopener noreferrer" className="btn-outline" style={{background:'transparent',color:'var(--text-primary)',border:'2px solid var(--border-metallic)',borderRadius:'var(--radius-pill)',padding:'14px 32px',fontFamily:'var(--font-body)',fontWeight:700,fontSize:15,letterSpacing:'0.04em',textTransform:'uppercase',textDecoration:'none',display:'inline-flex',alignItems:'center'}}>Dine In</a>
        </div>
      </div>
      <img src="/assets/burger.jpg" style={{width:'100%',maxHeight:460,objectFit:'contain',zIndex:1,filter:'drop-shadow(0 30px 60px rgba(0,0,0,0.6))'}} alt="Signature spiced chicken burger" />
    </section>
  );
}

window.Hero = Hero;