// Hero — full-bleed signature dish, tagline, dual CTAs, est. badge
const heroDS = window.ThaiVillageCuisineDesignSystem_bfe0b3;

function Hero() {
  const { NAP } = window;
  const { PhoneIcon, ArrowRight } = window;
  const { Button, Badge } = heroDS;
  const go = (e, href) => { e.preventDefault();
    document.querySelector(href)?.scrollIntoView({ behavior: 'smooth', block: 'start' }); };

  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden', background: 'var(--char-900)' }}>
      {/* photo placeholder layer (drop a signature-dish photo here) */}
      <div aria-label="Signature dish photo placeholder" role="img" style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(120% 90% at 78% 18%, #7a2018 0%, #3a0d0c 46%, #1A1A1A 100%)',
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute', top: '-8%', right: '-6%', width: 'min(60vw, 620px)', opacity: 0.16,
      }}>
        <img src="images/logo-mark.png" alt="" style={{ display: 'block', width: '100%', height: 'auto' }} />
      </div>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(95deg, rgba(18,12,10,0.86) 0%, rgba(18,12,10,0.55) 46%, rgba(18,12,10,0.18) 100%)',
      }} />

      <div style={{
        position: 'relative', maxWidth: 'var(--container)', margin: '0 auto',
        padding: 'clamp(5rem, 4rem + 8vw, 9rem) var(--gutter) clamp(4rem, 3rem + 6vw, 7rem)',
        minHeight: 'clamp(560px, 82vh, 820px)', display: 'flex', flexDirection: 'column', justifyContent: 'center',
      }}>
        <div style={{ maxWidth: 720 }}>
          <Badge variant="gold" size="md">Serving Tulsa Since 2009</Badge>
          <h1 style={{
            fontFamily: 'var(--font-display)', color: 'var(--cream-50)',
            fontSize: 'var(--fs-hero)', lineHeight: 1.0, letterSpacing: '-0.015em',
            margin: '20px 0 0', textWrap: 'balance',
          }}>
            Spice Up Your Life —<br /><em style={{ color: 'var(--gold-500)', fontStyle: 'italic' }}>One Bite</em> At A Time.
          </h1>
          <p style={{
            color: 'rgba(251,243,228,0.86)', fontSize: 'var(--fs-lead)', lineHeight: 1.55,
            maxWidth: 540, margin: '22px 0 0',
          }}>
            Fresh, flavorful, and authentic Thai cooking — fired to order and built to make you sweat, happily.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 34 }}>
            <Button variant="primary" size="lg" href={NAP.tel} icon={<PhoneIcon />}>Call to Order for Pickup</Button>
            <Button variant="accent" size="lg" href="#menu" onClick={(e) => go(e, '#menu')} icon={<ArrowRight />}>
              View Menu
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;