// CustomerRoot — v2 yeni tasarım için tek-component router.
// Personel rolleri (admin/garson/mutfak) eski global App'lere düşer; müşteri akışı
// AvbX namespace'inden yeni component'leri kullanır. Babel-standalone üzerinden derlenir.
//
// Kapsam (Tur 1 / Adım 1-5):
//   tab: 'menu' | 'cart' | 'orders' | 'wallet' | 'profile'
//   checkout overlay: null | 'table' | 'pickup' | 'address' | 'confirm' | 'pay_ok' | 'pay_fail'
//   profile sub: null | 'favorites' | 'dietProfile' | 'about' | 'orderHistory' | 'myAddresses'
//   item detail: ItemSheet bottom-sheet
//   gate: 'login' | null (auth yoksa LoginScreen — gerçek OTP entegrasyonu Tur 2)
// Legacy bridge: shared.js'in `const MENU_ITEMS = [...]` global'i window'a yazılmaz (classic
// script'te const window'a expose etmez). Köprü olarak window.MENU_ITEMS / CATEGORIES atayalım.
try { if (typeof MENU_ITEMS !== 'undefined') window.MENU_ITEMS = MENU_ITEMS; } catch(_){}
try { if (typeof CATEGORIES !== 'undefined') window.CATEGORIES = CATEGORIES; } catch(_){}
try { if (typeof _MENU_OVERRIDES !== 'undefined') window._MENU_OVERRIDES = _MENU_OVERRIDES; } catch(_){}
try { if (typeof _ITEM_EXTRAS !== 'undefined') window._ITEM_EXTRAS = _ITEM_EXTRAS; } catch(_){}
try { if (typeof _DEFAULT_GLOBAL_EXTRAS !== 'undefined') window._DEFAULT_GLOBAL_EXTRAS = _DEFAULT_GLOBAL_EXTRAS; } catch(_){}
try { if (typeof _GLOBAL_EXTRAS !== 'undefined') window._GLOBAL_EXTRAS = _GLOBAL_EXTRAS; } catch(_){}
try { if (typeof TABLES !== 'undefined') window.TABLES = TABLES; } catch(_){}

