function BottomNav() { const [activeTab, setActiveTab] = useState("home"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 bg-black flex justify-around items-center h-[60px] border-t border-gray-900", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("home"), className: `flex flex-col items-center transition-all duration-200 transform hover:scale-110 ${activeTab === "home" ? "text-white after:content-[''] after:w-1 after:h-1 after:bg-[#FF3366] after:rounded-full after:mt-1" : "text-gray-400 hover:text-gray-200"}`, __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-xl", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "For You")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("discover"), className: `flex flex-col items-center transition-all duration-200 transform hover:scale-110 ${activeTab === "discover" ? "text-white after:content-[''] after:w-1 after:h-1 after:bg-[#FF3366] after:rounded-full after:mt-1" : "text-gray-400 hover:text-gray-200"}`, __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-compass text-xl", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Discover")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("upload"), className: "flex flex-col items-center relative transition-transform duration-200 hover:scale-110 active:scale-95", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-7 bg-gradient-to-r from-[#00f2ea] to-[#ff0050] flex items-center justify-center rounded-md relative overflow-hidden shadow-lg hover:shadow-[#ff0050]/20", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black absolute inset-[1px] rounded-[3px] flex items-center justify-center", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-white text-xl", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("inbox"), className: `flex flex-col items-center transition-all duration-200 transform hover:scale-110 ${activeTab === "inbox" ? "text-white after:content-[''] after:w-1 after:h-1 after:bg-[#FF3366] after:rounded-full after:mt-1" : "text-gray-400 hover:text-gray-200"}`, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-inbox text-xl", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Inbox")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("profile"), className: `flex flex-col items-center transition-all duration-200 transform hover:scale-110 ${activeTab === "profile" ? "text-white after:content-[''] after:w-1 after:h-1 after:bg-[#FF3366] after:rounded-full after:mt-1" : "text-gray-400 hover:text-gray-200"}`, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-xl", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Profile"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .active-indicator { animation: bounce 2s infinite; } `)); } function BottomNavStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BottomNav, { __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this })); } function ChatMessage({ message, timestamp, isRead, isSent, isOwn }) { return /*#__PURE__*/ React.createElement("div", { className: `flex ${isOwn ? "justify-end" : "justify-start"} items-end max-w-[80%] ${isOwn ? "ml-auto" : "mr-auto"}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-2xl px-4 py-2 ${isOwn ? "bg-[#FF3366] rounded-br-none" : "bg-[#2A2A2A] rounded-bl-none"}`, __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-sm font-roboto break-words", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, message), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-end gap-1 mt-1", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[10px] text-gray-300", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, timestamp), isSent && /*#__PURE__*/ React.createElement("i", { className: `fas fa-check-double text-[10px] ${isRead ? "text-blue-400" : "text-gray-300"}`, __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this })))); } function ChatMessageStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-black p-8 space-y-4", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatMessage, { message: "Hey, how are you?", timestamp: "10:30 AM", isRead: true, isSent: true, isOwn: true, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChatMessage, { message: "I'm good, thanks! How about you?", timestamp: "10:31 AM", isRead: false, isSent: false, isOwn: false, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChatMessage, { message: "This is a longer message that should wrap properly when it exceeds the maximum width of the container. Testing text wrapping functionality.", timestamp: "10:32 AM", isRead: true, isSent: true, isOwn: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this })); } function VideoPlayer({ videoUrl = "/sample-video.mp4", username = "creator123", profilePic = "/profile.jpg", likes = "1.2M", comments = "4,218", shares = "1,832", description = "Check out this awesome video! #trending" }) { const [isPlaying, setIsPlaying] = useState(false); const [progress, setProgress] = useState(0); const [isLiked, setIsLiked] = useState(false); const videoRef = useRef(null); const togglePlay = ()=>{ if (videoRef.current.paused) { videoRef.current.play(); setIsPlaying(true); } else { videoRef.current.pause(); setIsPlaying(false); } }; const updateProgress = ()=>{ if (videoRef.current) { const progress = videoRef.current.currentTime / videoRef.current.duration * 100; setProgress(progress); } }; return /*#__PURE__*/ React.createElement("div", { className: "relative h-screen w-full bg-black", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef, className: "h-full w-full object-cover", onClick: togglePlay, onTimeUpdate: updateProgress, loop: true, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: videoUrl, type: "video/mp4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 right-0", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-1 bg-gray-800", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-[#FF3366] transition-all duration-300 ease-out", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/60 to-transparent", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-end justify-between", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 mr-16", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3 mb-3", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: profilePic, alt: "Profile", className: "w-12 h-12 rounded-full border-2 border-white", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, username), /*#__PURE__*/ React.createElement("button", { className: "border border-white text-white px-4 py-1 rounded-full text-sm transition-all hover:bg-white hover:text-black duration-300", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "Follow")), /*#__PURE__*/ React.createElement("p", { className: "text-white mb-4 line-clamp-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, description)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "group flex flex-col items-center", onClick: ()=>setIsLiked(!isLiked), __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 flex items-center justify-center rounded-full bg-black/40 group-hover:bg-black/60 transition-all duration-300", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-heart text-2xl ${isLiked ? "text-[#FF3366]" : "text-white"}`, __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-xs mt-1", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, likes)), /*#__PURE__*/ React.createElement("button", { className: "group flex flex-col items-center", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 flex items-center justify-center rounded-full bg-black/40 group-hover:bg-black/60 transition-all duration-300", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment text-2xl text-white", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-xs mt-1", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, comments)), /*#__PURE__*/ React.createElement("button", { className: "group flex flex-col items-center", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 flex items-center justify-center rounded-full bg-black/40 group-hover:bg-black/60 transition-all duration-300", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share text-2xl text-white", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-xs mt-1", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, shares)), /*#__PURE__*/ React.createElement("button", { className: "group", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 flex items-center justify-center rounded-full bg-black/40 group-hover:bg-black/60 transition-all duration-300", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: profilePic, alt: "Music", className: "w-8 h-8 rounded-full", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .text-[#FF3366] { animation: pulse 1s ease-in-out; } `)); } function VideoPlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-black min-h-screen", __source: { fileName: "", lineNumber: 127, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { videoUrl: "/sample-video.mp4", username: "JaneSmith", profilePic: "/profile.jpg", likes: "1.2M", comments: "4,218", shares: "1,832", description: "Having the best day ever! 🌞 #sunshine #goodvibes", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedSection, setSelectedSection] = useState("challenges"); const [selectedTag, setSelectedTag] = useState(""); const [selectedCategory, setSelectedCategory] = useState("Trending"); const [searchResults, setSearchResults] = useState([]); const soundCategories = [ { name: "Trending", icon: "fa-fire" }, { name: "Pop", icon: "fa-music" }, { name: "Hip Hop", icon: "fa-record-vinyl" }, { name: "Electronic", icon: "fa-bolt" }, { name: "Rock", icon: "fa-guitar" }, { name: "Vocals", icon: "fa-microphone" }, { name: "Effects", icon: "fa-magic" }, { name: "Ambient", icon: "fa-cloud" } ]; const trendingHashtags = [ "#viral", "#trending", "#dance", "#music", "#comedy", "#food", "#fashion" ]; const trendingSounds = [ { id: 1, title: "Original Sound - Artist Name", uses: "2.5M", thumbnail: "/sound-1.jpg", duration: "0:30", category: "Pop" }, { id: 2, title: "Popular Hit Remix", uses: "1.8M", thumbnail: "/sound-2.jpg", duration: "0:15", category: "Electronic" }, { id: 3, title: "Viral Sound Effect", uses: "1.2M", thumbnail: "/sound-3.jpg", duration: "0:20", category: "Effects" }, { id: 4, title: "Summer Vibes Mix", uses: "950K", thumbnail: "/sound-4.jpg", duration: "0:45", category: "Pop" }, { id: 5, title: "Hip Hop Beat", uses: "780K", thumbnail: "/sound-5.jpg", duration: "0:25", category: "Hip Hop" } ]; const filteredSounds = selectedCategory === "Trending" ? trendingSounds : trendingSounds.filter((sound)=>sound.category === selectedCategory); const challenges = [ { tag: "#DanceChallenge", count: "2.5M", prize: "$1000", endsIn: "2 days" }, { tag: "#DuetChallenge", count: "1.8M", prize: "$500", endsIn: "5 days" }, { tag: "#SingChallenge", count: "1.2M", prize: "$750", endsIn: "3 days" } ]; const forYou = [ { id: 1, thumbnail: "/video-thumb-1.jpg", likes: "15.2K", views: "89K" }, { id: 2, thumbnail: "/video-thumb-2.jpg", likes: "45K", views: "120K" }, { id: 3, thumbnail: "/video-thumb-3.jpg", likes: "32K", views: "95K" } ]; const handleSearch = useCallback(async (query)=>{ try { const response = await fetch(`/api/search?q=${query}`); if (!response.ok) { throw new Error("Search failed"); } const data = await response.json(); setSearchResults(data); } catch (err) { console.error("Search error:", err); setSearchResults([]); } }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white pb-16 font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "sticky top-0 z-10 bg-[#121212] border-b border-gray-800 space-y-4", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search hashtags, sounds, or users", className: "w-full bg-[#2A2A2A] text-white px-4 py-2 rounded-full pl-10", onChange: (e)=>handleSearch(e.target.value), name: "search", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-4 top-3 text-gray-400", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4 overflow-x-auto whitespace-nowrap pb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, trendingHashtags.map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag, onClick: ()=>setSelectedTag(tag), className: `mr-2 px-4 py-1 rounded-full text-sm ${selectedTag === tag ? "bg-[#FF3366] text-white" : "bg-[#2A2A2A] text-gray-400"}`, __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, tag))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around p-4", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, [ "Challenges", "Sounds", "For You" ].map((section)=>/*#__PURE__*/ React.createElement("button", { key: section, onClick: ()=>setSelectedSection(section.toLowerCase()), className: `px-4 py-2 ${selectedSection === section.toLowerCase() ? "text-[#FF3366] border-b-2 border-[#FF3366]" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, section)))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, selectedSection === "sounds" && /*#__PURE__*/ React.createElement("div", { className: "animate-[slideUp_0.3s_ease-out]", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 mb-6", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, soundCategories.map((category, index)=>/*#__PURE__*/ React.createElement("button", { key: category.name, onClick: ()=>setSelectedCategory(category.name), className: `p-4 rounded-lg transform transition-all duration-200 hover:scale-105 ${selectedCategory === category.name ? "bg-[#FF3366] shadow-lg shadow-[#FF3366]/20" : "bg-[#2A2A2A] hover:bg-[#3A3A3A]"}`, style: { animationDelay: `${index * 0.05}s` }, __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${category.icon} text-2xl mb-2`, __source: { fileName: "", lineNumber: 160, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 161, columnNumber: 19 }, __self: this }, category.name)))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, filteredSounds.map((sound, index)=>/*#__PURE__*/ React.createElement("div", { key: sound.id, className: "flex items-center bg-[#2A2A2A] p-4 rounded-lg transform hover:translate-x-1 transition-all duration-200 hover:shadow-lg hover:shadow-black/20", style: { animationDelay: `${index * 0.1}s` }, __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-12 h-12 mr-4 group", __source: { fileName: "", lineNumber: 172, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: sound.thumbnail, alt: "Sound thumbnail", className: "rounded-full", __source: { fileName: "", lineNumber: 173, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute inset-0 flex items-center justify-center bg-black/50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 178, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play transform transition-transform group-hover:scale-110", __source: { fileName: "", lineNumber: 179, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 182, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 183, columnNumber: 21 }, __self: this }, sound.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 184, columnNumber: 21 }, __self: this }, sound.uses, " uses · ", sound.duration), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 187, columnNumber: 21 }, __self: this }, sound.category)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end gap-2", __source: { fileName: "", lineNumber: 189, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF3366] px-4 py-2 rounded-full hover:bg-[#FF4477] transform transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-[#FF3366]/20", __source: { fileName: "", lineNumber: 190, columnNumber: 21 }, __self: this }, "Use"), /*#__PURE__*/ React.createElement("button", { className: "text-gray-400 hover:text-[#FF3366] transition-colors", __source: { fileName: "", lineNumber: 193, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bookmark", __source: { fileName: "", lineNumber: 194, columnNumber: 23 }, __self: this }))))))), selectedSection === "challenges" && /*#__PURE__*/ React.createElement("div", { className: "space-y-6 animate-[slideUp_0.3s_ease-out]", __source: { fileName: "", lineNumber: 204, columnNumber: 11 }, __self: this }, challenges.map((challenge, index)=>/*#__PURE__*/ React.createElement("div", { key: challenge.tag, className: "bg-[#2A2A2A] rounded-lg overflow-hidden transform hover:scale-[1.02] transition-all duration-200 hover:shadow-xl hover:shadow-black/20", style: { animationDelay: `${index * 0.1}s` }, __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold hover:text-[#FF3366] transition-colors cursor-pointer", __source: { fileName: "", lineNumber: 213, columnNumber: 21 }, __self: this }, challenge.tag), /*#__PURE__*/ React.createElement("span", { className: "text-[#FF3366] bg-[#FF3366]/10 px-3 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 216, columnNumber: 21 }, __self: this }, "Prize: ", challenge.prize)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm text-gray-400", __source: { fileName: "", lineNumber: 220, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 221, columnNumber: 21 }, __self: this }, challenge.count, " videos"), /*#__PURE__*/ React.createElement("span", { className: "animate-pulse text-[#FF3366]", __source: { fileName: "", lineNumber: 222, columnNumber: 21 }, __self: this }, "Ends in ", challenge.endsIn))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-1", __source: { fileName: "", lineNumber: 227, columnNumber: 17 }, __self: this }, forYou.map((video)=>/*#__PURE__*/ React.createElement("div", { key: video.id, className: "relative aspect-[9/16] group cursor-pointer overflow-hidden", __source: { fileName: "", lineNumber: 229, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.thumbnail, alt: "Challenge video", className: "w-full h-full object-cover transform transition-transform duration-300 group-hover:scale-110", __source: { fileName: "", lineNumber: 233, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 238, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-2 left-2 text-xs", __source: { fileName: "", lineNumber: 239, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart mr-1 text-[#FF3366]", __source: { fileName: "", lineNumber: 240, columnNumber: 27 }, __self: this }), video.likes)))))))), selectedSection === "for you" && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4 animate-[scaleIn_0.3s_ease-out]", __source: { fileName: "", lineNumber: 253, columnNumber: 11 }, __self: this }, forYou.map((video, index)=>/*#__PURE__*/ React.createElement("div", { key: video.id, className: "relative aspect-[9/16] group cursor-pointer", style: { animationDelay: `${index * 0.1}s` }, __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.thumbnail, alt: "For you video", className: "w-full h-full object-cover rounded-lg transform transition-transform duration-300 group-hover:scale-105", __source: { fileName: "", lineNumber: 260, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300", __source: { fileName: "", lineNumber: 265, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-3", __source: { fileName: "", lineNumber: 266, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm", __source: { fileName: "", lineNumber: 267, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 268, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-[#FF3366] mr-1", __source: { fileName: "", lineNumber: 269, columnNumber: 25 }, __self: this }), video.likes), /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 272, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-eye text-white/80 mr-1", __source: { fileName: "", lineNumber: 273, columnNumber: 25 }, __self: this }), video.views)))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 285, columnNumber: 7 }, __self: this }, ` @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } `)); }