const Envelope = ({ side, delay = "0s", message = "Chúc Mừng Năm Mới! ✨" }: { side: "left" | "right", delay?: string, message?: string }) => (
    <div className={`fixed top-0 ${side === "left" ? "left-4 md:left-48" : "right-4"} z-[9999] pointer-events-none select-none hidden md:block`}>
        <div className="relative animate-[sway_4s_ease-in-out_infinite] origin-top" style={{ animationDelay: delay }}>
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1px] h-12 bg-gradient-to-b from-transparent to-red-600/50" />
            <div className="pt-10 group pointer-events-auto cursor-pointer">
                <div className="relative flex flex-col items-center">
                    <div className="w-16 h-24 bg-red-600 rounded-sm shadow-2xl flex flex-col items-center justify-center border border-red-500 overflow-hidden relative transition-transform hover:scale-110 active:scale-95 duration-300">
                        <div className="absolute top-0 left-0 w-full h-1 bg-yellow-400 opacity-50" />
                        <div className="text-yellow-400 font-bold text-lg drop-shadow-sm">🧧</div>
                        <div className="text-[10px] text-yellow-300 font-serif mt-1 font-bold">2026</div>
                        <div className="text-[8px] text-yellow-200/80 mt-1 uppercase tracking-tighter">Bính Ngọ</div>
                        <div className="absolute inset-0 bg-gradient-to-tr from-transparent via-white/10 to-transparent pointer-events-none translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
                    </div>
                    <div className="mt-[-2px] flex flex-col items-center">
                        <div className="w-1 h-3 bg-red-700" />
                        <div className="text-xl filter drop-shadow-md">🐎</div>
                    </div>
                    <div className={`absolute top-full mt-2 ${side === "right" ? "right-0" : "left-0"} bg-white/90 backdrop-blur px-3 py-1 rounded-full text-[10px] font-bold text-red-600 shadow-xl opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap border border-red-100 italic`}>
                        {message}
                    </div>
                </div>
            </div>
        </div>
    </div>
);

const Blossom = ({ top, left, right, bottom, size = "text-xl", delay = "0s" }: { top?: string, left?: string, right?: string, bottom?: string, size?: string, delay?: string }) => (
    <div
        className={`fixed ${size} pointer-events-none select-none animate-[sway_5s_ease-in-out_infinite] opacity-40 z-[5] hidden md:block`}
        style={{ top, left, right, bottom, animationDelay: delay }}
    >
        {Math.random() > 0.5 ? "🌸" : "🌼"}
    </div>
);

const FestiveCorner = () => {
    return (
        <>
            {/* Background Horse Image - Smaller and tucked deeper into the corner */}
            <div className="fixed bottom-0 right-0 w-[320px] h-[320px] pointer-events-none select-none opacity-100 z-0 hidden md:block translate-x-12 translate-y-12">
                <img src="/bgconngua.png" alt="" className="w-full h-full object-contain" />
            </div>

            {/* Two original side envelopes */}
            <Envelope side="left" delay="-2s" message="Vạn Sự Như Ý! 🧧" />
            <Envelope side="right" message="Chúc Mừng Năm Mới! ✨" />

            {/* Central decoration branch */}
            <div className="fixed top-0 left-64 md:left-[480px] z-[10] pointer-events-none select-none hidden md:block">
                <div className="relative">
                    <div className="absolute top-0 left-0 animate-[sway_6s_ease-in-out_infinite] origin-top-left">
                        <div className="text-5xl filter drop-shadow-lg opacity-90">🌸</div>
                        <div className="absolute top-4 left-6 text-3xl opacity-80">🌸</div>
                        <div className="absolute top-8 left-4 animate-[sway_4s_ease-in-out_infinite] delay-500 origin-top">
                            <div className="w-[1px] h-10 bg-red-600/30 mx-auto" />
                            <div className="group pointer-events-auto cursor-pointer relative">
                                <div className="w-12 h-18 bg-red-600 rounded-sm shadow-lg flex flex-col items-center justify-center border border-red-500 transition-transform hover:scale-110">
                                    <div className="text-yellow-400 font-bold text-sm">🧧</div>
                                    <div className="text-[8px] text-yellow-200 font-bold mt-1">2026</div>
                                </div>
                                <div className="absolute top-full mt-1 left-0 bg-white/90 backdrop-blur px-2 py-0.5 rounded-full text-[8px] font-bold text-red-600 shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap border border-red-50 italic">
                                    Lộc xuân tràn đầy! 🌸
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Scattered Blossoms and Icons around the screen */}
            <Blossom top="20%" left="5%" delay="-1s" size="text-2xl" />
            <Blossom top="70%" left="2%" delay="-3s" size="text-xl" />
            <Blossom top="15%" right="15%" delay="-2s" size="text-3xl" />
            <Blossom bottom="20%" left="15%" delay="-4s" size="text-2xl" />
            <Blossom bottom="10%" right="25%" delay="-1.5s" size="text-xl" />

            {/* Small floating Sparkles */}
            <div className="fixed top-1/4 right-1/3 text-yellow-400 animate-pulse opacity-20 pointer-events-none select-none text-2xl hidden md:block">✨</div>
            <div className="fixed bottom-1/3 left-1/4 text-yellow-400 animate-pulse delay-700 opacity-20 pointer-events-none select-none text-xl hidden md:block">✨</div>

            <style dangerouslySetInnerHTML={{
                __html: `
        @keyframes sway {
          0%, 100% { transform: rotate(-8deg) translateY(0); }
          50% { transform: rotate(8deg) translateY(2px); }
        }
      `}} />
        </>
    );
};

export default FestiveCorner;