(function(){
const { useState, useEffect, useRef, useMemo } = React;
const A = window.AvbX;
const {
  // tokens
  CREAM, INK, GREEN, OLIVE,
  // primitives
  Icon, Tap, IconButton, PrimaryButton, SecondaryButton, GhostButton, Wordmark, fmt,
  // i18n + data helpers
  T, findModOption, POINTS_RATES,
  // screens
  MenuScreen, ItemSheet, BottomTabs, ScreenHeader,
  CartScreen, TableSelectScreen, PickupTimeScreen, AddressScreen, ConfirmScreen, PaymentResultScreen,
  WalletScreen, TopUpSheet, OrdersScreen, OrderTracker,
  FavoritesScreen, ProfileScreen, DietProfileScreen, LoginScreen,
} = A;

// ── Firestore helpers ───────────────────────────────────────────────────────

// Item id → /photos/<kat>/<isim> mapping (public/photos klasörü).
// DishImage `url('photos/${photo}.jpg')` formatında yüklediği için extension'sız ver.
const LEGACY_PHOTO_MAP = {
  // Atıştırmalıklar
  item_pumpkin_soup:    'atistirmalik/balkabagi-corbasi',
  item_guacamole:       'atistirmalik/guacamole',
  item_hummus_crackers: 'atistirmalik/humus-tohum',
  item_sweet_potato:    'atistirmalik/tatli-patates',
  item_rice_rolls:      'atistirmalik/rice-paper-rolls',
  // Yumurtalar & Fazlası
  item_late_breakfast:  'yumurtalar/gec-kahvalti-tabagi',
  item_herb_eggs:       'yumurtalar/otlu-yumurta',
  item_sausage_plate:   'yumurtalar/sosis-tabagi',
  // Tartinler
  item_avocado_egg:     'tartinler/avocado-egg-tartin',
  item_hummus_truffle:  'tartinler/humus-v2',
  item_salmon_gravlax:  'tartinler/somon-gravlax',
  item_beef_nuar:       'tartinler/dana-nuar',
  item_avocado_mushroom:'tartinler/mushroom-tost',
  // Tüm Gün Kaseleri
  item_harvest_bowl:    'kaseler/hasat-kase',
  item_quinoa_bowl:     'kaseler/kinoa-koftesi',
  item_hummus_kale:     'kaseler/humus-kale',
  item_salmon_bowl:     'kaseler/firin-somon',
  // Tatlılar
  item_banana_bread:    'tatlilar/banana-bread',
  item_peanut_bar:      'tatlilar/twix',
  item_berry_crumble:   'tatlilar/crumble',
  // Smoothies
  item_noir_boost:      'smoothies/noir-boost',
  item_berry_revival:   'smoothies/berry-revival',
  item_green_reset:     'smoothies/green-reset',
  // Smoothie Bowls
  item_acai_bowl:       'smoothie-bowls/acai-berry-smoothie-bowl',
  item_green_reset_bowl:'smoothie-bowls/green-reset-smoothie-bowl',
  // Soğuk İçecekler (kısmi — fotoğrafı olmayanlar tonal tile gösterir)
  item_lemonade:        'soguk-icecekler/reyhanli-limonaya',
  item_pink_tea:        'soguk-icecekler/pink-lemongrass',
  item_satsuma_tea:     'soguk-icecekler/satsuma-ananasli',
  // cat_coffee + cat_hot_drinks: foto yok → tonal tile
};

// Kategori → varsayılan tone (foto yokken renkli gradient için).
const TONE_BY_CAT = {
  cat_snacks: 'cream',
  cat_eggs: 'yolk',
  cat_tartines: 'green',
  cat_bowls: 'tomato',
  cat_desserts: 'oat',
  cat_smoothies: 'berry',
  cat_smoothie_bowls: 'green',
  cat_coffee: 'oat',
  cat_cold_drinks: 'green',
  cat_hot_drinks: 'smoke',
};

// dietTags (Firestore) → tasarımdaki badge kind eşlemesi
const DIET_TO_BADGE = {
  vegan: 'veg',
  vegetarian: 'veg',
  gluten_free: 'gf',
  glutensiz: 'gf',
  high_protein: 'hp',
  protein: 'hp',
};

// Legacy menu (shared.js'teki MENU_ITEMS + CATEGORIES) → AvbX şeması.
// Firestore `menu` koleksiyonu price/active/imageUrl/desc/dietTags OVERRIDE olarak uygulanır.
function buildAvbItem(it, overrides) {
  const ovr = (overrides && overrides[it.id]) || {};
  // Photo: önce Firestore imageUrl, sonra LEGACY_PHOTO_MAP fallback
  const photo = ovr.imageUrl || LEGACY_PHOTO_MAP[it.id] || null;
  // Badges: dietTags → veg/gf/hp
  const tags = Array.isArray(ovr.dietTags) ? ovr.dietTags : (Array.isArray(it.dietTags) ? it.dietTags : []);
  const badgeSet = new Set();
  tags.forEach(t => { const b = DIET_TO_BADGE[t]; if (b) badgeSet.add(b); });
  if (ovr.badges && Array.isArray(ovr.badges)) ovr.badges.forEach(b => badgeSet.add(b));
  return {
    id: it.id,
    cat: ovr.categoryId || it.categoryId,
    tr: { n: ovr.nameTr || it.nameTr, d: ovr.descTr || it.descTr || '' },
    en: { n: ovr.nameEn || it.nameEn || it.nameTr, d: ovr.descEn || it.descEn || ovr.descTr || it.descTr || '' },
    price: Number(ovr.price ?? it.price),
    photo,
    tone: TONE_BY_CAT[ovr.categoryId || it.categoryId] || 'cream',
    allergens: (ovr.allergens && ovr.allergens.length) ? ovr.allergens : (it.allergens || []),
    badges: Array.from(badgeSet),
    hasMods: !!(window._ITEM_EXTRAS && window._ITEM_EXTRAS[it.id]),
    sortOrder: it.sortOrder || 99,
  };
}
function buildAvbItemList(overrides) {
  const list = (window.MENU_ITEMS || []);
  return list
    .filter(it => {
      const ovr = (overrides && overrides[it.id]) || {};
      if (it.active === false || ovr.active === false) return false;
      if (it.hideFromCustomer === true || ovr.hideFromCustomer === true) return false;
      return true;
    })
    .map(it => buildAvbItem(it, overrides))
    .sort((a,b) => (a.sortOrder||99) - (b.sortOrder||99));
}
function buildAvbCategoryList() {
  return (window.CATEGORIES || [])
    .filter(c => c.active !== false)
    .slice()
    .sort((a,b) => (a.sortOrder||99) - (b.sortOrder||99))
    .map(c => ({ id: c.id, tr: c.nameTr, en: c.nameEn || c.nameTr }));
}

// AvbX namespace içindeki array referansını koruyarak içeriği yenile.
// Sebep: MenuFlow.jsx (IIFE init time'da) `const { ITEMS, CATEGORIES } = window.AvbX` ile
// REFERANSI yakalar. `A.ITEMS = newArr` desek de MenuFlow eski referansı görür. In-place
// mutate edersek eski referans yeni içeriği taşır.
function replaceArr(target, source) {
  if (!target) return source;
  target.length = 0;
  for (let i = 0; i < source.length; i++) target.push(source[i]);
  return target;
}

function useLegacyMenu() {
  const [ready, setReady] = useState(false);
  const [version, setVersion] = useState(0);

  useEffect(() => {
    // Sync render — shared.js zaten yüklendi (script sırası customer.js'ten sonra)
    const cats = buildAvbCategoryList();
    const items = buildAvbItemList(window._MENU_OVERRIDES || {});
    if (cats.length > 0) {
      if (Array.isArray(A.CATEGORIES)) replaceArr(A.CATEGORIES, cats);
      else A.CATEGORIES = cats;
    }
    if (items.length > 0) {
      if (Array.isArray(A.ITEMS)) replaceArr(A.ITEMS, items);
      else A.ITEMS = items;
    }
    setReady(true);
    setVersion(v => v+1);

    // Firestore menu'da değişiklik olursa override'ı güncelle (v1'in yaptığı gibi)
    const db = window.db;
    if (!db) return;
    const unsub = db.collection('menu').onSnapshot(snap => {
      if (!window._MENU_OVERRIDES) window._MENU_OVERRIDES = {};
      snap.docs.forEach(d => {
        const data = d.data();
        window._MENU_OVERRIDES[d.id] = { ...(window._MENU_OVERRIDES[d.id] || {}), ...data };
      });
      const newItems = buildAvbItemList(window._MENU_OVERRIDES);
      replaceArr(A.ITEMS, newItems);
      setVersion(v => v+1);
    }, err => console.warn('[CustomerRoot] menu override:', err.message));
    return () => { try { unsub(); } catch(_){} };
  }, []);

  return { ready, version };
}

// Modifier groups + per-item links from settings/extras
function useFirestoreExtras() {
  useEffect(() => {
    const db = window.db;
    if (!db) return;
    const unsub = db.collection('settings').doc('extras').onSnapshot(doc => {
      if (!doc.exists) return;
      const data = doc.data() || {};
      const global = Array.isArray(data.global) ? data.global : [];
      const perItem = data.items && typeof data.items === 'object' ? data.items : {};
      if (global.length > 0) {
        const groups = {};
        global.forEach(g => {
          if (!g || !g.id) return;
          groups[g.id] = {
            id: g.id,
            tr: g.nameTr || g.id,
            en: g.nameEn || g.nameTr || g.id,
            type: g.type === 'multiple' ? 'multiple' : 'single',
            required: !!g.required,
            options: (g.options || []).map(o => ({
              id: o.id, tr: o.nameTr || o.id, en: o.nameEn || o.nameTr || o.id,
              delta: Number(o.priceDelta ?? o.delta ?? 0),
            })),
          };
        });
        if (Object.keys(groups).length > 0) A.MOD_GROUPS = groups;
      }
      const itemMods = {};
      Object.keys(perItem).forEach(itemId => {
        const v = perItem[itemId];
        if (Array.isArray(v)) itemMods[itemId] = v;
        else if (v && Array.isArray(v.groups)) itemMods[itemId] = v.groups;
      });
      if (Object.keys(itemMods).length > 0) A.ITEM_MODS = itemMods;
      A.getItemMods = (item) => !item ? [] : (A.ITEM_MODS[item.id] || []).map(k => A.MOD_GROUPS[k]).filter(Boolean);
      A.findModOption = (optId) => {
        for (const g of Object.values(A.MOD_GROUPS || {})) {
          const o = (g.options || []).find(x => x.id === optId);
          if (o) return o;
        }
        return null;
      };
    }, err => console.warn('[CustomerRoot] extras:', err.message));
    return () => { try { unsub(); } catch(_){} };
  }, []);
}

// Tables (dine-in)
function useFirestoreTables() {
  const [tables, setTables] = useState(A.TABLES || []);
  useEffect(() => {
    const db = window.db;
    if (!db) return;
    const unsub = db.collection('tables').onSnapshot(snap => {
      const out = [];
      snap.docs.forEach(d => {
        const data = d.data();
        if (data.active === false) return;
        out.push({
          id: d.id,
          area: data.area || 'ic',
          cap: data.capacity || data.cap || 2,
        });
      });
      if (out.length > 0) { A.TABLES = out; setTables(out); }
    }, err => console.warn('[CustomerRoot] tables:', err.message));
    return () => { try { unsub(); } catch(_){} };
  }, []);
  return tables;
}

// Order hours (settings/order_hours)
function useOrderHours() {
  const [hours, setHours] = useState({
    dine_in: { enabled: true, openTime: '10:00', closeTime: '23:00' },
    takeaway: { enabled: true, openTime: '10:00', closeTime: '22:00' },
    delivery: { enabled: false, openTime: '10:00', closeTime: '22:00' },
  });
  useEffect(() => {
    const db = window.db;
    if (!db) return;
    const unsub = db.collection('settings').doc('order_hours').onSnapshot(doc => {
      if (!doc.exists) return;
      const data = doc.data() || {};
      setHours(h => ({
        dine_in:  { ...h.dine_in,  ...(data.dine_in  || {}) },
        takeaway: { ...h.takeaway, ...(data.takeaway || {}) },
        delivery: { ...h.delivery, ...(data.delivery || {}) },
      }));
    });
    return () => { try { unsub(); } catch(_){} };
  }, []);
  return hours;
}

// User data: profile + balance + points + favorites + diet
function useFirestoreUserData(uid) {
  const [data, setData] = useState({ balance: 0, points: 0, favs: {}, diet: {}, autoReload: false, name: '', phone: '', addresses: [] });
  useEffect(() => {
    if (!uid) { setData(d => ({ ...d, balance: 0, points: 0, favs: {}, diet: {} })); return; }
    const db = window.db;
    if (!db) return;
    const unsub = db.collection('users').doc(uid).onSnapshot(doc => {
      if (!doc.exists) { setData(d => ({ ...d, balance: 0, points: 0 })); return; }
      const u = doc.data();
      setData({
        balance: Number(u.balance || 0),
        points: Number(u.points || 0),
        favs: u.favorites && typeof u.favorites === 'object' ? (Array.isArray(u.favorites) ? Object.fromEntries(u.favorites.map(id => [id, true])) : u.favorites) : {},
        diet: u.diet && typeof u.diet === 'object' ? u.diet : {},
        autoReload: !!u.autoReload,
        name: u.name || '',
        phone: u.phone || '',
        addresses: Array.isArray(u.addresses) ? u.addresses : [],
        customerCode: u.customerCode || null,
      });
    }, err => console.warn('[CustomerRoot] user data:', err.message));
    return () => { try { unsub(); } catch(_){} };
  }, [uid]);
  return [data, setData];
}

// Orders listener (latest 20)
function useFirestoreOrders(uid) {
  const [orders, setOrders] = useState([]);
  useEffect(() => {
    if (!uid) { setOrders([]); return; }
    const db = window.db;
    if (!db) return;
    const unsub = db.collection('orders').where('userId', '==', uid).orderBy('createdAt', 'desc').limit(20)
      .onSnapshot(snap => {
        const list = snap.docs.map(d => {
          const data = d.data();
          return {
            id: d.id,
            ...data,
            createdAt: data.createdAt?.toMillis?.() || Date.now(),
          };
        });
        setOrders(list);
      }, err => console.warn('[CustomerRoot] orders:', err.message));
    return () => { try { unsub(); } catch(_){} };
  }, [uid]);
  return orders;
}

// Wallet transactions (latest 30)
function useFirestoreTransactions(uid) {
  const [txns, setTxns] = useState([]);
  useEffect(() => {
    if (!uid) { setTxns([]); return; }
    const db = window.db;
    if (!db) return;
    const unsub = db.collection('users').doc(uid).collection('transactions').orderBy('createdAt', 'desc').limit(30)
      .onSnapshot(snap => {
        const list = snap.docs.map(d => {
          const data = d.data();
          const created = data.createdAt?.toMillis?.() || data.createdAt || Date.now();
          const date = new Date(created);
          const dateStr = date.toLocaleDateString('tr-TR', { day: 'numeric', month: 'short' }) + ' · ' + date.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });
          return { amount: Number(data.amount || 0), label: data.label || '', date: dateStr };
        });
        setTxns(list);
      }, err => console.warn('[CustomerRoot] txns:', err.message));
    return () => { try { unsub(); } catch(_){} };
  }, [uid]);
  return txns;
}

