import React, { useState, useEffect, useCallback, createContext, useContext } from 'react';
import { initializeApp } from 'firebase/app';
// FIX: Explicitly import signInWithCustomToken to prevent 'is not a function' error
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth'; 
import { getFirestore, doc, setDoc, setLogLevel } from 'firebase/firestore';

// --- Global Setup (Required by Canvas) ---
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

// Context for state sharing
const AppContext = createContext();

// --- Language Data (English and Thai) ---
const translations = {
    en: {
        title: "Your Top Pool & Hostess Bar",
        subtitle: "Best Spot on Sukhumvit Soi 7/1 (Near Nana BTS)",
        tagline: "Ice-cold beers, great company, and Bangkok's friendliest staff waiting for you.",
        findGame: "Find Your Game",
        vibeTitle: "What We Offer",
        vibeSubtitle: "The Experience",
        featurePool: "Professional Pool Table",
        featurePoolDesc: "Challenge staff or guests. Only 20 Baht per game for the best table on Soi 7/1.",
        featureHostess: "Friendly Hostesses",
        featureHostessDesc: "Enjoy warm, welcoming service and great conversation with our lovely staff.",
        menuTitle: "Bar Menu & Clear Prices",
        menuSubtitle: "Transparency is Key",
        beerLocal: "Local (Chang, Singha, Leo)",
        beerImport: "Import (Heineken, Asahi)",
        spirits: "Spirits & Mixers",
        hostessPolicy: "Hostess Drink Policy",
        hostessPrice: "300 THB",
        hostessInfo: "This price is non-negotiable and ensures excellent service and company.",
        specialsTitle: "Claim Your Free Game Time",
        specialsSubtitle: "Exclusive Online Offers",
        poolPackage: "Pool Master Package",
        poolDesc: "Pre-purchase a set of games online and maximize your time on the best table in the area.",
        poolOffer: "Buy 5 Games, Get 2 Games FREE!",
        poolPriceNote: "That's 7 games for only 100 THB.",
        poolRedeem: "Show this voucher to the staff on your next visit to redeem.",
        hostessVoucher: "VIP Hostess Welcome",
        hostessVoucherDesc: "Sign up to receive a digital voucher for 50% OFF your first Hostess Drink purchase.",
        loginAnon: "Claim Voucher",
        eventsTitle: "Upcoming Magic Table Events",
        eventsSubtitle: "What's Happening This Week",
        eventPool: "Soi 7/1 Pool Tournament",
        eventPoolTime: "Every Wednesday, 9:00 PM. Cash prizes for the winner. Sign up at the bar!",
        eventLadies: "Ladies' Pink Night",
        eventLadiesTime: "Every Friday, 7:00 PM to 11:00 PM. Half-price drinks for all ladies.",
        locationTitle: "Find Us Easily",
        location: "Location",
        locationAddress: "The Magic Table, 25 Sukhumvit Soi 7/1, Khlong Toei, Bangkok 10110.",
        locationNote: "Just a 5-minute walk from Nana BTS Station.",
        hours: "Hours",
        hoursTime: "Open Daily: 7:00 PM until late (approx. 2:00 AM)",
        contact: "Contact",
        contactNumber: "+66 81 123 4567",
        getDirections: "Get Directions",
        footer: "Designed for Bangkok nightlife."
    },
    th: {
        title: "บาร์พูลและโฮสเตสอันดับ 1 ของคุณ",
        subtitle: "จุดที่ดีที่สุดบนสุขุมวิทซอย 7/1 (ใกล้ BTS นานา)",
        tagline: "เบียร์เย็นเจี๊ยบ บริษัทที่ดี และพนักงานที่เป็นมิตรที่สุดในกรุงเทพฯ รอคุณอยู่",
        findGame: "มาเล่นกันเลย",
        vibeTitle: "สิ่งที่เรานำเสนอ",
        vibeSubtitle: "ประสบการณ์",
        featurePool: "โต๊ะพูลมืออาชีพ",
        featurePoolDesc: "ท้าทายพนักงานหรือแขก ค่าบริการเพียง 20 บาทต่อเกม สำหรับโต๊ะที่ดีที่สุดในซอย 7/1",
        featureHostess: "โฮสเตสที่เป็นมิตร",
        featureHostessDesc: "เพลิดเพลินกับการบริการที่อบอุ่นและเป็นกันเอง และการสนทนาที่ยอดเยี่ยมกับพนักงานที่น่ารักของเรา",
        menuTitle: "เมนูบาร์และราคาที่ชัดเจน",
        menuSubtitle: "ความโปร่งใสคือกุญแจสำคัญ",
        beerLocal: "เบียร์ท้องถิ่น (ช้าง, สิงห์, ลีโอ)",
        beerImport: "เบียร์นำเข้า (ไฮเนเก้น, อาซาฮี)",
        spirits: "สุราและมิกเซอร์",
        hostessPolicy: "นโยบายเครื่องดื่มโฮสเตส",
        hostessPrice: "300 บาท",
        hostessInfo: "ราคานี้ไม่สามารถต่อรองได้และรับประกันบริการและบริษัทที่ยอดเยี่ยม",
        specialsTitle: "รับเวลาเล่นเกมฟรีของคุณ",
        specialsSubtitle: "ข้อเสนอพิเศษออนไลน์",
        poolPackage: "แพ็คเกจปรมาจารย์พูล",
        poolDesc: "ซื้อชุดเกมล่วงหน้าออนไลน์และใช้เวลาของคุณให้คุ้มค่าที่สุดบนโต๊ะที่ดีที่สุดในพื้นที่",
        poolOffer: "ซื้อ 5 เกม รับฟรี 2 เกม!",
        poolPriceNote: "นั่นคือ 7 เกมในราคาเพียง 100 บาท",
        poolRedeem: "แสดงบัตรกำนัลนี้ต่อพนักงานในการเยี่ยมชมครั้งต่อไปเพื่อแลกรับ",
        hostessVoucher: "การต้อนรับโฮสเตส VIP",
        hostessVoucherDesc: "ลงทะเบียนเพื่อรับบัตรกำนัลดิจิทัล ลด 50% สำหรับการซื้อเครื่องดื่มโฮสเตสครั้งแรกของคุณ",
        loginAnon: "รับบัตรกำนัล",
        eventsTitle: "กิจกรรม Magic Table ที่กำลังจะมาถึง",
        eventsSubtitle: "เกิดอะไรขึ้นในสัปดาห์นี้",
        eventPool: "ทัวร์นาเมนต์พูลซอย 7/1",
        eventPoolTime: "ทุกวันพุธ เวลา 21:00 น. รางวัลเงินสดสำหรับผู้ชนะ ลงทะเบียนได้ที่บาร์!",
        eventLadies: "คืนสีชมพูสำหรับสุภาพสตรี",
        eventLadiesTime: "ทุกวันศุกร์ เวลา 19:00 น. ถึง 23:00 น. เครื่องดื่มลดครึ่งราคาสำหรับสุภาพสตรีทุกคน",
        locationTitle: "ค้นหาเราได้ง่ายๆ",
        location: "ที่ตั้ง",
        locationAddress: "The Magic Table, 25 สุขุมวิทซอย 7/1, คลองเตย, กรุงเทพฯ 10110",
        locationNote: "เดินเพียง 5 นาทีจากสถานี BTS นานา",
        hours: "เวลาทำการ",
        hoursTime: "เปิดทุกวัน: 19:00 น. จนถึงดึก (ประมาณ 02:00 น.)",
        contact: "ติดต่อ",
        contactNumber: "+66 81 123 4567",
        getDirections: "ขอเส้นทาง",
        footer: "ออกแบบมาสำหรับสถานบันเทิงยามค่ำคืนของกรุงเทพฯ"
    }
};

