// Menu data + section — full menu from official cards
const MENU = {
  breaky: {
    en: "All-Day Breaky", id: "Sarapan Sepanjang Hari",
    items: [
      { n: "Toast", p: 30, d: "Toasted sourdough or brioche w/ butter and your choice of homemade strawberry compote, honey, or peanut butter", tag: "V VO GFO" },
      { n: "Banana Pancakes", p: 69, d: "Fluffy pancakes, banana brulée, salted caramel sauce, ice cream, maple syrup, mint", tag: "V" },
      { n: "Granola Yogurt Bowl", p: 70, d: "Granola, yogurt, banana, apple, dried apricot, blueberries, homemade strawberry compote, sesame, mint", tag: "V VO CN" },
      { n: "Smoothie Bowls", p: 65, d: "Frozen smoothie bowls w/ seasonal fruits, chia, coconut and granola — Morning Fuel · Golden Groove · Pink Bloom · add protein +15", tag: "VN CN" },
      { n: "Fruit Salad", p: 55, d: "Seasonal fruits w/ housemade granola and natural yoghurt", tag: "V VO CN" },
      { n: "Eggs Your Way", p: 40, d: "Two eggs the way you like it on toasted sourdough", tag: "V GFO" },
      { n: "Smashed Avo", p: 55, d: "Smashed avo on toasted sourdough w/ edamame, fetta, pickled onion, chili flakes, lime and mint — add poached egg +10", tag: "V VO GFO" },
      { n: "Truffle Egg Dip", p: 79, d: "Sourdough, onion creamy dip, truffle oil, sautéed spinach, mushrooms & poached egg", tag: "V GFO" },
      { n: "Umami Mushroom Toast", p: 65, d: "Sourdough, garlic mushrooms & shimeji, kale crumbs, poached egg, honey miso butter, mayo", tag: "V GFO" },
      { n: "Sandos", p: "65–89", d: "Fluffy brioche toast, coleslaw, cheddar, tonkatsu sauce — Chicken katsu 70 · Vegan Chick'n 85 · Pork katsu 89 · Hashbrown & egg 65", tag: "GFO" },
      { n: "Morning Feast", p: 94, d: "Two eggs your way on toasted sourdough, hashbrown, choice of double pork bacon / halloumi / chicken ham, sliced avo, garlic thyme mushrooms, cherry tomatoes, watercress", tag: "GFO" },
    ]
  },
  bowls: {
    en: "Bowls & Trays", id: "Mangkuk & Nampan",
    items: [
      { n: "Korean Brunch Tray", p: "65–98", d: "Steamed white rice, choice of main protein, assorted side dishes, kimchi and soup — all served together. Add mozzarella +15. Spicy Chicken / Dakgalbi 85 · Spicy Pork / Jeyuk Bokkeum 95 · Beef Bulgogi 98 · Tofu & Mushroom Bulgogi 79 · Janchi Guksu (noodle) 65", tag: "VO option" },
      { n: "Grilled Chicken Caesar", p: 84, d: "Grilled chicken breast, romaine, cherry tomatoes, boiled egg, parmesan, sourdough, caesar dressing", tag: "GFO" },
      { n: "Tuna Tataki Salad", p: 89, d: "Tuna tataki, romaine, cherry tomatoes, cucumber, pickled onion, boiled egg, kale crumbs, honey miso butter, sesame dressing", tag: "GF" },
      { n: "Peri-Peri Chicken Rice Bowl", p: 84, d: "Chicken peri-peri, cherry tomatoes, cucumber, corn, avocado, green yogurt sauce, white rice", tag: "GF" },
      { n: "Soul Tuna Poke Bowl", p: 84, d: "Fresh tuna tossed in gochujang mayo, white rice, romaine, cabbage, edamame, cucumber, avocado, corn, spring onion, sesame, soy ginger dressing — switch to seared tofu (V/VO) 65", tag: "GF" },
      { n: "Bli Made's Fried Rice", p: 65, d: "House fried rice w/ mixed vegetables, dried shrimps, pickles, prawn crackers, grilled chicken satay and peanut sauce", tag: "" },
    ]
  },
  pasta: {
    en: "Pasta & Burgers", id: "Pasta & Burger",
    items: [
      { n: "Chicken Alfredo", p: 75, d: "Creamy spaghetti, seared chicken, onion, parmesan", tag: "FROM 11AM" },
      { n: "Chicken Parma Pasta", p: 79, d: "Housemade papardelle, chicken parma, tomato sauce, cherry tomatoes, parmesan, basil — switch to Vegan Chick'n +15", tag: "VO" },
      { n: "Mushroom Aglio e Olio", p: 55, d: "Spaghetti in garlic oil sauce, mushrooms, chilli flakes, parmesan and herbs", tag: "VN" },
      { n: "Pesto Pasta", p: 65, d: "Housemade papardelle in pesto sauce, grilled zucchini, cherry tomatoes, onion, chilli flakes", tag: "V VO CN" },
      { n: "The Juicy One", p: 98, d: "140g beef patty on toasted brioche bun, cheddar, romaine, tomato, pickled onion, aioli, side fries", tag: "BURGER · FROM 11AM" },
      { n: "Grill Me Tender", p: 89, d: "160g grilled marinated chicken breast on brioche, cheddar, romaine, tomato, pickled onion, aioli, side fries", tag: "BURGER · FROM 11AM" },
      { n: "No Cluck", p: 95, d: "Vegan crispy chick'n on brioche, cheddar, romaine, tomato, pickled onion, aioli, side fries — GF bun +10", tag: "V BURGER" },
    ]
  },
  share: {
    en: "To Share & Sweets", id: "Berbagi & Manis",
    items: [
      { n: "Crispy Chicken Bites", p: 55, d: "With aioli and parsley", tag: "" },
      { n: "Beef Potato Croquettes", p: 55, d: "With aioli and parmesan", tag: "" },
      { n: "Potato Fries", p: 50, d: "Handcut potato fries with tomato ketchup", tag: "VN" },
      { n: "Truffle Fries & Parmesan", p: 60, d: "Handcut potato fries w/ truffle oil, parmesan and parsley", tag: "V" },
      { n: "Vegetable Spring Rolls", p: 45, d: "With sweet thai chili sauce", tag: "VN" },
      { n: "Dark Choco Soft Cookies", p: 25, d: "Add ice cream +8", tag: "SWEET" },
      { n: "White Choco Almond Soft Cookies", p: 25, d: "Add ice cream +8", tag: "SWEET CN" },
      { n: "Banana Bread", p: 30, d: "House banana bread", tag: "SWEET" },
      { n: "Gluten Free Brownie", p: 40, d: "Rich, fudgy, gluten-free", tag: "SWEET GF" },
      { n: "Chocolate Mud Cake", p: 60, d: "Rich, dense, just-right", tag: "SWEET" },
      { n: "Housemade Churro Sticks", p: 50, d: "With dark chocolate sauce and snow sugar", tag: "SWEET" },
      { n: "Banana Fritters", p: 30, d: "With salted caramel sauce and snow sugar", tag: "SWEET" },
    ]
  },
  coffee: {
    en: "Coffee", id: "Kopi",
    items: [
      { n: "Black", p: 25, d: "Espresso · long black", tag: "CLASSIC" },
      { n: "Small White", p: 30, d: "Piccolo · macchiato", tag: "CLASSIC" },
      { n: "White", p: 35, d: "Flat white · latte · cappuccino", tag: "CLASSIC" },
      { n: "Mocha", p: 45, d: "Espresso, chocolate, milk", tag: "CLASSIC" },
      { n: "Mont Blanc", p: 50, d: "Espresso, vanilla cold foam, orange zest", tag: "SIGNATURE" },
      { n: "Island Espresso", p: 50, d: "Espresso, coconut cream, coconut syrup, lime", tag: "SIGNATURE" },
      { n: "Orangepresso", p: 45, d: "Espresso & orange juice", tag: "SIGNATURE" },
      { n: "Rubypresso", p: 50, d: "Espresso & cranberry juice", tag: "SIGNATURE" },
      { n: "Coffee Cincau", p: 50, d: "Espresso, milk, aren sugar, grass jelly", tag: "SIGNATURE" },
      { n: "Extras", p: "5–10", d: "Make it iced 5 · extra shot 10 · oatmilk 10 · syrups (vanilla, caramel, hazelnut) 5", tag: "ADD-ONS" },
    ]
  },
  notcoffee: {
    en: "Not Coffee", id: "Bukan Kopi",
    items: [
      { n: "Chocolate", p: 40, d: "Hot or iced", tag: "" },
      { n: "Ceremonial Matcha Latte", p: 45, d: "Origin — Uji Kyoto, Shizuoka. Switch to oatmilk +10", tag: "MATCHA" },
      { n: "Iced Strawberry Matcha Latte", p: 65, d: "Iced matcha latte w/ strawberry compote & pink cold foam", tag: "MATCHA" },
      { n: "Berry Cloud", p: 45, d: "Cranberry, strawberry, hibiscus, vanilla cold foam", tag: "" },
      { n: "Iced Strawberry Latte", p: 40, d: "Strawberry compote, milk, ice", tag: "" },
      { n: "Babyccino", p: 10, d: "For the smallest guests", tag: "" },
      { n: "Frappe", p: 55, d: "Creamy ice-blended goodness — Choco Java Chip · Choco Mint · Strawberry & Cream · Matcha 70", tag: "FRAPPE" },
    ]
  },
  drinks: {
    en: "Juices & Smoothies", id: "Jus & Smoothie",
    items: [
      { n: "Vital Green", p: 55, d: "Apple, pok choy, celery, ginger, cucumber, lime", tag: "JUICE" },
      { n: "Radiant Boost", p: 55, d: "Watermelon, pineapple, carrot, ginger, lime", tag: "JUICE" },
      { n: "Daily Clarity", p: 55, d: "Apple, carrot, celery, lime", tag: "JUICE" },
      { n: "Pink Vitality", p: 55, d: "Dragonfruit, apple, pineapple, lime", tag: "JUICE" },
      { n: "Singles", p: 35, d: "Tangerine · watermelon · pineapple", tag: "JUICE" },
      { n: "Tropical Blush", p: 50, d: "Mango, strawberry, banana", tag: "SMOOTHIE" },
      { n: "Zen Garden", p: 55, d: "Mango, apple, banana, bok choy, ginger", tag: "SMOOTHIE" },
      { n: "Nutty Berry", p: 55, d: "Mixed berries, peanut butter, honey, banana, coconut water", tag: "SMOOTHIE CN" },
      { n: "Mango Colada", p: 55, d: "Mango, coconut, pineapple, mint", tag: "SMOOTHIE" },
      { n: "Morning Kick", p: 60, d: "Espresso, cocoa, banana, peanut butter, oat", tag: "SMOOTHIE CN" },
      { n: "Add 30g protein powder", p: 15, d: "Vegan, plant-based", tag: "VN ADD-ON" },
    ]
  },
  sparkling: {
    en: "Sparkling, Tea & Other", id: "Soda, Teh & Lainnya",
    items: [
      { n: "Apple Sparkling Ade", p: 45, d: "Crisp and refreshing", tag: "SPARKLING" },
      { n: "Honey Lemon Sparkling Ade", p: 45, d: "Sweet with a citrus zing", tag: "SPARKLING" },
      { n: "Lychee Sparkling Ade", p: 45, d: "Floral and tropical", tag: "SPARKLING" },
      { n: "Yuzu Berries Sparkling Ade", p: 45, d: "Zesty yuzu with a berry burst", tag: "SPARKLING" },
      { n: "Specialty Tea (Pot)", p: 30, d: "Jasmine green · English breakfast · Earl grey · Hibiscus", tag: "TEA" },
      { n: "Fresh Iced Lemon Tea", p: 35, d: "House-brewed, bright and clean", tag: "TEA" },
      { n: "Flavored Iced Tea", p: 35, d: "Peach · Lychee", tag: "TEA" },
      { n: "Fresh Young Coconut", p: 35, d: "Straight from the husk", tag: "" },
      { n: "Still Housewater 1L", p: 20, d: "Free refill", tag: "WATER" },
      { n: "Aqua Still 380ml", p: 25, d: "", tag: "WATER" },
      { n: "Aqua Sparkling 380ml", p: 30, d: "", tag: "WATER" },
      { n: "Soft Drinks", p: 20, d: "Coke · coke zero · sprite", tag: "" },
    ]
  },
};