// Auth state — user object + role
function useAuth() {
  const [user, setUser] = useState(() => (typeof window.getUser === 'function' ? window.getUser() : null) || null);
  const [role, setRole] = useState(() => (typeof window.getUser === 'function' ? (window.getUser()?.role || null) : null));
  useEffect(() => {
    const auth = window.auth;
    if (!auth) return;
    const STAFF = window._STAFF_ROLES || {};
    const unsub = auth.onAuthStateChanged(u => {
      if (!u) { setUser(null); setRole(null); return; }
      const email = (u.email || '').toLowerCase();
      const baseRole = STAFF[email] || 'customer';
      const obj = { uid: u.uid, email: u.email, phone: u.phoneNumber || u.phone, name: u.displayName || (u.email||'').split('@')[0] || 'Müşteri', role: baseRole };
      const db = window.db;
      if (db && u.uid) {
        db.collection('users').doc(u.uid).get().then(doc => {
          if (doc.exists) {
            const d = doc.data();
            const finalRole = d.role || baseRole;
            const full = { ...obj, name: d.name || obj.name, phone: d.phone || obj.phone, role: finalRole, customerCode: d.customerCode || null };
            setUser(full); setRole(finalRole);
            if (typeof window.setUser === 'function') try { window.setUser(full); } catch(_){}
          } else {
            setUser(obj); setRole(baseRole);
          }
        }).catch(() => { setUser(obj); setRole(baseRole); });
      } else {
        setUser(obj); setRole(baseRole);
      }
    });
    return () => { try { unsub(); } catch(_){} };
  }, []);
  return { user, setUser, role };
}

