// Spice Guide — five-tier horizontal heat scale
const spiceDS = window.ThaiVillageCuisineDesignSystem_bfe0b3;

function SpiceGuide() {
  const { SectionHeading, SpiceMeter } = spiceDS;
  const { SPICE_TIERS } = window;
  return (
    <section style={{ background: 'var(--cream-200)', padding: 'var(--section-y) 0' }} data-reveal>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <SectionHeading align="center"
          eyebrow="Know Before You Go"
          title="The Spice Level Guide"
          description="From a gentle warmth to a full-village blaze — pick your heat, we’ll bring the fire." />
        <div style={{
          display: 'grid', gap: 14, marginTop: 'clamp(34px, 4vw, 52px)',
          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
        }}>
          {SPICE_TIERS.map((t) => (
            <div key={t.name} style={{
              background: 'var(--cream-50)', border: '1px solid var(--cream-300)',
              borderRadius: 'var(--radius-md)', padding: '22px 20px',
              boxShadow: 'var(--shadow-sm)', textAlign: 'center',
            }}>
              <div style={{ fontSize: '1.5rem', marginBottom: 12 }}>
                <SpiceMeter level={t.level} showLabel={false} size="md" />
              </div>
              <div style={{ fontFamily: 'var(--font-display)', color: 'var(--char-900)', fontSize: '1.3rem', lineHeight: 1.05 }}>{t.name}</div>
              <div style={{ fontSize: '0.875rem', color: 'var(--char-500)', marginTop: 6 }}>{t.note}</div>
            </div>
          ))}
        </div>
        <p style={{ textAlign: 'center', color: 'var(--char-500)', fontSize: '0.875rem', marginTop: 22 }}>
          Heat is built to order — ask your server to dial any dish up or down.
        </p>
      </div>
    </section>
  );
}
window.SpiceGuide = SpiceGuide;