// About — warm, family-owned story
const aboutDS = window.ThaiVillageCuisineDesignSystem_bfe0b3;

function About() {
  const { Badge } = aboutDS;
  return (
    <section id="about" style={{ background: 'var(--cream-50)', padding: 'var(--section-y) 0' }} data-reveal>
      <div style={{ maxWidth: 'var(--container-narrow)', margin: '0 auto', padding: '0 var(--gutter)', textAlign: 'center' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
          <img src="images/logo-mark.png" alt="Thai Village Cuisine" height="56"
            style={{ height: 56, width: 'auto', display: 'block' }} />
        </div>
        <Badge variant="gold" size="md">Our Story</Badge>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h1)', color: 'var(--char-900)', margin: '16px 0 0', lineHeight: 1.05 }}>
          Family-Owned, Fired With Heart
        </h2>
        <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', lineHeight: 1.65, margin: '20px auto 0', maxWidth: 600 }}>
          Since 2009, our family has been cooking the Thai food we grew up on — bright herbs, bold chilies, and recipes passed down through generations. Every plate is made to order, the way it should be: fresh, flavorful, and unapologetically authentic. Pull up a chair, Tulsa. You’re family now.
        </p>
        <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: '1.4rem', color: 'var(--chili-500)', margin: '26px 0 0' }}>
          “Thai food so good, it’ll make you sweat… happily.”
        </p>
      </div>
    </section>
  );
}
window.About = About;