// --- Custom Hook for Language Context ---
const useLanguage = () => {
    const context = useContext(AppContext);
    if (!context) {
        throw new Error('useLanguage must be used within an AppProvider');
    }
    return context;
};

// --- App Provider Component ---
const AppProvider = ({ children }) => {
    const [lang, setLang] = useState('en');
    const [t, setT] = useState(translations.en);

    // Function to change language and update state
    const changeLanguage = useCallback((newLang) => {
        setLang(newLang);
        setT(translations[newLang]);
        localStorage.setItem('magicTableLang', newLang);
    }, []);

    // Load language preference from local storage on mount
    useEffect(() => {
        const savedLang = localStorage.getItem('magicTableLang');
        if (savedLang && translations[savedLang]) {
            changeLanguage(savedLang);
        }
    }, [changeLanguage]);

    return (
        <AppContext.Provider value={{ lang, t, changeLanguage }}>
            {children}
        </AppContext.Provider>
    );
};

// --- Firebase Context and Hook (Optimized for Anonymous Auth) ---
const FirebaseContext = createContext();

const useFirebase = () => {
    const context = useContext(FirebaseContext);
    if (!context) {
        throw new Error('useFirebase must be used within FirebaseProvider');
    }
    return context;
};

const FirebaseProvider = ({ children }) => {
    const [db, setDb] = useState(null);
    const [auth, setAuth] = useState(null);
    const [userId, setUserId] = useState(null);
    const [isAuthReady, setIsAuthReady] = useState(false);
    
    useEffect(() => {
        let unsubscribe = () => {};

        try {
            if (Object.keys(firebaseConfig).length > 0) {
                const app = initializeApp(firebaseConfig);
                const firestore = getFirestore(app);
                const authService = getAuth(app);
                setDb(firestore);
                setAuth(authService);
                setLogLevel('error');

                // Sign in logic
                const attemptAuth = async () => {
                    try {
                        // FIX: Now calling the correctly imported function
                        if (initialAuthToken) {
                            await signInWithCustomToken(authService, initialAuthToken); 
                        } else {
                            await signInAnonymously(authService);
                        }
                    } catch (e) {
                        console.error("Initial Auth Failed, falling back to anonymous:", e);
                        await signInAnonymously(authService);
                    }
                };

                attemptAuth();

                unsubscribe = onAuthStateChanged(authService, (user) => {
                    setUserId(user ? user.uid : null);
                    setIsAuthReady(true);
                });
            } else {
                // Mock ready if Firebase config is missing
                setUserId(crypto.randomUUID()); 
                setIsAuthReady(true);
            }
        } catch (error) {
            console.error("Firebase Initialization Error:", error);
            setIsAuthReady(true); // Ensure app proceeds even on error
        }

        return () => unsubscribe();
    }, []);

    const value = { db, auth, userId, isAuthReady };
    return (
        <FirebaseContext.Provider value={value}>
            {children}
        </FirebaseContext.Provider>
    );
};

