MotionWebStudio/pages/demos/SweetCraving.tsx

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

export const SweetCraving: React.FC = () => {
  const [scrolled, setScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = 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-4 right-4 md:bottom-6 md:right-6 z-[60]">
        <Link to="/#references">
          <button className="bg-white/90 backdrop-blur-md shadow-lg px-4 md:px-5 py-2 md:py-2.5 rounded-full text-xs md: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/95 backdrop-blur-md shadow-lg py-2 md:py-3' 
            : 'bg-transparent py-4 md:py-6'
        }`}
      >
        <div className="max-w-6xl mx-auto px-4 md:px-6 flex justify-between items-center">
          <div className={`text-2xl md: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-8 lg: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>

          <div className="flex items-center gap-4">
            <button className="hidden sm:block bg-[#E91E63] text-white px-6 md:px-8 py-2 md:2.5 rounded-full font-sans font-bold text-xs md:text-sm hover:bg-[#D81B60] transition-all shadow-lg hover:shadow-[#E91E63]/30">
              Rendelés
            </button>
            <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden p-2 text-[#E91E63]">
               {mobileMenuOpen ? <X /> : <Menu />}
            </button>
          </div>
        </div>

        {/* Mobile Nav Overlay */}
        {mobileMenuOpen && (
          <div className="md:hidden absolute top-full left-0 w-full bg-white shadow-2xl animate-fade-in p-6 space-y-6 flex flex-col font-sans font-bold text-center border-t border-gray-100">
             {['Kezdőlap', 'Rólunk', 'Kínálat', 'Vélemények'].map((item, i) => (
              <a 
                key={i} 
                onClick={() => setMobileMenuOpen(false)}
                href={`#${item.toLowerCase() === 'kezdőlap' ? 'home' : item === 'Kínálat' ? 'menu' : item === 'Rólunk' ? 'about' : 'contact'}`} 
                className="text-lg hover:text-[#E91E63]"
              >
                {item}
              </a>
            ))}
            <button className="bg-[#E91E63] text-white py-4 rounded-xl">Rendelés Most</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 object-center"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-[#FFF5F5] via-white/40 to-transparent md:via-white/20"></div>
        </div>
        
        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto pt-20">
          <div className="animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
            <span className="bg-white/80 backdrop-blur-md px-4 md:px-6 py-1.5 md:py-2 rounded-full text-[#E91E63] text-[10px] md:text-xs font-bold font-sans tracking-[0.2em] uppercase mb-6 md:mb-8 inline-block shadow-sm">
              Kézműves Desszertműhely
            </span>
          </div>
          
          <h1 className="text-4xl sm:text-6xl md:text-8xl font-bold mb-6 md:mb-8 drop-shadow-sm text-gray-900 leading-tight animate-fade-in-up px-2" style={{ animationDelay: '0.3s' }}>
            Édes Álmok <br className="hidden sm:block" />
            <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-base md:text-xl lg:text-2xl text-gray-800/80 max-w-2xl mx-auto mb-8 md:mb-12 font-medium leading-relaxed animate-fade-in-up px-4" style={{ animationDelay: '0.5s' }}>
            Természetes alapanyagokból, szívvel-lélekkel készült desszertek minden alkalomra.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 md:gap-5 justify-center animate-fade-in-up px-6 sm:px-0" style={{ animationDelay: '0.7s' }}>
             <a href="#menu" className="bg-[#E91E63] text-white px-8 md:px-10 py-3 md:py-4 rounded-full font-sans font-bold hover:bg-[#D81B60] transition-all shadow-xl shadow-[#E91E63]/30 hover:-translate-y-1">
               Kínálatunk
             </a>
             <a href="#about" className="bg-white text-[#5D4037] px-8 md:px-10 py-3 md:py-4 rounded-full font-sans font-bold hover:bg-gray-50 transition-all shadow-lg hover:-translate-y-1">
               Ismerj meg minket
             </a>
          </div>
        </div>

        <div className="absolute bottom-6 md:bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
          <ChevronDown className="w-6 h-6 md:w-8 h-8 text-[#E91E63] opacity-60" />
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 md:py-32 px-4 md:px-6 bg-white overflow-hidden">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12 md:gap-20 items-center">
            <div className="relative group px-4 md:px-0">
              <div className="absolute -top-4 md:-top-6 -left-4 md:-left-6 w-full h-full border-4 border-[#FF80AB]/30 rounded-[1.5rem] md:rounded-[2rem]"></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-[1.5rem] md:rounded-[2rem] shadow-2xl relative z-10 w-full"
              />
              {/* Floating Badge (hidden on small mobile) */}
              <div className="absolute -bottom-6 -right-6 md:-bottom-10 md:-right-10 z-20 bg-white p-4 md:p-6 rounded-xl md:rounded-2xl shadow-xl animate-bounce-slow hidden sm:block">
                <div className="text-center">
                   <p className="text-2xl md:text-4xl font-bold text-[#E91E63]">5+</p>
                   <p className="text-[10px] md:text-sm font-sans text-gray-500 uppercase tracking-wider">Év Tapasztalat</p>
                </div>
              </div>
            </div>
            
            <div className="space-y-6 md:space-y-8 text-center md:text-left px-2">
              <h2 className="text-4xl md:text-5xl font-bold text-[#5D4037] leading-tight">
                A szenvedélyünk <br/>
                <span className="text-[#E91E63] italic text-3xl md:text-4xl lg:text-5xl">a minőség</span>
              </h2>
              <p className="text-base md: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.
              </p>
              
              <div className="grid gap-4 md: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-3 md:p-4 rounded-xl bg-[#FFF5F5] border border-[#FF80AB]/20 transition-all">
                    <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-white flex items-center justify-center text-[#E91E63] shadow-sm flex-shrink-0">
                      <item.icon className="w-4 h-4 md:w-5 h-5" />
                    </div>
                    <span className="font-bold text-[#5D4037] text-sm md:text-base">{item.text}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Menu Grid */}
      <section id="menu" className="py-20 md:py-32 bg-[#FFF5F5]">
        <div className="max-w-6xl mx-auto px-4 md:px-6">
          <div className="text-center mb-12 md:mb-20">
            <h2 className="text-4xl md:text-5xl font-bold mb-4 md:mb-6 text-[#5D4037]">Kínálatunk</h2>
            <p className="text-[#795548] text-base md:text-xl max-w-2xl mx-auto font-sans px-4">
              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-6 md: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">
                <div className="overflow-hidden rounded-2xl mb-4 md:mb-6 h-48 md: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-[10px] font-bold text-[#E91E63] uppercase tracking-wider">
                      {item.tag}
                    </div>
                  )}
                </div>
                <div className="px-2 pb-2 text-center sm:text-left">
                  <div className="flex flex-col sm:flex-row justify-between items-center sm:items-start mb-2 gap-2">
                    <h3 className="text-xl md:text-2xl font-bold text-[#5D4037]">{item.title}</h3>
                    <span className="text-base md:text-lg font-bold text-[#E91E63] bg-[#FFF5F5] px-3 py-0.5 rounded-lg">{item.price}</span>
                  </div>
                  <p className="text-gray-500 text-xs md:text-sm line-clamp-2">Krémes, ízletes finomság, amely elolvad a szádban.</p>
                </div>
              </div>
            ))}
          </div>
          
          <div className="mt-12 md:mt-16 text-center">
            <button className="border-2 border-[#E91E63] text-[#E91E63] px-8 md:px-10 py-3 rounded-full font-bold hover:bg-[#E91E63] hover:text-white transition-all uppercase tracking-wider text-xs md:text-sm">
              Teljes étlap letöltése
            </button>
          </div>
        </div>
      </section>

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

      {/* Contact & Footer */}
      <section id="contact" className="bg-[#5D4037] text-white py-20 md:py-24 px-4 md:px-6 relative overflow-hidden">
        <div className="max-w-4xl mx-auto text-center relative z-10">
          <h2 className="text-3xl md:text-4xl font-bold mb-12 md:mb-16">Látogass el hozzánk</h2>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 md:gap-12 mb-12 md:mb-16">
            <div className="flex flex-col items-center">
              <div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 rounded-full flex items-center justify-center mb-4 md:mb-6">
                <MapPin className="w-6 h-6 md:w-8 h-8" />
              </div>
              <h4 className="font-bold text-lg md:text-xl mb-2 md:mb-3">Címünk</h4>
              <p className="text-white/70 text-sm md:text-base leading-relaxed">1052 Budapest,<br/>Petőfi Sándor utca 12.</p>
            </div>
            <div className="flex flex-col items-center">
              <div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 rounded-full flex items-center justify-center mb-4 md:mb-6">
                <Clock className="w-6 h-6 md:w-8 h-8" />
              </div>
              <h4 className="font-bold text-lg md:text-xl mb-2 md:mb-3">Nyitvatartás</h4>
              <p className="text-white/70 text-sm md:text-base leading-relaxed">H-P: 08:00 - 19:00<br/>Szo-V: 09:00 - 16:00</p>
            </div>
            <div className="flex flex-col items-center sm:col-span-2 md:col-span-1">
              <div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 rounded-full flex items-center justify-center mb-4 md:mb-6">
                <Phone className="w-6 h-6 md:w-8 h-8" />
              </div>
              <h4 className="font-bold text-lg md:text-xl mb-2 md:mb-3">Kapcsolat</h4>
              <p className="text-white/70 text-sm md:text-base leading-relaxed">+36 1 234 5678<br/>hello@sweetcraving.hu</p>
            </div>
          </div>

          <div className="flex justify-center space-x-6 md:space-x-8">
            <a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all"><Facebook className="w-6 h-6 md:w-8 h-8" /></a>
            <a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all"><Instagram className="w-6 h-6 md:w-8 h-8" /></a>
            <a href="#" className="opacity-60 hover:opacity-100 hover:text-[#E91E63] transition-all"><Mail className="w-6 h-6 md:w-8 h-8" /></a>
          </div>
          
          <div className="mt-12 md:mt-16 pt-8 border-t border-white/10 text-white/40 text-[10px] md:text-xs font-sans">
             &copy; 2024 SweetCraving. Demonstrációs oldal.
          </div>
        </div>
      </section>
    </div>
  );
};