/* meals.jsx — table d'hôte, presented editorially */
function Meals() {
  const meals = window.RIAD.meals;
  return (
    <section className="section band" id="meals" data-screen-label="The Table">
      <div className="wrap">
        <SectionHead
          eyebrow="The Table — Table d'hôte"
          title="Everything is cooked in the house."
          sub="Khadija has run this kitchen for nineteen years. There is no printed menu — there is the market that morning, the season, and a long table in the courtyard."
        />
        <div className="meals">
          {meals.map((m, idx) => (
            <Reveal className="meal" key={m.id} delay={(idx % 2) + 1}>
              <div className="meal-img" style={{ backgroundImage: "url(" + window.PX(m.img, 1100) + ")" }}></div>
              <div className="meal-body">
                <span className="when">{m.when}</span>
                <h3>{m.name}</h3>
                <p>{m.story}</p>
                <span className="tag">{m.tag}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Meals = Meals;