import React, { useState, useEffect, useMemo } from 'react';
import { createRoot } from 'react-dom/client';
import { 
  ShoppingBag, 
  X, 
  ChevronRight, 
  Flame, 
  Star, 
  MapPin, 
  MessageSquare, 
  Plus,
  Minus,
  Trash2,
  Clock,
  ArrowRight,
  Instagram,
  Twitter,
  Youtube,
  Phone,
  RefreshCw,
  Award,
  ExternalLink
} from 'lucide-react';
import { GoogleGenAI, Type } from '@google/genai';
import { motion, AnimatePresence } from 'framer-motion';

// --- Types ---
interface MenuItem {
  id: number;
  name: string;
  price: number;
  description: string;
  category: 'beef' | 'chicken' | 'veggie' | 'special';
  image: string;
  tags: string[];
}

interface CartItem extends MenuItem {
  quantity: number;
}

interface AiSuggestion {
  text: string;
  recommendedItemId: number | null;
}

// --- Data ---
const MENU_ITEMS: MenuItem[] = [
  {
    id: 1,
    name: "Cyborg Prime",
    price: 48.90,
    description: "200g de blend Wagyu, cheddar inglês 12 meses, cebola caramelizada no Bourbon e aioli de carvão ativado.",
    category: 'beef',
    image: "https://images.unsplash.com/photo-1568901346375-23c9450c58cd?auto=format&fit=crop&q=80&w=800",
    tags: ["Best Seller", "Wagyu"]
  },
  {
    id: 2,
    name: "Neon Chicken",
    price: 36.50,
    description: "Frango crocante empanado na Panko com especiarias orientais, kimchi artesanal e molho de gergelim.",
    category: 'chicken',
    image: "https://images.unsplash.com/photo-1625813506062-0aeb1d7a094b?auto=format&fit=crop&q=80&w=800",
    tags: ["Umami"]
  },
  {
    id: 3,
    name: "Zen Garden",
    price: 39.00,
    description: "Burger de cogumelos defumados, queijo de castanhas, maionese de manjericão e brotos de beterraba.",
    category: 'veggie',
    image: "https://images.unsplash.com/photo-1520072959219-c595dc870360?auto=format&fit=crop&q=80&w=800",
    tags: ["Veggie", "Clean Eat"]
  },
  {
    id: 4,
    name: "Eclipsed Melt",
    price: 52.00,
    description: "Triplo Smash de Black Angus, crosta de pimenta fermentada e fondue de queijos suíços no pão negro.",
    category: 'special',
    image: "https://images.unsplash.com/photo-1594212699903-ec8a3eca50f5?auto=format&fit=crop&q=80&w=800",
    tags: ["Intenso", "Gourmet"]
  },
  {
    id: 5,
    name: "Vulcan Flame",
    price: 44.90,
    description: "Burger suíno duroc, geleia de bacon com pimenta habanero, crispy de couve e queijo brie maçaricado.",
    category: 'special',
    image: "https://images.unsplash.com/photo-1550317138-10000687ad32?auto=format&fit=crop&q=80&w=800",
    tags: ["Spicy", "Chef Choice"]
  }
];

// --- Components ---

