import React, { useState, useEffect, useRef } from 'react';
import { Heart, Gift, Clock, Home, Sparkles, Star, ShoppingBag, MapPin, Volume2, VolumeX, Mail, Flower2 } from 'lucide-react';

const App = () => {
  const [page, setPage] = useState('landing'); 
  const [candleLit, setCandleLit] = useState(true);
  const [isPlaying, setIsPlaying] = useState(false);
  const [showContent, setShowContent] = useState(false);
  const audioRef = useRef(null);

  useEffect(() => {
    setShowContent(true);
  }, []);

  // Function to handle candle blowing and starting music
  const handleBlowCandle = () => {
    setCandleLit(false);
    // Mula mainkan lagu bila lilin ditiup (interaction rule)
    if (audioRef.current && !isPlaying) {
      audioRef.current.play().catch(e => console.log("Autoplay blocked"));
      setIsPlaying(true);
    }
  };

  const toggleMusic = () => {
    if (audioRef.current) {
      if (isPlaying) {
        audioRef.current.pause();
      } else {
        audioRef.current.play();
      }
      setIsPlaying(!isPlaying);
    }
  };

  const mesaMallActivities = [
    { name: 'Boost Juice', icon: '🥤', desc: 'Air fav Mia untuk chill.' },
    { name: 'Bungkus Kaw Kaw', icon: '🍱', desc: 'Lunch kaw-kaw punya!' },
    { name: 'Aktiviti Bebas', icon: '🎨', desc: 'Masa untuk cuci mata.' },
    { name: 'Family Mart', icon: '🍦', desc: 'Oden & Sofuto is a must!' },
    { name: 'CU Mart', icon: '🇰🇷', desc: 'Korean snacks haul.' },
    { name: 'myNews', icon: '🗞️', desc: 'Grab jajan jap.' },
    { name: 'Guardian', icon: '💄', desc: 'Self-care & makeup haul!' }
  ];

  // Landing Page: Meriah Coquette Style
  const LandingPage = () => (
    <div className="min-h-screen flex flex-col items-center justify-center p-6 text-center bg-[#fff5f7] relative overflow-hidden">
      <div className="absolute top-10 left-10 text-pink-200 animate-pulse text-6xl">🎀</div>
      <div className="absolute top-20 right-20 text-pink-100 text-5xl">🌸</div>
      <div className="absolute bottom-20 left-20 text-pink-100 text-5xl rotate-12">🌸</div>
      <div className="absolute bottom-10 right-10 text-pink-200 animate-bounce text-6xl">🎀</div>
      <div className="absolute top-1/2 left-4 text-pink-200 opacity-40 text-4xl"><Flower2 /></div>
      <div className="absolute top-1/3 right-4 text-pink-200 opacity-40 text-4xl"><Heart fill="currentColor" /></div>
      
      <div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'radial-gradient(#ffb7c5 1px, transparent 1px)', size: '20px 20px' }}></div>

      <div className={`transition-all duration-1000 z-10 ${showContent ? 'scale-110 opacity-100' : 'scale-90 opacity-0'}`}>
        <div className="inline-block mb-4 px-4 py-1 bg-white/60 border border-pink-200 rounded-full text-pink-400 text-xs tracking-widest uppercase font-bold">
          ✨ 31 . 12 . 2012 ✨
        </div>
        
        <h2 className="text-pink-400 font-serif italic text-3xl mb-8 drop-shadow-sm">Sweet 13 Princess 🎀</h2>
        
        <div className="relative mb-12 cursor-pointer group transform hover:scale-105 transition-transform" onClick={handleBlowCandle}>
          <div className="text-[12rem] leading-none drop-shadow-xl select-none">🎂</div>
          {candleLit && (
            <div className="absolute -top-6 left-1/2 -translate-x-1/2 animate-bounce">
              <div className="w-6 h-10 bg-gradient-to-t from-orange-500 to-yellow-300 rounded-full blur-[1px] shadow-[0_0_20px_#ff9800]"></div>
            </div>
          )}
          {!candleLit && (
            <div className="absolute -top-4 left-1/2 -translate-x-1/2 text-pink-300 font-bold animate-fade-out italic">
              ✨ Wish Granted! ✨
            </div>
          )}
        </div>

        <p className="text-pink-400 font-medium mb-10 max-w-xs mx-auto bg-white/40 py-2 px-6 rounded-full backdrop-blur-sm border border-pink-100">
          {candleLit ? "Tiup lilin jap then buat wish! 🕯️" : "Omg yeay! Happy birthday Mia! 💖"}
        </p>

        {!candleLit && (
          <button 
            onClick={() => setPage('gift')}
            className="group px-12 py-5 bg-pink-400 text-white rounded-full shadow-[0_10px_20px_rgba(244,114,182,0.3)] hover:bg-pink-500 transition-all animate-bounce flex items-center gap-3 mx-auto"
          >
            <span className="font-bold text-lg tracking-wide font-serif">Buka Gift Dari Kakak</span> 
            <Gift size={24} className="group-hover:rotate-12 transition-transform" />
          </button>
        )}
      </div>
    </div>
  );

  const GiftPage = () => (
    <div className="min-h-screen flex flex-col items-center justify-center bg-[#fff5f7] p-6">
      <div className="text-center relative z-10">
        <div className="absolute -top-20 -left-10 text-pink-200 text-8xl opacity-30">🎀</div>
        <h2 className="text-3xl font-serif text-pink-500 mb-12 italic tracking-tight">Ehem, Kakak ada something untuk Mia... 🧸</h2>
        <div 
          onClick={() => setPage('letter')}
          className="text-[10rem] cursor-pointer hover:scale-110 transition-transform active:scale-95 animate-pulse drop-shadow-2xl"
        >
          🎁
        </div>
        <p className="mt-12 text-pink-300 font-bold uppercase tracking-[0.2em] text-sm animate-bounce">Klik kotak ni tau!</p>
      </div>
    </div>
  );

  const LetterPage = () => (
    <div className="min-h-screen flex flex-col items-center justify-center bg-[#fffdfa] p-6 relative">
      <div className="max-w-md w-full bg-white p-10 rounded-[2.5rem] shadow-[0_20px_50px_rgba(255,182,193,0.2)] border-t-[12px] border-pink-300 relative overflow-hidden">
        <div className="absolute -top-2 -right-2 text-5xl">🎀</div>
        <div className="absolute -bottom-4 -left-4 text-pink-50 opacity-20 text-[10rem] rotate-12"><Heart fill="currentColor" /></div>
        
        <h3 className="text-3xl font-serif text-pink-400 mb-6 italic border-b border-pink-50 pb-2">Happy 13th, Mia! 🎂</h3>
        
        <div className="text-gray-600 leading-relaxed space-y-5 font-medium z-10 relative">
          <p className="text-lg">Fuyoo, dah jadi teenager ehh? Pejam celik je dah besar Mia ni. Rasa macam baru semalam je Mia lahir. 🥹</p>
          <p>Harini harinya Mia, so no stress-stress tau! Enjoy gila-gila harini. Moga makin cantik, makin bijak, and stay comel macam selalu. Walaupun kita selalu gaduh-gaduh manja, Mia tetap adik Kakak yang paling Kakak sayang!</p>
          <p>Jom kita pusing-pusing harini, kita buat harini jadi hari paling best untuk Mia. Love ya baby sister! ✨💖</p>
        </div>
        
        <div className="mt-12 pt-8 border-t border-pink-100 flex flex-col items-center">
          <p className="text-[10px] text-pink-300 mb-5 font-bold uppercase tracking-widest text-center">Click sampul ni untuk check plan harini 👇</p>
          <button 
            onClick={() => setPage('itinerary')}
            className="w-24 h-24 bg-pink-50 rounded-full flex items-center justify-center text-pink-400 hover:bg-pink-100 transition-all shadow-inner border border-pink-100 group"
          >
            <Mail size={48} className="group-hover:scale-110 transition-transform" />
          </button>
        </div>
      </div>
    </div>
  );

  const ItineraryPage = () => (
    <div className="min-h-screen bg-[#fffdfa] p-4 md:p-10 pb-32">
      <div className="max-w-2xl mx-auto">
        <header className="text-center mb-14">
          <div className="inline-block p-2 px-6 bg-pink-100 rounded-full text-pink-500 text-xs font-bold mb-4 shadow-sm border border-pink-200">
             🎀 FOR MIA ONLY 🎀
          </div>
          <h2 className="text-5xl font-serif text-gray-800 tracking-tight text-center">Tentatif Harini</h2>
          <div className="w-24 h-1.5 bg-pink-200 mx-auto mt-6 rounded-full"></div>
        </header>

        <div className="flex items-center gap-4 mb-10 bg-white p-5 rounded-3xl border border-pink-100 shadow-[0_4px_15px_rgba(255,182,193,0.1)]">
          <div className="bg-pink-400 p-2 rounded-xl text-white"><Clock size={20} /></div>
          <span className="font-bold text-gray-700">Mula pusing pukul: 10:00 AM</span>
        </div>

        <section className="mb-14">
          <h3 className="flex items-center gap-3 text-2xl font-bold text-pink-600 mb-8 font-serif">
            <ShoppingBag size={28} /> Mesa Mall Stops
          </h3>
          <div className="grid gap-4">
            {mesaMallActivities.map((act, idx) => (
              <div key={idx} className="flex items-center gap-5 p-5 bg-white rounded-[2rem] shadow-sm border border-transparent hover:border-pink-200 hover:shadow-md transition-all group">
                <div className="text-3xl bg-pink-50 w-14 h-14 flex items-center justify-center rounded-2xl group-hover:scale-110 transition-transform">{act.icon}</div>
                <div className="flex-1">
                  <h4 className="font-bold text-gray-800 text-base">{act.name}</h4>
                  <p className="text-xs text-pink-300 font-medium uppercase tracking-wider mt-1">{act.desc}</p>
                </div>
                <div className="text-pink-100 group-hover:text-pink-300 transition-colors">
                  <Heart size={20} fill="currentColor" />
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="mb-14">
          <h3 className="flex items-center gap-3 text-2xl font-bold text-pink-600 mb-8 font-serif">
            <Sparkles size={28} /> Surprise Kat AEON!
          </h3>
          <div className="bg-gradient-to-br from-pink-400 to-pink-300 p-8 rounded-[2.5rem] shadow-xl text-white relative overflow-hidden text-center">
            <div className="absolute -top-4 -right-4 text-white opacity-20 text-9xl rotate-12">🎀</div>
            <p className="text-lg font-medium mb-6 relative z-10 italic">Ada benda manis menanti...</p>
            <div className="flex flex-wrap justify-center gap-3 relative z-10">
              {['Llaollao 🍦', 'NS Fest 🥨'].map((item, i) => (
                <span key={i} className="px-6 py-3 bg-white/20 backdrop-blur-md text-white rounded-2xl text-sm font-bold border border-white/30 shadow-sm">
                  {item}
                </span>
              ))}
            </div>
          </div>
        </section>

        <section className="bg-gray-800 p-8 rounded-[2.5rem] text-white text-center shadow-2xl relative">
          <h4 className="text-2xl font-bold font-serif mb-2">Balik & Rehat</h4>
          <p className="opacity-70 text-sm">Estimasi pukul 2:00 PM</p>
          <div className="mt-4 text-3xl">🏠💖</div>
        </section>

        <footer className="mt-20 text-center opacity-30 text-[10px] italic font-bold tracking-[0.3em] uppercase">
           Made with love by Kakak for Mia 🎀
        </footer>
      </div>

      <button 
        onClick={() => setPage('landing')}
        className="fixed bottom-10 left-10 p-5 bg-white shadow-2xl rounded-full text-pink-400 border border-pink-100 hover:scale-110 transition-all z-50"
      >
        <Home size={28} />
      </button>
    </div>
  );

  return (
    <div className="font-sans text-[#4a4a4a] selection:bg-pink-100">
      <style>
        {`
          @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:wght@200..800&display=swap');
          body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #fff5f7; }
          .font-serif { font-family: 'Playfair Display', serif; }
          @keyframes fade-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }
          .animate-fade-out { animation: fade-out 1.5s forwards; }
        `}
      </style>

      {/* Music Control - Soft Piano Happy Birthday Music */}
      <div className="fixed top-6 right-6 z-50">
        <button 
          onClick={toggleMusic} 
          className="flex items-center gap-3 bg-white/90 backdrop-blur-md p-3 px-5 rounded-full shadow-lg border border-pink-100 text-pink-400 hover:text-pink-500 transition-all hover:scale-105 active:scale-95"
        >
          {isPlaying ? <Volume2 size={24} className="animate-pulse" /> : <VolumeX size={24} />}
          <span className="text-xs font-bold uppercase tracking-widest">{isPlaying ? "Music On" : "Music Off"}</span>
        </button>
        <audio 
          ref={audioRef}
          loop
          src="https://www.chosic.com/wp-content/uploads/2021/04/Happy-Birthday-Piano-Version.mp3" 
        />
      </div>

      {page === 'landing' && <LandingPage />}
      {page === 'gift' && <GiftPage />}
      {page === 'letter' && <LetterPage />}
      {page === 'itinerary' && <ItineraryPage />}
    </div>
  );
};

export default App;