// --- Utility Components ---

const MessageBox = () => {
    const [message, setMessage] = useState('');
    const [type, setType] = useState('success');
    const [visible, setVisible] = useState(false);

    // Expose utility function to window object for global use
    useEffect(() => {
        window.showMessage = (msg, msgType = 'success') => {
            setMessage(msg);
            setType(msgType);
            setVisible(true);
            setTimeout(() => setVisible(false), 4000);
        };
    }, []);

    if (!visible) return null;

    const bgColor = type === 'success' ? 'bg-emerald-500' : 'bg-red-500';

    return (
        <div 
            className={`fixed top-4 right-4 z-50 p-4 rounded-lg shadow-2xl max-w-sm text-white font-semibold transition-transform duration-300 ${bgColor} ${visible ? 'translate-x-0' : 'translate-x-full'}`}
        >
            {message}
        </div>
    );
};

// --- Main App Components ---

const Header = () => {
    const { lang, t, changeLanguage } = useLanguage();

    return (
        <header className="sticky top-0 z-50 bg-slate-900/90 backdrop-blur-sm shadow-xl shadow-gray-900/50">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
                <h1 className="text-3xl font-extrabold text-cyan-400 [text-shadow:0_0_10px_#22D3EE] tracking-wider">
                    THE MAGIC TABLE
                </h1>
                <div className="flex items-center space-x-4">
                    <nav className="hidden md:block space-x-4">
                        <a href="#vibe" className="text-gray-300 hover:text-cyan-400 transition">Vibe</a>
                        <a href="#menu" className="text-gray-300 hover:text-cyan-400 transition">Menu</a>
                        <a href="#incentives" className="text-gray-300 hover:text-cyan-400 transition">Specials</a>
                        <a href="#events" className="text-gray-300 hover:text-cyan-400 transition">Events</a>
                        <a href="#location" className="text-gray-300 hover:text-cyan-400 transition">Location</a>
                    </nav>
                    <div className="flex items-center space-x-2 border border-gray-700 rounded-lg p-0.5">
                        <button 
                            className={`text-sm font-semibold px-2 py-1 rounded transition ${lang === 'en' ? 'bg-pink-500 text-white' : 'text-gray-400 hover:text-white'}`} 
                            onClick={() => changeLanguage('en')}
                        >
                            EN
                        </button>
                        <button 
                            className={`text-sm font-semibold px-2 py-1 rounded transition ${lang === 'th' ? 'bg-pink-500 text-white' : 'text-gray-400 hover:text-white'}`} 
                            onClick={() => changeLanguage('th')}
                        >
                            TH
                        </button>
                    </div>
                </div>
            </div>
        </header>
    );
};