const Navbar = ({ cartCount, onCartClick, scrollToSection }: { cartCount: number, onCartClick: () => void, scrollToSection: (id: string) => void }) => (
  <nav className="fixed top-0 left-0 right-0 z-50 bg-[#0A0A0A]/90 backdrop-blur-xl border-b border-white/5 px-6 py-5 flex justify-between items-center">
    <motion.div 
      initial={{ opacity: 0, x: -20 }}
      animate={{ opacity: 1, x: 0 }}
      className="flex items-center gap-2 cursor-pointer"
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
    >
      <div className="bg-gradient-to-tr from-[#FF5F00] to-[#FF8C00] p-2 rounded-xl rotate-3 shadow-[0_0_20px_rgba(255,95,0,0.4)]">
        <Flame className="text-white w-6 h-6" />
      </div>
      <span className="text-2xl font-syncopate font-bold tracking-tighter text-white uppercase italic">
        BURGER<span className="text-[#FF5F00]">VIBE</span>
      </span>
    </motion.div>
    
    <div className="flex items-center gap-4 md:gap-8">
      <div className="hidden md:flex gap-6 text-[10px] font-black tracking-[0.2em] text-white/50 uppercase">
        <button onClick={() => scrollToSection('menu')} className="hover:text-[#FF5F00] transition-colors duration-300 focus:outline-none">Experience</button>
        <button onClick={() => scrollToSection('concierge')} className="hover:text-[#FF5F00] transition-colors duration-300 focus:outline-none">AI Butler</button>
        <button onClick={() => scrollToSection('locations')} className="hover:text-[#FF5F00] transition-colors duration-300 focus:outline-none">Location</button>
      </div>
      
      <button 
        onClick={onCartClick}
        className="group relative p-3 bg-white/5 rounded-2xl hover:bg-white/10 transition-all border border-white/10"
      >
        <ShoppingBag className="w-5 h-5 text-white group-hover:scale-110 transition-transform" />
        {cartCount > 0 && (
          <span className="absolute -top-1 -right-1 bg-[#FF5F00] text-white text-[10px] font-black w-5 h-5 flex items-center justify-center rounded-full shadow-lg">
            {cartCount}
          </span>
        )}
      </button>
    </div>
  </nav>
);

