/* global React, Section, MenuRow, Button */
const { useState: useStateM } = React;

const SECTIONS = {
  "Cold Bar": [
    { name: "Pikilia Dip Trio", desc: "Tzatziki · Hummus & Olive · Tomato Chutney. Served with wood-fired sourdough pita & market vegetable crudité.", price: 20, tags: ["v"] },
    { name: "Whipped Feta", desc: "Attiki Greek honey, chili, pomegranate, pistachio, side of pita.", price: 16, tags: ["v"] },
    { name: "Tuna Carpaccio*", desc: "Grape, toasted almond, onion, chili, passionfruit.", price: 21, tags: ["gf"] },
    { name: "Beef Carpaccio*", desc: "Beef tenderloin, crispy katayifi, graviera cheese.", price: 22 }
  ],
  "Salad": [
    { name: "Greek Salad", desc: "Tomato, cucumber, red onion, feta, cubanelle pepper, kalamata olives, koroneiki olive oil, oregano.", price: 18, tags: ["v", "gf"] }
  ],
  "Mezedes": [
    { name: "Olives", desc: "Marinated olives, served warm.", price: 8, tags: ["v", "gf"] },
    { name: "Saganaki", desc: "Flaming Kefalotyri cheese.", price: 17, tags: ["v", "gf"] },
    { name: "Spanokopita", desc: "Flaky phyllo dough wrapped spinach & feta.", price: 16, tags: ["v"] },
    { name: "Grilled Shrimp", desc: "Garlic, lemon, white wine & herbs.", price: 22, tags: ["gf"] },
    { name: "Calamari", desc: "Crispy fried baby squid.", price: 18 },
    { name: "Short Ribs", desc: "Char-broiled Miami cut beef ribs, pickled cucumbers.", price: 21, tags: ["gf"] },
    { name: "Greek Fries", desc: "Fresh cut fries, feta, tomato, cucumber, onion & tzatziki.", price: 14, tags: ["v"] },
    { name: "Mussels", desc: "White wine, lemon, chili.", price: 19, tags: ["gf"] },
    { name: "Baby Back Ribs", desc: "Half-rack pork ribs, char-broiled with lemon and herbs.", price: 19, tags: ["gf"] },
    { name: "Metaxa Chicken", desc: "Crispy chicken with metaxa hot-honey sauce.", price: 19 },
    { name: "Halloumi Date Skewer", desc: "Fire roasted halloumi, dates, pomegranate, honey, pistachio.", price: 19, tags: ["v", "gf"] },
    { name: "Octopus", desc: "Char-broiled octopus, fava, tomato, onion, lemon sauce.", price: 24, tags: ["gf"] }
  ],
  "Souvlaki Skewers": [
    { name: "Chicken Souvlaki", desc: "Bell & Evans chicken breast. Served with broccolini.", price: 32, tags: ["gf"] },
    { name: "Vegetable Souvlaki", desc: "Grilled market vegetable, lemon sauce, tzatziki. Served with broccolini.", price: 26, tags: ["v", "gf"] },
    { name: "Swordfish Souvlaki", desc: "Tomato, caper, olives. Served with broccolini.", price: 28, tags: ["gf"] },
    { name: "Shrimp Souvlaki", desc: "Key West pink shrimp. Served with broccolini.", price: 34, tags: ["gf"] }
  ],
  "Pasta": [
    { name: "Lemoni Crema", desc: "Angel hair, lemon cream sauce. Add caviar +15.", price: 26, tags: ["v"] },
    { name: "Lobster Makaronada", desc: "Lobster, tagliatelle, blush, blistered cherry tomato.", price: 40 }
  ],
  "Handhelds": [
    { name: <>Pita Wrap — Chicken · Halloumi<span className="dh-menurow-tag" style={{ marginLeft: 4 }}>v</span> · Gyro</>, id: "pita-wrap", desc: "Tzatziki, tomato, onion, cucumber, fries, feta, side Greek salad.", price: 24 },
    { name: "Dimi's Burger*", desc: "Caramelized onion, white cheddar, pickle relish, garlic & feta aioli, Santorini coleslaw, side of hand-cut fries.", price: 24 }
  ],
  "Land & Sea": [
    { name: "NY Strip Loin", desc: "USDA prime steak, market vegetable, skordalia (Greek garlic mashed potato).", price: 48, tags: ["gf"] },
    { name: "Lamb Chops", desc: "Char-broiled lamb chops, market vegetable, tzatziki.", price: 42, tags: ["gf"] },
    { name: "Pistachio Salmon", desc: "Pistachio crusted salmon, market vegetable, lemon caper sauce.", price: 32, tags: ["gf"] },
    { name: "Yemista", desc: "Roasted cubanelle pepper and tomato stuffed with risotto and feta.", price: 26, tags: ["v", "gf"] },
    { name: "Lamb Shank", desc: "12-hour braised lamb, skordalia (Greek garlic mashed potato).", price: 36, tags: ["gf"] },
    { name: "Branzino", desc: "Fire grilled whole Mediterranean seabass, capers, lemon, sautéed spinach.", price: 48, tags: ["gf"] },
    { name: "Baby Back Ribs", desc: "Full rack pork ribs, char-broiled with lemon and herbs, Greek potato salad.", price: 38, tags: ["gf"] }
  ],
  "Sides": [
    { name: "Greek Potatoes", desc: "", price: 8, tags: ["v", "gf"] },
    { name: "Broccolini", desc: "", price: 9, tags: ["v", "gf"] },
    { name: "Tzatziki", desc: "", price: 8, tags: ["v", "gf"] },
    { name: "Sourdough Pita", desc: "", price: 6, tags: ["v"] },
    { name: "Handcut Fries", desc: "", price: 6, tags: ["v"] },
    { name: "Market Vegetable Crudité", desc: "", price: 7, tags: ["v", "gf"] }
  ]
};

function MenuPreview() {
  const [tab, setTab] = useStateM("Mezedes");
  const items = SECTIONS[tab];
  return (
    <Section
      id="menu"
      title="Menu"
      bg="var(--beige-50)"
    >
      <div className="dh-menu-tabs" role="tablist">
        {Object.keys(SECTIONS).map(k => (
          <button
            key={k}
            role="tab"
            aria-selected={tab === k}
            className={`dh-menu-tab ${tab === k ? "is-active" : ""}`}
            onClick={() => setTab(k)}
          >
            {k}
          </button>
        ))}
      </div>
      <div className="dh-menu-list">
        {items.map(it => <MenuRow key={it.id || it.name} {...it} />)}
      </div>
      <div className="dh-menu-foot">
        <Button variant="ghost" as="a" href="menu.html">See the full menu</Button>
        <small className="dh-menu-fineprint">
          v · vegetarian &nbsp;·&nbsp; gf · gluten-free &nbsp;·&nbsp; please tell us about allergies
        </small>
      </div>
    </Section>
  );
}

window.MenuPreview = MenuPreview;
window.MENU_SECTIONS = SECTIONS;