const CAT_ORDER = ['breaky', 'bowls', 'pasta', 'share', 'coffee', 'notcoffee', 'drinks', 'sparkling'];

function MenuSection({ lang }) {
  const [active, setActive] = React.useState('breaky');
  const cat = MENU[active];
  const tabsRef = React.useRef(null);
  const didMountRef = React.useRef(false);
  React.useEffect(() => {
    // Skip the initial mount call so the page doesn't jump to the menu
    // section on first load. scrollIntoView with block:'nearest' would
    // scroll the document down because the tab is offscreen at t=0.
    if (!didMountRef.current) { didMountRef.current = true; return; }
    const tabs = tabsRef.current;
    const el = tabs?.querySelector('.menu-tab.active');
    if (!el || !tabs) return;
    // Only adjust the tab container's own horizontal scroll — never the
    // document scroll. Centers the active tab in the visible ribbon.
    const target = el.offsetLeft - (tabs.clientWidth - el.offsetWidth) / 2;
    tabs.scrollTo({ left: target, behavior: 'smooth' });
  }, [active]);
  const t = lang === 'id' ? {
    eyebrow: "Disajikan perlahan", title: "Menu",
    sub: "Diseduh dengan jiwa, sejak 7 pagi setiap hari. Harga dalam IDR ribu, belum termasuk 6% layanan & 10% pajak.",
    legend: "v vegetarian · vn vegan · vo opsi vegan · gf bebas gluten · gfo opsi bebas gluten · cn mengandung kacang"
  } : {
    eyebrow: "Slow-served", title: "The menu",
    sub: "Brewed with soul, from 7AM daily. Prices in IDR thousands. Excludes 6% service & 10% tax.",
    legend: "v vegetarian · vn vegan · vo vegan option · gf gluten-free · gfo gluten-free option · cn contains nuts"
  };

  return (
    <section id="menu" className="menu-section section-pad">
      <div className="container">
        <div className="menu-head reveal">
          <div className="eyebrow">{t.eyebrow}</div>
          <h2 className="section-title">{t.title}</h2>
          <p className="menu-sub">{t.sub}</p>
        </div>

        <div ref={tabsRef} className="menu-tabs no-scrollbar reveal">
          {CAT_ORDER.map(k => (
            <button
              key={k}
              className={"menu-tab" + (active === k ? " active" : "")}
              onClick={() => setActive(k)}
            >
              {MENU[k][lang === 'id' ? 'id' : 'en']}
            </button>
          ))}
        </div>

        <div className="menu-grid" key={active}>
          {cat.items.map((it, i) => (
            <div className="menu-item" key={i} style={{ animationDelay: `${i * 40}ms` }}>
              <div className="mi-head">
                <h3 className="mi-name">{it.n}</h3>
                <div className="mi-dots" />
                <div className="mi-price mono">{it.p}</div>
              </div>
              <p className="mi-desc">{it.d}</p>
              {it.tag && <div className="mi-tag mono">{it.tag}</div>}
            </div>
          ))}
        </div>

        <p className="menu-legend mono">{t.legend}</p>
      </div>
    </section>
  );
}

window.MenuSection = MenuSection;