const Hero = () => {
    const { t } = useLanguage();
    return (
        <section id="hero" className="relative h-[85vh] flex items-center justify-center text-center bg-cover bg-center"
            style={{ backgroundImage: "url('https://placehold.co/1200x800/1E293B/22D3EE?text=Vibrant+Pool+Hall+Scene')" }}>
            <div className="absolute inset-0 bg-slate-900/70"></div>
            <div className="relative max-w-4xl px-4">
                <p className="text-xl sm:text-2xl text-pink-500 font-medium mb-4">{t.subtitle}</p>
                <h2 className="text-6xl sm:text-7xl lg:text-8xl font-black text-white leading-tight mb-6 uppercase [text-shadow:0_0_20px_#22D3EE] neon-glow">
                    {t.title}
                </h2>
                <p className="text-xl sm:text-2xl text-gray-300 mb-8 max-w-lg mx-auto">{t.tagline}</p>
                <a href="#location" className="bg-red-600 text-white font-bold py-4 px-10 rounded-full text-xl shadow-2xl shadow-red-600/50 hover:bg-red-700 transition transform hover:scale-105">
                    {t.findGame}
                </a>
            </div>
        </section>
    );
};

const Features = () => {
    const { t } = useLanguage();
    return (
        <section id="vibe" className="py-16 md:py-24 max-w-7xl mx-auto px-6 lg:px-8">
            <div className="text-center mb-16">
                <p className="text-lg text-pink-500 mb-2">{t.vibeSubtitle}</p>
                <h3 className="text-4xl font-bold text-white">{t.vibeTitle}</h3>
            </div>
            <div className="grid sm:grid-cols-1 md:grid-cols-3 gap-10 text-center">
                <div className="bg-gray-800/50 p-6 rounded-xl shadow-2xl border border-gray-700 hover:border-cyan-400 transition">
                    <span className="text-5xl mb-4 inline-block text-cyan-400">🎱</span>
                    <h4 className="text-2xl font-semibold text-white mb-3">{t.featurePool}</h4>
                    <p className="text-gray-400">{t.featurePoolDesc}</p>
                </div>
                <div className="bg-gray-800/50 p-6 rounded-xl shadow-2xl border border-gray-700 hover:border-cyan-400 transition">
                    <span className="text-5xl mb-4 inline-block text-pink-500">🥂</span>
                    <h4 className="text-2xl font-semibold text-white mb-3">{t.featureHostess}</h4>
                    <p className="text-gray-400">{t.featureHostessDesc}</p>
                </div>
                <div className="bg-gray-800/50 p-6 rounded-xl shadow-2xl border border-gray-700 hover:border-cyan-400 transition">
                    <span className="text-5xl mb-4 inline-block text-cyan-400">🎵</span>
                    <h4 className="text-2xl font-semibold text-white mb-3">Cold Drinks & Music</h4>
                    <p className="text-gray-400">{t.tagline}</p>
                </div>
            </div>
        </section>
    );
};

