// Signature Dishes — photo grid with hover lift
const sigDS = window.ThaiVillageCuisineDesignSystem_bfe0b3;

function SignatureDishes() {
  const { SectionHeading, DishCard, Badge } = sigDS;
  const { SIGNATURE_DISHES } = window;
  return (
    <section id="dishes" style={{ background: 'var(--cream-100)', padding: 'var(--section-y) 0' }} data-reveal>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <SectionHeading align="center"
          eyebrow="Fresh · Flavorful · Authentic"
          title="Signature Dishes"
          description="The plates Tulsa keeps coming back for — cooked to order, plated to impress." />
        <div style={{
          display: 'grid', gap: 'clamp(16px, 2vw, 26px)', marginTop: 'clamp(34px, 4vw, 56px)',
          gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
        }}>
          {SIGNATURE_DISHES.map((d, i) => (
            <DishCard key={d.name} name={d.name} spice={d.spice} seed={i} height={340}
              image={d.image} alt={d.alt}
              badge={d.badge ? <Badge variant="chili" size="sm">{d.badge}</Badge> : null} />
          ))}
        </div>
      </div>
    </section>
  );
}
window.SignatureDishes = SignatureDishes;