import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInAnonymously, 
  signInWithCustomToken,
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  onSnapshot, 
  doc, 
  updateDoc, 
  deleteDoc,
  setDoc,
  increment,
  serverTimestamp 
} from 'firebase/firestore';
import { 
  ShoppingBag, Clock, Trash2, Gift, User, LogOut, ArrowLeft, 
  X, Phone, Lock, Loader2, Landmark, ConciergeBell, 
  ChevronDown, Tag, Activity, Sparkles, MapPin, IdCard, Home, Leaf, Mail, 
  Calendar, CalendarCheck, Waves, LayoutDashboard, Receipt, Plus, TrendingUp, 
  TrendingDown, WifiOff, Trophy, RefreshCcw, Box, Copy, Upload, 
  CheckCircle, Eye, Zap, Play, Check, CreditCard, DollarSign, Ticket
} from 'lucide-react';

// --- Safe Firebase Initialization ---
let app, auth, db;
let initError = null;
try {
  if (typeof __firebase_config !== 'undefined') {
    const config = JSON.parse(__firebase_config);
    app = initializeApp(config);
    auth = getAuth(app);
    db = getFirestore(app);
  } else {
    initError = "Firebase Config Missing";
  }
} catch (e) {
  console.error("Firebase Init Error:", e);
  initError = e.message;
}
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// --- CONFIGURATION ---
const DUITNOW_QR_URL = "https://i.ibb.co/p99J4w8/IMG-20260204-143833-346.jpg";
const BUSINESS_BANK_DETAILS = {
  bankName: "RHB Bank",
  accountName: "NUR NAJWA NAZMINA BINTI AZMAN",
  accountNumber: "11306160255276"
};

const BACKGROUNDS = {
  welcome: "https://images.unsplash.com/photo-1610832958506-aa56368176cf?q=80&w=2670&auto=format&fit=crop", 
  physio: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?q=80&w=2670&auto=format&fit=crop",
  massage: "https://images.unsplash.com/photo-1544161515-4ab6ce6db874?q=80&w=2670&auto=format&fit=crop",
  juice: "https://images.unsplash.com/photo-1621506289937-a8e4df240d0b?q=80&w=2574&auto=format&fit=crop",
  swimming: "https://images.unsplash.com/photo-1530549387789-4c1017266635?q=80&w=2670&auto=format&fit=crop",
  sports: "https://images.unsplash.com/photo-1626224583764-84786c71971e?q=80&w=2670&auto=format&fit=crop"
};

const SERVICES = [
  { 
    id: 'juice', name: 'Fruit Juice', emoji: '🍊', 
    color: 'bg-orange-50 text-orange-600', gradient: 'from-orange-400 to-amber-500', 
    description: 'Freshly squeezed goodness', subText: '7am - 6pm (Delivery @ 8pm)' 
  },
  { 
    id: 'physio', name: 'Physiotherapy', emoji: '🩺', 
    color: 'bg-teal-50 text-teal-600', gradient: 'from-teal-500 to-emerald-600', 
    description: 'Professional recovery & rehab' 
  },
  { 
    id: 'massage', name: 'Massage Service', emoji: '💆', 
    color: 'bg-purple-50 text-purple-600', gradient: 'from-purple-500 to-indigo-600', 
    description: 'Relax & rejuvenate' 
  },
  { 
    id: 'swimming', name: 'Swimming', emoji: '🏊', 
    color: 'bg-blue-50 text-blue-600', gradient: 'from-blue-400 to-cyan-500', 
    description: 'Coaching & Equipment Rental' 
  },
  { 
    id: 'sports', name: 'Sports Rental', emoji: '🏸', 
    color: 'bg-red-50 text-red-600', gradient: 'from-red-500 to-pink-600', 
    description: 'Rackets & Balls (4 Hours)' 
  },
];

const JUICE_MENU = [
  { id: 'j1', type: 'juice', name: "Fresh Watermelon", emoji: "🍉", color: "bg-red-50 text-red-600" },
  { id: 'j2', type: 'juice', name: "Squeezed Orange", emoji: "🍊", color: "bg-orange-50 text-orange-600" },
  { id: 'j3', type: 'juice', name: "Zesty Lemonade", emoji: "🍋", color: "bg-yellow-50 text-yellow-600" },
  { id: 'j4', type: 'juice', name: "Tropical Pineapple", emoji: "🍍", color: "bg-amber-50 text-amber-600" },
];

const PHYSIO_MENU = [
  { id: 'p1', type: 'physio', name: "Physiotherapy Session", emoji: "🩺", color: "bg-teal-50 text-teal-600", basePrice: 0 }
];

const MASSAGE_MENU = [
  { id: 'm1', type: 'massage', name: "Express Massage (30m)", emoji: "💆", color: "bg-purple-50 text-purple-600", price: 35.00 },
  { id: 'm2', type: 'massage', name: "Full Body (60m)", emoji: "🧘", color: "bg-indigo-50 text-indigo-600", price: 70.00 },
  { id: 'm3', type: 'massage', name: "Royal Full Body (120m)", emoji: "👑", color: "bg-amber-50 text-amber-600", price: 130.00 },
];

const SWIMMING_MENU = [
  { id: 's1', type: 'swimming_coaching', name: "Swimming Coaching", emoji: "🏊‍♂️", color: "bg-blue-50 text-blue-600", price: 15.00 },
  { id: 's2', type: 'swimming_rental', name: "Swimming Goggles", emoji: "🥽", color: "bg-cyan-50 text-cyan-600", price: 3.00, stockKey: 'swim_goggles' },
  { id: 's3', type: 'swimming_rental', name: "Kickboard", emoji: "🏄‍♂️", color: "bg-sky-50 text-sky-600", price: 3.00, stockKey: 'swim_kickboard' },
  { id: 's4', type: 'swimming_rental', name: "Swimming Cap", emoji: "🧢", color: "bg-indigo-50 text-indigo-600", price: 2.00, stockKey: 'swim_cap' },
  { id: 's5', type: 'swimming_rental', name: "Pool Noodles", emoji: "🛟", color: "bg-yellow-50 text-yellow-600", price: 3.00, stockKey: 'swim_noodles' },
];

const SPORTS_MENU = [
  { id: 'sp1', type: 'sports_rental', name: "Badminton Racket", emoji: "🏸", color: "bg-red-50 text-red-600", price: 3.00, bundle: true, stockKey: 'racket_badminton' },
  { id: 'sp2', type: 'sports_rental', name: "Squash Racket", emoji: "🎾", color: "bg-orange-50 text-orange-600", price: 3.00, bundle: true, stockKey: 'racket_squash' },
  { id: 'sp3', type: 'sports_rental', name: "Tennis Racket", emoji: "🎾", color: "bg-green-50 text-green-600", price: 3.00, bundle: true, stockKey: 'racket_tennis' },
  { id: 'sp4', type: 'sports_rental', name: "Squash Ball", emoji: "⚫", color: "bg-gray-50 text-gray-800", price: 2.00 },
  { id: 'sp5', type: 'sports_rental', name: "Tennis Ball", emoji: "🎾", color: "bg-yellow-50 text-yellow-600", price: 2.00 },
  { id: 'sp6', type: 'sports_sale', name: "Shuttlecock (Buy)", emoji: "🏸", color: "bg-stone-50 text-stone-600", price: 5.00 },
];

const INITIAL_STOCK = { 
  racket_badminton: 4, 
  racket_squash: 2, 
  racket_tennis: 2, 
  swim_goggles: 4, 
  swim_kickboard: 4, 
  swim_cap: 4, 
  swim_noodles: 4 
};

