// Plates data — used by both the homepage carousel and the menu page.
const PLATES = [
  { id: "chop",     name: "The Sunday Chop",      img: "assets/placeholder-slate.svg",        desc: "Herb-crusted lamb chops, rosemary jus, garlic mash, asparagus." },
  { id: "garden",   name: "The Garden Chicken",   img: "assets/hero-02-garden.jpg",          desc: "Chimichurri free-range chicken, sweet potato, tenderstem." },
  { id: "ragu",     name: "The Beef Ragu",        img: "assets/placeholder-hero-pour.svg",    desc: "Grass-fed beef ragu, chopped carrots, pappardelle." },
  { id: "bass",     name: "The Thai Green Bass",  img: "assets/hero-01-pour.jpg",             desc: "Scottish sea bass, Thai green sauce, edamame, jasmine rice." },
  { id: "salmon",   name: "The Teriyaki Salmon",  img: "assets/placeholder-oak.svg",          desc: "Teriyaki salmon, egg noodles, edamame, green beans." },
  { id: "salad",    name: "The House Salad",      img: "assets/placeholder-slate.svg",        desc: "Baby spinach, radish, cucumber, tomato, parsley, mint, olive oil." },
];
window.PLATES = PLATES;

// "This week's plates" — Panel 2 of the home scroll-hijack stack.
//
// A single full-bleed panel of three equal images butted edge to edge, wall to
// wall — no gaps, no padding, no panel background showing. The images ARE the
// panel. Each carries a small label low-centre over a faint bottom scrim and is
// itself the link to /build. Image-only, YSL restraint — no header, no arrows,
// no card chrome. Desktop: three columns; mobile: three stacked rows, each a
// third of the 100dvh panel so all three read at once with no internal scroll.
const PLATE_WALL = [
  { id: "press",  name: "The Press",  img: "assets/press-juices-m.jpg" },  // pressed juices (mobile-sized)
  { id: "plates", name: "The Plates", img: "assets/table-01-m.jpg" },  // the mains (centre)
  { id: "extras", name: "The Extras", img: "assets/table-11-m.jpg" },  // sweet & small things
];

function Plates() {
  return (
    <section className="plates-wall snap-panel" data-screen-label="This week's plates">
      {PLATE_WALL.map((g) => (
        <a className="plates-wall__col" href="menu.html" key={g.id} aria-label={`${g.name} — view the menu`}>
          <span className="plates-wall__img" style={{ backgroundImage: `url(${g.img})` }}/>
          <span className="plates-wall__scrim"/>
          <span className="plates-wall__label">
            <span className="plates-wall__name">{g.name}</span>
            <span className="plates-wall__cue">View &rarr;</span>
          </span>
        </a>
      ))}
    </section>
  );
}
window.Plates = Plates;