const Menu = () => {
    const { t } = useLanguage();
    return (
        <section id="menu" className="bg-slate-900/40 py-16 md:py-24">
            <div className="max-w-4xl mx-auto px-6 lg:px-8">
                <div className="text-center mb-12">
                    <p className="text-lg text-pink-500 mb-2">{t.menuSubtitle}</p>
                    <h3 className="text-4xl font-bold text-white">{t.menuTitle}</h3>
                </div>

                <div className="bg-gray-800/70 p-8 rounded-xl shadow-2xl border border-cyan-400/50 space-y-8">
                    
                    <div className="border-b border-gray-700 pb-6">
                        <h4 className="text-2xl font-bold text-cyan-400 mb-4">Beers</h4>
                        <div className="space-y-3">
                            <div className="flex justify-between text-lg">
                                <span className="font-medium text-gray-200">{t.beerLocal}</span>
                                <span className="text-cyan-400 font-bold">120 THB</span>
                            </div>
                            <div className="flex justify-between text-lg">
                                <span className="font-medium text-gray-200">{t.beerImport}</span>
                                <span className="text-cyan-400 font-bold">180 THB</span>
                            </div>
                        </div>
                    </div>

                    <div className="border-b border-gray-700 pb-6">
                        <h4 className="text-2xl font-bold text-cyan-400 mb-4">{t.spirits}</h4>
                        <div className="space-y-3">
                            <div className="flex justify-between text-lg">
                                <span className="font-medium text-gray-200">House Pour (Whisky, Gin, Vodka)</span>
                                <span className="text-cyan-400 font-bold">200 THB</span>
                            </div>
                            <div className="flex justify-between text-lg">
                                <span className="font-medium text-gray-200">Mixer (Soda, Coke, Tonic)</span>
                                <span className="text-cyan-400 font-bold">40 THB</span>
                            </div>
                        </div>
                    </div>

                    <div className="pt-2">
                        <h4 className="text-2xl font-bold text-pink-500 mb-4">{t.hostessPolicy}</h4>
                        <div className="flex justify-between text-xl font-extrabold bg-gray-900/50 p-3 rounded-lg">
                            <span>Hostess Drink</span>
                            <span className="text-pink-500">{t.hostessPrice}</span>
                        </div>
                        <p className="text-sm text-gray-400 mt-2">{t.hostessInfo}</p>
                    </div>
                </div>
            </div>
        </section>
    );
};

