import React, { useEffect, useState } from 'react';
import { ArrowLeft, Instagram, Facebook, MapPin, Phone, Mail, Clock, Heart, Star, ChevronDown } from 'lucide-react';
import { Link } from 'react-router-dom';

export const SweetCraving: React.FC = () => {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="font-serif bg-[#FFF5F5] text-[#5D4037] min-h-screen scroll-smooth">
      {/* Return to Main Site Button */}
      <div className="fixed bottom-6 right-6 z-[60]">
        <Link to="/#references">
          <button className="bg-white/90 backdrop-blur-md shadow-lg px-5 py-2.5 rounded-full text-sm font-sans font-medium flex items-center hover:bg-white hover:scale-105 transition-all duration-300 group text-[#E91E63]">
            <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> 
            Vissza a referenciákhoz
          </button>
        </Link>
      </div>

      {/* Dynamic Navigation */}
      <nav 
        className={`fixed top-0 w-full z-40 transition-all duration-500 ${
          scrolled 
            ? 'bg-white/90 backdrop-blur-md shadow-lg py-3' 
            : 'bg-transparent py-6'
        }`}
      >
        <div className="max-w-6xl mx-auto px-6 flex justify-between items-center">
          <div className={`text-3xl font-bold text-[#E91E63] italic transition-all duration-300 ${scrolled ? 'scale-90' : 'scale-100'}`}>
            SweetCraving
          </div>
          <div className="hidden md:flex space-x-10 font-medium font-sans text-sm tracking-wide">
            {['Kezdőlap', 'Rólunk', 'Kínálat', 'Vélemények'].map((item, i) => (
              <a 
                key={i} 
                href={`#${item.toLowerCase() === 'kezdőlap' ? 'home' : item === 'Kínálat' ? 'menu' : item === 'Rólunk' ? 'about' : 'contact'}`} 
                className="hover:text-[#E91E63] relative group transition-colors"
              >
                {item}
                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#E91E63] transition-all group-hover:w-full"></span>
              </a>
            ))}
          </div>
          <button className="bg-[#E91E63] text-white px-8 py-2.5 rounded-full font-sans font-bold text-sm hover:bg-[#D81B60] transition-all shadow-lg hover:shadow-[#E91E63]/30 hover:-translate-y-0.5 transform">
            Rendelés
          </button>
        </div>
      </nav>

      {/* Hero Section */}
      <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1558961363-fa8fdf82db35?auto=format&fit=crop&w=1920&q=80" 
            alt="Desszertműhely Hero" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-[#FFF5F5] via-white/20 to-transparent"></div>
        </div>
        
        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto mt-16">
          <div className="animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
            <span className="bg-white/80 backdrop-blur-md px-6 py-2 rounded-full text-[#E91E63] text-xs font-bold font-sans tracking-[0.2em] uppercase mb-8 inline-block shadow-sm">
              Kézműves Desszertműhely
            </span>
          </div>
          
          <h1 className="text-6xl md:text-8xl font-bold mb-8 drop-shadow-sm text-gray-900 leading-tight animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
            Édes Álmok <br/>
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#E91E63] to-[#FF80AB]">
              Süteménybe Zárva
            </span>
          </h1>
          
          <p className="text-xl md:text-2xl text-gray-800/80 max-w-2xl mx-auto mb-12 font-medium leading-relaxed animate-fade-in-up" style={{ animationDelay: '0.5s' }}>
            Természetes alapanyagokból, szívvel-lélekkel készült desszertek minden alkalomra.
            <br className="hidden md:block"/> Mert minden nap megérdemel egy kis kényeztetést.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-5 justify-center animate-fade-in-up" style={{ animationDelay: '0.7s' }}>
             <a href="#menu" className="bg-[#E91E63] text-white px-10 py-4 rounded-full font-sans font-bold hover:bg-[#D81B60] transition-all shadow-xl shadow-[#E91E63]/30 hover:-translate-y-1 hover:scale-105">
               Kínálatunk Megtekintése
             </a>
             <a href="#about" className="bg-white text-[#5D4037] px-10 py-4 rounded-full font-sans font-bold hover:bg-gray-50 transition-all shadow-lg hover:-translate-y-1 hover:scale-105">
               Ismerj meg minket
             </a>
          </div>
        </div>

        {/* Scroll Indicator */}
        <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
          <ChevronDown className="w-8 h-8 text-[#E91E63] opacity-60" />
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-32 px-6 bg-white overflow-hidden">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-2 gap-20 items-center">
            <div className="relative group">
              <div className="absolute -top-6 -left-6 w-full h-full border-4 border-[#FF80AB]/30 rounded-[2rem] transition-transform duration-500 group-hover:translate-x-2 group-hover:translate-y-2"></div>
              <img 
                src="https://images.unsplash.com/photo-1556910103-1c02745aae4d?auto=format&fit=crop&w=1000&q=80" 
                alt="Pék és Cukrászmunka" 
                className="rounded-[2rem] shadow-2xl relative z-10 transform transition-transform duration-700 hover:scale-[1.02]"
              />
              {/* Floating Badge */}
              <div className="absolute -bottom-10 -right-10 z-20 bg-white p-6 rounded-2xl shadow-xl animate-bounce-slow hidden lg:block">
                <div className="text-center">
                   <p className="text-4xl font-bold text-[#E91E63]">5+</p>
                   <p className="text-sm font-sans text-gray-500 uppercase tracking-wider">Év Tapasztalat</p>
                </div>
              </div>
            </div>
            
            <div className="space-y-8">
              <h2 className="text-5xl font-bold text-[#5D4037] leading-tight">
                A szenvedélyünk <br/>
                <span className="text-[#E91E63] italic">a minőség</span>
              </h2>
              <p className="text-lg leading-relaxed text-[#795548] font-sans">
                2018 óta készítjük desszertjeinket Budapest szívében. Hiszünk abban, hogy egy sütemény nemcsak étel, hanem élmény. Ezért kizárólag prémium belga csokoládét, termelői tejet és friss gyümölcsöket használunk.
              </p>
              
              <div className="grid gap-6">
                {[
                  { text: '100% Természetes alapanyagok', icon: Heart },
                  { text: 'Glutén- és laktózmentes opciók', icon: Star },
                  { text: 'Egyedi tortarendelés 48 órán belül', icon: Clock }
                ].map((item, i) => (
                  <div key={i} className="flex items-center gap-4 p-4 rounded-xl bg-[#FFF5F5] border border-[#FF80AB]/20 transition-all hover:shadow-md hover:bg-[#fff0f0]">
                    <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-[#E91E63] shadow-sm">
                      <item.icon className="w-5 h-5" />
                    </div>
                    <span className="font-bold text-[#5D4037]">{item.text}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Menu Grid */}
      <section id="menu" className="py-32 bg-[#FFF5F5]">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-20">
            <h2 className="text-5xl font-bold mb-6 text-[#5D4037]">Legnépszerűbb Finomságok</h2>
            <p className="text-[#795548] text-xl max-w-2xl mx-auto font-sans">
              Válogasson kedvenc süteményeink közül, melyeket minden reggel frissen készítünk.
            </p>
          </div>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
            {[
              { title: 'Macaron Válogatás', price: '3 490 Ft', img: 'https://images.unsplash.com/photo-1569864358642-9d1684040f43?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', tag: 'Best Seller' },
              { title: 'Epres Sajttorta', price: '1 290 Ft', img: 'https://images.unsplash.com/photo-1533134242443-d4fd215305ad?auto=format&fit=crop&w=800&q=80', tag: null },
              { title: 'Csokimousse', price: '1 490 Ft', img: 'https://images.unsplash.com/photo-1541783245831-57d6fb0926d3?auto=format&fit=crop&w=800&q=80', tag: 'Új' },
              { title: 'Gyümölcstorta', price: '8 990 Ft', img: 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?auto=format&fit=crop&w=800&q=80', tag: 'Rendelésre' },
              { title: 'Cupcake Mix', price: '2 990 Ft', img: 'https://images.unsplash.com/photo-1519869325930-281384150729?auto=format&fit=crop&w=800&q=80', tag: null },
              { title: 'Vajas Croissant', price: '890 Ft', img: 'https://images.unsplash.com/photo-1509440159596-0249088772ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', tag: 'Friss' }
            ].map((item, i) => (
              <div key={i} className="group bg-white rounded-3xl p-4 shadow-md hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
                <div className="overflow-hidden rounded-2xl mb-6 h-64 relative">
                  <img 
                    src={item.img} 
                    alt={item.title} 
                    className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700" 
                  />
                  {item.tag && (
                    <div className="absolute top-4 left-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-[#E91E63] uppercase tracking-wider shadow-sm">
                      {item.tag}
                    </div>
                  )}
                  {/* Quick Add Overlay */}
                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <button className="bg-white text-[#E91E63] px-6 py-2 rounded-full font-bold transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                      Kosárba
                    </button>
                  </div>
                </div>
                <div className="px-2 pb-2">
                  <div className="flex justify-between items-start mb-2">
                    <h3 className="text-2xl font-bold text-[#5D4037] group-hover:text-[#E91E63] transition-colors">{item.title}</h3>
                    <span className="text-lg font-bold text-[#E91E63] bg-[#FFF5F5] px-3 py-1 rounded-lg">{item.price}</span>
                  </div>
                  <p className="text-gray-500 text-sm line-clamp-2">Krémes, ízletes finomság, amely elolvad a szádban.</p>
                </div>
              </div>
            ))}
          </div>
          
          <div className="mt-16 text-center">
            <button className="border-2 border-[#E91E63] text-[#E91E63] px-10 py-3 rounded-full font-bold hover:bg-[#E91E63] hover:text-white transition-all duration-300 uppercase tracking-wider text-sm">
              Teljes étlap letöltése
            </button>
          </div>
        </div>
      </section>

      {/* Testimonials (Simple) */}
      <section className="py-24 bg-white">
         <div className="max-w-4xl mx-auto px-6 text-center">
            <Star className="w-10 h-10 text-yellow-400 fill-current mx-auto mb-6" />
            <h2 className="text-4xl font-bold mb-8 text-[#5D4037]">Vendégeink mondták</h2>
            <blockquote className="text-2xl italic text-gray-600 font-serif leading-relaxed mb-8">
              "A legfinomabb macaron, amit valaha ettem! A pisztáciás egyszerűen mennyei. Mindenkinek csak ajánlani tudom a helyet, igazi ékszerdoboz."
            </blockquote>
            <cite className="font-bold text-[#E91E63] not-italic">— Kovács Anna, Budapest</cite>
         </div>
      </section>

      {/* Contact & Footer */}
      <section id="contact" className="bg-[#5D4037] text-white py-24 px-6 relative overflow-hidden">
        {/* Background Pattern */}
        <div className="absolute inset-0 opacity-5" style={{backgroundImage: 'radial-gradient(circle, #ffffff 2px, transparent 2px)', backgroundSize: '30px 30px'}}></div>

        <div className="max-w-4xl mx-auto text-center relative z-10">
          <h2 className="text-4xl font-bold mb-16">Látogass el hozzánk</h2>
          
          <div className="grid md:grid-cols-3 gap-12 mb-16">
            <div className="flex flex-col items-center group">
              <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-[#E91E63] transition-colors duration-300">
                <MapPin className="w-8 h-8" />
              </div>
              <h4 className="font-bold text-xl mb-3">Címünk</h4>
              <p className="text-white/70 leading-relaxed">1052 Budapest,<br/>Petőfi Sándor utca 12.</p>
            </div>
            <div className="flex flex-col items-center group">
              <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-[#E91E63] transition-colors duration-300">
                <Clock className="w-8 h-8" />
              </div>
              <h4 className="font-bold text-xl mb-3">Nyitvatartás</h4>
              <p className="text-white/70 leading-relaxed">H-P: 08:00 - 19:00<br/>Szo-V: 09:00 - 16:00</p>
            </div>
            <div className="flex flex-col items-center group">
              <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mb-6 group-hover:bg-[#E91E63] transition-colors duration-300">
                <Phone className="w-8 h-8" />
              </div>
              <h4 className="font-bold text-xl mb-3">Kapcsolat</h4>
              <p className="text-white/70 leading-relaxed">+36 1 234 5678<br/>hello@sweetcraving.hu</p>
            </div>
          </div>

          <div className="flex justify-center space-x-8">
            <a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all transform hover:scale-110"><Facebook className="w-8 h-8" /></a>
            <a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all transform hover:scale-110"><Instagram className="w-8 h-8" /></a>
            <a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all transform hover:scale-110"><Mail className="w-8 h-8" /></a>
          </div>
          
          <div className="mt-16 pt-8 border-t border-white/10 text-white/40 text-sm font-sans">
             &copy; 2024 SweetCraving. Ez egy demonstrációs weboldal a MotionWeb referenciáihoz.
          </div>
        </div>
      </section>
    </div>
  );
};