/* global React, Splash, Btn, Food, Reveal, SectionHead */
const { useState: useMenuState } = React;

const MENU_DATA = [
{
  id: "burger",
  title: "Holy Burger",
  eyebrow: "01",
  desc: "Jeder Burger frisch auf der Grillplatte gepresst — mit täglich frisch gewolftem Beef, weltberühmten Potato Buns & hausgemachten Saucen.",
  filter: ["burger"],
  items: [
  {
    title: "OG Smash",
    desc: "Bun, Patty, Salat, Tomate, Zwiebeln, Holy Sauce.",
    single: "7,90",
    double: "10,90",
    badges: [{ text: "Bestseller", kind: "teal" }],
    palette: "orange",
    hand: "klassiker",
    img: "assets-min/og-smash.jpg",
    allergens: ["1", "3", "7", "10"],
    filter: ["burger"]
  },
  {
    title: "Cheesy Smash",
    desc: "Bun, Patty, Cheddar-Schmelzkäse, Salat, Tomate, Zwiebeln, Holy Sauce.",
    single: "8,90",
    double: "11,90",
    palette: "orange",
    hand: "double cheese",
    img: "assets-min/cheesy-smash.jpg",
    allergens: ["1", "3", "7", "10"],
    filter: ["burger"]
  },
  {
    title: "Holy Smash",
    desc: "Bun, Patty, Cheddar-Schmelzkäse, Bacon Jam, Salat, Tomate, Zwiebeln, Holy Sauce.",
    single: "9,90",
    double: "12,90",
    badges: [{ text: "Signature", kind: "teal" }],
    palette: "red",
    hand: "holy good",
    img: "assets-min/holy-smash.jpg",
    allergens: ["1", "3", "7", "10", "12"],
    filter: ["burger"]
  },
  {
    title: "Holy Veggie Vibes",
    desc: "Bun, Veggie Patty, Cheddar-Schmelzkäse, Salat, Tomate, Zwiebeln, Holy Sauce.",
    price: "9,50",
    badges: [{ text: "Vegetarisch", kind: "teal" }],
    palette: "teal",
    hand: "no beef, all love",
    img: "assets-min/veggie.jpg",
    allergens: ["1", "6", "7", "10"],
    filter: ["veggie"]
  },
  {
    title: "Holy Chicken Vibes",
    desc: "Bun, Cheddar-Schmelzkäse, Chicken Vibe Patty, Salat, Tomate, Holy Sauce.",
    price: "9,90",
    palette: "orange",
    hand: "crispy af",
    img: "assets-min/chicken-vibe.jpg",
    allergens: ["1", "3", "7", "10"],
    filter: ["veggie"]
  }]

},
{
  id: "loaded",
  title: "Loaded Fries",
  eyebrow: "02",
  desc: "Crispy Fries. Geladen mit allem was Sünde ist.",
  filter: ["fries"],
  items: [
  {
    title: "Bacon Jam Fries",
    desc: "Fritten, Bacon Jam, Frühlingszwiebeln, Holy Sauce.",
    price: "9,50",
    badges: [{ text: "NEU", kind: "orange" }],
    palette: "teal",
    hand: "loaded",
    img: "assets-min/bacon-jam-fries.jpg",
    allergens: ["3", "10", "12"],
    filter: ["fries"]
  },
  {
    title: "Holy Moly Fries",
    desc: "Fritten, Beef, Jalapeño Käse Sauce, Schnittlauch, Holy Sauce.",
    price: "9,50",
    badges: [{ text: "Hot", kind: "red" }],
    palette: "red",
    hand: "moly!",
    img: "assets-min/holy-moly-fries.jpg",
    allergens: ["3", "7", "10", "12"],
    filter: ["fries"]
  }]

},
{
  id: "classic",
  title: "Classic & Sides",
  eyebrow: "03",
  desc: "Damit niemand neidisch wird.",
  filter: ["fries"],
  items: [
  {
    title: "Fritten mit Sauce",
    desc: "Crispy Pommes, dazu Sauce nach Wahl: Ketchup, Mayo oder Holy Sauce.",
    price: "4,50",
    palette: "orange",
    img: "assets-min/fritten.jpg",
    allergens: ["3", "10"],
    filter: ["fries"]
  },
  {
    title: "Käsesauce zum Dippen",
    desc: "Warme, würzige Cheddarsauce. Cremig, addictive.",
    price: "3,75",
    palette: "orange",
    hand: "dip dip",
    img: "assets-min/kaesedip.jpg",
    allergens: ["7"],
    filter: ["fries"]
  }]

},
{
  id: "menue",
  title: "Menü-Kombis",
  eyebrow: "04",
  desc: "Jedes Menü in drei Größen. B = Burger · F = Fries · D = Drink.",
  filter: ["menus"],
  items: [
  {
    title: "OG Smash Menü",
    desc: "OG Smash als Menü — vom Solo-Burger bis zum doppelten Smash-Up.",
    prices: [
    { lbl: "1×B · F · D", val: "13,90" },
    { lbl: "2×B · D", val: "17,90" },
    { lbl: "2×B · F · D", val: "21,50" }],

    palette: "orange",
    hand: "kombi",
    img: "assets-min/og-menu.jpg",
    allergens: ["1", "3", "7", "10"],
    filter: ["menus"]
  },
  {
    title: "Cheesy Smash Menü",
    desc: "Cheesy Smash als Menü. Doppelt Cheese, doppelt happy.",
    prices: [
    { lbl: "1×B · F · D", val: "14,90" },
    { lbl: "2×B · D", val: "19,50" },
    { lbl: "2×B · F · D", val: "23,50" }],

    palette: "orange",
    img: "assets-min/cheesy-menu.jpg",
    allergens: ["1", "3", "7", "10"],
    filter: ["menus"]
  },
  {
    title: "Holy Smash / Chicken Vibe Menü",
    desc: "Wahl: Holy Smash oder Holy Chicken Vibes. Als komplettes Menü.",
    prices: [
    { lbl: "1×B · F · D", val: "15,90" },
    { lbl: "2×B · D", val: "21,90" },
    { lbl: "2×B · F · D", val: "25,50" }],

    badges: [{ text: "Holy", kind: "teal" }],
    palette: "red",
    hand: "signature combo",
    img: "assets-min/holy-menu.jpg",
    allergens: ["1", "3", "7", "10"],
    filter: ["menus"]
  },
  {
    title: "Holy Veggie Menü",
    desc: "Holy Veggie Vibes Burger als Menü. Voll, nicht halb.",
    prices: [
    { lbl: "1×B · F · D", val: "15,50" },
    { lbl: "2×B · D", val: "20,90" },
    { lbl: "2×B · F · D", val: "24,90" }],

    badges: [{ text: "Veggie", kind: "teal" }],
    palette: "teal",
    img: "assets-min/veggie-menu.jpg",
    allergens: ["1", "6", "7", "10"],
    filter: ["menus", "veggie"]
  }]

},
{
  id: "drinks",
  title: "Drinks",
  eyebrow: "05",
  desc: "Damit alles besser flutscht.",
  filter: ["drinks"],
  items: [
  {
    title: "Wasser",
    desc: "Still oder sprudelig. Manchmal braucht's nichts mehr.",
    price: "1,90",
    palette: "teal",
    img: "assets-min/wasser.jpg",
    allergens: [],
    filter: ["drinks"]
  },
  {
    title: "Drink Regulär",
    desc: "Cola, Cola Zero, Fanta, Sprite, Spezi.",
    price: "2,90",
    palette: "orange",
    img: "assets-min/cola.jpg",
    allergens: [],
    filter: ["drinks"]
  }]

}];


