import React, { useState, useEffect } from 'react';
import { ShoppingBag, Clock, Phone, MapPin, ChevronRight, Star, Flame, Menu, X } from 'lucide-react';

const PointDaLarica = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  // Efeito para navbar mudar de cor ao rolar
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const whatsappNumber = "5519978265061";
  const whatsappLink = `https://wa.me/${whatsappNumber}?text=Olá, vi o site da Black Friday e quero fazer um pedido!`;

  const burgers = [
    { id: 1, name: "X-Larica Supremo", desc: "Duplo hambúrguer, bacon, cheddar, salada e molho especial.", oldPrice: "28,00", price: "12,99", image: "https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" },
    { id: 2, name: "Cheddar Bacon Blast", desc: "Muito cheddar, farofa de bacon crocante e cebola caramelizada.", oldPrice: "25,00", price: "12,99", image: "https://images.unsplash.com/photo-1594212699903-ec8a3eca50f5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" },
    { id: 3, name: "Clássico da Casa", desc: "Pão brioche, carne suculenta, queijo prato, alface e tomate.", oldPrice: "22,00", price: "12,99", image: "https://images.unsplash.com/photo-1550547660-d9450f859349?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" },
    { id: 4, name: "Chicken Crispy", desc: "Frango empanado crocante, maionese verde e alface americana.", oldPrice: "24,00", price: "12,99", image: "https://images.unsplash.com/photo-1615557960916-5f4791effe9d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" }
  ];

  return (
    <div className="min-h-screen bg-slate-900 text-white font-sans selection:bg-red-600 selection:text-white pb-20">
      
      {/* Navbar Fixa */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-slate-950/95 shadow-lg backdrop-blur-sm py-2' : 'bg-transparent py-4'}`}>
        <div className="container mx-auto px-4 flex justify-between items-center">
          <div className="text-2xl font-black text-red-500 tracking-tighter uppercase italic">
            Point<span className="text-white">da</span>Larica
          </div>
          
          <div className="hidden md:flex items-center gap-6 font-semibold">
            <a href="#home" className="hover:text-red-500 transition">Início</a>
            <a href="#promo" className="hover:text-red-500 transition">Promoção</a>
            <a href="#cardapio" className="hover:text-red-500 transition">Cardápio</a>
            <a href={whatsappLink} target="_blank" rel="noreferrer" className="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-full font-bold transition transform hover:scale-105 shadow-lg shadow-red-600/30 flex items-center gap-2">
              <ShoppingBag size={18} /> Pedir Agora
            </a>
          </div>

          <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="md:hidden text-white">
            {isMenuOpen ? <X size={28} /> : <Menu size={28} />}
          </button>
        </div>
      </nav>

      {/* Mobile Menu Overlay */}
      {isMenuOpen && (
        <div className="fixed inset-0 bg-slate-950 z-40 flex flex-col items-center justify-center gap-8 text-xl font-bold md:hidden">
          <a href="#home" onClick={() => setIsMenuOpen(false)}>Início</a>
          <a href="#promo" onClick={() => setIsMenuOpen(false)}>Promoção</a>
          <a href="#cardapio" onClick={() => setIsMenuOpen(false)}>Cardápio</a>
          <a href={whatsappLink} className="text-red-500">Fazer Pedido</a>
        </div>
      )}

      {/* Hero Section */}
      <section id="home" className="relative h-[80vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1551782450-a2132b4ba21d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" 
            alt="Hambúrguer delicioso" 
            className="w-full h-full object-cover opacity-40"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/60 to-transparent"></div>
        </div>

        <div className="relative z-10 container mx-auto px-4 text-center mt-10">
          <div className="inline-block bg-yellow-500 text-slate-900 font-black px-4 py-1 rounded-sm transform -rotate-2 mb-4 animate-pulse">
            BLACK FRIDAY - SOMENTE HOJE
          </div>
          <h1 className="text-5xl md:text-7xl font-black mb-4 leading-tight">
            A LARICA BATEU? <br/>
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-500">
              A GENTE RESOLVE.
            </span>
          </h1>
          <p className="text-gray-300 text-lg md:text-xl max-w-2xl mx-auto mb-8 font-medium">
            O melhor sabor da cidade com um preço que você nunca viu. Entregamos quentinho na sua porta.
          </p>
          <a 
            href={whatsappLink} 
            target="_blank" 
            rel="noreferrer"
            className="group bg-red-600 hover:bg-red-700 text-white text-lg font-bold px-8 py-4 rounded-full inline-flex items-center gap-3 transition-all transform hover:scale-105 shadow-xl shadow-red-900/50"
          >
            Quero Aproveitar
            <ChevronRight className="group-hover:translate-x-1 transition" />
          </a>
          <div className="mt-8 flex items-center justify-center gap-4 text-sm font-semibold text-gray-400">
            <span className="flex items-center gap-1"><Clock size={16} className="text-yellow-500"/> Das 18:00 às 00:00</span>
            <span className="flex items-center gap-1"><Phone size={16} className="text-yellow-500"/> (19) 97826-5061</span>
          </div>
        </div>
      </section>

      {/* Faixa de Destaque */}
      <div className="bg-yellow-500 text-slate-900 py-3 font-black text-center overflow-hidden whitespace-nowrap">
        <div className="animate-marquee inline-block">
          🔥 PROMOÇÃO RELÂMPAGO 🔥 QUALQUER LANCHE R$ 12,99 🔥 PEDIDOS PELO WHATSAPP 🔥 ENTREGAMOS EM TODA REGIÃO 🔥
        </div>
      </div>

      {/* Grid de Ofertas */}
      <section id="promo" className="py-20 container mx-auto px-4">
        <div className="flex items-center gap-2 mb-10">
          <Flame className="text-red-500 fill-red-500" size={32} />
          <h2 className="text-3xl md:text-4xl font-bold">Ofertas Imperdíveis</h2>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {burgers.map((burger) => (
            <div key={burger.id} className="bg-slate-800 rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl hover:shadow-red-900/20 transition group border border-slate-700 hover:border-red-500/50">
              <div className="relative h-48 overflow-hidden">
                <img src={burger.image} alt={burger.name} className="w-full h-full object-cover group-hover:scale-110 transition duration-500" />
                <div className="absolute top-2 right-2 bg-black/80 text-white text-xs font-bold px-2 py-1 rounded flex items-center gap-1">
                  <Star size={12} className="text-yellow-500 fill-yellow-500"/> 4.8
                </div>
              </div>
              <div className="p-5">
                <h3 className="text-xl font-bold mb-1">{burger.name}</h3>
                <p className="text-gray-400 text-sm mb-4 line-clamp-2">{burger.desc}</p>
                <div className="flex items-end justify-between">
                  <div>
                    <span className="text-gray-500 text-sm line-through block">R$ {burger.oldPrice}</span>
                    <span className="text-2xl font-black text-yellow-500">R$ {burger.price}</span>
                  </div>
                  <a href={whatsappLink} target="_blank" rel="noreferrer" className="bg-red-600 p-2 rounded-full hover:bg-red-500 transition">
                    <ShoppingBag size={20} />
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Seção Combos Família */}
      <section className="py-20 bg-slate-950 relative overflow-hidden">
        <div className="absolute top-0 right-0 w-64 h-64 bg-red-600/10 rounded-full blur-3xl"></div>
        <div className="container mx-auto px-4 relative z-10 flex flex-col md:flex-row items-center gap-12">
          <div className="md:w-1/2">
            <span className="text-yellow-500 font-bold tracking-wider mb-2 block uppercase">Para todo mundo</span>
            <h2 className="text-4xl md:text-5xl font-black mb-6 leading-tight">
              Combos Família <br/> Gigantes
            </h2>
            <p className="text-gray-300 text-lg mb-8">
              A família toda está com fome? Nossos combos incluem lanches, batata frita crocante e refrigerante gelado. Economia e sabor tamanho família.
            </p>
            <div className="bg-slate-900 p-6 rounded-xl border border-slate-800 flex items-center justify-between mb-8 max-w-md shadow-lg">
              <div>
                <p className="text-gray-400 text-sm">A partir de</p>
                <p className="text-4xl font-black text-green-400">R$ 49,99</p>
              </div>
              <div className="h-12 w-px bg-slate-700 mx-4"></div>
              <div className="text-right">
                <p className="font-bold">4 Lanches + Batata + Refri</p>
                <p className="text-xs text-red-400">Oferta limitada</p>
              </div>
            </div>
            <a href={whatsappLink} target="_blank" rel="noreferrer" className="inline-block bg-white text-slate-900 hover:bg-gray-200 font-bold py-3 px-8 rounded-full transition">
              Ver Opções de Combo
            </a>
          </div>
          <div className="md:w-1/2 relative">
             <img 
               src="https://images.unsplash.com/photo-1594212699903-ec8a3eca50f5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" 
               alt="Combo Família" 
               className="rounded-3xl shadow-2xl shadow-red-900/30 rotate-3 hover:rotate-0 transition duration-500 border-4 border-slate-800"
             />
             <div className="absolute -bottom-6 -left-6 bg-yellow-500 text-slate-900 font-black p-4 rounded-lg shadow-lg transform -rotate-6">
               ENTREGA <br/> GRÁTIS*
             </div>
          </div>
        </div>
      </section>

      {/* Footer / Contato */}
      <footer className="bg-slate-900 pt-20 pb-10 border-t border-slate-800">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-black text-red-500 italic mb-8">Point da Larica</h2>
          
          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto mb-12">
            <div className="bg-slate-800 p-6 rounded-2xl">
              <Clock className="w-10 h-10 text-yellow-500 mx-auto mb-4" />
              <h3 className="font-bold text-lg mb-2">Horário</h3>
              <p className="text-gray-400">Todos os dias</p>
              <p className="text-white font-bold">18:00 às 00:00</p>
            </div>
            
            <div className="bg-slate-800 p-6 rounded-2xl">
              <MapPin className="w-10 h-10 text-yellow-500 mx-auto mb-4" />
              <h3 className="font-bold text-lg mb-2">Localização</h3>
              <p className="text-gray-400">Louveira, SP</p>
              <p className="text-white font-bold">Entregamos em toda região</p>
            </div>

            <div className="bg-slate-800 p-6 rounded-2xl border border-green-500/20 shadow-[0_0_15px_rgba(34,197,94,0.1)]">
              <Phone className="w-10 h-10 text-green-500 mx-auto mb-4" />
              <h3 className="font-bold text-lg mb-2">Delivery</h3>
              <p className="text-gray-400">Peça pelo WhatsApp</p>
              <p className="text-white font-bold">(19) 97826-5061</p>
            </div>
          </div>

          <div className="text-gray-500 text-sm">
            © 2024 Point da Larica. Desenvolvido por <span className="text-white font-bold">Thiago WebDev</span>.
          </div>
        </div>
      </footer>

      {/* Botão Flutuante WhatsApp */}
      <a 
        href={whatsappLink}
        target="_blank" 
        rel="noreferrer"
        className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-4 rounded-full shadow-2xl z-50 transition transform hover:scale-110 hover:rotate-3 flex items-center gap-2 font-bold group"
      >
        <Phone size={24} className="animate-bounce" />
        <span className="max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-500 whitespace-nowrap">
          Pedir Agora
        </span>
      </a>

    </div>
  );
};

export default PointDaLarica;