const Incentives = () => {
    const { t } = useLanguage();
    const { db, userId, isAuthReady } = useFirebase();
    const [email, setEmail] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);

    const handleSignup = useCallback(async (e) => {
        e.preventDefault();
        if (!email || isSubmitting || !isAuthReady) return;

        setIsSubmitting(true);
        try {
            if (!db) {
                window.showMessage("Database connection error. Try again later.", 'error');
                return;
            }

            // Path: /artifacts/{appId}/users/{userId}/leads/{documentId}
            const leadsCollectionRef = doc(db, `artifacts/${appId}/users/${userId}/leads/${crypto.randomUUID()}`);
            
            await setDoc(leadsCollectionRef, {
                email: email,
                type: 'Hostess_Voucher',
                timestamp: new Date().toISOString(),
                // Anonymous UID is used as the user identifier
            });

            window.showMessage("Success! Your voucher code has been saved.", 'success');
            setEmail('');

        } catch (error) {
            console.error("Signup Error:", error);
            window.showMessage("Failed to claim voucher. Try again later.", 'error');
        } finally {
            setIsSubmitting(false);
        }
    }, [email, db, userId, isAuthReady]);

    return (
        <section id="incentives" className="py-16 md:py-24 max-w-7xl mx-auto px-6 lg:px-8">
            <div className="text-center mb-16">
                <p className="text-lg text-pink-500 mb-2">{t.specialsSubtitle}</p>
                <h3 className="text-4xl font-bold text-white">{t.specialsTitle}</h3>
            </div>

            <div className="grid md:grid-cols-2 gap-12">
                {/* Pool Special Card */}
                <div className="bg-gray-800 p-8 rounded-xl shadow-2xl border border-cyan-400/50">
                    <h4 className="text-3xl font-bold text-cyan-400 mb-3">{t.poolPackage}</h4>
                    <p className="text-gray-400 mb-6">{t.poolDesc}</p>
                    <div className="text-center bg-gray-900 p-6 rounded-lg mb-8 border border-dashed border-pink-500">
                        <p className="text-4xl font-black text-pink-500">{t.poolOffer}</p>
                        <p className="text-lg text-gray-300 mt-2">{t.poolPriceNote}</p>
                    </div>
                    <p className="text-center text-sm text-gray-500 italic">{t.poolRedeem}</p>
                </div>
                
                {/* Hostess Voucher & Lead Form */}
                <div id="voucher-card" className="bg-gray-800 p-8 rounded-xl shadow-2xl border border-pink-500/50">
                    <h4 className="text-3xl font-bold text-pink-500 mb-3">{t.hostessVoucher}</h4>
                    <p className="text-gray-400 mb-6">{t.hostessVoucherDesc}</p>
                    
                    <p className="text-center text-gray-500 mt-6 mb-4">Enter your email to claim:</p>

                    <form onSubmit={handleSignup} className="space-y-4">
                        <input 
                            type="email" 
                            placeholder="Your Email Address" 
                            required 
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            className="w-full p-3 rounded-lg bg-gray-700 border border-gray-600 focus:ring-pink-500 focus:border-pink-500 text-white"
                        />
                        <button 
                            type="submit" 
                            disabled={isSubmitting || !isAuthReady}
                            className="w-full bg-red-600 text-white font-bold py-3 rounded-full hover:bg-red-700 transition disabled:opacity-50"
                        >
                            {isSubmitting ? 'Saving...' : t.loginAnon}
                        </button>
                    </form>
                    <p className="text-xs text-gray-500 mt-2 text-center">Using anonymous sign-in to secure your voucher.</p>
                </div>
            </div>
        </section>
    );
};

const Events = () => {
    const { t } = useLanguage();
    return (
        <section id="events" className="bg-slate-900/40 py-16 md:py-24">
            <div className="max-w-7xl mx-auto px-6 lg:px-8">
                <div className="text-center mb-12">
                    <p className="text-lg text-cyan-400 mb-2">{t.eventsSubtitle}</p>
                    <h3 className="text-4xl font-bold text-white">{t.eventsTitle}</h3>
                </div>

                <div className="grid md:grid-cols-3 gap-8">
                    {/* Event Card 1: Pool Tournament */}
                    <div className="bg-gray-800 p-6 rounded-xl shadow-xl border border-cyan-400/50">
                        <h4 className="text-2xl font-bold text-white mb-2">{t.eventPool}</h4>
                        <p className="text-pink-500 mb-4">{t.eventPoolTime}</p>
                        <p className="text-gray-400">Challenge the best players in the area and show off your skills.</p>
                    </div>
                    {/* Event Card 2: Ladies' Night */}
                    <div className="bg-gray-800 p-6 rounded-xl shadow-xl border border-pink-500/50">
                        <h4 className="text-2xl font-bold text-white mb-2">{t.eventLadies}</h4>
                        <p className="text-cyan-400 mb-4">{t.eventLadiesTime}</p>
                        <p className="text-gray-400">Bring your friends and start your weekend with the best vibes.</p>
                    </div>
                    {/* Event Card 3: Weekend DJ */}
                    <div className="bg-gray-800 p-6 rounded-xl shadow-xl border border-cyan-400/50">
                        <h4 className="text-2xl font-bold text-white mb-2">Weekend Vibe Sessions</h4>
                        <p className="text-pink-500 mb-4">Saturday & Sunday. Live DJ spinning classics and feel-good music.</p>
                        <p className="text-gray-400">Keep the party going late into the night with our resident DJ.</p>
                    </div>
                </div>
            </div>
        </section>
    );
};

