function Button({ text, keyboardCommand, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "inline-flex items-center justify-center px-4 py-2 bg-[#1E1E1E] text-white border border-[#2A2A2A] rounded-lg hover:bg-[#2A2A2A] transition-colors duration-200", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, text), keyboardCommand && /*#__PURE__*/ React.createElement("span", { className: "ml-2 px-1.5 py-0.5 text-xs bg-[#2A2A2A] text-white rounded", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, keyboardCommand)); } function ButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { text: "Click me", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Save", keyboardCommand: "⌘S", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Open", keyboardCommand: "⌘O", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function SubscriptionUpsell({ redirectURL }) { const [loading, setLoading] = useState(false); const [selectedPlan, setSelectedPlan] = useState("monthly"); const { data: user, loading: userLoading } = useUser(); const plans = { monthly: { price: "$10", period: "/month", priceId: "STRIPE_PRICE_ID_MONTHLY" }, annual: { price: "$100", period: "/year", priceId: "STRIPE_PRICE_ID_ANNUAL", savings: "Save $20/year" } }; const handleCheckout = async ()=>{ if (!userLoading && user) { setLoading(true); try { const fullRedirectURL = redirectURL.startsWith("http") ? redirectURL : `${window.location.origin}${redirectURL}`; const response = await fetch("/api/stripe-webhook", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ redirectURL: fullRedirectURL, priceId: plans[selectedPlan].priceId }) }); const data = await response.json(); if (data.url) { window.location.href = data.url; } } catch (error) { setLoading(false); } } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-6", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "Pro Subscription"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, Object.entries(plans).map(([key, plan])=>/*#__PURE__*/ React.createElement("div", { key: key, onClick: ()=>setSelectedPlan(key), className: `cursor-pointer p-6 rounded-lg border-2 transition-all ${selectedPlan === key ? "border-[#357AFF] bg-[#357AFF]/10" : "border-[#2A2A2A] hover:border-[#357AFF]"}`, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-[#357AFF]", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, plan.price), /*#__PURE__*/ React.createElement("div", { className: "text-[#A4A4A4]", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, plan.period), plan.savings && /*#__PURE__*/ React.createElement("div", { className: "text-green-500 text-sm mt-2", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, plan.savings)))), /*#__PURE__*/ React.createElement("button", { onClick: handleCheckout, disabled: loading || userLoading, className: "w-full max-w-[300px] py-3 px-6 bg-[#357AFF] text-white rounded-lg hover:bg-[#2E69DE] disabled:opacity-50 transition-colors", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, loading || userLoading ? "Processing..." : user ? `Subscribe ${selectedPlan === "monthly" ? "Monthly" : "Annually"}` : "Please sign in")); } function SubscriptionUpsellStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-medium", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Default View"), /*#__PURE__*/ React.createElement(SubscriptionUpsell, { redirectURL: "/account", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-medium", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement(SubscriptionUpsell, { redirectURL: "/account", loading: true, __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "mb-4 text-lg font-medium", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "Not Signed In"), /*#__PURE__*/ React.createElement(SubscriptionUpsell, { redirectURL: "/account", user: null, __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }))); } function MainComponent() { const { data: user, loading: userLoading } = useUser(); const [theme, setTheme] = React.useState("dark"); const [generationLimit, setGenerationLimit] = React.useState(null); const [showSubscribePrompt, setShowSubscribePrompt] = React.useState(false); const [isProcessing, setIsProcessing] = React.useState(false); const [selectedPlan, setSelectedPlan] = React.useState("monthly"); const [authError, setAuthError] = React.useState(""); const [postData, setPostData] = React.useState({ keywords: "", content: "", length: "medium", tone: "professional", language: "english", platform: "none", seoKeywords: "" }); const [streamingContent, setStreamingContent] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [copySuccess, setCopySuccess] = React.useState(false); const [showTips, setShowTips] = React.useState(false); const [selectedCategory, setSelectedCategory] = React.useState(null); const [pulseClass, setPulseClass] = React.useState(""); React.useEffect(()=>{ const interval = setInterval(()=>{ setPulseClass("animate-pulse"); setTimeout(()=>setPulseClass(""), 2000); }, 3000); return ()=>clearInterval(interval); }, []); React.useEffect(()=>{ if (user) { checkGenerationLimit(); } }, [ user ]); const tipCategories = { general: { icon: "fas fa-book", title: "General Blogging Tips", tips: [ { icon: "fas fa-pen", title: "Writing Style", content: "Keep your writing clear, concise, and engaging. Use active voice and short paragraphs." }, { icon: "fas fa-clock", title: "Content Length", content: "Medium-length blogs (~500 words) are perfect for explaining concepts while keeping attention." }, { icon: "fas fa-bullseye", title: "Call to Action", content: "End your blog with a strong CTA to guide readers—ask them to subscribe, comment, or share!" } ] }, seo: { icon: "fas fa-search", title: "SEO and Visibility Tips", tips: [ { icon: "fas fa-chart-line", title: "Keyword Placement", content: "Include your main keyword in the first paragraph and headings for better SEO." }, { icon: "fas fa-tags", title: "Meta Description", content: "Write compelling meta descriptions that include your target keywords." }, { icon: "fas fa-link", title: "Internal Linking", content: "Link to other relevant content on your site to improve SEO and keep readers engaged." } ] }, engagement: { icon: "fas fa-users", title: "Engagement and Formatting Tips", tips: [ { icon: "fas fa-image", title: "Visual Appeal", content: "Break up text with relevant images or infographics every 300 words." }, { icon: "fas fa-comments", title: "Reader Interaction", content: "End posts with questions to encourage comments and discussion." }, { icon: "fas fa-list", title: "Formatting", content: "Use headers, bullet points, and short paragraphs to improve readability." } ] }, advanced: { icon: "fas fa-graduation-cap", title: "Advanced Blogging Tips", tips: [ { icon: "fas fa-chart-pie", title: "Analytics", content: "Use analytics to track which topics and formats perform best with your audience." }, { icon: "fas fa-calendar", title: "Content Calendar", content: "Plan your content in advance with a content calendar to maintain consistency." }, { icon: "fas fa-share-alt", title: "Distribution", content: "Share your content across multiple platforms to maximize reach." } ] } }; const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingContent, onFinish: (message)=>{ setPostData((prev)=>({ ...prev, content: message })); setIsLoading(false); } }); const handleChange = (e)=>{ const { name, value } = e.target; setPostData((prev)=>({ ...prev, [name]: value })); }; const checkGenerationLimit = async ()=>{ if (!user) return; const response = await fetch("/api/check-generation-limit", { method: "POST" }); const data = await response.json(); if (data.remainingGenerations > 0) { data.message = `You have ${data.remainingGenerations} FREE generations remaining today`; } setGenerationLimit(data); }; const generateContent = async ()=>{ if (!user) { setAuthError("Please sign in to generate posts"); return; } setAuthError(""); const limitCheck = await fetch("/api/check-generation-limit", { method: "POST" }); const limitData = await limitCheck.json(); if (!limitData.canGenerate) { setShowSubscribePrompt(true); return; } if (!postData.keywords) return; setIsLoading(true); setStreamingContent(""); const languageMap = { english: "English", french: "French", german: "German", italian: "Italian", spanish: "Spanish" }; const platformSpecificPrompt = postData.platform === "twitter" ? "Keep it within 280 characters and use hashtags where relevant." : postData.platform === "linkedin" ? "Include professional insights and industry-specific terminology. Format it for LinkedIn's audience." : postData.platform === "facebook" ? "Make it engaging and conversational, suitable for Facebook's general audience." : ""; const seoPrompt = postData.seoKeywords ? ` Optimize the content for these SEO keywords: ${postData.seoKeywords}. Include them naturally in headings and throughout the text.` : ""; const prompt = `Generate a ${postData.length || "medium"} ${postData.platform === "none" ? "blog post" : postData.platform + " post"} in ${languageMap[postData.language]} about ${postData.keywords} in a ${postData.tone || "professional"} tone. ${platformSpecificPrompt}${seoPrompt} The content should be informative and engaging, with a clear structure.${postData.length === "short" ? " Keep it concise, around 200 words." : postData.length === "long" ? " Make it detailed, around 1000 words." : " Aim for approximately 500 words."}`; try { const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], stream: true }) }); handleStreamResponse(response); await fetch("/api/increment-generation-count", { method: "POST" }); await checkGenerationLimit(); } catch (error) { console.error("Error generating content:", error); setIsLoading(false); } }; const lengthOptions = [ { value: "short", label: "Short (~200 words)" }, { value: "medium", label: "Medium (~500 words)" }, { value: "long", label: "Long (~1000 words)" } ]; const toneOptions = [ { value: "formal", label: "Formal" }, { value: "casual", label: "Casual" }, { value: "professional", label: "Professional" }, { value: "friendly", label: "Friendly" } ]; const languageOptions = [ { value: "english", label: "English" }, { value: "french", label: "French" }, { value: "german", label: "German" }, { value: "italian", label: "Italian" }, { value: "spanish", label: "Spanish" } ]; const platformOptions = [ { value: "none", label: "Standard Blog" }, { value: "linkedin", label: "LinkedIn" }, { value: "facebook", label: "Facebook" }, { value: "twitter", label: "Twitter (X)" } ]; const { signOut } = useAuth(); const handleSignOut = async ()=>{ await signOut({ callbackUrl: "/", redirect: true }); }; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen flex flex-col items-center justify-center font-open-sans relative px-4 sm:px-8 transition-colors ${theme === "dark" ? "bg-[#151515]" : "bg-white"}`, __source: { fileName: "", lineNumber: 255, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTheme(theme === "dark" ? "light" : "dark"), className: "fixed top-4 right-4 p-2 rounded-full hover:bg-[#2A2A2A] transition-colors", "aria-label": "Toggle theme", __source: { fileName: "", lineNumber: 258, columnNumber: 7 }, __self: this }, theme === "dark" ? "☀️" : "🌙"), /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-16 flex gap-2", __source: { fileName: "", lineNumber: 265, columnNumber: 7 }, __self: this }, !user ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 267, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: `px-4 py-2 rounded-lg transition-colors ${theme === "dark" ? "text-white hover:bg-[#2A2A2A]" : "text-[#151515] hover:bg-[#F5F5F5]"}`, __source: { fileName: "", lineNumber: 268, columnNumber: 13 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: `px-4 py-2 rounded-lg ${theme === "dark" ? "bg-[#357AFF] text-white hover:bg-[#2E69DE]" : "bg-[#357AFF] text-white hover:bg-[#2E69DE]"}`, __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this }, "Sign Up"), /*#__PURE__*/ React.createElement("a", { href: "/account/forgot-password", className: `text-sm ${theme === "dark" ? "text-[#A4A4A4] hover:text-white" : "text-[#666666] hover:text-[#151515]"}`, __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, "Forgot Password?")) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 288, columnNumber: 11 }, __self: this }, user?.subscription_status === "active" && /*#__PURE__*/ React.createElement("button", { onClick: async ()=>{ try { const response = await fetch("/api/create-portal-session", { method: "POST", headers: { "Content-Type": "application/json" } }); const data = await response.json(); if (data.success && data.url) { window.location.href = data.url; } else { console.error("Failed to create portal session:", data.message); } } catch (error) { console.error("Failed to create portal session:", error); } }, className: `px-4 py-2 rounded-lg transition-colors ${theme === "dark" ? "text-white hover:bg-[#2A2A2A]" : "text-[#151515] hover:bg-[#F5F5F5]"}`, __source: { fileName: "", lineNumber: 290, columnNumber: 15 }, __self: this }, "Manage Subscription"), /*#__PURE__*/ React.createElement("button", { onClick: handleSignOut, className: `px-4 py-2 rounded-lg transition-colors ${theme === "dark" ? "text-white hover:bg-[#2A2A2A]" : "text-[#151515] hover:bg-[#F5F5F5]"}`, __source: { fileName: "", lineNumber: 324, columnNumber: 13 }, __self: this }, "Sign Out"))), /*#__PURE__*/ React.createElement("main", { className: "w-full max-w-3xl relative z-10", __source: { fileName: "", lineNumber: 334, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full", __source: { fileName: "", lineNumber: 335, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/9aab0355-3dba-44af-806a-f965339e662b/-/format/auto/", alt: "PostMaster Logo", className: "w-[300px] h-[300px] mb-6 animate-float", __source: { fileName: "", lineNumber: 336, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: `text-4xl sm:text-6xl font-bold text-center mb-2 relative ${theme === "dark" ? "text-transparent" : "text-transparent"} bg-clip-text bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 animate-gradient-x`, __source: { fileName: "", lineNumber: 342, columnNumber: 9 }, __self: this }, "Post Master", /*#__PURE__*/ React.createElement("span", { className: "absolute -inset-1 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 opacity-30 blur-lg -z-10", __source: { fileName: "", lineNumber: 349, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: `text-center text-base sm:text-lg mb-8 sm:mb-12 leading-relaxed ${theme === "dark" ? "text-[#A4A4A4]" : "text-[#666666]"} animate-fade-in`, __source: { fileName: "", lineNumber: 351, columnNumber: 9 }, __self: this }, "Skip the Writer's Block, Keep the Quality", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 357, columnNumber: 11 }, __self: this }), "Your personal blogging assistant, available 24/7"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 360, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row items-center w-full", __source: { fileName: "", lineNumber: 361, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "keywords", value: postData.keywords, onChange: handleChange, placeholder: "Enter topic or keyword", className: `w-full h-[46px] p-3 text-lg sm:text-xl border rounded-lg focus:outline-none focus:border-[#2A2A2A] transition-colors ${theme === "dark" ? "text-white bg-[#1E1E1E] border-[#2A2A2A]" : "text-[#151515] bg-white border-[#E5E5E5]"}`, __source: { fileName: "", lineNumber: 362, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-auto mt-2 sm:mt-0 sm:ml-2", __source: { fileName: "", lineNumber: 369, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateContent, disabled: isLoading, className: `w-full py-4 px-8 text-lg font-medium rounded-lg transform transition-all duration-200 shadow-lg hover:scale-[1.02] hover:shadow-xl ${theme === "dark" ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700" : "bg-gradient-to-r from-blue-400 to-purple-500 text-white hover:from-blue-500 hover:to-purple-600"} animate-pulse-subtle`, __source: { fileName: "", lineNumber: 370, columnNumber: 15 }, __self: this }, isLoading ? "Generating..." : "Generate"))), /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center gap-4 mb-6", __source: { fileName: "", lineNumber: 383, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 384, columnNumber: 13 }, __self: this }, [ "platform", "length", "tone", "language" ].map((selectName)=>/*#__PURE__*/ React.createElement("div", { key: selectName, className: "flex justify-center", __source: { fileName: "", lineNumber: 386, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: selectName, value: postData[selectName], onChange: handleChange, className: `h-[36px] px-3 text-sm border rounded-lg focus:outline-none focus:border-[#2A2A2A] transition-colors ${theme === "dark" ? "text-white bg-[#1E1E1E] border-[#2A2A2A]" : "text-[#151515] bg-white border-[#E5E5E5]"}`, __source: { fileName: "", lineNumber: 387, columnNumber: 19 }, __self: this }, (selectName === "platform" ? platformOptions : selectName === "length" ? lengthOptions : selectName === "tone" ? toneOptions : languageOptions).map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 401, columnNumber: 23 }, __self: this }, option.label)))))), /*#__PURE__*/ React.createElement("input", { name: "seoKeywords", value: postData.seoKeywords, onChange: handleChange, placeholder: "Add SEO keywords (optional)", className: `h-[36px] px-4 text-sm w-full max-w-[600px] mx-auto text-center border rounded-lg focus:outline-none focus:border-[#2A2A2A] transition-colors ${theme === "dark" ? "text-white bg-[#1E1E1E] border-[#2A2A2A]" : "text-[#151515] bg-white border-[#E5E5E5]"}`, __source: { fileName: "", lineNumber: 410, columnNumber: 13 }, __self: this }))), authError && /*#__PURE__*/ React.createElement("div", { className: `text-base sm:text-lg font-medium mb-4 text-center animate-pulse-message ${theme === "dark" ? "text-[#FF6B6B]" : "text-[#FF4444]"}`, __source: { fileName: "", lineNumber: 421, columnNumber: 11 }, __self: this }, authError), user && generationLimit && user.email !== "cganjolla@yahoo.it" && /*#__PURE__*/ React.createElement("div", { className: `text-base sm:text-lg font-medium mb-4 text-center animate-pulse-message ${theme === "dark" ? "text-[#FF6B6B]" : "text-[#FF4444]"}`, __source: { fileName: "", lineNumber: 431, columnNumber: 11 }, __self: this }, generationLimit.message), (postData.content || isLoading) && /*#__PURE__*/ React.createElement("div", { className: `mt-6 sm:mt-8 border rounded-lg p-4 sm:p-6 transition-colors ${theme === "dark" ? "bg-[#1E1E1E] border-[#2A2A2A]" : "bg-white border-[#E5E5E5]"}`, __source: { fileName: "", lineNumber: 441, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: `text-xl sm:text-2xl mb-2 ${theme === "dark" ? "text-white" : "text-[#151515]"}`, __source: { fileName: "", lineNumber: 444, columnNumber: 13 }, __self: this }, "Blog Post: ", postData.keywords), /*#__PURE__*/ React.createElement("p", { className: `text-sm sm:text-base mb-4 sm:mb-6 whitespace-pre-wrap ${theme === "dark" ? "text-white" : "text-[#151515]"}`, __source: { fileName: "", lineNumber: 450, columnNumber: 13 }, __self: this }, streamingContent || postData.content), !isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 457, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigator.clipboard.writeText(postData.content); setCopySuccess(true); setTimeout(()=>setCopySuccess(false), 2000); }, className: `flex-1 px-4 py-2.5 text-sm sm:text-base font-medium rounded-lg transition-all transform hover:scale-105 ${theme === "dark" ? "bg-[#2A2A2A] text-white hover:bg-[#3A3A3A] border-2 border-[#3A3A3A]" : "bg-[#F5F5F5] text-[#151515] hover:bg-[#E5E5E5] border-2 border-[#E5E5E5]"}`, __source: { fileName: "", lineNumber: 458, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy mr-2", __source: { fileName: "", lineNumber: 466, columnNumber: 19 }, __self: this }), copySuccess ? "✔️ Copied!" : "Copy Content"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ fetch("/integrations/pdf-generation/markdown-to-pdf", { method: "POST", body: JSON.stringify({ markdown: postData.content }) }).then((response)=>response.blob()).then((blob)=>{ const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `${postData.keywords.toLowerCase().replace(/[^a-z0-9]+/g, "-")}.pdf`; a.click(); }); }, className: `flex-1 px-4 py-2.5 text-sm sm:text-base font-medium rounded-lg transition-all transform hover:scale-105 ${theme === "dark" ? "bg-[#2A2A2A] text-white hover:bg-[#3A3A3A] border-2 border-[#3A3A3A]" : "bg-[#F5F5F5] text-[#151515] hover:bg-[#E5E5E5] border-2 border-[#E5E5E5]"}`, __source: { fileName: "", lineNumber: 470, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-pdf mr-2", __source: { fileName: "", lineNumber: 489, columnNumber: 19 }, __self: this }), "Download PDF"))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 497, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-8 right-8 flex flex-col items-center", __source: { fileName: "", lineNumber: 498, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `text-sm mb-2 ${theme === "dark" ? "text-white" : "text-[#151515]"}`, __source: { fileName: "", lineNumber: 499, columnNumber: 13 }, __self: this }, "Quick Tips"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowTips(!showTips); setSelectedCategory(null); }, className: `p-4 rounded-full shadow-lg transition-all transform hover:scale-110 ${showTips ? "rotate-180" : ""} ${theme === "dark" ? "bg-[#1E1E1E] text-yellow-400 hover:bg-[#2A2A2A]" : "bg-white text-yellow-400 hover:bg-[#F5F5F5]"}`, __source: { fileName: "", lineNumber: 504, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-lightbulb text-xl ${pulseClass}`, __source: { fileName: "", lineNumber: 511, columnNumber: 15 }, __self: this }))), showTips && /*#__PURE__*/ React.createElement("div", { className: `fixed bottom-24 right-8 w-80 p-4 rounded-lg shadow-xl transition-all transform ${theme === "dark" ? "bg-[#1E1E1E] border border-[#2A2A2A]" : "bg-white border border-[#E5E5E5]"}`, __source: { fileName: "", lineNumber: 516, columnNumber: 13 }, __self: this }, selectedCategory ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 521, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedCategory(null), className: `text-sm ${theme === "dark" ? "text-white" : "text-[#151515]"} hover:underline flex items-center`, __source: { fileName: "", lineNumber: 522, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 526, columnNumber: 23 }, __self: this }), "Back"), /*#__PURE__*/ React.createElement("h3", { className: `text-lg font-medium ${theme === "dark" ? "text-white" : "text-[#151515]"}`, __source: { fileName: "", lineNumber: 529, columnNumber: 21 }, __self: this }, tipCategories[selectedCategory].title)), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 535, columnNumber: 19 }, __self: this }, tipCategories[selectedCategory].tips.map((tip, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-3 rounded-lg ${theme === "dark" ? "bg-[#2A2A2A]" : "bg-[#F5F5F5]"}`, __source: { fileName: "", lineNumber: 537, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 541, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${tip.icon} mr-2 ${theme === "dark" ? "text-white" : "text-[#151515]"}`, __source: { fileName: "", lineNumber: 542, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: `font-medium ${theme === "dark" ? "text-white" : "text-[#151515]"}`, __source: { fileName: "", lineNumber: 545, columnNumber: 27 }, __self: this }, tip.title)), /*#__PURE__*/ React.createElement("p", { className: `text-sm ${theme === "dark" ? "text-[#A4A4A4]" : "text-[#666666]"}`, __source: { fileName: "", lineNumber: 551, columnNumber: 25 }, __self: this }, tip.content))))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 562, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: `text-lg font-medium ${theme === "dark" ? "text-white" : "text-[#151515]"}`, __source: { fileName: "", lineNumber: 563, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star mr-2 text-yellow-400", __source: { fileName: "", lineNumber: 566, columnNumber: 23 }, __self: this }), "Quick Tips")), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 570, columnNumber: 19 }, __self: this }, Object.entries(tipCategories).map(([key, category])=>/*#__PURE__*/ React.createElement("button", { key: key, onClick: ()=>setSelectedCategory(key), className: `w-full p-3 rounded-lg flex items-center transition-colors ${theme === "dark" ? "bg-[#2A2A2A] hover:bg-[#3A3A3A]" : "bg-[#F5F5F5] hover:bg-[#E5E5E5]"}`, __source: { fileName: "", lineNumber: 572, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${category.icon} mr-3 ${theme === "dark" ? "text-white" : "text-[#151515]"}`, __source: { fileName: "", lineNumber: 577, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `${theme === "dark" ? "text-white" : "text-[#151515]"}`, __source: { fileName: "", lineNumber: 580, columnNumber: 25 }, __self: this }, category.title), /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-right ml-auto ${theme === "dark" ? "text-[#A4A4A4]" : "text-[#666666]"}`, __source: { fileName: "", lineNumber: 585, columnNumber: 25 }, __self: this }))))))), showSubscribePrompt && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 598, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${theme === "dark" ? "bg-[#1E1E1E]" : "bg-white"} rounded-lg p-6 max-w-md mx-4`, __source: { fileName: "", lineNumber: 599, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: `text-xl font-medium mb-4 ${theme === "dark" ? "text-white" : "text-[#151515]"}`, __source: { fileName: "", lineNumber: 602, columnNumber: 15 }, __self: this }, "Want to generate more?"), /*#__PURE__*/ React.createElement("p", { className: `mb-6 ${theme === "dark" ? "text-[#A4A4A4]" : "text-[#666666]"}`, __source: { fileName: "", lineNumber: 607, columnNumber: 15 }, __self: this }, "Subscribe now for unlimited generations!"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-6", __source: { fileName: "", lineNumber: 612, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedPlan("monthly"), className: `flex-1 px-4 py-3 rounded-lg border-2 transition-all ${selectedPlan === "monthly" ? "border-[#357AFF] bg-[#357AFF] text-white" : `${theme === "dark" ? "border-[#2A2A2A] text-white" : "border-[#E5E5E5] text-[#151515]"}`}`, __source: { fileName: "", lineNumber: 613, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 621, columnNumber: 19 }, __self: this }, "Monthly"), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-80", __source: { fileName: "", lineNumber: 622, columnNumber: 19 }, __self: this }, "$10/month")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedPlan("annual"), className: `flex-1 px-4 py-3 rounded-lg border-2 transition-all ${selectedPlan === "annual" ? "border-[#357AFF] bg-[#357AFF] text-white" : `${theme === "dark" ? "border-[#2A2A2A] text-white" : "border-[#E5E5E5] text-[#151515]"}`}`, __source: { fileName: "", lineNumber: 624, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 632, columnNumber: 19 }, __self: this }, "Annual"), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-80", __source: { fileName: "", lineNumber: 633, columnNumber: 19 }, __self: this }, "$100/year"), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-green-500", __source: { fileName: "", lineNumber: 634, columnNumber: 19 }, __self: this }, "Save $20/year"))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 637, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSubscribePrompt(false), className: `flex-1 px-4 py-2 rounded-lg ${theme === "dark" ? "text-white bg-[#2A2A2A]" : "text-[#151515] bg-[#F5F5F5]"}`, __source: { fileName: "", lineNumber: 638, columnNumber: 17 }, __self: this }, "Maybe Later"), /*#__PURE__*/ React.createElement("button", { onClick: async ()=>{ if (!user) { window.location.href = "/account/signin?callbackUrl=/account/subscribe"; return; } setIsProcessing(true); try { const response = await fetch("/api/stripe-webhook", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ priceId: selectedPlan === "monthly" ? "price_1QtbD7PNzGAAXwm70L4ZFwvo" : "price_1QtbDePNzGAAXwm7WdhOghli", redirectURL: `${window.location.origin}/account/subscribe` }) }); const { url } = await response.json(); if (url) { window.location.href = url; } } catch (error) { console.error("Error creating checkout session:", error); } finally{ setIsProcessing(false); } }, disabled: isProcessing, className: "flex-1 px-4 py-2 rounded-lg bg-[#357AFF] text-white hover:bg-[#2E69DE] disabled:opacity-50 disabled:cursor-not-allowed text-center", __source: { fileName: "", lineNumber: 644, columnNumber: 17 }, __self: this }, isProcessing ? "Processing..." : "Subscribe Now"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 690, columnNumber: 7 }, __self: this }, ` @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @keyframes gradient-x { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes fade-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-gradient-x { background-size: 200% 200%; animation: gradient-x 15s ease infinite; } .animate-fade-in { animation: fade-in 1s ease-out forwards; } @keyframes pulse-subtle { 0% { box-shadow: 0 0 0 0 rgba(66, 153, 225, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(66, 153, 225, 0); } 100% { box-shadow: 0 0 0 0 rgba(66, 153, 225, 0); } } .animate-pulse-subtle { animation: pulse-subtle 2s infinite; } @keyframes pulse-message { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } .animate-pulse-message { animation: pulse-message 2s infinite; } `)); }