function MenuPage() {
  return (
    <>
      <header style={{padding: "120px 64px 48px", background: "var(--cream)", maxWidth: 1180, margin: "0 auto"}}>
        <span className="eyebrow">Sunday Drop · 24 November</span>
        <h1 className="h-display" style={{marginTop: 16}}>The Menu.</h1>
        <p className="lede" style={{marginTop: 18}}>Six plates. Three juices. Three small things. Pick what you'd like to eat this week.</p>
      </header>

      <section style={{padding: "0 64px 56px"}}>
        <div className="section__inner">
          <span className="eyebrow" style={{display:"block", marginBottom: 22}}>The Plates — £14 each</span>
          <div className="menu-cards">
            {PLATES.map(p => (
              <article className="dish-card" key={p.id}>
                <div className="dish-card__img" style={{backgroundImage: `url(${p.img})`}}/>
                <div className="dish-card__body">
                  <div className="dish-card__meta">
                    <h3 className="dish-card__name">{p.name}</h3>
                    <span className="dish-card__price">£14</span>
                  </div>
                  <p className="dish-card__desc">{p.desc}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section style={{padding: "32px 64px 48px"}}>
        <div className="section__inner">
          <span className="eyebrow" style={{display:"block", marginBottom: 18}}>The Press — Juices · £4.50</span>
          <div className="menu-grid">
            {[
              ["The Green Clarity", "Cucumber, apple, celery, mint, lime."],
              ["The Golden Root",   "Carrot, ginger, turmeric, orange."],
              ["The Beet & Berry",  "Beetroot, blueberry, apple, lemon."],
            ].map(([n,d]) => (
              <div key={n} style={{padding:"22px 0", borderTop:"1px solid var(--hairline)"}}>
                <div className="row between">
                  <h3 style={{font:"400 24px/1.1 var(--font-display)", margin:0}}>{n}</h3>
                  <span style={{font:"500 18px/1 var(--font-display)"}}>£4.50</span>
                </div>
                <div style={{font:"500 italic 14px/1.5 var(--font-display)", opacity:.78, marginTop:6}}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{padding: "32px 64px 96px"}}>
        <div className="section__inner">
          <span className="eyebrow" style={{display:"block", marginBottom: 18}}>The Extras — Snacks</span>
          <div className="menu-grid">
            {[
              ["The Milk Choc",  "Milk chocolate, hazelnut, sea salt."],
              ["The White Choc", "White chocolate, raspberry, pistachio."],
              ["The Bakewell",   "Almond, raspberry, soft sponge."],
            ].map(([n,d]) => (
              <div key={n} style={{padding:"22px 0", borderTop:"1px solid var(--hairline)"}}>
                <div className="row between">
                  <h3 style={{font:"400 24px/1.1 var(--font-display)", margin:0}}>{n}</h3>
                  <span style={{font:"500 18px/1 var(--font-display)"}}>£3</span>
                </div>
                <div style={{font:"500 italic 14px/1.5 var(--font-display)", opacity:.78, marginTop:6}}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Plans/>
    </>
  );
}
window.MenuPage = MenuPage;