const TABS = [
{ id: "all", label: "Alle" },
{ id: "burger", label: "Burger" },
{ id: "fries", label: "Fries" },
{ id: "veggie", label: "Veggie" },
{ id: "menus", label: "Menüs" },
{ id: "drinks", label: "Drinks" }];

/* Inhalt je Menü-Größe — Reihenfolge entspricht den drei Preisvarianten
   (0 = türkis, 1 = orange, 2 = rot) */
const MENU_CONTENTS = [
"1 Burger, 1 Fries, 1 Drink",
"2 Burger, 1 Drink",
"2 Burger, 1 Fries, 1 Drink"];


function MenuItemCard({ it, tip }) {
  return (
    <article className="card">
      <Food
        label={it.title}
        sub="placeholder · foto folgt"
        hand={it.hand}
        badges={it.badges || []}
        palette={it.palette}
        img={it.img} />
      
      <div className="card__body">
        <h3 className="card__title">{it.title}</h3>
        <p className="card__desc">{it.desc}</p>

        {it.single && it.double &&
        <div className="card__row">
            <div className="price-pair">
              <div>
                <span className="lbl">Single</span>
                <span className="card__price">€{it.single}</span>
              </div>
              <div>
                <span className="lbl">Double</span>
                <span className="card__price" style={{ color: "var(--orange)" }}>€{it.double}</span>
              </div>
            </div>
          </div>
        }
        {it.price &&
        <div className="card__row">
            <span className="card__price">€{it.price}</span>
          </div>
        }
        {it.prices &&
        <div className="price-pair price-trio">
            {it.prices.map((p, i) =>
          <div
            key={i}
            className="price-variant"
            tabIndex={0}
            onMouseEnter={(e) => tip.show(MENU_CONTENTS[i], e)}
            onMouseMove={(e) => tip.move(e)}
            onMouseLeave={tip.hide}
            onFocus={(e) => tip.show(MENU_CONTENTS[i], e)}
            onBlur={tip.hide}>
                <span className="lbl">{p.lbl}</span>
                <span className="card__price" style={{ color: i === 0 ? "var(--teal)" : i === 1 ? "var(--orange)" : "var(--red)" }}>
                  €{p.val}
                </span>
              </div>
          )}
          </div>
        }

        {it.allergens && it.allergens.length > 0 &&
        <div className="allergens">
            <span className="allergens__lbl">Allergene</span>
            {it.allergens.map((a) =>
          <span key={a} className="allergen">{a}</span>
          )}
          </div>
        }
      </div>
    </article>);

}