// --- Main App Component ---
export default function App() {
  const [user, setUser] = useState(null);
  const [viewMode, setViewMode] = useState('welcome'); 
  const [selectedServiceId, setSelectedServiceId] = useState(null);
  const [isOffline, setIsOffline] = useState(false); 
  
  const [cart, setCart] = useState([]);
  const [orders, setOrders] = useState([]);
  const [expenses, setExpenses] = useState([]); 
  const [inventory, setInventory] = useState(INITIAL_STOCK);
  const [activeVoucher, setActiveVoucher] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  // Dashboard & Auth
  const [staffTab, setStaffTab] = useState('orders'); 
  const [staffFilterService, setStaffFilterService] = useState('all');
  const [staffPassword, setStaffPassword] = useState('');
  const [staffAuthError, setStaffAuthError] = useState('');
  
  // Forms for Expenses
  const [expenseName, setExpenseName] = useState('');
  const [expenseCost, setExpenseCost] = useState('');
  const [expenseCategory, setExpenseCategory] = useState('stock');

  // UI State
  const [isCartExpanded, setIsCartExpanded] = useState(false);
  const [customizingItem, setCustomizingItem] = useState(null);
  
  // Customization State
  const [sugarLevel, setSugarLevel] = useState('No Sugar'); 
  const [cupSize, setCupSize] = useState('Medium'); 
  const [physioRate, setPhysioRate] = useState('public'); 
  const [massageArea, setMassageArea] = useState('Head & Shoulder'); 
  const [massageAddOn, setMassageAddOn] = useState(false); 
  const [swimCapType, setSwimCapType] = useState('Silicone'); 

  // Customer Data
  const [customerName, setCustomerName] = useState('');
  const [customerPhone, setCustomerPhone] = useState('');
  const [customerEmail, setCustomerEmail] = useState(''); 
  const [customerBlock, setCustomerBlock] = useState(''); 
  const [roomNumber, setRoomNumber] = useState(''); 
  const [matricNo, setMatricNo] = useState(''); 
  const [staffId, setStaffId] = useState(''); 
  const [homeAddress, setHomeAddress] = useState(''); 
  const [massageClientType, setMassageClientType] = useState('student'); 

  // Booking & Payment
  const [deliveryMode, setDeliveryMode] = useState('lobby'); 
  const [paymentMethod, setPaymentMethod] = useState('cash'); 
  const [voucherInput, setVoucherInput] = useState('');
  const [voucherMsg, setVoucherMsg] = useState('');
  const [appliedVoucher, setAppliedVoucher] = useState(null);
  const [discountPercent, setDiscountPercent] = useState(0); 
  
  // Modals
  const [showPaymentModal, setShowPaymentModal] = useState(false);
  const [receiptImage, setReceiptImage] = useState(null); 
  const [viewingReceipt, setViewingReceipt] = useState(null);

  // Game State
  const [showGameModal, setShowGameModal] = useState(false);
  const [gameBoard, setGameBoard] = useState(Array(9).fill(null));
  const [gameStatus, setGameStatus] = useState('intro');
  const [isPlayerTurn, setIsPlayerTurn] = useState(true);
  const [trialCustomer, setTrialCustomer] = useState({ name: '', matric: '', choice: 'Watermelon' });

  // --- Logic Helpers ---
  const cartHasMobileService = useMemo(() => cart.some(item => ['physio', 'massage'].includes(item.type)), [cart]);
  const cartHasCoaching = useMemo(() => cart.some(item => item.type === 'swimming_coaching'), [cart]);
  const cartHasAppointment = useMemo(() => cartHasMobileService || cartHasCoaching, [cartHasMobileService, cartHasCoaching]);

  const getEffectiveClientType = () => {
    if (cart.some(i => i.type === 'physio')) {
      const item = cart.find(i => i.type === 'physio');
      if (item.variant?.includes('Student')) return 'student';
      if (item.variant?.includes('Staff')) return 'staff';
      return 'public';
    }
    return cart.some(i => i.type === 'massage') ? massageClientType : 'public';
  };

  const availableDates = useMemo(() => {
    const dates = [];
    const today = new Date();
    for (let i = 0; i < 7; i++) { 
      const d = new Date(today);
      d.setDate(today.getDate() + i);
      dates.push(d);
    }
    return dates;
  }, []);

  const getSlotsForItem = (dateObj, itemType) => {
    if (!dateObj) return [];
    const day = dateObj.getDay(); 
    if (['physio', 'massage'].includes(itemType)) {
        if (day === 1 || day === 5) return ['22:00'];
        if (day >= 2 && day <= 4) return ['20:00', '21:00'];
        if (day === 6) return ['18:00', '19:00', '20:00', '21:00'];
    } else if (itemType === 'swimming_coaching') {
        if (day === 1 || day === 5) return ['20:00'];
    }
    return [];
  };

  const isSlotBooked = (dateStr, timeStr, currentCartIndex = -1) => {
     const inOrders = orders.some(o => o.status !== 'cancelled' && o.items?.some(i => i.date === dateStr && i.time === timeStr));
     const inCart = cart.some((c, idx) => idx !== currentCartIndex && c.date === dateStr && c.time === timeStr);
     return inOrders || inCart;
  };

  const setItemSchedule = (index, dateObj, timeStr) => {
     setCart(prev => prev.map((item, i) => {
        if (i === index) {
            return { 
                ...item, 
                dateObj, 
                date: dateObj?.toLocaleDateString() || null, 
                time: timeStr || null 
            };
        }
        return item;
     }));
  };

  const initiateAdd = (item) => {
    if (item.stockKey && inventory[item.stockKey] <= 0) {
        alert("Sorry, this item is currently out of stock!");
        return;
    }
    setCustomizingItem(item); 
    setSugarLevel('No Sugar'); 
    setCupSize('Medium'); 
    setPhysioRate('public'); 
    setMassageArea('Head & Shoulder'); 
    setMassageAddOn(false); 
    setSwimCapType('Silicone');
  };

  const getPrice = () => {
    if (!customizingItem) return 0;
    
    if (customizingItem.type === 'juice') {
        if (cupSize === 'Small') return 5.00;
        if (cupSize === 'Medium') return 7.00;
        if (cupSize === 'Large') return 8.00;
    }
    
    if (customizingItem.type === 'physio') {
        if (physioRate === 'student') return 25.00;
        if (physioRate === 'staff') return 45.00;
        return 80.00;
    }
    
    if (customizingItem.type === 'massage') {
        return (customizingItem.price + (massageAddOn ? 6.00 : 0));
    }
    
    return customizingItem.price || 0;
  };

  const generateVariantString = () => {
    if (!customizingItem) return "Standard";
    
    if (customizingItem.type === 'juice') {
        return `${cupSize}, ${sugarLevel}`;
    }
    
    if (customizingItem.type === 'physio') {
      const labels = { student: 'IIUM Student', staff: 'IIUM Staff', public: 'Public' };
      return labels[physioRate] || "Standard";
    }
    
    if (customizingItem.type === 'massage') {
      let details = "";
      if (customizingItem.id === 'm1') details += `Area: ${massageArea}`;
      if (massageAddOn) details += `${details ? ', ' : ''}+10mins Add-on`;
      return details || "Standard";
    }
    
    if (customizingItem.id === 's4') {
        return `Type: ${swimCapType}`; 
    }
    
    return "Standard";
  };

  const confirmAddToCart = () => {
    if (!customizingItem) return;
    
    const finalPrice = getPrice();
    const variantDetails = generateVariantString();

    setCart(prev => [...prev, { 
      id: customizingItem.id, 
      qty: 1, 
      variant: variantDetails, 
      price: finalPrice, 
      type: customizingItem.type, 
      name: customizingItem.name, 
      stockKey: customizingItem.stockKey || null, 
      bundle: customizingItem.bundle || false, 
      date: null, 
      time: null 
    }]);
    
    setCustomizingItem(null);
  };

  const handleApplyVoucher = () => {
    const code = (voucherInput || '').trim().toUpperCase();
    if (code.includes('JACKFER')) {
        setDiscountPercent(0.10);
        setAppliedVoucher({ code, percent: 10 });
        setVoucherMsg('Voucher applied: 10% off ✅');
    } else {
        setDiscountPercent(0);
        setAppliedVoucher(null);
        setVoucherMsg('Invalid voucher code ❌');
    }
  };

  const calculateTotal = () => {
    const subtotal = cart.reduce((acc, item) => {
        if (item.bundle) {
            return acc + (Math.floor(item.qty/2)*5) + ((item.qty%2)*item.price);
        }
        return acc + (item.price * item.qty);
    }, 0);
    
    const discountAmount = subtotal * discountPercent;
    let deliveryFee = (!cartHasAppointment && deliveryMode === 'room') ? 0.50 : 0;
    
    return subtotal + deliveryFee - discountAmount;
  };

  const removeFromCart = (index) => {
      setCart(prev => prev.filter((_, i) => i !== index));
  };

  const handleCheckout = () => {
    if (!customerName || !customerPhone || !customerEmail) {
        alert("Please fill in basic contact details (Name, Phone, Email).");
        return;
    }
    
    for (const item of cart) {
        if (['physio', 'massage', 'swimming_coaching'].includes(item.type)) {
            if (!item.date || !item.time) {
                alert(`Please select a date and time for your ${item.name} appointment.`);
                return;
            }
        }
    }
    
    if (paymentMethod === 'qr') {
        setShowPaymentModal(true); 
    } else {
        submitOrder();
    }
  };

  const submitOrder = async () => {
    if (!user) return;
    setIsLoading(true);
    
    try {
      const finalTotal = calculateTotal();
      
      // Clean undefined fields for Firestore
      const cleanedCart = cart.map(({ dateObj, ...rest }) => ({
        ...rest,
        id: rest.id || null,
        stockKey: rest.stockKey || null,
        date: rest.date || null,
        time: rest.time || null
      }));

      const orderData = {
        items: cleanedCart, 
        subtotal: finalTotal + (finalTotal * discountPercent), 
        discount: finalTotal * discountPercent, 
        total: finalTotal,
        status: 'pending', 
        timestamp: Date.now(), 
        customerCode: Math.floor(Math.random()*9000)+1000, 
        userId: user.uid,
        receiptImage: paymentMethod === 'qr' ? receiptImage : null,
        customerDetails: { 
            name: customerName || 'N/A', 
            phone: customerPhone || 'N/A', 
            email: customerEmail || 'N/A', 
            matricNo: matricNo || 'N/A', 
            staffId: staffId || 'N/A', 
            block: customerBlock || 'N/A', 
            roomNumber: roomNumber || 'N/A', 
            homeAddress: homeAddress || 'N/A', 
            deliveryMode, 
            paymentMethod, 
            bank: paymentMethod === 'qr' ? 'RHB QR' : 'Cash', 
            clientType: cartHasMobileService ? getEffectiveClientType() : 'standard' 
        }
      };
      
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'orders'), orderData);
      
      // Update inventory safely
      const invRef = doc(db, 'artifacts', appId, 'public', 'data', 'inventory_main', 'stock');
      for(let i of cart) {
          if(i.stockKey) {
              await updateDoc(invRef, {[i.stockKey]: increment(-i.qty)});
          }
      }

      // Send Email via EmailJS
      if (customerEmail && customerEmail !== 'N/A') {
         fetch('https://api.emailjs.com/api/v1.0/email/send', {
            method: 'POST', 
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ 
               service_id: 'service_3kj1ch1', 
               template_id: 'template_kd13abi', 
               user_id: 'diDwLTYFVg4PBmisN',
               template_params: { 
                  customer_name: customerName, 
                  customer_email: customerEmail, 
                  total_amount: finalTotal.toFixed(2), 
                  voucher_code: `JACKFER${Math.floor(Math.random()*100)}` 
               }
            })
         }).catch(e => console.error("Email API silent fail:", e));
      }
      
      setActiveVoucher({ code: `JACKFER${Math.floor(Math.random()*100)}`, amount: "10%", email: customerEmail });
      setCart([]); 
      setReceiptImage(null); 
      setShowPaymentModal(false); 
      setIsCartExpanded(false);
      
    } catch(e) { 
      console.error("Database Error:", e); 
      alert("There was an error submitting your order. Please refresh and try again."); 
    } finally { 
      setIsLoading(false); 
    }
  };

  const handleReceiptUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (event) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const MAX_WIDTH = 600;
        canvas.width = MAX_WIDTH;
        canvas.height = img.height * (MAX_WIDTH / img.width);
        canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
        setReceiptImage(canvas.toDataURL('image/jpeg', 0.6));
      };
      img.src = event.target.result;
    };
    reader.readAsDataURL(file);
  };

  const handleStaffLogin = () => { 
    if (staffPassword === 'jackfer2025') { 
      setViewMode('staff'); 
      setStaffPassword(''); 
      setStaffAuthError('');
    } else { 
      setStaffAuthError('Invalid Admin Password'); 
    } 
  };
  
  const toggleOrderStatus = async (id, cur) => { 
    await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'orders', id), { status: cur === 'pending' ? 'completed' : 'pending' }); 
  };

  const addExpense = async () => {
    if (!user || !expenseName || !expenseCost) return;
    await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'expenses'), { 
        item: expenseName, 
        cost: parseFloat(expenseCost), 
        category: expenseCategory, 
        timestamp: Date.now(), 
        userId: user.uid 
    });
    setExpenseName(''); 
    setExpenseCost('');
  };

  const deleteExpense = async (id) => { 
    if(user) await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'expenses', id)); 
  };

  // Staff Memo Filters
  const filteredStaffOrders = useMemo(() => {
      return orders.filter(o => staffFilterService === 'all' || o.items.some(i => i.type.includes(staffFilterService)));
  }, [orders, staffFilterService]);

  const verifyOrders = useMemo(() => {
      return orders.filter(o => o.customerDetails?.paymentMethod === 'qr' || o.receiptImage);
  }, [orders]);

  const financialStats = useMemo(() => {
    const totalRevenue = orders.filter(o => o.status === 'completed').reduce((acc, o) => acc + o.total, 0);
    const totalExpenses = expenses.reduce((acc, e) => acc + e.cost, 0);
    return { totalRevenue, totalExpenses, netProfit: totalRevenue - totalExpenses };
  }, [orders, expenses]);

  // Tic Tac Toe Init
  const initGame = () => {
    setGameBoard(Array(9).fill(null));
    setGameStatus('playing');
    setIsPlayerTurn(true);
  };

  // --- Auth & Listeners ---
  useEffect(() => {
    if (!auth) return;
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (e) { 
        console.error("Auth:", e); 
      }
    };
    initAuth();
    return onAuthStateChanged(auth, setUser);
  }, []);

  const AnimatedServiceLogo = () => (
    <div className="w-32 h-32 rounded-full shadow-2xl border-4 border-white bg-gradient-to-br from-orange-100 to-amber-50 flex items-center justify-center mb-8 mx-auto relative overflow-hidden group">
      <div className="absolute inset-0 bg-white/30 skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
      <span className="text-5xl animate-bounce drop-shadow-sm">🍊</span>
    </div>
  );

  const handleSelectService = (serviceId) => { 
    setSelectedServiceId(serviceId); 
    setViewMode('customer_menu'); 
  };

  if (initError) {
      return <div className="p-10 text-center text-red-500 font-bold">{initError}</div>;
  }

  return (
    <div className="font-sans text-slate-900 bg-slate-50 min-h-screen selection:bg-lime-200">
      
      {/* WELCOME SCREEN */}
      {viewMode === 'welcome' && (
         <div className="min-h-screen flex flex-col items-center justify-center bg-cover bg-center p-6 relative" style={{ backgroundImage: `url('${BACKGROUNDS.welcome}')` }}>
           <div className="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
           <div className="relative bg-white/95 backdrop-blur-xl p-10 rounded-[2.5rem] shadow-2xl w-full max-w-sm text-center border border-white/40">
              <AnimatedServiceLogo />
              <h1 className="text-3xl font-bold font-serif mb-2 text-gray-900 tracking-tight">Bisnes Jackfer</h1>
              <p className="text-slate-500 mb-10 font-medium text-sm text-center">Premium Wellness & Freshness</p>
              
              <button onClick={() => setViewMode('customer_hub')} className="w-full flex items-center justify-center gap-3 bg-gray-900 text-white py-4 rounded-2xl font-bold mb-4 shadow-xl hover:scale-[1.02] active:scale-95 transition-all">
                  <ShoppingBag className="w-5 h-5 text-lime-400" /> Start Booking
              </button>
              
              <button onClick={() => setViewMode('staff_auth')} className="w-full bg-white/60 border border-slate-200 text-gray-700 py-4 rounded-2xl font-bold transition-colors hover:bg-slate-100">
                  Staff Access
              </button>
           </div>
         </div>
      )}

      {/* STAFF AUTH SCREEN */}
      {viewMode === 'staff_auth' && (
        <div className="min-h-screen flex items-center justify-center bg-slate-100 p-6">
           <div className="bg-white p-10 rounded-[2.5rem] shadow-xl w-full max-w-sm text-center border border-slate-200">
              <div className="bg-slate-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Lock className="w-8 h-8 text-slate-400" />
              </div>
              <h2 className="text-2xl font-bold mb-6 font-serif">Staff Login</h2>
              
              <input 
                type="password" 
                value={staffPassword} 
                onChange={(e) => setStaffPassword(e.target.value)} 
                placeholder="Enter Password" 
                className="w-full bg-slate-50 border-2 border-slate-100 p-4 rounded-xl mb-4 text-center font-bold outline-none focus:border-gray-900 transition-all text-gray-900" 
              />
              
              <button onClick={handleStaffLogin} className="w-full bg-gray-900 text-white py-4 rounded-xl font-bold mb-4 shadow-lg active:scale-95 transition-transform">
                  Authenticate
              </button>
              
              <button onClick={() => setViewMode('welcome')} className="text-slate-400 text-sm font-medium hover:text-slate-900 transition-colors">
                  Cancel
              </button>
              
              {staffAuthError && (
                  <p className="text-red-500 text-xs mt-4 font-bold bg-red-50 py-2 rounded-lg">{staffAuthError}</p>
              )}
           </div>
        </div>
      )}

      {/* CUSTOMER HUB (Service Selection) */}
      {viewMode === 'customer_hub' && (
        <div className="min-h-screen p-6 flex flex-col justify-center relative bg-cover bg-center" style={{backgroundImage: `url('${BACKGROUNDS.juice}')`}}>
          <div className="absolute inset-0 bg-white/80 backdrop-blur-xl"></div>
          <div className="relative z-10 w-full max-w-md mx-auto">
            
            <header className="flex justify-between items-center mb-10">
              <div>
                <h1 className="text-3xl font-bold font-serif text-gray-900 tracking-tight">Services</h1>
                <p className="text-slate-500 text-sm font-medium">Choose your wellness path</p>
              </div>
              <button onClick={() => setViewMode('welcome')} className="bg-white p-3 rounded-full shadow-sm text-slate-400 border border-slate-100 transition-colors hover:text-gray-900">
                  <ArrowLeft className="w-5 h-5" />
              </button>
            </header>

            <div className="grid gap-4">
              {SERVICES.map((s) => (
                <button 
                  key={s.id} 
                  onClick={() => handleSelectService(s.id)} 
                  className="group w-full text-left p-5 rounded-[2rem] bg-white/90 backdrop-blur-sm border border-white shadow-sm hover:shadow-xl hover:border-lime-400 transition-all flex items-center gap-5 transform hover:-translate-y-1"
                >
                  <div className={`w-16 h-16 rounded-2xl flex items-center justify-center bg-gradient-to-br ${s.gradient} text-3xl shadow-sm group-hover:scale-110 transition-transform duration-300`}>
                      {s.emoji}
                  </div>
                  <div>
                    <h3 className="font-bold text-lg text-gray-900 group-hover:text-lime-600 transition-colors">{s.name}</h3>
                    <p className="text-slate-400 text-xs font-medium">{s.description}</p>
                  </div>
                </button>
              ))}
            </div>

          </div>
        </div>
      )}

      {/* SPECIFIC MENU SCREEN */}
      {viewMode === 'customer_menu' && (
        <div className="min-h-screen pb-40 bg-cover bg-center bg-fixed relative transition-all duration-500" style={{ backgroundImage: `url('${BACKGROUNDS[selectedServiceId === 'sports' ? 'sports' : selectedServiceId]}')` }}>
           <div className="absolute inset-0 bg-white/85 backdrop-blur-md"></div>
           <div className="relative z-10">
             
             <header className="sticky top-0 bg-white/80 backdrop-blur-md z-20 border-b p-4 flex justify-between items-center shadow-sm">
                <h1 className="font-bold text-xl text-gray-900 font-serif tracking-tight">Menu</h1>
                <button onClick={() => setViewMode('customer_hub')} className="text-sm font-bold bg-white border border-slate-200 px-4 py-2 rounded-full flex items-center gap-2 shadow-sm hover:bg-slate-50 transition-colors">
                    <ArrowLeft className="w-4 h-4"/> Hub
                </button>
             </header>

             <div className="p-6 max-w-3xl mx-auto">
                {/* Notice Banners */}
                {selectedServiceId === 'juice' && (
                  <div className="mb-6 bg-orange-50/90 backdrop-blur-sm border border-orange-200 p-4 rounded-2xl flex items-start gap-3 text-sm text-orange-900 shadow-sm font-medium">
                    <Clock className="w-5 h-5 flex-shrink-0 mt-0.5 text-orange-500" />
                    <div>
                      <p className="font-bold text-gray-900">Operation Hours: 7:00 AM - 6:00 PM</p>
                      <p className="opacity-80">Note: All orders will be delivered starting from 8:00 PM.</p>
                    </div>
                  </div>
                )}
                
                {/* Game Banner for Juice */}
                {selectedServiceId === 'juice' && (
                  <div onClick={() => { setShowGameModal(true); initGame(); }} className="mb-8 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500 rounded-[2rem] p-6 text-white cursor-pointer shadow-lg relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300">
                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
                    <div className="relative flex justify-between items-center z-10">
                       <div>
                          <span className="bg-white/20 backdrop-blur-md text-[10px] font-extrabold uppercase tracking-wider px-3 py-1 rounded-full border border-white/30 inline-block mb-2">Free Trial</span>
                          <h3 className="text-3xl font-black italic tracking-tighter drop-shadow-md font-serif">FIGHT FOR JUICE!</h3>
                          <p className="text-sm font-medium opacity-90 mt-1">Beat the bot in Tic-Tac-Toe to win.</p>
                       </div>
                       <Zap className="w-12 h-12 text-white drop-shadow-md fill-current group-hover:rotate-12 transition-transform" />
                    </div>
                  </div>
                )}

                {/* Items Grid */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 font-sans">
                   {(selectedServiceId==='juice'?JUICE_MENU:selectedServiceId==='physio'?PHYSIO_MENU:selectedServiceId==='massage'?MASSAGE_MENU:selectedServiceId==='swimming'?SWIMMING_MENU:SPORTS_MENU).map(item => {
                      const isSoldOut = item.stockKey && (inventory[item.stockKey] || 0) <= 0;
                      return (
                      <div key={item.id} className={`bg-white/80 backdrop-blur-sm p-6 rounded-[2.5rem] shadow-sm border border-white hover:border-lime-200 transition-all flex justify-between items-start group ${isSoldOut ? 'opacity-50 grayscale' : ''}`}>
                         <div>
                            <div className={`w-12 h-12 rounded-xl flex items-center justify-center text-2xl mb-4 ${item.color} shadow-inner`}>
                                {item.emoji}
                            </div>
                            <h3 className="font-bold text-gray-900 text-lg leading-tight">{item.name}</h3>
                            <p className="text-xs text-slate-400 font-bold mt-1 uppercase tracking-widest leading-none">
                                {item.type === 'juice' ? 'Custom Sugar' : item.type === 'physio' ? 'Student/Staff Rates' : `RM ${item.price?.toFixed(2)}`}
                            </p>
                            {item.stockKey && (
                                <div className="text-[10px] bg-slate-100 text-slate-500 font-bold px-2 py-1 rounded-md inline-block mt-3">
                                    {isSoldOut ? 'Sold Out' : `Stock: ${inventory[item.stockKey]}`}
                                </div>
                            )}
                         </div>
                         <button 
                            disabled={isSoldOut}
                            onClick={() => initiateAdd(item)} 
                            className={`bg-gray-900 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-all ${isSoldOut ? 'cursor-not-allowed bg-gray-400' : 'hover:scale-110 active:scale-90 group-hover:bg-lime-600'}`}>
                            <Plus className="w-5 h-5"/>
                         </button>
                      </div>
                   )})}
                </div>
             </div>
           </div>
           
           {/* FLOATING CART BAR */}
           {cart.length > 0 && !isCartExpanded && (
              <div className="fixed bottom-6 left-4 right-4 z-40 animate-in slide-in-from-bottom-5">
                 <div className="max-w-md mx-auto bg-gray-900/95 backdrop-blur-md text-white p-5 rounded-[2rem] shadow-2xl flex justify-between items-center cursor-pointer border border-white/10 hover:scale-[1.02] transition-transform" onClick={() => setIsCartExpanded(true)}>
                    <div className="flex items-center gap-4 pl-1">
                       <div className="bg-lime-400 text-gray-900 w-10 h-10 rounded-xl flex items-center justify-center font-black shadow-inner">
                           {cart.length}
                       </div>
                       <div>
                          <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest leading-none mb-1.5">Checkout Amount</p>
                          <p className="font-bold text-xl leading-none tracking-tight font-mono">RM {calculateTotal().toFixed(2)}</p>
                       </div>
                    </div>
                    <ChevronDown className="w-6 h-6 text-slate-500 mr-2"/>
                 </div>
              </div>
           )}
        </div>
      )}

      {/* STAFF DASHBOARD */}
      {viewMode === 'staff' && (
        <div className="min-h-screen bg-slate-50 bg-cover bg-center bg-fixed" style={{ backgroundImage: `url('${BACKGROUNDS.physio}')` }}>
           <div className="absolute inset-0 bg-white/95 backdrop-blur-2xl"></div>
           <div className="relative z-10 font-sans">
              
              <header className="bg-white/80 backdrop-blur-md border-b sticky top-0 p-4 flex justify-between items-center shadow-sm z-30">
                 <div className="flex items-center gap-3">
                    <div className="bg-gray-900 p-2 rounded-xl text-white shadow-md"><LayoutDashboard className="w-5 h-5"/></div>
                    <h1 className="font-bold font-serif text-lg tracking-tight">Jackfer Admin</h1>
                 </div>
                 <div className="flex gap-1 bg-slate-100 p-1 rounded-xl overflow-x-auto">
                    <button onClick={()=>setStaffTab('orders')} className={`px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all ${staffTab==='orders'?'bg-white text-gray-900 shadow-sm':'text-slate-400 hover:text-slate-600'}`}>Orders</button>
                    <button onClick={()=>setStaffTab('verify')} className={`px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all ${staffTab==='verify'?'bg-white text-gray-900 shadow-sm':'text-slate-400 hover:text-slate-600'}`}>Verify</button>
                    <button onClick={()=>setStaffTab('expenses')} className={`px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all ${staffTab==='expenses'?'bg-white text-gray-900 shadow-sm':'text-slate-400 hover:text-slate-600'}`}>Finances</button>
                    <div className="w-px h-4 bg-slate-300 mx-1 align-middle self-center"></div>
                    <button onClick={()=>setViewMode('welcome')} className="px-3 text-red-500 hover:scale-110 transition-transform"><LogOut className="w-5 h-5"/></button>
                 </div>
              </header>

              <main className="p-6 max-w-4xl mx-auto space-y-6 pb-20">
                 {/* ADMIN ORDERS TAB */}
                 {staffTab === 'orders' && filteredStaffOrders.map(o => (
                    <div key={o.id} className={`bg-white/80 backdrop-blur-md p-8 rounded-[3rem] shadow-sm border border-slate-100 transition-opacity ${o.status==='completed'?'opacity-40 grayscale':''}`}>
                       <div className="flex justify-between mb-8">
                          <span className="font-black font-mono text-xl tracking-tighter">#{o.customerCode}</span>
                          <span className={`text-[10px] px-3 py-1.5 rounded-full font-black uppercase border tracking-widest ${o.status==='pending'?'bg-orange-50 text-orange-600 border-orange-100':'bg-lime-50 text-lime-700 border-lime-100'}`}>
                              {o.status}
                          </span>
                       </div>
                       
                       <div className="space-y-4 mb-10">
                          {o.items?.map((i,x)=>(
                             <div key={x} className="flex justify-between text-sm items-start border-b border-slate-50 pb-3 last:border-0 last:pb-0">
                                <div className="flex gap-3">
                                   <span className="bg-slate-100 text-slate-600 font-bold px-2 py-0.5 rounded-md h-fit">{i.qty}x</span>
                                   <div>
                                      <p className="font-bold text-gray-900 leading-tight">{i.name}</p>
                                      <p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider mt-0.5">{i.variant}</p>
                                      {i.date && (
                                         <p className="text-[10px] text-teal-600 font-black mt-2 bg-teal-50 px-2 py-1 rounded-md inline-flex items-center gap-1 uppercase border border-teal-100">
                                            <CalendarCheck className="w-3 h-3"/> {i.date} @ {i.time}
                                         </p>
                                      )}
                                   </div>
                                </div>
                                <span className="font-black text-slate-900 font-mono">RM {i.price?.toFixed(2)}</span>
                             </div>
                          ))}
                       </div>

                       <div className="bg-slate-50/50 p-6 rounded-3xl mb-8 border border-slate-100 space-y-3 font-medium text-sm">
                          <p className="flex items-center gap-3 text-slate-700 font-bold"><User className="w-4 h-4 opacity-40"/> {o.customerDetails?.name}</p>
                          <p className="flex items-center gap-3 text-slate-500 font-mono"><Phone className="w-4 h-4 opacity-40"/> {o.customerDetails?.phone}</p>
                          {o.customerDetails?.homeAddress !== 'N/A' && (
                              <p className="flex items-center gap-3 text-slate-500 text-xs font-bold mt-2 pt-2 border-t border-slate-200 border-dashed">
                                  <MapPin className="w-4 h-4 opacity-40"/> {o.customerDetails?.homeAddress}
                              </p>
                          )}
                       </div>

                       <div className="flex justify-between items-center pt-2">
                          <p className="font-black text-3xl font-serif tracking-tighter text-gray-900">RM {o.total?.toFixed(2)}</p>
                          <button onClick={()=>toggleOrderStatus(o.id,o.status)} className="bg-gray-900 text-white px-10 py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest shadow-xl active:scale-95 transition-all">
                              {o.status==='completed'?'Undo Status':'Process Order'}
                          </button>
                       </div>
                    </div>
                 ))}
                 
                 {/* ADMIN VERIFY TAB */}
                 {staffTab === 'verify' && verifyOrders.map(order => (
                    <div key={order.id} className="bg-white/90 backdrop-blur-sm rounded-[2rem] p-6 shadow-sm border border-slate-100 flex flex-col sm:flex-row gap-6">
                       <div className="flex-1">
                          <h3 className="font-black text-xl text-gray-900 mb-1 tracking-tight">
                              #{order.customerCode} 
                              <span className="text-[10px] font-black text-blue-600 bg-blue-50 px-2 py-1 rounded ml-2 uppercase align-middle">{order.customerDetails.paymentMethod}</span>
                          </h3>
                          <p className="text-sm text-slate-500 mb-4">{order.customerDetails.name} • <span className="font-black text-gray-900">RM {order.total.toFixed(2)}</span></p>
                          
                          <div className="bg-slate-50 p-3 rounded-xl mb-4 space-y-2 border border-slate-100">
                             {order.items?.map((i,x)=>(
                                <div key={x} className="flex justify-between text-xs font-bold text-slate-600">
                                   <span>{i.qty}x {i.name}</span>
                                </div>
                             ))}
                          </div>

                          <button onClick={() => toggleOrderStatus(order.id, order.status)} className={`w-full py-4 rounded-xl text-xs font-bold uppercase transition-all ${order.status === 'completed' ? 'bg-gray-200 text-slate-600' : 'bg-lime-500 text-gray-900 shadow-md shadow-lime-200'}`}>
                              {order.status === 'completed' ? 'Mark Pending' : 'Approve Payment'}
                          </button>
                       </div>

                       <div className="w-full sm:w-40 h-40 bg-slate-100 rounded-2xl cursor-pointer overflow-hidden group border border-slate-200 relative" onClick={() => order.receiptImage && setViewingReceipt(order.receiptImage)}>
                          {order.receiptImage ? (
                             <>
                                <img src={order.receiptImage} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"/>
                                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 flex items-center justify-center transition-colors">
                                   <Eye className="text-white opacity-0 group-hover:opacity-100 w-8 h-8 transition-opacity"/>
                                </div>
                             </>
                          ) : (
                             <div className="flex flex-col items-center justify-center h-full"><Receipt className="text-slate-300 w-8 h-8 mb-2"/><span className="text-[10px] font-bold text-slate-400">No Image</span></div>
                          )}
                       </div>
                    </div>
                 ))}

                 {/* ADMIN EXPENSES & FINANCE TAB */}
                 {staffTab === 'expenses' && (
                     <div className="space-y-8 max-w-4xl mx-auto">
                        
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
                           <div className="bg-white/90 backdrop-blur-sm p-6 rounded-[2rem] shadow-sm border border-green-100 text-left">
                              <div className="bg-green-50 w-12 h-12 rounded-xl flex items-center justify-center mb-4"><TrendingUp className="w-6 h-6 text-green-600"/></div>
                              <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Total Revenue</p>
                              <p className="text-3xl font-black text-gray-900 font-mono tracking-tighter">RM {financialStats.totalRevenue.toFixed(2)}</p>
                           </div>
                           <div className="bg-white/90 backdrop-blur-sm p-6 rounded-[2rem] shadow-sm border border-red-100 text-left">
                              <div className="bg-red-50 w-12 h-12 rounded-xl flex items-center justify-center mb-4"><TrendingDown className="w-6 h-6 text-red-600"/></div>
                              <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Total Expenses</p>
                              <p className="text-3xl font-black text-gray-900 font-mono tracking-tighter">RM {financialStats.totalExpenses.toFixed(2)}</p>
                           </div>
                           <div className="bg-gradient-to-br from-gray-900 to-gray-800 p-6 rounded-[2rem] shadow-xl text-left text-white transform hover:-translate-y-1 transition-transform">
                              <div className="bg-white/10 w-12 h-12 rounded-xl flex items-center justify-center mb-4"><DollarSign className="w-6 h-6 text-white"/></div>
                              <p className="text-xs font-bold text-slate-300 uppercase tracking-wider mb-1">Net Profit</p>
                              <p className="text-3xl font-black font-mono tracking-tighter text-lime-400">RM {financialStats.netProfit.toFixed(2)}</p>
                           </div>
                        </div>
                        
                        <div className="bg-white/90 backdrop-blur-sm p-6 md:p-8 rounded-[2.5rem] shadow-sm border border-slate-100">
                           <h3 className="font-black text-xl text-gray-900 mb-6 tracking-tight font-serif">Log New Expense</h3>
                           <div className="flex flex-col md:flex-row gap-4">
                              <input 
                                type="text" 
                                placeholder="Item or Description" 
                                value={expenseName} 
                                onChange={e=>setExpenseName(e.target.value)} 
                                className="flex-1 bg-slate-50 border-2 border-slate-100 p-4 rounded-xl text-sm font-bold outline-none focus:border-gray-400 transition-colors" 
                              />
                              <input 
                                type="number" 
                                placeholder="Cost (RM)" 
                                value={expenseCost} 
                                onChange={e=>setExpenseCost(e.target.value)} 
                                className="w-full md:w-32 bg-slate-50 border-2 border-slate-100 p-4 rounded-xl text-sm font-bold outline-none focus:border-gray-400 transition-colors font-mono" 
                              />
                              <button onClick={addExpense} className="bg-gray-900 hover:bg-black text-white px-8 py-4 rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg active:scale-95 transition-all">
                                  <Plus className="w-5 h-5" /> Add
                              </button>
                           </div>
                        </div>
                        
                        <div className="bg-white/90 backdrop-blur-sm rounded-[2.5rem] shadow-sm border border-slate-100 overflow-hidden">
                           <div className="p-6 border-b border-slate-100 bg-slate-50/50">
                               <h3 className="font-bold text-gray-900 font-serif">Recent Transactions</h3>
                           </div>
                           <div className="divide-y divide-slate-50">
                             {expenses.length === 0 ? (
                                 <p className="p-10 text-center text-slate-400 font-medium">No financial records found.</p>
                             ) : expenses.map(e => (
                                <div key={e.id} className="p-5 flex justify-between items-center hover:bg-slate-50 transition-colors">
                                   <div>
                                      <div className="font-bold text-gray-900">{e.item}</div>
                                      <div className="text-xs text-slate-500 mt-1 font-medium">{new Date(e.timestamp).toLocaleDateString()}</div>
                                   </div>
                                   <div className="flex items-center gap-6">
                                      <span className="font-black text-gray-900 font-mono tracking-tighter text-lg">RM {e.cost.toFixed(2)}</span>
                                      <button onClick={()=>deleteExpense(e.id)} className="bg-white p-2.5 rounded-xl border border-slate-200 text-slate-400 hover:text-red-500 hover:border-red-200 transition-all shadow-sm">
                                          <Trash2 className="w-4 h-4"/>
                                      </button>
                                   </div>
                                </div>
                             ))}
                           </div>
                        </div>

                     </div>
                 )}
              </main>
           </div>
        </div>
      )}

      {/* CUSTOMIZATION MODAL */}
      {customizingItem && (
         <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-[110] flex items-center justify-center p-4">
            <div className="bg-white w-full max-w-sm rounded-[3rem] p-10 shadow-2xl animate-in zoom-in duration-300 border border-white/50 relative font-sans">
               <button onClick={()=>setCustomizingItem(null)} className="absolute top-6 right-6 text-slate-300 hover:text-slate-900 transition-colors">
                   <X className="w-6 h-6"/>
               </button>
               
               <h3 className="text-2xl font-bold font-serif mb-10 text-gray-900 pr-8">{customizingItem.name}</h3>
               
               <div className="space-y-8 mb-12">
                  
                  {/* JUICE OPTIONS */}
                  {customizingItem.type === 'juice' && (
                     <>
                        <div>
                           <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 block pl-1">Preferred Size</label>
                           <div className="flex flex-col gap-3">
                              {['Small','Medium','Large'].map(s=>(
                                 <button key={s} onClick={()=>setCupSize(s)} className={`flex justify-between p-5 rounded-3xl border-2 transition-all font-bold ${cupSize===s?'border-lime-500 bg-lime-50 text-lime-900 shadow-md scale-105':'border-slate-100 text-slate-400 hover:bg-slate-50'}`}>
                                    <span>{s}</span>
                                    <span className="text-xs opacity-60 font-mono">RM {s==='Small'?'5.00':s==='Medium'?'7.00':'8.00'}</span>
                                 </button>
                              ))}
                           </div>
                        </div>
                        <div>
                           <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 block pl-1">Sugar Intensity</label>
                           <div className="flex gap-2">
                              {['Normal','Less','No'].map(s=>(
                                 <button key={s} onClick={()=>setSugarLevel(s+' Sugar')} className={`flex-1 py-3.5 rounded-2xl border-2 text-[10px] font-black uppercase transition-all ${sugarLevel.includes(s)?'border-lime-500 bg-lime-50 text-lime-900 shadow-sm scale-105':'border-slate-100 text-slate-400 hover:bg-slate-50'}`}>
                                     {s}
                                 </button>
                              ))}
                           </div>
                        </div>
                     </>
                  )}

                  {/* PHYSIO OPTIONS */}
                  {customizingItem.type === 'physio' && (
                     <div className="space-y-3">
                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 block pl-1">Select Patient Rate</label>
                        {[{id:'student',l:'IIUM Student',p:'25'},{id:'staff',l:'IIUM Staff',p:'45'},{id:'public',l:'Public',p:'80'}].map(r=>(
                           <button key={r.id} onClick={()=>setPhysioRate(r.id)} className={`flex justify-between items-center p-5 rounded-[2rem] border-2 font-bold transition-all w-full ${physioRate===r.id?'border-teal-500 bg-teal-50 text-teal-900 shadow-md scale-105':'border-slate-100 text-slate-400 hover:bg-slate-50'}`}>
                              <span>{r.l}</span>
                              <span className="font-mono text-sm">RM {r.p}.00</span>
                           </button>
                        ))}
                     </div>
                  )}

                  {/* MASSAGE OPTIONS */}
                  {customizingItem.type === 'massage' && (
                     <div className="space-y-6">
                        {customizingItem.id==='m1' && (
                           <div>
                              <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 block pl-1">Target Area</label>
                              <div className="flex flex-col gap-3">
                                 {['Head & Shoulder','Shoulder & Back','Lower Body'].map(a=>(
                                    <button key={a} onClick={()=>setMassageArea(a)} className={`p-5 rounded-2xl border-2 text-sm font-bold text-left transition-all ${massageArea===a?'border-purple-500 bg-purple-50 text-purple-900 shadow-md':'border-slate-100 text-slate-400 hover:bg-slate-50'}`}>
                                        {a}
                                    </button>
                                 ))}
                              </div>
                           </div>
                        )}
                        <div className="pt-2">
                           <button onClick={()=>setMassageAddOn(!massageAddOn)} className={`w-full flex justify-between items-center p-5 rounded-2xl border-2 transition-all font-bold ${massageAddOn?'border-amber-500 bg-amber-50 text-amber-900 shadow-md scale-105':'border-slate-100 text-slate-400 hover:bg-slate-50'}`}>
                              <span>+10 Mins Extra</span>
                              <span className="font-mono text-xs">+RM 6.00</span>
                           </button>
                        </div>
                     </div>
                  )}

                  {/* SWIMMING OPTIONS */}
                  {customizingItem.id === 's4' && (
                     <div>
                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 block pl-1">Cap Material</label>
                        <div className="flex gap-3">
                           {['Silicone','Mesh'].map(t=>(
                              <button key={t} onClick={()=>setSwimCapType(t)} className={`flex-1 py-4 rounded-2xl border-2 text-sm font-bold transition-all ${swimCapType===t?'border-blue-500 bg-blue-50 text-blue-900 shadow-md scale-105':'border-slate-100 text-slate-400 hover:bg-slate-50'}`}>
                                  {t}
                              </button>
                           ))}
                        </div>
                     </div>
                  )}
               </div>

               {/* Add To Cart Button */}
               <button onClick={confirmAddToCart} className="w-full bg-gray-900 text-white py-5 rounded-2xl font-black text-lg shadow-2xl active:scale-95 transition-all flex justify-between items-center px-8">
                   <span>Add to Cart</span>
                   <span className="font-mono text-sm bg-white/20 px-3 py-1.5 rounded-xl">RM {getPrice().toFixed(2)}</span>
               </button>
            </div>
         </div>
      )}

      {/* CHECKOUT CART DRAWER */}
      {isCartExpanded && (
         <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-[100] flex items-end justify-center font-sans">
            <div className="bg-white w-full max-w-lg rounded-t-[4rem] p-10 h-[94vh] overflow-y-auto shadow-[0_-20px_50px_rgba(0,0,0,0.2)] relative animate-in slide-in-from-bottom duration-500">
               
               <div className="flex justify-between items-center mb-10 sticky top-0 bg-white z-20 pb-4 border-b border-slate-50">
                  <h2 className="text-3xl font-bold font-serif text-gray-900 tracking-tight">Checkout</h2>
                  <button onClick={()=>setIsCartExpanded(false)} className="bg-slate-100 p-3 rounded-full text-slate-400 hover:text-gray-900 transition-colors"><X className="w-6 h-6"/></button>
               </div>

               <div className="space-y-5 mb-10">
                  {cart.map((item, i) => {
                     const requiresAppointment = ['physio', 'massage', 'swimming_coaching'].includes(item.type);
                     
                     return (
                        <div key={i} className="bg-slate-50/50 p-6 rounded-[2.5rem] border border-slate-100 relative group animate-in slide-in-from-bottom-2">
                           <div className="flex justify-between items-start mb-1">
                              <div className="flex gap-4 items-center pl-1">
                                 <span className="bg-gray-900 text-white w-7 h-7 flex items-center justify-center rounded-xl text-[10px] font-black shadow-md">{item.qty}</span>
                                 <div className="pr-4">
                                     <p className="font-bold text-gray-900 text-lg leading-none">{item.name}</p>
                                     <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-2">{item.variant}</p>
                                     {item.bundle && <span className="inline-block mt-2 bg-yellow-100 text-yellow-800 text-[9px] font-black px-2 py-0.5 rounded uppercase tracking-wider">Bundle Applied</span>}
                                 </div>
                              </div>
                              <button onClick={()=>removeFromCart(i)} className="text-red-300 hover:text-red-500 p-1 transition-colors"><Trash2 className="w-5 h-5"/></button>
                           </div>
                           
                           {/* Per-Item Appointment Picker */}
                           {requiresAppointment && (
                              <div className="mt-6 pt-6 border-t border-slate-200/50">
                                 <p className="text-[10px] font-black text-teal-600 uppercase tracking-widest mb-4 pl-1 flex items-center gap-2 animate-pulse"><Calendar className="w-4 h-4"/> Select Booking Date & Time</p>
                                 
                                 <div className="flex gap-3 overflow-x-auto pb-4 hide-scrollbar px-1">
                                    {availableDates.map((date, dIdx) => {
                                       const isSel = item.dateObj && date.toDateString() === item.dateObj.toDateString();
                                       const disabled = getSlotsForItem(date, item.type).length === 0;
                                       
                                       return (
                                          <button 
                                             key={dIdx} 
                                             onClick={()=>!disabled && setItemSchedule(i, date, null)} 
                                             className={`flex-shrink-0 w-14 h-18 rounded-2xl border-2 flex flex-col items-center justify-center transition-all ${isSel?'border-teal-500 bg-teal-50 text-teal-900 shadow-md scale-110':'bg-white border-slate-100 text-slate-400'}`}
                                          >
                                             <span className="text-[9px] font-black uppercase tracking-tighter opacity-60">{date.toLocaleDateString('en-US', {weekday:'short'})}</span>
                                             <span className="text-2xl font-black leading-none mt-1">{date.getDate()}</span>
                                          </button>
                                       );
                                    })}
                                 </div>

                                 {item.dateObj && (
                                    <div className="grid grid-cols-3 gap-3 mt-4 animate-in fade-in duration-500">
                                       {getSlotsForItem(item.dateObj, item.type).map(time => {
                                          const booked = isSlotBooked(item.dateObj.toLocaleDateString(), time, i);
                                          const selected = item.time === time;
                                          return (
                                             <button 
                                                 key={time} 
                                                 onClick={()=>!booked && setItemSchedule(i, item.dateObj, time)} 
                                                 className={`py-4 rounded-2xl text-[11px] font-black border-2 transition-all ${booked?'bg-red-50 border-red-100 text-red-300 line-through opacity-40':'cursor-pointer shadow-sm'} ${selected?'bg-teal-500 border-teal-500 text-white shadow-teal-200 scale-105 font-mono':'bg-white border-slate-100 text-slate-500 hover:border-teal-300 font-mono'}`}
                                             >
                                                 {time}
                                             </button>
                                          );
                                       })}
                                    </div>
                                 )}
                              </div>
                           )}
                        </div>
                     );
                  })}
               </div>

               {/* VOUCHER SECTION */}
               <div className="bg-lime-50/50 p-8 rounded-[3rem] border border-lime-100 mb-10 shadow-inner font-sans">
                  <h3 className="text-xs font-black text-lime-700 uppercase tracking-widest mb-4 flex items-center gap-2 px-2"><Ticket className="w-5 h-5"/> Reward Voucher</h3>
                  <div className="flex gap-3">
                     <input value={voucherInput} onChange={e=>setVoucherInput(e.target.value)} placeholder="Enter JACKFER..." className="flex-1 p-5 rounded-[1.5rem] border-2 border-lime-200 text-sm font-bold uppercase outline-none focus:ring-4 focus:ring-lime-500/10 transition-all bg-white" />
                     <button onClick={handleApplyVoucher} className="bg-lime-600 text-white px-8 py-5 rounded-[1.5rem] font-black text-[10px] uppercase tracking-widest shadow-lg shadow-lime-200 active:scale-95 transition-all">Apply</button>
                  </div>
                  {voucherMsg && <p className={`text-[11px] font-black mt-4 px-2 animate-pulse flex items-center gap-2 ${discountPercent > 0 ? 'text-lime-700' : 'text-red-500'}`}><Sparkles className="w-4 h-4"/> {voucherMsg}</p>}
               </div>

               {/* CLIENT DETAILS */}
               <div className="space-y-5 bg-slate-50/50 p-8 rounded-[3rem] border border-slate-100 mb-12 font-medium text-sm text-slate-500 shadow-inner font-sans">
                  <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest mb-2 flex items-center gap-2 px-2"><User className="w-5 h-5"/> Client Details</h3>
                  
                  <input placeholder="Full Name" value={customerName} onChange={e=>setCustomerName(e.target.value)} className="w-full p-5 rounded-2xl border-2 border-slate-200 font-bold outline-none focus:border-gray-900 transition-all text-gray-900 shadow-sm" />
                  
                  <div className="flex gap-4">
                     <input placeholder="Phone No." value={customerPhone} onChange={e=>setCustomerPhone(e.target.value)} className="w-1/2 p-5 rounded-2xl border-2 border-slate-200 font-bold outline-none text-gray-900 shadow-sm font-mono" />
                     <input placeholder="Email Address" value={customerEmail} onChange={e=>setCustomerEmail(e.target.value)} className="w-1/2 p-5 rounded-2xl border-2 border-slate-200 font-bold outline-none text-gray-900 shadow-sm" />
                  </div>
                  
                  <div className="pt-8 border-t border-slate-200/50 mt-4 font-sans">
                     {cartHasMobileService ? (
                        <div className="space-y-5">
                           {getEffectiveClientType()==='student' && (
                              <div className="grid grid-cols-3 gap-3">
                                 <input placeholder="Matric No" value={matricNo} onChange={e=>setMatricNo(e.target.value)} className="bg-white p-5 rounded-2xl border-2 border-slate-200 text-xs font-black outline-none text-gray-900 shadow-sm" />
                                 <input placeholder="Block" value={customerBlock} onChange={e=>setCustomerBlock(e.target.value)} className="bg-white p-5 rounded-2xl border-2 border-slate-200 text-xs font-black outline-none text-gray-900 shadow-sm" />
                                 <input placeholder="Room" value={roomNumber} onChange={e=>setRoomNumber(e.target.value)} className="bg-white p-5 rounded-2xl border-2 border-slate-200 text-xs font-black outline-none text-gray-900 shadow-sm" />
                              </div>
                           )}
                           {getEffectiveClientType()==='staff' && (
                              <div className="flex gap-3">
                                 <input placeholder="Staff ID" value={staffId} onChange={e=>setStaffId(e.target.value)} className="w-1/3 bg-white p-5 rounded-2xl border-2 border-slate-200 text-xs font-black outline-none text-gray-900 shadow-sm" />
                                 <input placeholder="Full Home Address" value={homeAddress} onChange={e=>setHomeAddress(e.target.value)} className="w-2/3 bg-white p-5 rounded-2xl border-2 border-slate-200 text-xs font-black outline-none text-gray-900 shadow-sm" />
                              </div>
                           )}
                           {getEffectiveClientType()==='public' && (
                              <div className="flex gap-3">
                                 <input placeholder="IC Last 4" value={matricNo} onChange={e=>setMatricNo(e.target.value)} className="w-1/3 bg-white p-5 rounded-2xl border-2 border-slate-200 text-xs font-black outline-none text-gray-900 shadow-sm font-mono" />
                                 <input placeholder="Full Home Address" value={homeAddress} onChange={e=>setHomeAddress(e.target.value)} className="w-2/3 bg-white p-5 rounded-2xl border-2 border-slate-200 text-xs font-black outline-none text-gray-900 shadow-sm" />
                              </div>
                           )}
                        </div>
                     ) : cartHasCoaching ? (
                        <div className="bg-blue-50 text-blue-900 p-6 rounded-[2rem] text-xs font-black border-2 border-blue-100 flex items-center gap-4">
                           <div className="bg-blue-100 p-3 rounded-2xl"><MapPin className="w-6 h-6 text-blue-600"/></div> Swimming Pool, Sport Complex IIUM Kuantan
                        </div>
                     ) : (
                        <div className="space-y-5 animate-in fade-in">
                           <div className="flex gap-3 mb-2">
                              <button onClick={()=>setDeliveryMode('lobby')} className={`flex-1 py-4 text-[11px] font-black uppercase tracking-widest rounded-2xl border-2 transition-all ${deliveryMode==='lobby'?'bg-gray-900 border-gray-900 text-white shadow-xl':'bg-white border-slate-100 text-slate-400'}`}>Lobby Pick-up</button>
                              <button onClick={()=>setDeliveryMode('room')} className={`flex-1 py-4 text-[11px] font-black uppercase tracking-widest rounded-2xl border-2 transition-all ${deliveryMode==='room'?'bg-gray-900 border-gray-900 text-white shadow-xl':'bg-white border-slate-100 text-slate-400'}`}>Room Delivery (+0.50)</button>
                           </div>
                           <div className="flex gap-3">
                              <input placeholder="Block" value={customerBlock} onChange={e=>setCustomerBlock(e.target.value)} className="w-1/2 bg-white p-5 rounded-2xl border-2 border-slate-200 text-sm font-bold outline-none text-gray-900 shadow-sm" />
                              {deliveryMode==='room' && <input placeholder="Room No." value={roomNumber} onChange={e=>setRoomNumber(e.target.value)} className="w-1/2 bg-white p-5 rounded-2xl border-2 border-slate-200 text-sm font-bold outline-none text-gray-900 shadow-sm" />}
                           </div>
                        </div>
                     )}
                  </div>
               </div>

               {/* PAYMENT METHOD */}
               <div className="bg-slate-50/50 p-8 rounded-[3rem] border border-slate-100 mb-14 shadow-inner font-sans font-bold">
                  <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest mb-5 flex items-center gap-2 px-2"><CreditCard className="w-5 h-5"/> Payment Options</h3>
                  <div className="flex gap-3">
                     <button onClick={()=>setPaymentMethod('cash')} className={`flex-1 py-5 rounded-[1.5rem] text-[11px] font-black uppercase tracking-widest border-2 transition-all ${paymentMethod==='cash'?'bg-green-50 border-green-500 text-green-900 shadow-md':'bg-white border-slate-100 text-slate-400'}`}>Pay Cash</button>
                     <button onClick={()=>{setPaymentMethod('qr'); setShowPaymentModal(true);}} className={`flex-1 py-5 rounded-[1.5rem] text-[11px] font-black uppercase tracking-widest border-2 flex items-center justify-center gap-3 transition-all ${paymentMethod==='qr'?'bg-blue-50 border-blue-500 text-blue-900 shadow-md':'bg-white border-slate-100 text-slate-400'}`}>
                         <Box className="w-5 h-5"/> DuitNow QR
                     </button>
                  </div>
               </div>

               {/* CHECKOUT BUTTON */}
               <button onClick={handleCheckout} className="w-full bg-gradient-to-r from-lime-400 to-lime-600 text-gray-900 py-7 rounded-[2.5rem] font-black text-xl shadow-2xl shadow-lime-200 hover:scale-[1.02] active:scale-[0.98] transition-all flex justify-between px-12 items-center border-t border-white/40">
                  <span className="font-serif italic text-2xl">Place Order</span>
                  <span className="bg-white/40 px-5 py-2.5 rounded-2xl font-black text-base border border-white/50 tracking-tighter leading-none font-mono">RM {calculateTotal().toFixed(2)}</span>
               </button>
            </div>
         </div>
      )}

      {/* QR MODAL */}
      {showPaymentModal && (
         <div className="fixed inset-0 bg-black/85 backdrop-blur-xl z-[200] flex items-center justify-center p-4">
            <div className="bg-white w-full max-w-sm rounded-[3.5rem] p-10 shadow-2xl animate-in zoom-in-95 duration-300 border border-white/50 overflow-y-auto max-h-[92vh]">
               <div className="flex justify-between items-center mb-8">
                  <h3 className="text-2xl font-bold font-serif text-gray-900">DuitNow Payment</h3>
                  <button onClick={()=>setShowPaymentModal(false)} className="bg-slate-100 p-2.5 rounded-full text-slate-500 hover:text-gray-900 transition-colors"><X className="w-4 h-4"/></button>
               </div>
               
               <div className="relative group mb-10">
                  <img src={DUITNOW_QR_URL} className="w-full max-w-[220px] mx-auto rounded-[3rem] border-8 border-white shadow-2xl mix-blend-multiply group-hover:scale-110 transition-transform duration-700" />
               </div>
               <div className="bg-slate-50 p-6 rounded-[2rem] text-[10px] font-black uppercase tracking-widest space-y-4 mb-10 border border-slate-100 shadow-inner font-sans font-bold">
                  <p className="flex justify-between text-slate-400"><span>Bank Service</span><span className="text-slate-900">RHB BANK</span></p>
                  <p className="flex justify-between text-slate-400"><span>Acc Number</span><span className="text-slate-900 font-mono text-xs">11306160255276</span></p>
                  <p className="flex justify-between text-blue-600 pt-5 border-t border-dashed border-slate-200 text-lg font-black tracking-tighter"><span>Total to Pay</span><span>RM {calculateTotal().toFixed(2)}</span></p>
               </div>
               <div className="mb-10 font-sans font-bold">
                  <label className={`block w-full border-4 border-dashed rounded-[2.5rem] p-8 text-center cursor-pointer transition-all duration-300 ${receiptImage ? 'border-green-400 bg-green-50' : 'border-slate-200 hover:border-blue-400'}`}>
                     <input type="file" accept="image/*" onChange={handleReceiptUpload} className="hidden" />
                     {receiptImage ? (
                        <div className="animate-in fade-in zoom-in duration-300">
                           <div className="w-14 h-14 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-xl shadow-green-200"><Check className="w-8 h-8" strokeWidth={5}/></div>
                           <p className="text-[10px] font-black text-green-700 uppercase tracking-widest font-sans">Receipt Attached!</p>
                        </div>
                     ) : (
                        <div className="py-2">
                           <Upload className="w-10 h-10 text-blue-500 mx-auto mb-4 opacity-50" />
                           <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none font-sans">Tap to Attach Receipt</p>
                           <p className="text-[9px] text-red-400 font-bold mt-3 leading-none italic font-sans">* Mandatory for verification</p>
                        </div>
                     )}
                  </label>
               </div>
               <button onClick={submitOrder} disabled={!receiptImage || isLoading} className={`w-full py-6 rounded-[2rem] font-black text-lg transition-all flex items-center justify-center gap-4 ${receiptImage ? 'bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-2xl shadow-blue-200 hover:scale-[1.02]' : 'bg-slate-100 text-slate-300 border border-slate-200 cursor-not-allowed font-sans font-bold'}`}>
                   {isLoading ? <Loader2 className="animate-spin w-7 h-7"/> : 'Confirm & Submit'}
               </button>
               <button onClick={()=>setShowPaymentModal(false)} className="w-full mt-6 text-slate-400 text-[10px] font-black uppercase tracking-[0.2em] hover:text-gray-900 transition-colors font-sans">Cancel Payment</button>
            </div>
         </div>
      )}

      {/* GAME MODAL */}
      {showGameModal && (
         <div className="fixed inset-0 bg-black/90 backdrop-blur-md z-[120] flex items-center justify-center p-4">
            <div className="bg-white/95 backdrop-blur-xl w-full max-w-sm rounded-[3.5rem] p-10 relative animate-in zoom-in-95 duration-300 border border-white/20 shadow-2xl">
               <div className="text-center font-sans font-bold">
                  <h2 className="text-4xl font-black italic uppercase mb-10 flex justify-center items-center gap-3 text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-pink-600 font-serif tracking-tighter"><Zap className="text-orange-500 fill-current w-8 h-8"/> Fight!</h2>
                  {gameStatus === 'won' ? (
                     <div className="animate-in zoom-in duration-500">
                        <div className="w-28 h-28 bg-yellow-100 rounded-[2.5rem] flex items-center justify-center mx-auto mb-8 shadow-xl border-4 border-white"><Trophy className="w-14 h-14 text-yellow-500"/></div>
                        <h3 className="font-black text-3xl mb-2 text-gray-900 font-serif tracking-tight">You Won!</h3>
                        <p className="text-sm text-gray-500 mb-10 font-medium">Claim your reward now!</p>
                        <div className="space-y-4 mb-10 text-left bg-gray-50 p-6 rounded-[2.5rem] border border-gray-100 shadow-inner">
                           <input className="w-full bg-white border border-gray-200 p-4 rounded-xl text-sm font-bold outline-none text-gray-900" placeholder="Name" onChange={e=>setTrialCustomer({...trialCustomer,name:e.target.value})} />
                           <input className="w-full bg-white border border-gray-200 p-4 rounded-xl text-sm font-bold outline-none text-gray-900" placeholder="Matric No" onChange={e=>setTrialCustomer({...trialCustomer,matric:e.target.value})} />
                           <div className="flex gap-2">
                              {['Watermelon','Orange','Lemon'].map(f=>(
                                 <button key={f} onClick={()=>setTrialCustomer({...trialCustomer,choice:f})} className={`flex-1 py-3 text-[10px] font-black uppercase tracking-widest border-2 rounded-xl transition-all ${trialCustomer.choice===f?'bg-yellow-400 border-yellow-400 text-yellow-900 scale-105 shadow-md':'bg-white border-gray-100 text-gray-400'}`}>{f}</button>
                              ))}
                           </div>
                        </div>
                        <button onClick={submitTrialClaim} disabled={isLoading} className="w-full bg-gradient-to-r from-gray-900 to-black text-white py-5 rounded-2xl font-black text-lg shadow-xl hover:scale-[1.02] flex justify-center items-center gap-3 active:scale-95 transition-all">{isLoading ? <Loader2 className="w-6 h-6 animate-spin"/> : <><Gift className="w-5 h-5"/> Claim Reward</>}</button>
                     </div>
                  ) : (
                     <>
                        <div className="grid grid-cols-3 gap-4 mb-10 max-w-[280px] mx-auto bg-gray-100/50 p-5 rounded-[3rem] border border-gray-200 shadow-inner">
                           {gameBoard.map((c, i) => (
                              <button key={i} onClick={() => handleGameClick(i)} disabled={c !== null || gameStatus !== 'playing'} className={`h-20 rounded-3xl text-4xl font-black transition-all shadow-md flex items-center justify-center ${c === 'X' ? 'bg-gradient-to-br from-blue-500 to-blue-700 text-white scale-110 shadow-blue-500/20' : c === 'O' ? 'bg-gradient-to-br from-red-500 to-red-700 text-white scale-110 shadow-red-500/20' : 'bg-white hover:bg-gray-50 text-gray-200'}`}>{c}</button>
                           ))}
                        </div>
                        <div className="flex items-center justify-center gap-3 mb-10 font-sans font-black uppercase tracking-widest text-xs text-gray-400">
                           <div className={`w-3 h-3 rounded-full animate-pulse ${gameStatus === 'playing' ? (isPlayerTurn ? 'bg-blue-500' : 'bg-red-500') : 'bg-gray-300'}`}></div>
                           <p>{gameStatus==='playing'? (isPlayerTurn?"Your Turn (X)":"Bot Turn") : (gameStatus==='lost'?"Defeat!":"Draw!")}</p>
                        </div>
                        {gameStatus!=='playing' && <button onClick={initGame} className="mt-2 bg-gray-900 text-white px-12 py-5 rounded-2xl text-[10px] font-black uppercase tracking-widest shadow-2xl hover:scale-105 flex items-center justify-center gap-3 mx-auto transition-all active:scale-95"><RefreshCcw className="w-4 h-4"/> New Game</button>}
                        <button onClick={()=>setShowGameModal(false)} className="absolute top-8 right-8 bg-gray-100 p-2.5 rounded-full text-gray-400 hover:text-gray-900 transition-colors"><X className="w-6 h-6"/></button>
                     </>
                  )}
               </div>
            </div>
         </div>
      )}

      {/* VIEW RECEIPT (ADMIN) */}
      {viewingReceipt && (
         <div className="fixed inset-0 z-[300] bg-black/95 backdrop-blur-xl flex items-center justify-center p-4 cursor-zoom-out" onClick={()=>setViewingReceipt(null)}>
            <img src={viewingReceipt} className="max-w-full max-h-[85vh] rounded-3xl shadow-2xl animate-in zoom-in-95 duration-500 border border-white/10" />
            <div className="absolute bottom-10 bg-white/10 text-white px-6 py-3 rounded-full backdrop-blur-md text-[10px] font-black uppercase tracking-widest border border-white/20 animate-bounce">Click to Close</div>
         </div>
      )}

      {/* ORDER CONFIRMATION */}
      {activeVoucher && (
         <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[300] flex items-center justify-center p-4 animate-in fade-in duration-700">
            <div className="bg-white w-full max-w-sm rounded-[4rem] p-12 text-center shadow-2xl relative overflow-hidden font-sans font-bold">
               <div className="absolute top-0 left-0 right-0 h-48 bg-gradient-to-b from-lime-100/30 to-transparent -z-10"></div>
               <div className="bg-white w-32 h-32 rounded-[2.5rem] flex items-center justify-center mx-auto mb-10 shadow-2xl border-4 border-white"><Check className="w-16 h-16 text-lime-500" strokeWidth={5}/></div>
               <h2 className="text-4xl font-black mb-4 text-gray-900 font-serif tracking-tight italic">Success!</h2>
               <p className="text-slate-500 mb-12 font-bold text-base leading-relaxed">Your order is on the way! Your discount voucher has been emailed.</p>
               <div className="bg-slate-50 border-2 border-slate-100 p-6 rounded-[2rem] mb-12 border-dashed flex flex-col items-center gap-2 group hover:border-lime-500 transition-colors">
                  <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest font-sans">Next Order Code</span>
                  <span className="font-black text-gray-900 tracking-[0.1em] text-2xl font-mono">{activeVoucher.code}</span>
               </div>
               <button onClick={()=>setActiveVoucher(null)} className="w-full bg-gray-900 text-white py-5 rounded-[2rem] font-black text-lg hover:shadow-2xl transition-all active:scale-95 shadow-xl uppercase tracking-widest font-sans">Finish</button>
            </div>
         </div>
      )}
    </div>
  );
}