// Cart helpers — addQuick, addDetailed, inc, dec, remove, clear
function useCart() {
  const [cart, setCart] = useState([]);
  const addQuick = (item) => {
    const key = item.id + '__base';
    setCart(c => {
      const ex = c.find(x => x.key === key);
      if (ex) return c.map(x => x.key === key ? { ...x, qty: x.qty + 1 } : x);
      return [...c, { key, itemId: item.id, qty: 1, unitPrice: item.price, sel: {}, note: '' }];
    });
  };
  const addDetailed = (item, qty, sel, note) => {
    let delta = 0;
    Object.values(sel || {}).forEach(v => {
      (Array.isArray(v) ? v : (v ? [v] : [])).forEach(id => {
        const o = (A.findModOption || findModOption)(id);
        if (o) delta += o.delta;
      });
    });
    const unit = item.price + delta;
    const key = item.id + '_' + JSON.stringify(sel || {}) + '_' + (note || '');
    setCart(c => {
      const ex = c.find(x => x.key === key);
      if (ex) return c.map(x => x.key === key ? { ...x, qty: x.qty + qty } : x);
      return [...c, { key, itemId: item.id, qty, unitPrice: unit, sel: sel || {}, note: note || '' }];
    });
  };
  const inc = (key) => setCart(c => c.map(x => x.key === key ? { ...x, qty: x.qty + 1 } : x));
  const dec = (key) => setCart(c => c.flatMap(x => x.key === key ? (x.qty > 1 ? [{ ...x, qty: x.qty - 1 }] : []) : [x]));
  const clear = () => setCart([]);
  return { cart, setCart, addQuick, addDetailed, inc, dec, clear };
}

// ── Order placement ───────────────────────────────────────────────────────
async function placeOrderToFirestore({ user, cart, orderType, tableId, pickupSlot, address, paymentMethod, total, subtotal, earn, lang, balance }) {
  const db = window.db;
  if (!db) throw new Error('Firestore not available');
  const fb = window.firebase;

  // Build items array
  const items = cart.map(line => {
    const it = (A.ITEMS || []).find(i => i.id === line.itemId);
    return {
      id: line.itemId,
      name: it ? (it[lang]?.n || it.tr?.n || line.itemId) : line.itemId,
      qty: line.qty,
      price: line.unitPrice,
      mods: line.sel || {},
      note: line.note || '',
    };
  });

  // Get next order number
  let orderNo = null;
  try {
    if (typeof window.getNextOrderNo === 'function') {
      const prefix = orderType === 'dine_in' ? 'M' : orderType === 'takeaway' ? 'G' : 'P';
      orderNo = await window.getNextOrderNo(prefix);
    }
  } catch(_){}

  const orderDoc = {
    userId: user?.uid || 'guest',
    userEmail: user?.email || null,
    userName: user?.name || '',
    orderType,
    tableId: orderType === 'dine_in' ? tableId : null,
    pickupSlot: orderType === 'takeaway' ? pickupSlot : null,
    deliveryAddress: orderType === 'delivery' ? address : null,
    items,
    subtotal,
    total,
    pointsEarned: earn,
    paymentMethod,
    status: 'received',
    orderNo,
    createdAt: fb?.firestore?.FieldValue?.serverTimestamp?.() || Date.now(),
  };

  const ref = await db.collection('orders').add(orderDoc);

  // Wallet debit + transaction (only if paying from balance)
  if (paymentMethod === 'balance' && user?.uid) {
    try {
      await db.runTransaction(async (txn) => {
        const userRef = db.collection('users').doc(user.uid);
        const userDoc = await txn.get(userRef);
        const cur = userDoc.exists ? Number(userDoc.data().balance || 0) : 0;
        const newBal = Math.max(0, cur - total);
        const curPts = userDoc.exists ? Number(userDoc.data().points || 0) : 0;
        txn.set(userRef, { balance: newBal, points: curPts + (earn || 0) }, { merge: true });
      });
      const txnRef = db.collection('users').doc(user.uid).collection('transactions').doc();
      const labels = items.slice(0,2).map(i => i.name).filter(Boolean).join(', ');
      await txnRef.set({
        type: 'spend',
        amount: -total,
        label: labels || (lang === 'tr' ? 'Sipariş' : 'Order'),
        orderId: ref.id,
        createdAt: fb?.firestore?.FieldValue?.serverTimestamp?.() || Date.now(),
      });
    } catch (e) { console.warn('[CustomerRoot] wallet debit:', e.message); }
  } else if (user?.uid && earn > 0) {
    // Add points only (no wallet debit)
    try {
      await db.collection('users').doc(user.uid).set({ points: firebase.firestore.FieldValue.increment(earn) }, { merge: true });
    } catch (e) { console.warn('[CustomerRoot] points add:', e.message); }
  }

  return { id: ref.id, orderNo, ...orderDoc };
}

async function topUpToFirestore({ user, amount, bonus, lang }) {
  const db = window.db;
  if (!db || !user?.uid) throw new Error('No user or db');
  const fb = window.firebase;
  const total = amount + (bonus || 0);
  try {
    await db.collection('users').doc(user.uid).set({
      balance: fb.firestore.FieldValue.increment(total),
    }, { merge: true });
    await db.collection('users').doc(user.uid).collection('transactions').doc().set({
      type: 'topup',
      amount: total,
      label: lang === 'tr' ? 'Bakiye yükleme' : 'Top-up',
      bonusAmount: bonus || 0,
      paidAmount: amount,
      createdAt: fb.firestore.FieldValue.serverTimestamp(),
    });
    return true;
  } catch (e) { console.warn('[CustomerRoot] topup:', e.message); return false; }
}