const App = () => {
  const [cart, setCart] = useState<CartItem[]>([]);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [activeCategory, setActiveCategory] = useState<string>('all');
  const [aiSuggestion, setAiSuggestion] = useState<AiSuggestion | null>(null);
  const [userMood, setUserMood] = useState('');
  const [isAiLoading, setIsAiLoading] = useState(false);

  const addToCart = (item: MenuItem) => {
    setCart(prev => {
      const existing = prev.find(i => i.id === item.id);
      if (existing) {
        return prev.map(i => i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i);
      }
      return [...prev, { ...item, quantity: 1 }];
    });
  };

  const removeFromCart = (id: number) => {
    setCart(prev => prev.filter(i => i.id !== id));
  };

  const updateQuantity = (id: number, delta: number) => {
    setCart(prev => prev.map(item => {
      if (item.id === id) {
        const newQty = Math.max(1, item.quantity + delta);
        return { ...item, quantity: newQty };
      }
      return item;
    }));
  };

  const cartTotal = useMemo(() => cart.reduce((sum, item) => sum + (item.price * item.quantity), 0), [cart]);
  const cartCount = useMemo(() => cart.reduce((sum, item) => sum + item.quantity, 0), [cart]);

  const filteredMenu = activeCategory === 'all' 
    ? MENU_ITEMS 
    : MENU_ITEMS.filter(item => item.category === activeCategory);

  const scrollToSection = (id: string) => {
    const el = document.getElementById(id);
    if (el) {
      const offset = 100;
      const elementPosition = el.getBoundingClientRect().top;
      const offsetPosition = elementPosition + window.pageYOffset - offset;

      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
      });
    }
  };

  const askAiConcierge = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!userMood.trim()) return;

    setIsAiLoading(true);
    setAiSuggestion(null);

    try {
      const ai = new GoogleGenAI({ apiKey: process.env.API_KEY || '' });
      const prompt = `Você é o "Taste Butler" da Burger Vibe, operado por "Get Your Supreme". 
      Nossos pratos são criações exclusivas assinadas pelo Master Chef Alejandro Stones.
      O cliente disse: "${userMood}". 
      Baseado em nosso cardápio: ${JSON.stringify(MENU_ITEMS)}, escolha o melhor item que harmonize com a descrição.
      Retorne um JSON estrito com:
      - text: uma resposta sofisticada, curta e empática explicando por que essa escolha é perfeita para o momento dele.
      - recommendedItemId: o ID numérico do item escolhido (ou null se nada combinar).`;

      const response = await ai.models.generateContent({
        model: 'gemini-3-flash-preview',
        contents: prompt,
        config: {
          responseMimeType: "application/json",
          responseSchema: {
            type: Type.OBJECT,
            properties: {
              text: { type: Type.STRING },
              recommendedItemId: { type: Type.INTEGER, nullable: true }
            },
            required: ["text", "recommendedItemId"]
          }
        }
      });

      const data = JSON.parse(response.text || '{}');
      setAiSuggestion({
        text: data.text || "O Master Chef Alejandro Stones recomenda o Cyborg Prime para elevar sua experiência hoje.",
        recommendedItemId: data.recommendedItemId || null
      });
    } catch (error) {
      console.error(error);
      setAiSuggestion({
        text: "Desculpe, houve uma pequena interferência em nosso sistema. Que tal provar a assinatura do Chef: Cyborg Prime?",
        recommendedItemId: 1
      });
    } finally {
      setIsAiLoading(false);
    }
  };

  const recommendedItem = useMemo(() => {
    if (!aiSuggestion?.recommendedItemId) return null;
    return MENU_ITEMS.find(i => i.id === aiSuggestion.recommendedItemId);
  }, [aiSuggestion]);

  const handleWhatsAppCheckout = () => {
    const phone = "47991814606";
    let message = `🍔 *PEDIDO SUPREME - BURGER VIBE*\n_Chef Alejandro Stones Selection_\n\n`;
    cart.forEach(item => {
      message += `• ${item.quantity}x ${item.name} - R$ ${(item.price * item.quantity).toFixed(2)}\n`;
    });
    message += `\n💵 *Total: R$ ${cartTotal.toFixed(2)}*\n\n📍 *Unidade: Balneário Shopping*\n\n🚀 _Pode prosseguir com meu pedido?_`;
    
    const encodedMessage = encodeURIComponent(message);
    window.open(`https://wa.me/55${phone}?text=${encodedMessage}`, '_blank');
  };

  const openGoogleMaps = () => {
    window.open(`https://www.google.com/maps/search/?api=1&query=Balneário+Shopping+Balneário+Camboriú+SC`, '_blank');
  };

  return (
    <div className="min-h-screen bg-[#0A0A0A] text-white selection:bg-[#FF5F00]/30 overflow-x-hidden scroll-smooth font-sans">
      <Navbar cartCount={cartCount} onCartClick={() => setIsCartOpen(true)} scrollToSection={scrollToSection} />

      {/* Hero Section */}
      <section className="relative min-h-screen flex flex-col items-center justify-center text-center px-6 pt-20 overflow-hidden">
        {/* Animated Background Gradients */}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full pointer-events-none">
            <div className="absolute top-1/2 left-1/4 w-[600px] h-[600px] bg-[#FF5F00]/15 rounded-full blur-[150px] animate-pulse" />
            <div className="absolute bottom-1/4 right-1/4 w-[500px] h-[500px] bg-[#FF8C00]/10 rounded-full blur-[120px]" />
        </div>

        <motion.div 
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, ease: "easeOut" }}
          className="max-w-5xl z-10"
        >
          <div className="inline-flex items-center gap-3 bg-white/5 border border-white/10 px-6 py-2 rounded-2xl text-[10px] font-black tracking-[0.3em] text-[#FF5F00] mb-8 uppercase">
            <Star className="w-4 h-4 fill-[#FF5F00]" />
            Get Your Supreme Experience
          </div>
          
          <h1 className="text-6xl md:text-9xl font-syncopate font-bold mb-6 leading-tight tracking-tighter uppercase italic">
            DEFINA <br /> 
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-[#FF5F00] to-white/20">
              SEU PALADAR
            </span>
          </h1>

          <div className="flex flex-col md:flex-row items-center justify-center gap-4 mb-12 opacity-80">
            <div className="flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/5 rounded-full">
               <Award className="w-4 h-4 text-[#FF5F00]" />
               <span className="text-[10px] font-black tracking-widest uppercase">Master Chef Alejandro Stones</span>
            </div>
            <span className="hidden md:block text-white/20">|</span>
            <span className="text-[10px] font-black tracking-widest uppercase text-white/40">Balneário Shopping • BC</span>
          </div>
          
          <div className="flex flex-wrap justify-center gap-6 mt-4">
            <motion.button 
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => scrollToSection('menu')} 
              className="px-12 py-6 bg-white text-black font-black text-xs rounded-2xl transition-all shadow-2xl hover:shadow-[#FF5F00]/30 uppercase tracking-[0.2em]"
            >
              Start Order
            </motion.button>
            <motion.button 
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => scrollToSection('concierge')}
              className="px-12 py-6 bg-white/5 hover:bg-white/10 border border-white/10 text-white font-black text-xs rounded-2xl transition-all backdrop-blur-sm uppercase tracking-[0.2em]"
            >
              Talk to AI
            </motion.button>
          </div>
        </motion.div>
      </section>

      {/* Menu Grid */}
      <section id="menu" className="py-32 px-6 max-w-7xl mx-auto scroll-mt-24">
        <div className="flex flex-col md:flex-row justify-between items-center mb-24 gap-12">
          <div className="text-center md:text-left">
            <p className="text-[#FF5F00] font-black text-xs tracking-[0.4em] uppercase mb-4">Crafted Selection</p>
            <h2 className="text-5xl md:text-7xl font-syncopate font-bold uppercase italic leading-none">THE MENU</h2>
            <p className="mt-4 text-[10px] font-bold text-white/30 uppercase tracking-widest">Signed by Alejandro Stones</p>
          </div>
          <div className="flex gap-3 overflow-x-auto pb-4 md:pb-0 w-full md:w-auto no-scrollbar justify-center">
            {['all', 'beef', 'chicken', 'veggie', 'special'].map(cat => (
              <button
                key={cat}
                onClick={() => setActiveCategory(cat)}
                className={`px-8 py-3 rounded-2xl text-[10px] font-black tracking-widest uppercase transition-all whitespace-nowrap border ${
                  activeCategory === cat 
                  ? 'bg-[#FF5F00] text-white border-[#FF5F00] shadow-lg shadow-[#FF5F00]/20' 
                  : 'bg-white/5 text-white/40 border-white/10 hover:border-white/30'
                }`}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
          {filteredMenu.map((item, idx) => (
            <motion.div
              layout
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: idx * 0.1 }}
              key={item.id}
              className="group relative bg-[#0F0F0F] border border-white/5 rounded-[40px] overflow-hidden hover:border-[#FF5F00]/30 transition-all duration-500"
            >
              <div className="aspect-[5/4] overflow-hidden relative">
                <img 
                  src={item.image} 
                  alt={item.name} 
                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-[1.5s] ease-out"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-[#0F0F0F] via-transparent to-transparent opacity-60" />
                <div className="absolute bottom-6 left-6 flex gap-2">
                  {item.tags.map(tag => (
                    <span key={tag} className="bg-white text-black px-4 py-1.5 rounded-full text-[9px] font-black uppercase tracking-widest">
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
              <div className="p-8">
                <div className="flex justify-between items-start mb-4">
                  <h3 className="text-2xl font-bold uppercase italic leading-tight max-w-[70%]">{item.name}</h3>
                  <div className="text-right">
                    <span className="text-[#FF5F00] text-xl font-black italic tracking-tighter">
                      R$ {item.price.toFixed(2)}
                    </span>
                  </div>
                </div>
                <p className="text-sm text-white/40 mb-8 leading-relaxed font-medium">
                  {item.description}
                </p>
                <button 
                  onClick={() => addToCart(item)}
                  className="w-full py-5 bg-white/5 group-hover:bg-white group-hover:text-black text-white font-black rounded-3xl transition-all flex items-center justify-center gap-3 border border-white/10 group-hover:border-white uppercase text-xs tracking-[0.1em]"
                >
                  <Plus className="w-4 h-4" /> Add to Bag
                </button>
              </div>
            </motion.div>
          ))}
        </div>
      </section>

      {/* AI Concierge Section */}
      <section id="concierge" className="py-40 px-6 scroll-mt-24">
        <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
          <div className="space-y-10">
            <div>
              <p className="text-[#FF5F00] font-black text-xs tracking-[0.4em] uppercase mb-4">Digital Concierge</p>
              <h2 className="text-5xl md:text-7xl font-syncopate font-bold uppercase italic leading-[0.9]">O SEU <br />BUTLER</h2>
            </div>
            <p className="text-white/40 text-lg max-w-md leading-relaxed">
              Consulte nosso assistente treinado pela Get Your Supreme para identificar qual criação do Chef Alejandro Stones mais combina com seu momento.
            </p>
            <div className="flex items-center gap-8 py-6 border-t border-white/10">
               <div className="flex items-center gap-3">
                 <div className="w-10 h-10 rounded-full bg-[#FF5F00]/20 flex items-center justify-center">
                   <Award className="w-5 h-5 text-[#FF5F00]" />
                 </div>
                 <p className="text-[10px] font-bold text-white/30 uppercase tracking-[0.2em]">Validated by Alejandro Stones</p>
               </div>
            </div>
          </div>

          <div className="bg-[#111] border border-white/10 rounded-[60px] p-10 md:p-14 relative overflow-hidden shadow-2xl">
            <div className="absolute -top-20 -right-20 w-80 h-80 bg-[#FF5F00]/10 rounded-full blur-[100px]" />
            
            <AnimatePresence mode="wait">
              {!aiSuggestion ? (
                <motion.form 
                  key="form"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  onSubmit={askAiConcierge} 
                  className="space-y-6 relative"
                >
                  <label className="text-[10px] font-black uppercase tracking-[0.3em] text-white/30">O que você deseja hoje?</label>
                  <textarea 
                    rows={3}
                    value={userMood}
                    onChange={(e) => setUserMood(e.target.value)}
                    placeholder="Ex: 'Algo picante com frango para uma noite agitada...'"
                    className="w-full bg-white/5 border border-white/10 rounded-3xl px-8 py-6 focus:outline-none focus:border-[#FF5F00] transition-all text-white placeholder:text-white/10 resize-none text-lg font-medium"
                  />
                  <button 
                    type="submit"
                    disabled={isAiLoading || !userMood.trim()}
                    className="w-full py-6 bg-[#FF5F00] text-white rounded-3xl font-black uppercase tracking-widest text-sm hover:bg-[#FF7A00] transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center gap-3 shadow-[0_0_30px_rgba(255,95,0,0.3)]"
                  >
                    {isAiLoading ? (
                      <>
                        <RefreshCw className="w-5 h-5 animate-spin" /> SYNTHESIZING...
                      </>
                    ) : (
                      <>
                        CONSULTAR CHEF <ArrowRight className="w-5 h-5" />
                      </>
                    )}
                  </button>
                </motion.form>
              ) : (
                <motion.div 
                  key="result"
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  className="space-y-8 relative"
                >
                  <div className="bg-white/5 border border-white/10 rounded-[32px] p-8 relative shadow-inner">
                    <div className="absolute -top-4 left-8 bg-[#FF5F00] px-4 py-1 rounded-full text-[9px] font-black uppercase tracking-widest shadow-lg">
                      Butler Recommendation
                    </div>
                    <p className="text-xl leading-relaxed italic text-white/80 font-medium">
                      "{aiSuggestion.text}"
                    </p>
                  </div>

                  {recommendedItem && (
                    <motion.div 
                      initial={{ y: 20, opacity: 0 }}
                      animate={{ y: 0, opacity: 1 }}
                      transition={{ delay: 0.2 }}
                      className="bg-white/5 border border-[#FF5F00]/30 rounded-[32px] overflow-hidden flex flex-col md:flex-row items-center gap-6 p-6 shadow-[0_0_40px_rgba(255,95,0,0.1)]"
                    >
                      <div className="w-20 h-20 rounded-2xl overflow-hidden border border-white/10 flex-shrink-0">
                        <img src={recommendedItem.image} alt={recommendedItem.name} className="w-full h-full object-cover" />
                      </div>
                      <div className="flex-1 text-center md:text-left">
                        <h4 className="font-bold text-lg uppercase italic mb-1">{recommendedItem.name}</h4>
                        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
                           <span className="text-[#FF5F00] font-black text-xl italic tracking-tighter">R$ {recommendedItem.price.toFixed(2)}</span>
                           <button 
                             onClick={() => {
                               addToCart(recommendedItem);
                               setIsCartOpen(true);
                             }}
                             className="px-6 py-3 bg-white text-black rounded-xl font-black text-[10px] uppercase tracking-widest hover:bg-[#FF5F00] hover:text-white transition-all shadow-lg"
                           >
                             PROSSEGUIR PEDIDO
                           </button>
                        </div>
                      </div>
                    </motion.div>
                  )}

                  <div className="flex flex-col sm:flex-row gap-4">
                    <button 
                      onClick={() => { setAiSuggestion(null); setUserMood(''); }}
                      className="flex-1 py-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-2xl font-black uppercase tracking-widest text-[9px] transition-all flex items-center justify-center gap-2"
                    >
                      <RefreshCw className="w-4 h-4" /> Outra Sugestão
                    </button>
                    <button 
                      onClick={() => setAiSuggestion(null)}
                      className="flex-1 py-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-2xl font-black uppercase tracking-widest text-[9px] transition-all flex items-center justify-center gap-2"
                    >
                      <MessageSquare className="w-4 h-4" /> Refinar Texto
                    </button>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </section>

      {/* Locations Section */}
      <section id="locations" className="py-40 px-6 scroll-mt-24 bg-white/[0.01]">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-24">
            <p className="text-[#FF5F00] font-black text-xs tracking-[0.4em] uppercase mb-4">Location & Vibe</p>
            <h2 className="text-5xl md:text-7xl font-syncopate font-bold uppercase italic">VIBE HUB</h2>
          </div>
          
          <div className="bg-[#0F0F0F] rounded-[60px] border border-white/5 overflow-hidden flex flex-col lg:flex-row relative">
             <div className="flex-1 p-10 md:p-20 space-y-8">
                <div className="inline-flex items-center gap-2 bg-[#FF5F00]/10 px-4 py-2 rounded-full">
                  <MapPin className="w-4 h-4 text-[#FF5F00]" />
                  <span className="text-[10px] font-black uppercase tracking-widest text-[#FF5F00]">Balneário Shopping</span>
                </div>
                <h3 className="text-4xl md:text-6xl font-syncopate font-bold uppercase italic leading-none">BC CENTER</h3>
                <p className="text-white/40 text-lg leading-relaxed max-w-lg">
                  Centro de varejo espaçoso com atmosfera sofisticada, localizado no coração de Balneário Camboriú. <br/><br/>
                  <span className="text-white">Av. Santa Catarina, 1 - Estados, Balneário Camboriú - SC, 88339-005</span>
                </p>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-6">
                   <div className="space-y-2">
                      <p className="text-[10px] font-black text-white/20 uppercase tracking-[0.3em]">Direct Phone</p>
                      <p className="text-xl font-bold">(47) 3263-8444</p>
                   </div>
                   <div className="space-y-2">
                      <p className="text-[10px] font-black text-white/20 uppercase tracking-[0.3em]">Hours</p>
                      <p className="text-xl font-bold italic">11:00 AM — 11:00 PM</p>
                   </div>
                </div>
                <div className="pt-10 flex flex-wrap gap-6">
                   <button 
                     onClick={openGoogleMaps}
                     className="px-10 py-5 bg-white text-black font-black text-[10px] rounded-2xl uppercase tracking-widest flex items-center gap-3 hover:bg-[#FF5F00] hover:text-white transition-all shadow-xl"
                   >
                     OPEN GOOGLE MAPS <ExternalLink className="w-4 h-4" />
                   </button>
                   <button 
                     onClick={handleWhatsAppCheckout}
                     className="px-10 py-5 bg-white/5 border border-white/10 text-white font-black text-[10px] rounded-2xl uppercase tracking-widest flex items-center gap-3 hover:bg-white/10 transition-all"
                   >
                     CALL WHATSAPP <Phone className="w-4 h-4" />
                   </button>
                </div>
             </div>
             <div className="w-full lg:w-[40%] min-h-[400px] relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
                <img 
                  src="https://images.unsplash.com/photo-1519167758481-83f550bb49b3?auto=format&fit=crop&q=80&w=1000" 
                  className="w-full h-full object-cover" 
                  alt="Balneário Shopping Interior" 
                />
                <div className="absolute inset-0 bg-gradient-to-r from-[#0F0F0F] via-transparent to-transparent hidden lg:block" />
             </div>
          </div>
        </div>
      </section>

      {/* Cart Drawer */}
      <AnimatePresence>
        {isCartOpen && (
          <>
            <motion.div 
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setIsCartOpen(false)}
              className="fixed inset-0 bg-black/90 backdrop-blur-md z-[100]" 
            />
            <motion.div 
              initial={{ x: '100%' }}
              animate={{ x: 0 }}
              exit={{ x: '100%' }}
              transition={{ type: 'spring', damping: 30, stiffness: 300 }}
              className="fixed top-0 right-0 h-full w-full max-w-lg bg-[#0A0A0A] z-[110] shadow-2xl border-l border-white/10 flex flex-col"
            >
              <div className="p-8 border-b border-white/5 flex justify-between items-center">
                <h3 className="text-3xl font-syncopate font-bold uppercase italic tracking-tighter">SUA BAG</h3>
                <button 
                  onClick={() => setIsCartOpen(false)}
                  className="p-3 hover:bg-white/5 rounded-2xl transition-colors border border-white/5"
                >
                  <X className="w-6 h-6" />
                </button>
              </div>

              <div className="flex-1 overflow-y-auto p-8 space-y-8">
                {cart.length === 0 ? (
                  <div className="h-full flex flex-col items-center justify-center text-center opacity-20">
                    <ShoppingBag className="w-20 h-20 mb-6" />
                    <p className="font-syncopate font-bold uppercase tracking-widest text-xl italic leading-none">Bag Vazia</p>
                  </div>
                ) : (
                  cart.map(item => (
                    <motion.div layout key={item.id} className="flex gap-6 items-center">
                      <div className="w-24 h-24 rounded-3xl overflow-hidden flex-shrink-0 border border-white/10 bg-neutral-900">
                        <img src={item.image} className="w-full h-full object-cover" />
                      </div>
                      <div className="flex-1 space-y-3">
                        <div className="flex justify-between items-start">
                          <h4 className="font-bold uppercase text-lg italic tracking-tight">{item.name}</h4>
                          <button onClick={() => removeFromCart(item.id)} className="text-white/20 hover:text-[#FF5F00] transition-colors p-1">
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                        <div className="flex justify-between items-center">
                          <p className="text-[#FF5F00] font-black text-lg italic tracking-tighter">R$ {item.price.toFixed(2)}</p>
                          <div className="flex items-center gap-4 bg-white/5 p-1 rounded-2xl border border-white/5">
                            <button onClick={() => updateQuantity(item.id, -1)} className="w-8 h-8 flex items-center justify-center hover:bg-white/10 rounded-xl transition-colors">
                              <Minus className="w-3 h-3" />
                            </button>
                            <span className="font-black text-sm w-4 text-center">{item.quantity}</span>
                            <button onClick={() => updateQuantity(item.id, 1)} className="w-8 h-8 flex items-center justify-center hover:bg-white/10 rounded-xl transition-colors">
                              <Plus className="w-3 h-3" />
                            </button>
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  ))
                )}
              </div>

              {cart.length > 0 && (
                <div className="p-10 bg-white/[0.02] border-t border-white/5 space-y-8">
                  <div className="flex justify-between items-end">
                    <span className="text-white/30 text-[10px] font-black uppercase tracking-[0.4em]">Subtotal</span>
                    <span className="text-4xl font-syncopate font-bold italic tracking-tighter text-white">R$ {cartTotal.toFixed(2)}</span>
                  </div>
                  <button 
                    onClick={handleWhatsAppCheckout}
                    className="w-full py-7 bg-[#25D366] text-white font-syncopate font-bold rounded-[32px] transition-all shadow-2xl hover:bg-[#128C7E] uppercase tracking-widest text-xl italic flex items-center justify-center gap-4 group"
                  >
                    FECHAR VIA WHATSAPP <ChevronRight className="w-6 h-6 group-hover:translate-x-1 transition-transform" />
                  </button>
                  <p className="text-center text-[8px] font-black text-white/20 uppercase tracking-widest">Selected by Alejandro Stones</p>
                </div>
              )}
            </motion.div>
          </>
        )}
      </AnimatePresence>

      {/* Footer */}
      <footer className="pt-40 pb-20 px-6 border-t border-white/5">
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-20">
          <div className="lg:col-span-2 space-y-10">
            <div className="flex items-center gap-3 cursor-pointer" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
              <div className="bg-[#FF5F00] p-1.5 rounded-xl">
                <Flame className="text-white w-5 h-5" />
              </div>
              <span className="text-3xl font-syncopate font-bold tracking-tighter text-white uppercase italic">
                BURGER<span className="text-[#FF5F00]">VIBE</span>
              </span>
            </div>
            <p className="text-white/30 text-sm max-w-sm leading-relaxed font-medium italic">
              "A experiência definitiva em hambúrgueres gourmet no Balneário Shopping, assinada pelo Master Chef Alejandro Stones." <br/><br/>
              <span className="text-white/50 uppercase text-[9px] font-black tracking-widest">— Operado por Get Your Supreme</span>
            </p>
            <div className="flex gap-4">
               <div className="p-3 bg-white/5 rounded-xl hover:bg-[#FF5F00] transition-colors cursor-pointer group">
                  <Instagram className="w-5 h-5 group-hover:scale-110 transition-transform" />
               </div>
               <div className="p-3 bg-white/5 rounded-xl hover:bg-[#FF5F00] transition-colors cursor-pointer group">
                  <Twitter className="w-5 h-5 group-hover:scale-110 transition-transform" />
               </div>
               <div className="p-3 bg-white/5 rounded-xl hover:bg-[#FF5F00] transition-colors cursor-pointer group">
                  <Youtube className="w-5 h-5 group-hover:scale-110 transition-transform" />
               </div>
            </div>
          </div>
          
          <div className="space-y-6">
             <p className="text-[10px] font-black uppercase tracking-[0.4em] text-white/30">Navegação</p>
             <ul className="space-y-4 font-bold text-sm text-white/60">
               <li><button onClick={() => scrollToSection('menu')} className="hover:text-[#FF5F00] transition-colors">Experience</button></li>
               <li><button onClick={() => scrollToSection('concierge')} className="hover:text-[#FF5F00] transition-colors">AI Butler</button></li>
               <li><button onClick={() => scrollToSection('locations')} className="hover:text-[#FF5F00] transition-colors">Location</button></li>
               <li><button onClick={() => setIsCartOpen(true)} className="hover:text-[#FF5F00] transition-colors">My Bag</button></li>
             </ul>
          </div>

          <div className="space-y-6">
             <p className="text-[10px] font-black uppercase tracking-[0.4em] text-white/30">Brand Partner</p>
             <ul className="space-y-4 font-bold text-sm text-white/60">
               <li><p className="text-white/80">Chef Alejandro Stones</p></li>
               <li><p className="text-[#FF5F00]">Get Your Supreme</p></li>
               <li><p className="text-white/40">Balneário Camboriú, SC</p></li>
               <li><p className="text-white/40">(47) 99181-4606</p></li>
             </ul>
          </div>
        </div>
        
        <div className="max-w-7xl mx-auto mt-40 pt-10 border-t border-white/5 flex flex-col md:flex-row justify-between gap-6 opacity-30">
          <p className="text-[10px] font-bold uppercase tracking-widest">© 2024 GET YOUR SUPREME | BURGER VIBE LABS</p>
          <div className="flex gap-8 text-[10px] font-bold uppercase tracking-widest">
            <a href="#">Privacy Policy</a>
            <a href="#">Terms of Experience</a>
          </div>
        </div>
      </footer>
    </div>
  );
};

// Main render
const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(<App />);
}