function MenuPage() {
  const [tab, setTab] = useMenuState("all");
  const [tip, setTip] = useMenuState({ show: false, x: 0, y: 0, text: "" });

  const tipApi = {
    show: (text, e) => {
      let x, y;
      if (e && typeof e.clientX === "number" && e.clientX) {
        x = e.clientX;
        y = e.clientY;
      } else if (e && e.currentTarget && e.currentTarget.getBoundingClientRect) {
        const r = e.currentTarget.getBoundingClientRect();
        x = r.left + r.width / 2;
        y = r.top;
      } else {
        return;
      }
      setTip({ show: true, x, y, text });
    },
    move: (e) =>
      setTip((t) => (t.show ? { ...t, x: e.clientX, y: e.clientY } : t)),
    hide: () => setTip((t) => ({ ...t, show: false }))
  };

  const visibleGroups = MENU_DATA.map((g) => ({
    ...g,
    items: g.items.filter((it) => tab === "all" || it.filter.includes(tab))
  })).filter((g) => g.items.length > 0);

  return (
    <>
      <div
        className={`menu-tip ${tip.show ? "show" : ""}`}
        style={{ left: tip.x + "px", top: tip.y + "px" }}
        aria-hidden={!tip.show}>
        <span className="menu-tip__title">Inhalt des Menüs</span>
        <span className="menu-tip__body">{tip.text}</span>
      </div>
      <header className="page-head">
        <Splash className="page-head__splash" />
        <div className="container">
          <Reveal>
            <div className="eyebrow page-head__eyebrow">Speisekarte · Holy Smash</div>
            <h1 className="page-head__title display">
              <span style={{ color: "var(--teal)" }}>Heilige</span>
              <br />
              Karte.
            </h1>
            <p className="page-head__sub">Alle Burger frisch gepresst auf der Grillplatte. Unsere Holy Saucen hausgemacht. Alle Preise inkl. MwSt. Bei Allergien sprich uns an — wir sagen dir genau, was drin ist.


            </p>
          </Reveal>
        </div>
      </header>

      <section className="section section--tight" style={{ paddingTop: 0 }}>
        <div className="container">
          <Reveal>
            <div className="menu-tabs">
              {TABS.map((t) =>
              <div
                key={t.id}
                className={`menu-tab ${tab === t.id ? "active" : ""}`}
                onClick={() => setTab(t.id)}>
                
                  {t.label}
                </div>
              )}
            </div>
          </Reveal>

          {visibleGroups.map((g) =>
          <div key={g.id} className="menu-group">
              <Reveal className="menu-group__head">
                <h2 className="menu-group__title display">
                  <span className="num hand">{g.eyebrow}</span>
                  {g.title}
                </h2>
                <p className="menu-group__desc">{g.desc}</p>
              </Reveal>
              <Reveal staggerChildren className="menu-grid">
                {g.items.map((it, i) =>
              <MenuItemCard key={i} it={it} tip={tipApi} />
              )}
              </Reveal>
            </div>
          )}
        </div>
      </section>

      <section className="section section--tight" style={{ paddingTop: 0 }}>
        <div className="container">
          <Reveal>
            <div className="allergen-legend">
              <div className="allergen-legend__head">
                <span className="eyebrow">Kennzeichnung</span>
                <h3 className="display">Allergene &amp; Zusatzstoffe</h3>
              </div>
              <ul className="allergen-legend__grid">
                {[
                  ["1", "Glutenhaltiges Getreide"],
                  ["3", "Eier"],
                  ["6", "Soja"],
                  ["7", "Milch / Laktose"],
                  ["10", "Senf"],
                  ["12", "Sulfite / Schwefeldioxid"]
                ].map(([n, label]) =>
                  <li key={n}>
                    <span className="allergen">{n}</span>
                    <span>{label}</span>
                  </li>
                )}
              </ul>
              <p className="allergen-legend__note">
                Trotz sorgfältiger Zubereitung auf engem Raum können Spuren weiterer Allergene
                enthalten sein. Bei Unverträglichkeiten sprich uns einfach an — wir helfen dir gern.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section section--tight">
        <div className="container">
          <Reveal>
            <div className="big-cta">
              <Splash className="big-cta__splash" color="#0a2a29" />
              <h2 className="big-cta__title display">
                Bereit zu
                <br />
                smashen?
              </h2>
              <p className="big-cta__sub">
                Bestelle direkt online vor und spar dir die Wartezeit am Truck.
              </p>
              <Btn variant="orange" size="lg" href="https://app.ordering.sumup.com/holy-smash/bamenohl">
                Online bestellen <span className="arrow">→</span>
              </Btn>
            </div>
          </Reveal>
        </div>
      </section>
    </>);

}

window.MenuPage = MenuPage;