// Why The Table — Panel 5 of the home scroll-snap stack.
//
// A calm, full-screen statement on a dark forest-green field. Cream type, gold
// line icons. A centred header sits at the top; below it, four membership
// principles breathe in a 2×2 grid (stacked on mobile). No images — this panel
// is image-independent, sized to sit comfortably within one screen on desktop
// and mobile without clipping.
const TABLE_POINTS = [
  { icon: "chef-hat",       title: "Chef-cooked",             copy: "Every meal cooked by hand, never batch-processed." },
  { icon: "moon",           title: "Halal, properly",         copy: "Sourced and prepared to a standard we don\u2019t compromise." },
  { icon: "calendar-check", title: "Cooked through the week", copy: "Prepped Wednesday to Saturday, delivered Sunday." },
  { icon: "utensils",       title: "Eat with intention",      copy: "Food worth sitting down for." },
];

function WhyTable() {
  return (
    <section className="why-table snap-panel" data-screen-label="Why The Table">
      <div className="why-table__inner">
        <h2 className="why-table__head">Why <em>The Table</em></h2>
        <div className="why-table__grid">
          {TABLE_POINTS.map((p) => (
            <article className="why-point" key={p.title}>
              <span className="why-point__icon"><Icon name={p.icon} size={34} strokeWidth={1.3}/></span>
              <h3 className="why-point__title">{p.title}</h3>
              <p className="why-point__copy">{p.copy}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhyTable = WhyTable;