function MainComponent() { const [hookText, setHookText] = useState(""); const [analysis, setAnalysis] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(()=>{ // Add profitable rate script if (typeof document !== "undefined") { const existingProfitableScript = document.querySelector('script[src*="profitableratecpm.com"]'); if (!existingProfitableScript) { const profitableScript = document.createElement("script"); profitableScript.type = "text/javascript"; profitableScript.src = "//pl27358500.profitableratecpm.com/b4/09/e3/b409e350dea8883ff83ba0027f7c6c40.js"; document.head.appendChild(profitableScript); } } }, []); const analyzeHook = async ()=>{ if (!hookText.trim()) { setError("Please enter a hook to analyze"); return; } setLoading(true); setError(null); setAnalysis(null); try { const response = await fetch("/api/analyze-hook", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ hook_text: hookText.trim() }) }); if (!response.ok) { throw new Error(`Failed to analyze hook: ${response.status}`); } const data = await response.json(); if (!data.success) { throw new Error(data.error || "Failed to analyze hook"); } setAnalysis(data.analysis); } catch (err) { console.error("Error analyzing hook:", err); setError("Could not analyze hook. Please try again."); } finally{ setLoading(false); } }; const getScoreColor = (score)=>{ if (score >= 80) return "from-green-500 to-emerald-500"; if (score >= 60) return "from-yellow-500 to-orange-500"; return "from-red-500 to-pink-500"; }; const getOverallScoreColor = (score)=>{ if (score >= 80) return "text-green-400"; if (score >= 60) return "text-yellow-400"; return "text-red-400"; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between items-center p-6 max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-gradient-to-r from-pink-500 to-purple-500 rounded-lg", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white text-xl font-bold", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "HookMaster")), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/dashboard", className: "text-white hover:text-purple-300 transition-colors", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-white hover:text-purple-300 transition-colors", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/generator", className: "text-white hover:text-purple-300 transition-colors", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Generator"), /*#__PURE__*/ React.createElement("a", { href: "/bank", className: "text-white hover:text-purple-300 transition-colors", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Hook Bank"))), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto px-6 py-12", __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "Hook Analyzer"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-300", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "Get detailed scores and improvement suggestions for your hooks")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-xl p-8 mb-8", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "hookText", className: "block text-white font-medium mb-2", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, "Your Hook"), /*#__PURE__*/ React.createElement("textarea", { id: "hookText", name: "hookText", value: hookText, onChange: (e)=>setHookText(e.target.value), placeholder: "Paste your hook here to get detailed analysis and improvement suggestions...", rows: 4, className: "w-full px-4 py-3 bg-white/20 border border-white/30 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-right text-gray-400 text-sm mt-1", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, hookText.length, " characters")), /*#__PURE__*/ React.createElement("button", { onClick: analyzeHook, disabled: loading || !hookText.trim(), className: "w-full bg-gradient-to-r from-pink-500 to-purple-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:from-pink-600 hover:to-purple-700 transition-all transform hover:scale-105 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center space-x-2", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 148, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 149, columnNumber: 19 }, __self: this }, "Analyzing Hook...")) : "Analyze My Hook 🔍"))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-500/20 backdrop-blur-lg border border-red-500/30 rounded-xl p-4 mb-8", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle text-red-400", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-red-300", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, error))), analysis && /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-xl p-8 text-center", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "Overall Score"), /*#__PURE__*/ React.createElement("div", { className: `text-6xl font-bold mb-2 ${getOverallScoreColor(analysis.overall_score)}`, __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, analysis.overall_score), /*#__PURE__*/ React.createElement("div", { className: "text-gray-300 text-lg", __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, "out of 100")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-xl p-8", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-white mb-6", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, "Score Breakdown"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 188, columnNumber: 21 }, __self: this }, "Curiosity"), /*#__PURE__*/ React.createElement("span", { className: "text-gray-300", __source: { fileName: "", lineNumber: 189, columnNumber: 21 }, __self: this }, analysis.scores.curiosity, "/100")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-700 rounded-full h-3", __source: { fileName: "", lineNumber: 193, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-3 rounded-full bg-gradient-to-r ${getScoreColor(analysis.scores.curiosity)}`, style: { width: `${analysis.scores.curiosity}%` }, __source: { fileName: "", lineNumber: 194, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 203, columnNumber: 21 }, __self: this }, "Urgency"), /*#__PURE__*/ React.createElement("span", { className: "text-gray-300", __source: { fileName: "", lineNumber: 204, columnNumber: 21 }, __self: this }, analysis.scores.urgency, "/100")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-700 rounded-full h-3", __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-3 rounded-full bg-gradient-to-r ${getScoreColor(analysis.scores.urgency)}`, style: { width: `${analysis.scores.urgency}%` }, __source: { fileName: "", lineNumber: 209, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 216, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 217, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 218, columnNumber: 21 }, __self: this }, "Emotional Pull"), /*#__PURE__*/ React.createElement("span", { className: "text-gray-300", __source: { fileName: "", lineNumber: 221, columnNumber: 21 }, __self: this }, analysis.scores.emotional_pull, "/100")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-700 rounded-full h-3", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-3 rounded-full bg-gradient-to-r ${getScoreColor(analysis.scores.emotional_pull)}`, style: { width: `${analysis.scores.emotional_pull}%` }, __source: { fileName: "", lineNumber: 226, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 234, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }, "Engagement Potential"), /*#__PURE__*/ React.createElement("span", { className: "text-gray-300", __source: { fileName: "", lineNumber: 238, columnNumber: 21 }, __self: this }, analysis.scores.engagement_potential, "/100")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-700 rounded-full h-3", __source: { fileName: "", lineNumber: 242, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-3 rounded-full bg-gradient-to-r ${getScoreColor(analysis.scores.engagement_potential)}`, style: { width: `${analysis.scores.engagement_potential}%` }, __source: { fileName: "", lineNumber: 243, columnNumber: 21 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-xl p-8", __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, "Improvement Suggestions"), /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500/20 border border-blue-500/30 rounded-lg p-4", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-3", __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb text-blue-400 mt-1", __source: { fileName: "", lineNumber: 260, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-blue-100 leading-relaxed", __source: { fileName: "", lineNumber: 261, columnNumber: 19 }, __self: this }, analysis.improvement_suggestions)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-xl p-6", __source: { fileName: "", lineNumber: 268, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-bold text-white mb-3", __source: { fileName: "", lineNumber: 269, columnNumber: 15 }, __self: this }, "Analyzed Hook"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800/50 rounded-lg p-4", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-200 italic", __source: { fileName: "", lineNumber: 273, columnNumber: 17 }, __self: this }, '"', analysis.hook_text, '"')))))); }