const Location = () => {
    const { t } = useLanguage();
    return (
        <section id="location" className="bg-slate-900/40 py-16 md:py-24">
            <div className="max-w-7xl mx-auto px-6 lg:px-8 grid md:grid-cols-2 gap-12 items-center">
                
                {/* Contact Info */}
                <div className="space-y-8">
                    <h3 className="text-4xl font-bold text-white">{t.locationTitle}</h3>
                    
                    <div>
                        <p className="text-lg font-semibold text-cyan-400 mb-1">{t.location}</p>
                        <p className="text-gray-300">{t.locationAddress}</p>
                        <p className="text-sm text-gray-500 mt-1">{t.locationNote}</p>
                    </div>

                    <div>
                        <p className="text-lg font-semibold text-cyan-400 mb-1">{t.hours}</p>
                        <p className="text-gray-300">{t.hoursTime}</p>
                    </div>
                    
                    <div>
                        <p className="text-lg font-semibold text-cyan-400 mb-1">{t.contact}</p>
                        <p className="text-gray-300">Call: {t.contactNumber}</p>
                    </div>
                </div>

                {/* Google Map Embed & Directions Link */}
                <div>
                    <div className="rounded-xl overflow-hidden shadow-2xl border-4 border-cyan-400/50">
                         {/* Stable Google Map Embed */}
                        <iframe 
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.589883582103!2d100.55181737508499!3d13.74315368664155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29ed922b9c79f%3A0x86134b2f15591322!2sSukhumvit%20Soi%207%2F1%2C%20Khlong%20Toei%20Nuea%2C%20Watthana%2C%20Bangkok%2010110%2C%20Thailand!5e0!3m2!1sen!2sth!4v1700000000000!5m2!1sen!2sth" 
                            width="100%" 
                            height="300" 
                            style={{ border: 0 }} 
                            allowFullScreen="" 
                            loading="lazy" 
                            referrerPolicy="no-referrer-when-downgrade"
                            title="The Magic Table Location Map">
                        </iframe>
                    </div>
                    {/* Direct link for directions */}
                    <a href="https://www.google.com/maps/dir/?api=1&destination=The+Magic+Table,+25+Sukhumvit+Soi+7%2F1,+Bangkok" target="_blank" rel="noopener noreferrer" className="mt-4 block text-center bg-red-600 text-white font-bold py-3 rounded-full hover:bg-red-700 transition">
                        {t.getDirections}
                    </a>
                </div>
            </div>
        </section>
    );
};

const Footer = () => {
    const { t } = useLanguage();
    return (
        <footer className="bg-slate-900 border-t border-gray-800 py-6 text-center">
            <p className="text-gray-500 text-sm">
                &copy; {new Date().getFullYear()} The Magic Table Bar. All rights reserved. | {t.footer}
            </p>
        </footer>
    );
};

// --- Main App Component ---
const App = () => {
    // Inject custom styles globally for the neon effect
    useEffect(() => {
        const style = document.createElement('style');
        style.innerHTML = `
            body { font-family: 'Inter', sans-serif; background-color: #0F172A; }
            .neon-glow { text-shadow: 0 0 5px #22D3EE, 0 0 10px #22D3EE, 0 0 20px #22D3EE; letter-spacing: 0.05em; }
        `;
        document.head.appendChild(style);
        return () => document.head.removeChild(style);
    }, []);

    return (
        <AppProvider>
            <FirebaseProvider>
                <div className="bg-slate-900 min-h-screen text-gray-100 antialiased">
                    <MessageBox />
                    <Header />
                    <main>
                        <Hero />
                        <Features />
                        <Menu />
                        <Incentives />
                        <Events />
                        <Location />
                    </main>
                    <Footer />
                </div>
            </FirebaseProvider>
        </AppProvider>
    );
};

export default App;