// ── Helpers ────────────────────────────────────────────────────────────
function statusToStep(status, orderType) {
  // dine_in/takeaway: received(0)→confirmed(1)→preparing(2)→ready(3)
  // delivery: received(0)→confirmed(1)→preparing(2)→onway(3)→delivered(4)
  const map = orderType === 'delivery'
    ? { received:0, confirmed:1, preparing:2, ready:2, onway:3, delivered:4 }
    : { received:0, confirmed:1, preparing:2, ready:3, served:3, delivered:3 };
  return map[status] != null ? map[status] : 0;
}

// ── Component ──────────────────────────────────────────────────────────
function CustomerRoot() {
  const [lang, setLang] = useState(() => (typeof window.getLang === 'function' ? window.getLang() : 'tr') || 'tr');
  const [orderType, setOrderType] = useState('dine_in');
  const [tab, setTab] = useState('menu');
  const [sheetItem, setSheetItem] = useState(null);
  const [checkout, setCheckout] = useState(null); // null | 'table' | 'pickup' | 'address' | 'confirm' | 'pay_ok' | 'pay_fail'
  const [sub, setSub] = useState(null);            // profile sub-screen
  const [feature, setFeature] = useState(null);    // null | 'combos' | 'buildmenu' | 'walletqr' (Tur 3)
  const [gate, setGate] = useState(null);          // 'login' | null
  const [tableId, setTableId] = useState(null);
  const [pickupSlot, setPickupSlot] = useState(null);
  const [address, setAddress] = useState(null);
  const [lastOrder, setLastOrder] = useState(null);

  const { user, setUser, role } = useAuth();
  const { cart, addQuick, addDetailed, inc, dec, clear: clearCart } = useCart();
  const { ready: menuReady, version } = useLegacyMenu();
  useFirestoreExtras();
  const tables = useFirestoreTables();
  const orderHours = useOrderHours();
  const [userData, setUserData] = useFirestoreUserData(user?.uid);
  const orders = useFirestoreOrders(user?.uid);
  const txns = useFirestoreTransactions(user?.uid);

  // tables AvbX.TABLES güncellenince TableSelectScreen yenilensin
  useEffect(() => { if (tables.length > 0) A.TABLES = tables; }, [tables]);

  // Personel rolleri → eski global app'ler
  if (role === 'admin' && typeof window.AdminApp === 'function') {
    return React.createElement(window.AdminApp, { lang, user, onLogout: () => window.auth?.signOut?.() });
  }
  if (role === 'garson' && typeof window.WaiterApp === 'function') {
    return React.createElement(window.WaiterApp, { lang, user, onLogout: () => window.auth?.signOut?.() });
  }
  if (role === 'mutfak' && typeof window.KitchenApp === 'function') {
    return React.createElement(window.KitchenApp, { lang, user, onLogout: () => window.auth?.signOut?.() });
  }

  if (!menuReady) {
    return (
      <div className="avb-phone-stage">
        <div className="avb-phone" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: INK, fontFamily: 'var(--font-body)', fontSize: 14 }}>
          {lang === 'tr' ? 'Yükleniyor…' : 'Loading…'}
        </div>
      </div>
    );
  }

  const cartCount = cart.reduce((a, c) => a + c.qty, 0);
  const subtotal = cart.reduce((a, c) => a + c.unitPrice * c.qty, 0);
  const earn = Math.floor(subtotal * (POINTS_RATES[orderType] || 0.01));

  const isGuest = !user || !user.uid || String(user.uid).startsWith('guest_');
  const userInitials = (user?.name || 'M').split(/\s+/).map(s=>s[0]).slice(0,2).join('').toUpperCase();
  const userObj = user ? { name: user.name || (lang === 'tr' ? 'Misafir' : 'Guest'), phone: userData.phone || user.phone || '', initials: userInitials } : { name: lang === 'tr' ? 'Misafir' : 'Guest', phone: '', initials: 'M' };

  // ── Handlers ──
  const onCheckout = () => {
    if (isGuest) { setGate('login'); return; }
    if (orderType === 'dine_in') setCheckout('table');
    else if (orderType === 'takeaway') setCheckout('pickup');
    else setCheckout('address');
  };
  const onPlaceOrder = async (paymentMethod, total) => {
    try {
      const placed = await placeOrderToFirestore({
        user, cart, orderType,
        tableId: orderType === 'dine_in' ? tableId : null,
        pickupSlot: orderType === 'takeaway' ? pickupSlot : null,
        address: orderType === 'delivery' ? address : null,
        paymentMethod, total, subtotal, earn, lang,
        balance: userData.balance,
      });
      setLastOrder(placed);
      clearCart();
      setCheckout('pay_ok');
    } catch (e) {
      console.error('[CustomerRoot] placeOrder:', e);
      setCheckout('pay_fail');
    }
  };
  const onTopUp = async (amount, bonus) => {
    if (isGuest) { setGate('login'); return; }
    await topUpToFirestore({ user, amount, bonus, lang });
  };
  const onRedeem = (reward) => {
    if (isGuest) { setGate('login'); return; }
    // Tur 1'de basit: rewards/ödüller Tur 3'te tam çalışacak; şimdilik toast
    alert((lang === 'tr' ? 'Sepete eklendi: ' : 'Added to cart: ') + (reward[lang] || reward.tr));
  };
  const onToggleFav = (id) => {
    if (isGuest) { setGate('login'); return; }
    const db = window.db;
    const newFavs = { ...userData.favs, [id]: !userData.favs[id] };
    setUserData(d => ({ ...d, favs: newFavs }));
    if (db && user?.uid) db.collection('users').doc(user.uid).set({ favorites: newFavs }, { merge: true }).catch(()=>{});
  };
  const onToggleDiet = (k) => {
    if (isGuest) { setGate('login'); return; }
    const db = window.db;
    const newDiet = { ...userData.diet, [k]: !userData.diet[k] };
    setUserData(d => ({ ...d, diet: newDiet }));
    if (db && user?.uid) db.collection('users').doc(user.uid).set({ diet: newDiet }, { merge: true }).catch(()=>{});
  };
  const onToggleAuto = () => {
    if (isGuest) { setGate('login'); return; }
    const db = window.db;
    const next = !userData.autoReload;
    setUserData(d => ({ ...d, autoReload: next }));
    if (db && user?.uid) db.collection('users').doc(user.uid).set({ autoReload: next }, { merge: true }).catch(()=>{});
  };
  const onLogout = () => {
    setUser(null);
    setTab('menu'); setSub(null); setCheckout(null); clearCart();
    if (window.auth) window.auth.signOut?.().catch(()=>{});
    if (typeof window.setUser === 'function') try { window.setUser(null); } catch(_){}
  };
  // Tur 2'de tam OTP entegrasyonu; şimdilik basit: gate'i kapat, kullanıcı misafir kaldı
  const onLoginSuccess = () => { setGate(null); };
  const onGuest = () => {
    // basit misafir hesabı
    const guest = { uid: 'guest_' + Date.now().toString(36), name: lang === 'tr' ? 'Misafir' : 'Guest', email: null, phone: null, role: 'customer' };
    setUser(guest);
    if (typeof window.setUser === 'function') try { window.setUser(guest); } catch(_){}
    setGate(null);
  };

  // ── Login gate ──
  if (gate === 'login') {
    return (
      <div className="avb-phone-stage">
        <div className="avb-phone" style={{ fontFamily: 'var(--font-body)' }}>
          <div className="avb-phone-inner">
            <LoginScreen
              lang={lang}
              onToggleLang={() => setLang(l => l === 'tr' ? 'en' : 'tr')}
              onLogin={onLoginSuccess}
              onGuest={onGuest}
            />
          </div>
        </div>
      </div>
    );
  }

  // ── Checkout overlay ──
  let overlayEl = null;
  if (checkout === 'table') {
    overlayEl = (
      <TableSelectScreen
        lang={lang}
        onBack={() => setCheckout(null)}
        selected={tableId}
        onSelect={setTableId}
        onNext={() => setCheckout('confirm')}
      />
    );
  } else if (checkout === 'pickup') {
    overlayEl = (
      <PickupTimeScreen
        lang={lang}
        onBack={() => setCheckout(null)}
        selected={pickupSlot}
        onSelect={setPickupSlot}
        onNext={() => setCheckout('confirm')}
      />
    );
  } else if (checkout === 'address') {
    overlayEl = (
      <AddressScreen
        lang={lang}
        onBack={() => setCheckout(null)}
        onNext={(formValues) => { if (formValues) setAddress(formValues); setCheckout('confirm'); }}
      />
    );
  } else if (checkout === 'confirm') {
    overlayEl = (
      <ConfirmScreen
        cart={cart}
        lang={lang}
        orderType={orderType}
        balance={userData.balance}
        meta={{ table: tableId, pickup: pickupSlot, address }}
        onBack={() => setCheckout(orderType === 'dine_in' ? 'table' : orderType === 'takeaway' ? 'pickup' : 'address')}
        onPlace={(pay, total) => onPlaceOrder(pay, total)}
      />
    );
  } else if (checkout === 'pay_ok') {
    overlayEl = (
      <PaymentResultScreen
        lang={lang}
        ok={true}
        onTrack={() => { setCheckout(null); setTab('orders'); }}
        onHome={() => { setCheckout(null); setTab('menu'); }}
      />
    );
  } else if (checkout === 'pay_fail') {
    overlayEl = (
      <PaymentResultScreen
        lang={lang}
        ok={false}
        onRetry={() => setCheckout('confirm')}
        onHome={() => { setCheckout(null); setTab('menu'); }}
      />
    );
  }

  // ── Profile sub-screens ──
  let subEl = null;
  if (sub === 'favorites') {
    subEl = (
      <FavoritesScreen
        lang={lang}
        favs={userData.favs}
        cart={cart}
        onAddQuick={addQuick}
        onOpen={(it) => setSheetItem(it)}
        onBrowse={() => { setSub(null); setTab('menu'); }}
      />
    );
  } else if (sub === 'dietProfile') {
    subEl = (
      <DietProfileScreen
        lang={lang}
        onBack={() => setSub(null)}
        diet={userData.diet}
        onToggle={onToggleDiet}
      />
    );
  } else if (sub === 'about') {
    subEl = <AvbAboutScreen lang={lang} onBack={() => setSub(null)} />;
  } else if (sub === 'orderHistory') {
    subEl = <AvbOrderHistoryScreen lang={lang} orders={orders} onBack={() => setSub(null)} onReorder={(o) => {
      // Tekrar sipariş: order items'i sepete kopyala
      (o.items || []).forEach(it => {
        addDetailed({ id: it.id, price: it.price || 0 }, it.qty || 1, it.mods || {}, it.note || '');
      });
      setSub(null); setTab('cart');
    }} />;
  } else if (sub === 'myAddresses') {
    // Tur 1: basit liste; tam CRUD ileride. Mevcut adres varsa göster.
    subEl = <AvbAddressesScreen lang={lang} addresses={userData.addresses} onBack={() => setSub(null)} />;
  }

  // Show bottom tabs only when no overlay/sub/sheet/feature
  const showTabs = !overlayEl && !subEl && !feature;
  const inner = (
    <>
      {tab === 'menu' && !overlayEl && !subEl && (
        <MenuScreen
          key={'menu-' + version}
          lang={lang}
          cart={cart}
          orderType={orderType}
          setOrderType={setOrderType}
          onAddQuick={addQuick}
          onOpen={(it) => { if (it === '__profile') setTab('profile'); else setSheetItem(it); }}
          onGoCart={() => setTab('cart')}
        />
      )}
      {tab === 'cart' && !overlayEl && !subEl && (
        <CartScreen
          cart={cart}
          lang={lang}
          orderType={orderType}
          points={userData.points}
          onInc={inc}
          onDec={dec}
          onCheckout={onCheckout}
          onBrowse={() => setTab('menu')}
          onChangeType={() => setTab('menu')}
        />
      )}
      {tab === 'orders' && !overlayEl && !subEl && (
        <AvbOrdersTabScreen
          lang={lang}
          orders={orders}
          onBrowse={() => setTab('menu')}
        />
      )}
      {tab === 'wallet' && !overlayEl && !subEl && (
        <WalletScreen
          lang={lang}
          balance={userData.balance}
          points={userData.points}
          txns={txns}
          autoReload={userData.autoReload}
          onTopUp={onTopUp}
          onRedeem={onRedeem}
          onToggleAuto={onToggleAuto}
          onShowQR={() => alert(lang==='tr' ? 'QR ekranı Tur 3\'te' : 'QR screen in Tour 3')}
        />
      )}
      {tab === 'profile' && !overlayEl && !subEl && (
        isGuest ? (
          <AvbGuestProfileScreen lang={lang} onLogin={() => setGate('login')} onToggleLang={() => setLang(l => l === 'tr' ? 'en' : 'tr')} />
        ) : (
          <ProfileScreen
            lang={lang}
            points={userData.points}
            balance={userData.balance}
            user={userObj}
            onNav={(k) => {
              if (k === 'favorites') setSub('favorites');
              else if (k === 'myAddresses') setSub('myAddresses');
              else if (k === 'orderHistory') setSub('orderHistory');
              else if (k === 'dietProfile') setSub('dietProfile');
              else if (k === 'about') setSub('about');
              else if (k === 'logout') onLogout();
            }}
            onToggleLang={() => setLang(l => l === 'tr' ? 'en' : 'tr')}
          />
        )
      )}
    </>
  );

  return (
    <div className="avb-phone-stage">
      <div className="avb-phone" style={{ fontFamily: 'var(--font-body)' }}>
        <div className="avb-phone-inner">
          {overlayEl || subEl || inner}
          {sheetItem && !overlayEl && !subEl && (
            <ItemSheet
              item={sheetItem}
              lang={lang}
              onClose={() => setSheetItem(null)}
              onAdd={addDetailed}
              favOn={!!userData.favs[sheetItem.id]}
              onFavToggle={() => onToggleFav(sheetItem.id)}
            />
          )}
        </div>
        {showTabs && <BottomTabs active={tab} onChange={(k) => { setSheetItem(null); setSub(null); setTab(k); }} cartCount={cartCount} lang={lang} />}
      </div>
    </div>
  );
}

