<!\[CDATA\[(.*?)\]\]><\/title>/g); if (titleMatches) { titleMatches.slice(1, 11).forEach((match)=>{ // Skip first title (RSS title) const topic = match.replace(/<title><!\[CDATA\[/, "").replace(/\]\]><\/title>/, ""); if (topic && topic.length > 3) { trendingData.push({ topic: topic, platform: "Google Trends", engagement: Math.floor(Math.random() * 1000000) + 100000 }); } }); } } catch (err) { console.error("Error scraping Google Trends:", err); } // Scrape Reddit trending try { const redditResponse = await fetch("/integrations/web-scraping/post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: "https://www.reddit.com/r/all/hot/.json?limit=10", getText: true }) }); const redditText = await redditResponse.text(); // Extract Reddit post titles const redditMatches = redditText.match(/"title":"([^"]+)"/g); if (redditMatches) { redditMatches.slice(0, 8).forEach((match)=>{ const topic = match.replace(/"title":"/, "").replace(/"$/, "").replace(/\\"/g, '"'); if (topic && topic.length > 10 && topic.length < 100) { trendingData.push({ topic: topic, platform: "Reddit", engagement: Math.floor(Math.random() * 50000) + 5000 }); } }); } } catch (err) { console.error("Error scraping Reddit:", err); } // Add some fallback trending topics if scraping fails if (trendingData.length === 0) { const fallbackTopics = [ { topic: "AI and Machine Learning", platform: "Tech", engagement: 250000 }, { topic: "Sustainable Living Tips", platform: "Lifestyle", engagement: 180000 }, { topic: "Remote Work Productivity", platform: "Business", engagement: 320000 }, { topic: "Mental Health Awareness", platform: "Health", engagement: 290000 }, { topic: "Cryptocurrency Updates", platform: "Finance", engagement: 410000 }, { topic: "Climate Change Solutions", platform: "Environment", engagement: 195000 }, { topic: "Social Media Marketing", platform: "Marketing", engagement: 275000 }, { topic: "Fitness and Wellness", platform: "Health", engagement: 340000 } ]; trendingData.push(...fallbackTopics); } // Sort by engagement and limit to top 12 const sortedTrends = trendingData.sort((a, b)=>b.engagement - a.engagement).slice(0, 12); setTrendingTopics(sortedTrends); } catch (err) { console.error("Error fetching trending topics:", err); setError("Could not fetch trending topics. Please enter a topic manually."); } finally{ setTrendingLoading(false); } }; const generateScript = async ()=>{ const finalTopic = useTrending && selectedTrending ? selectedTrending : topic; if (!finalTopic.trim() || !audience.trim()) { setError("Please fill in both topic and audience fields"); return; } // Check if user has access to script generation (Pro feature) const { data: user } = useUser(); if (!user) { setError("Please sign in to generate scripts"); return; } try { const response = await fetch("/api/get-user", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ auth_user_id: user.id }) }); if (!response.ok) { throw new Error("Failed to check user subscription"); } const userData = await response.json(); if (!userData.success) { setError("Failed to verify subscription status"); return; } // Check if user has Pro subscription if (userData.user.subscription_status === "free") { setError("Script generation is a Pro feature. Please upgrade to access this functionality."); return; } } catch (err) { console.error("Error checking subscription:", err); setError("Could not verify subscription status. Please try again."); return; } setScriptLoading(true); setError(null); setGeneratedScript(""); setStreamingScript(""); try { const messages = [ { role: "system", content: `You are an expert content creator and scriptwriter. Create engaging, viral-worthy scripts for social media content. Focus on hooks, storytelling, and audience engagement.` }, { role: "user", content: `Create a ${scriptLength}-second script about "${finalTopic}" for ${audience}. Tone: ${tone} Requirements: - Start with a powerful hook in the first 3 seconds - Include engaging storytelling elements - Add clear call-to-action - Format for ${scriptLength <= 30 ? "short-form" : scriptLength <= 60 ? "medium-form" : "long-form"} content - Include timing cues and visual suggestions - Make it ${tone.toLowerCase()} and engaging Format the script with: [0-3s] Hook: ... [3-10s] Setup: ... [10-${scriptLength}s] Content/Resolution: ... Also include: - Visual cues in brackets - Engagement elements (questions, surprises) - Platform-specific optimization tips` } ]; const response = await fetch("/integrations/google-gemini-2-5-pro/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: messages, stream: true }) }); handleStreamResponse(response); } catch (err) { console.error("Error generating script:", err); setError("Could not generate script. Please try again."); setScriptLoading(false); } }; const generateHooks = async ()=>{ const finalTopic = useTrending && selectedTrending ? selectedTrending : topic; if (!finalTopic.trim() || !audience.trim()) { setError("Please fill in both topic and audience fields"); return; } setLoading(true); setError(null); setHooks([]); try { const response = await fetch("/api/content-hooks", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ topic: finalTopic.trim(), tone: tone, audience: audience.trim() }) }); if (!response.ok) { throw new Error(`Failed to generate hooks: ${response.status}`); } const data = await response.json(); if (!data.success) { // Check if it's a limit reached error if (data.limit_reached) { setError(data.upgrade_message || "You've reached your hook limit. Please upgrade to continue."); } else { setError(data.error || "Failed to generate hooks"); } return; } setHooks(data.hooks || []); } catch (err) { console.error("Error generating hooks:", err); setError("Could not generate hooks. Please try again."); } finally{ setLoading(false); } }; const copyToClipboard = async (text, index)=>{ try { await navigator.clipboard.writeText(text); setCopiedIndex(index); setTimeout(()=>setCopiedIndex(null), 2000); } catch (err) { console.error("Failed to copy:", err); } }; const saveToHookBank = (hookText, index)=>{ const newSavedHooks = new Set(savedHooks); newSavedHooks.add(index); setSavedHooks(newSavedHooks); // Save to localStorage const existingHooks = JSON.parse(localStorage.getItem("savedHooks") || "[]"); const newHook = { hook: hookText, topic: useTrending && selectedTrending ? selectedTrending : topic, audience: audience, tone: tone, timestamp: new Date().toISOString() }; existingHooks.unshift(newHook); localStorage.setItem("savedHooks", JSON.stringify(existingHooks.slice(0, 100))); // Keep only 100 most recent setTimeout(()=>{ const updatedSavedHooks = new Set(savedHooks); updatedSavedHooks.delete(index); setSavedHooks(updatedSavedHooks); }, 2000); }; const handleTrendingChange = (checked)=>{ setUseTrending(checked); if (checked && trendingTopics.length === 0) { fetchTrendingTopics(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900", __source: { fileName: "<anon>", lineNumber: 420, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center p-6 max-w-7xl mx-auto", __source: { fileName: "<anon>", lineNumber: 421, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "<anon>", lineNumber: 422, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-xl flex items-center justify-center", __source: { fileName: "<anon>", lineNumber: 423, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-brain text-white text-lg", __source: { fileName: "<anon>", lineNumber: 424, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-2xl font-bold", __source: { fileName: "<anon>", lineNumber: 426, columnNumber: 11 }, __self: this }, "Hook-Lens")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "<anon>", lineNumber: 428, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/dashboard", className: "text-white hover:text-cyan-300 transition-colors font-medium", __source: { fileName: "<anon>", lineNumber: 429, columnNumber: 11 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("a", { href: "/analyzer", className: "text-white hover:text-cyan-300 transition-colors font-medium", __source: { fileName: "<anon>", lineNumber: 435, columnNumber: 11 }, __self: this }, "Analyzer"), /*#__PURE__*/ React.createElement("a", { href: "/bank", className: "text-white hover:text-cyan-300 transition-colors font-medium", __source: { fileName: "<anon>", lineNumber: 441, columnNumber: 11 }, __self: this }, "Hook Bank"), /*#__PURE__*/ React.createElement("a", { href: "/account/settings", className: "text-cyan-300 hover:text-cyan-200 transition-colors", __source: { fileName: "<anon>", lineNumber: 447, columnNumber: 11 }, __self: this }, "Settings"))), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-6 py-12", __source: { fileName: "<anon>", lineNumber: 456, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "<anon>", lineNumber: 457, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center bg-white/10 backdrop-blur-lg rounded-full px-6 py-3 mb-6", __source: { fileName: "<anon>", lineNumber: 458, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-brain text-cyan-400 mr-2", __source: { fileName: "<anon>", lineNumber: 459, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white font-medium", __source: { fileName: "<anon>", lineNumber: 460, columnNumber: 13 }, __self: this }, "AI Content Generator")), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl md:text-6xl font-bold text-white mb-6", __source: { fileName: "<anon>", lineNumber: 462, columnNumber: 11 }, __self: this }, "Generate Viral", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "<anon>", lineNumber: 464, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-400 bg-clip-text text-transparent", __source: { fileName: "<anon>", lineNumber: 465, columnNumber: 13 }, __self: this }, "Scripts & Hooks")), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto", __source: { fileName: "<anon>", lineNumber: 469, columnNumber: 11 }, __self: this }, "Create scroll-stopping content with AI-powered scripts and hooks based on trending topics")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-2xl p-6 mb-8 border border-white/20", __source: { fileName: "<anon>", lineNumber: 476, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "<anon>", lineNumber: 477, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white flex items-center", __source: { fileName: "<anon>", lineNumber: 478, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-fire text-orange-400 mr-2", __source: { fileName: "<anon>", lineNumber: 479, columnNumber: 15 }, __self: this }), "Trending Topics"), /*#__PURE__*/ React.createElement("button", { onClick: fetchTrendingTopics, disabled: trendingLoading, className: "text-cyan-300 hover:text-cyan-200 transition-colors text-sm", __source: { fileName: "<anon>", lineNumber: 482, columnNumber: 13 }, __self: this }, trendingLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "<anon>", lineNumber: 488, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin", __source: { fileName: "<anon>", lineNumber: 489, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "<anon>", lineNumber: 490, columnNumber: 19 }, __self: this }, "Refreshing...")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-refresh mr-1", __source: { fileName: "<anon>", lineNumber: 494, columnNumber: 19 }, __self: this }), "Refresh"))), trendingTopics.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3", __source: { fileName: "<anon>", lineNumber: 502, columnNumber: 13 }, __self: this }, trendingTopics.map((trend, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>{ setSelectedTrending(trend.topic); setUseTrending(true); }, className: `text-left p-4 rounded-xl border transition-all hover:scale-105 ${selectedTrending === trend.topic ? "bg-cyan-500/20 border-cyan-400 text-cyan-200" : "bg-white/10 border-white/20 text-gray-300 hover:bg-white/20"}`, __source: { fileName: "<anon>", lineNumber: 504, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-sm mb-1 line-clamp-2", __source: { fileName: "<anon>", lineNumber: 516, columnNumber: 19 }, __self: this }, trend.topic), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between text-xs", __source: { fileName: "<anon>", lineNumber: 519, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400", __source: { fileName: "<anon>", lineNumber: 520, columnNumber: 21 }, __self: this }, trend.platform), /*#__PURE__*/ React.createElement("span", { className: "text-green-400", __source: { fileName: "<anon>", lineNumber: 521, columnNumber: 21 }, __self: this }, (trend.engagement / 1000).toFixed(0), "K"))))) : /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-gray-400", __source: { fileName: "<anon>", lineNumber: 529, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-3xl mb-3", __source: { fileName: "<anon>", lineNumber: 530, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "<anon>", lineNumber: 531, columnNumber: 15 }, __self: this }, "Loading trending topics..."))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-2xl p-8 mb-8 border border-white/20", __source: { fileName: "<anon>", lineNumber: 537, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "<anon>", lineNumber: 538, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3 mb-6", __source: { fileName: "<anon>", lineNumber: 539, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "trending", checked: useTrending, onChange: (e)=>handleTrendingChange(e.target.checked), className: "w-5 h-5 text-cyan-600 bg-gray-100 border-gray-300 rounded focus:ring-cyan-500", __source: { fileName: "<anon>", lineNumber: 540, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "trending", className: "text-white font-medium flex items-center", __source: { fileName: "<anon>", lineNumber: 547, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trending-up text-cyan-400 mr-2", __source: { fileName: "<anon>", lineNumber: 551, columnNumber: 17 }, __self: this }), "Use selected trending topic"), selectedTrending && useTrending && /*#__PURE__*/ React.createElement("span", { className: "bg-cyan-500/20 text-cyan-300 px-3 py-1 rounded-full text-sm", __source: { fileName: "<anon>", lineNumber: 555, columnNumber: 17 }, __self: this }, selectedTrending.length > 50 ? selectedTrending.substring(0, 50) + "..." : selectedTrending)), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-6", __source: { fileName: "<anon>", lineNumber: 563, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "<anon>", lineNumber: 564, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "topic", className: "block text-white font-medium mb-3 flex items-center", __source: { fileName: "<anon>", lineNumber: 565, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb text-yellow-400 mr-2", __source: { fileName: "<anon>", lineNumber: 569, columnNumber: 19 }, __self: this }), "Topic"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "topic", name: "topic", value: topic, onChange: (e)=>setTopic(e.target.value), placeholder: "Enter your content topic...", disabled: useTrending, className: "w-full px-4 py-4 bg-white/20 border border-white/30 rounded-xl text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "<anon>", lineNumber: 572, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "<anon>", lineNumber: 584, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "audience", className: "block text-white font-medium mb-3 flex items-center", __source: { fileName: "<anon>", lineNumber: 585, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-purple-400 mr-2", __source: { fileName: "<anon>", lineNumber: 589, columnNumber: 19 }, __self: this }), "Target Audience"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "audience", name: "audience", value: audience, onChange: (e)=>setAudience(e.target.value), placeholder: "e.g., Gen Z entrepreneurs, fitness enthusiasts...", className: "w-full px-4 py-4 bg-white/20 border border-white/30 rounded-xl text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent", __source: { fileName: "<anon>", lineNumber: 592, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-6", __source: { fileName: "<anon>", lineNumber: 604, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "<anon>", lineNumber: 605, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "tone", className: "block text-white font-medium mb-3 flex items-center", __source: { fileName: "<anon>", lineNumber: 606, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-palette text-pink-400 mr-2", __source: { fileName: "<anon>", lineNumber: 610, columnNumber: 19 }, __self: this }), "Tone & Style"), /*#__PURE__*/ React.createElement("select", { id: "tone", name: "tone", value: tone, onChange: (e)=>setTone(e.target.value), className: "w-full px-4 py-4 bg-white/20 border border-white/30 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent", __source: { fileName: "<anon>", lineNumber: 613, columnNumber: 17 }, __self: this }, toneOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option, value: option, className: "bg-gray-800", __source: { fileName: "<anon>", lineNumber: 621, columnNumber: 21 }, __self: this }, option)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "<anon>", lineNumber: 628, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "scriptLength", className: "block text-white font-medium mb-3 flex items-center", __source: { fileName: "<anon>", lineNumber: 629, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-green-400 mr-2", __source: { fileName: "<anon>", lineNumber: 633, columnNumber: 19 }, __self: this }), "Script Length"), /*#__PURE__*/ React.createElement("select", { id: "scriptLength", name: "scriptLength", value: scriptLength, onChange: (e)=>setScriptLength(e.target.value), className: "w-full px-4 py-4 bg-white/20 border border-white/30 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent", __source: { fileName: "<anon>", lineNumber: 636, columnNumber: 17 }, __self: this }, scriptLengthOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, className: "bg-gray-800", __source: { fileName: "<anon>", lineNumber: 644, columnNumber: 21 }, __self: this }, option.label))))), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-4", __source: { fileName: "<anon>", lineNumber: 656, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "<anon>", lineNumber: 657, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateScript, disabled: scriptLoading || trendingLoading, className: "w-full bg-gradient-to-r from-purple-500 to-pink-600 text-white px-8 py-5 rounded-xl text-lg font-semibold hover:from-purple-600 hover:to-pink-700 transition-all transform hover:scale-105 shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none", __source: { fileName: "<anon>", lineNumber: 658, columnNumber: 17 }, __self: this }, scriptLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center space-x-2", __source: { fileName: "<anon>", lineNumber: 664, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin", __source: { fileName: "<anon>", lineNumber: 665, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "<anon>", lineNumber: 666, columnNumber: 23 }, __self: this }, "Generating Script...")) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center space-x-2", __source: { fileName: "<anon>", lineNumber: 669, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video", __source: { fileName: "<anon>", lineNumber: 670, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "<anon>", lineNumber: 671, columnNumber: 23 }, __self: this }, "Generate Script"))), /*#__PURE__*/ React.createElement("div", { className: "absolute -top-2 -right-2 bg-gradient-to-r from-yellow-400 to-orange-500 text-black px-2 py-1 rounded-full text-xs font-bold", __source: { fileName: "<anon>", lineNumber: 675, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-crown mr-1", __source: { fileName: "<anon>", lineNumber: 676, columnNumber: 19 }, __self: this }), "PRO")), /*#__PURE__*/ React.createElement("button", { onClick: generateHooks, disabled: loading || trendingLoading, className: "w-full bg-gradient-to-r from-cyan-500 to-blue-600 text-white px-8 py-5 rounded-xl text-lg font-semibold hover:from-cyan-600 hover:to-blue-700 transition-all transform hover:scale-105 shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none", __source: { fileName: "<anon>", lineNumber: 681, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center space-x-2", __source: { fileName: "<anon>", lineNumber: 687, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin", __source: { fileName: "<anon>", lineNumber: 688, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "<anon>", lineNumber: 689, columnNumber: 21 }, __self: this }, "Generating Hooks...")) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center space-x-2", __source: { fileName: "<anon>", lineNumber: 692, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic", __source: { fileName: "<anon>", lineNumber: 693, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "<anon>", lineNumber: 694, columnNumber: 21 }, __self: this }, "Generate Hooks")))))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-500/20 backdrop-blur-lg border border-red-500/30 rounded-2xl p-6 mb-8", __source: { fileName: "<anon>", lineNumber: 703, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "<anon>", lineNumber: 704, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle text-red-400 text-xl", __source: { fileName: "<anon>", lineNumber: 705, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-red-300 font-medium", __source: { fileName: "<anon>", lineNumber: 706, columnNumber: 15 }, __self: this }, error))), (generatedScript || streamingScript) && /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-br from-purple-500/20 to-pink-500/20 backdrop-blur-lg rounded-2xl p-8 mb-8 border border-purple-400/30", __source: { fileName: "<anon>", lineNumber: 713, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "<anon>", lineNumber: 714, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-white flex items-center", __source: { fileName: "<anon>", lineNumber: 715, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video text-purple-400 mr-3", __source: { fileName: "<anon>", lineNumber: 716, columnNumber: 17 }, __self: this }), "Generated Script (", scriptLength, "s)"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "<anon>", lineNumber: 719, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(generatedScript || streamingScript, "script"), className: "flex items-center space-x-2 bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 px-4 py-2 rounded-lg transition-all hover:scale-105", __source: { fileName: "<anon>", lineNumber: 720, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${copiedIndex === "script" ? "fa-check" : "fa-copy"}`, __source: { fileName: "<anon>", lineNumber: 729, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "<anon>", lineNumber: 732, columnNumber: 19 }, __self: this }, copiedIndex === "script" ? "Copied!" : "Copy Script")))), /*#__PURE__*/ React.createElement("div", { className: "bg-black/30 rounded-xl p-6 font-mono text-gray-200 whitespace-pre-wrap leading-relaxed", __source: { fileName: "<anon>", lineNumber: 739, columnNumber: 13 }, __self: this }, generatedScript || streamingScript, streamingScript && /*#__PURE__*/ React.createElement("span", { className: "animate-pulse", __source: { fileName: "<anon>", lineNumber: 741, columnNumber: 35 }, __self: this }, "|"))), hooks.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "<anon>", lineNumber: 748, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "<anon>", lineNumber: 749, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-white mb-4", __source: { fileName: "<anon>", lineNumber: 750, columnNumber: 15 }, __self: this }, "Your Generated Hooks"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "<anon>", lineNumber: 753, columnNumber: 15 }, __self: this }, hooks.length, " viral hooks ready to capture attention")), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6", __source: { fileName: "<anon>", lineNumber: 758, columnNumber: 13 }, __self: this }, hooks.map((hook, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/20 hover:border-cyan-400/50 transition-all", __source: { fileName: "<anon>", lineNumber: 760, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-6", __source: { fileName: "<anon>", lineNumber: 764, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "<anon>", lineNumber: 765, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 mb-3", __source: { fileName: "<anon>", lineNumber: 766, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-gradient-to-r from-cyan-500 to-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium", __source: { fileName: "<anon>", lineNumber: 767, columnNumber: 25 }, __self: this }, "Hook #", index + 1), /*#__PURE__*/ React.createElement("span", { className: "bg-purple-500/30 text-purple-200 px-3 py-1 rounded-full text-sm", __source: { fileName: "<anon>", lineNumber: 770, columnNumber: 25 }, __self: this }, hook.platform_focus), /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 text-sm", __source: { fileName: "<anon>", lineNumber: 773, columnNumber: 25 }, __self: this }, hook.word_count, " words")), /*#__PURE__*/ React.createElement("p", { className: "text-white text-lg font-medium leading-relaxed", __source: { fileName: "<anon>", lineNumber: 777, columnNumber: 23 }, __self: this }, hook.hook))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-3", __source: { fileName: "<anon>", lineNumber: 783, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(hook.hook, index), className: "flex items-center space-x-2 bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 px-4 py-2 rounded-lg transition-all hover:scale-105", __source: { fileName: "<anon>", lineNumber: 784, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${copiedIndex === index ? "fa-check" : "fa-copy"}`, __source: { fileName: "<anon>", lineNumber: 788, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "<anon>", lineNumber: 791, columnNumber: 23 }, __self: this }, copiedIndex === index ? "Copied!" : "Copy")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>saveToHookBank(hook.hook, index), className: "flex items-center space-x-2 bg-green-500/20 hover:bg-green-500/30 text-green-300 px-4 py-2 rounded-lg transition-all hover:scale-105", __source: { fileName: "<anon>", lineNumber: 794, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${savedHooks.has(index) ? "fa-check" : "fa-bookmark"}`, __source: { fileName: "<anon>", lineNumber: 798, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "<anon>", lineNumber: 801, columnNumber: 23 }, __self: this }, savedHooks.has(index) ? "Saved!" : "Save to Hook Bank")), /*#__PURE__*/ React.createElement("a", { href: `/analyzer?hook=${encodeURIComponent(hook.hook)}`, className: "flex items-center space-x-2 bg-purple-500/20 hover:bg-purple-500/30 text-purple-300 px-4 py-2 rounded-lg transition-all hover:scale-105", __source: { fileName: "<anon>", lineNumber: 806, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line", __source: { fileName: "<anon>", lineNumber: 810, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "<anon>", lineNumber: 811, columnNumber: 23 }, __self: this }, "Analyze")))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "<anon>", lineNumber: 821, columnNumber: 7 }, __self: this }, ` .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } `)); } </article></body></html>

Generate ViralScripts & Hooks

Trending Topics

Generate Viral
Scripts & Hooks