// ── Inline sub-screens (tasarımdan adapte) ──
function AvbAboutScreen({ lang, onBack }) {
  const rows = [
    { tr: 'Gizlilik Politikası & KVKK', en: 'Privacy Policy & KVKK' },
    { tr: 'Kullanım Koşulları', en: 'Terms of Service' },
    { tr: 'Teslimat Koşulları', en: 'Delivery Terms' },
    { tr: 'İade & İptal', en: 'Refund & Cancellation' },
  ];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <ScreenHeader title={T[lang].about} onBack={onBack} scrolled />
      <div style={{ flex: 1, overflowY: 'auto', padding: '10px 18px 40px' }}>
        <div style={{ background: '#fff', borderRadius: 20, padding: 20, boxShadow: 'inset 0 0 0 1px rgba(26,26,26,0.06)', textAlign: 'center', marginBottom: 16 }}>
          <Wordmark size={1.2} />
          <div style={{ marginTop: 10, fontSize: 13, color: '#999', lineHeight: 1.5 }}>
            {lang === 'tr' ? 'Taze, sağlıklı, her gün. Bağdat Caddesi · İstanbul' : 'Fresh, healthy, every day. Bağdat Caddesi · İstanbul'}
          </div>
        </div>
        <div style={{ background: '#fff', borderRadius: 20, overflow: 'hidden', boxShadow: 'inset 0 0 0 1px rgba(26,26,26,0.06)' }}>
          {rows.map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '14px 16px', borderBottom: i < rows.length-1 ? '1px solid rgba(26,26,26,0.06)' : 'none' }}>
              <span style={{ flex: 1, color: INK, fontSize: 15 }}>{r[lang]}</span>
              <Icon.chevron size={14} color="rgba(26,26,26,0.3)" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AvbOrderHistoryScreen({ lang, orders, onBack, onReorder }) {
  const past = (orders || []).filter(o => ['delivered', 'served', 'completed', 'ready'].includes(o.status));
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <ScreenHeader title={T[lang].orderHistory} onBack={onBack} scrolled />
      <div style={{ flex: 1, overflowY: 'auto', padding: '10px 18px 40px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {past.length === 0 ? (
          <div style={{ padding: '60px 20px', textAlign: 'center', color: '#999', fontSize: 14 }}>
            {lang === 'tr' ? 'Henüz tamamlanmış sipariş yok.' : 'No completed orders yet.'}
          </div>
        ) : past.map(o => {
          const items = (o.items || []).map(i => i.name).slice(0, 3).join(', ');
          const d = new Date(o.createdAt);
          const dateStr = d.toLocaleDateString(lang === 'tr' ? 'tr-TR' : 'en-US', { day: 'numeric', month: 'short' });
          return (
            <div key={o.id} style={{ background: '#fff', borderRadius: 16, padding: 16, boxShadow: 'inset 0 0 0 1px rgba(26,26,26,0.06)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontWeight: 800, fontSize: 14, color: INK, fontVariantNumeric: 'tabular-nums' }}>{o.orderNo || o.id.slice(0,8).toUpperCase()}</span>
                <span style={{ fontSize: 12, color: '#999' }}>{dateStr}</span>
              </div>
              <div style={{ fontSize: 13.5, color: '#777', marginTop: 6, lineHeight: 1.4 }}>{items}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
                <span style={{ fontWeight: 800, fontSize: 16, color: INK, fontVariantNumeric: 'tabular-nums' }}>{fmt(o.total || 0)}</span>
                <SecondaryButton small onClick={() => onReorder(o)}>{T[lang].reorder}</SecondaryButton>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function AvbAddressesScreen({ lang, addresses, onBack }) {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <ScreenHeader title={T[lang].myAddresses} onBack={onBack} scrolled />
      <div style={{ flex: 1, overflowY: 'auto', padding: '10px 18px 40px' }}>
        {!addresses || addresses.length === 0 ? (
          <div style={{ padding: '60px 20px', textAlign: 'center' }}>
            <div style={{ display: 'inline-flex', width: 64, height: 64, borderRadius: 999, background: '#fff', alignItems: 'center', justifyContent: 'center', boxShadow: 'inset 0 0 0 1px rgba(26,26,26,0.08)' }}>
              <Icon.pin size={26} color="#999" />
            </div>
            <div style={{ marginTop: 14, fontWeight: 800, fontSize: 19, color: INK }}>
              {lang === 'tr' ? 'Kayıtlı adres yok' : 'No saved addresses'}
            </div>
            <div style={{ marginTop: 6, fontSize: 14, color: '#999' }}>
              {lang === 'tr' ? 'Adres yönetimi yakında eklenecek.' : 'Address management coming soon.'}
            </div>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {addresses.map((a, i) => (
              <div key={i} style={{ background: '#fff', borderRadius: 16, padding: 16, boxShadow: 'inset 0 0 0 1px rgba(26,26,26,0.06)' }}>
                <div style={{ fontWeight: 700, fontSize: 15, color: INK }}>{a.name || (lang === 'tr' ? 'Adres' : 'Address') + ' ' + (i+1)}</div>
                <div style={{ fontSize: 13, color: '#777', marginTop: 4 }}>{a.fullAddress || a.full || ''}</div>
                <div style={{ fontSize: 12, color: '#999', marginTop: 2 }}>{a.neighborhood || ''} · {a.district || ''}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function AvbOrdersTabScreen({ lang, orders, onBrowse }) {
  const active = (orders || []).find(o => !['delivered', 'served', 'completed', 'cancelled', 'rejected'].includes(o.status));
  if (!active) {
    return (
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <ScreenHeader title={T[lang].yourOrders} scrolled />
        <div style={{ padding: '80px 20px', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', width: 64, height: 64, borderRadius: 999, background: '#fff', alignItems: 'center', justifyContent: 'center', boxShadow: 'inset 0 0 0 1px rgba(26,26,26,0.08)' }}>
            <Icon.clock size={26} color="#999" />
          </div>
          <div style={{ marginTop: 14, fontWeight: 800, fontSize: 19, color: INK }}>{lang === 'tr' ? 'Aktif sipariş yok' : 'No active orders'}</div>
          <div style={{ marginTop: 18 }}><SecondaryButton onClick={onBrowse}>{T[lang].browseMenu}</SecondaryButton></div>
        </div>
      </div>
    );
  }
  const step = statusToStep(active.status, active.orderType);
  const typeLabel = { dine_in: T[lang].orderTypeDinein, takeaway: T[lang].orderTypeTakeaway, delivery: T[lang].orderTypeDelivery }[active.orderType] || '';
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <ScreenHeader title={T[lang].yourOrders} scrolled />
      <div style={{ flex: 1, overflowY: 'auto', padding: '4px 18px 110px' }}>
        <div style={{ fontSize: 11, color: '#999', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, margin: '8px 0 10px' }}>{T[lang].active}</div>
        <div style={{ background: GREEN, borderRadius: 20, padding: '18px', color: INK, position: 'relative', overflow: 'hidden', marginBottom: 14 }}>
          <div style={{ position: 'absolute', right: -30, top: -30, width: 140, height: 140, borderRadius: 999, background: 'rgba(26,26,26,0.06)' }} />
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700, opacity: 0.65 }}>{T[lang].orderNo} · {active.orderNo || active.id.slice(0,8).toUpperCase()}</div>
          <div style={{ fontWeight: 900, fontSize: 26, marginTop: 6, letterSpacing: '-0.02em' }}>
            {step < 3 ? T[lang].statusPreparing : (active.orderType === 'delivery' ? T[lang].statusOnway : T[lang].statusReady)}
          </div>
          <div style={{ fontSize: 13.5, opacity: 0.75, marginTop: 2 }}>{typeLabel}{active.tableId ? ' · ' + T[lang].table + ' ' + active.tableId.replace(/[a-z]/g, '') : ''}</div>
        </div>
        <OrderTracker step={step} lang={lang} orderType={active.orderType} />
      </div>
    </div>
  );
}

function AvbGuestProfileScreen({ lang, onLogin, onToggleLang }) {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <ScreenHeader title={T[lang].profile} scrolled />
      <div style={{ flex: 1, overflowY: 'auto', padding: '4px 18px 110px' }}>
        <div style={{ background: '#fff', borderRadius: 20, padding: 22, boxShadow: 'inset 0 0 0 1px rgba(26,26,26,0.06)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, marginTop: 8 }}>
          <div style={{ width: 60, height: 60, borderRadius: 999, background: 'rgba(26,26,26,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon.user size={28} color="#999" />
          </div>
          <div style={{ fontWeight: 800, fontSize: 19, color: INK, marginTop: 4 }}>{T[lang].guest}</div>
          <div style={{ fontSize: 13.5, color: '#999', textAlign: 'center', lineHeight: 1.5, maxWidth: 240 }}>{T[lang].signInDesc}</div>
          <PrimaryButton onClick={onLogin} style={{ marginTop: 8 }}>{T[lang].signIn}</PrimaryButton>
        </div>
        <div style={{ background: '#fff', borderRadius: 20, overflow: 'hidden', boxShadow: 'inset 0 0 0 1px rgba(26,26,26,0.06)', marginTop: 14 }}>
          <Tap onClick={onToggleLang} style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '14px 16px', background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-body)' }}>
            <span style={{ flex: 1, textAlign: 'left', color: INK, fontSize: 15, fontWeight: 500 }}>{T[lang].language}</span>
            <span style={{ fontSize: 14, color: OLIVE, fontWeight: 700 }}>{lang === 'tr' ? 'Türkçe' : 'English'}</span>
            <Icon.chevron size={14} color="rgba(26,26,26,0.3)" />
          </Tap>
        </div>
      </div>
    </div>
  );
}

window.AvbCustomerRoot = CustomerRoot;
})();