function MainComponent() { const [url, setUrl] = useState(""); const [keywords, setKeywords] = useState(""); const [analysis, setAnalysis] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const handleAnalyze = async ()=>{ setLoading(true); setError(null); setAnalysis(null); try { try { new URL(url); } catch { throw new Error("Please enter a valid URL (e.g., https://example.com)"); } const keywordList = keywords.split(",").map((k)=>k.trim()).filter((k)=>k); const response = await fetch("/api/analyze-landing-page", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url, keywords: keywordList }) }); if (!response.ok) { if (response.status === 404) { throw new Error("Could not access the webpage. Please check if the URL is correct and the website is accessible."); } if (response.status === 403) { throw new Error("Access to the webpage was denied. The website might be blocking our analyzer."); } throw new Error(`Failed to analyze landing page (HTTP ${response.status})`); } const data = await response.json(); if (data.error) { throw new Error(data.error + (data.details ? `: ${data.details}` : "")); } setAnalysis(data); } catch (err) { setError(err.message); console.error(err); } finally{ setLoading(false); } }; const getScoreColor = (score)=>{ if (score >= 80) return "text-green-600"; if (score >= 60) return "text-yellow-600"; return "text-red-600"; }; const getScoreEmoji = (score)=>{ if (score >= 80) return "✨"; if (score >= 60) return "⚡"; return "❗"; }; const ScoreCard = ({ title, score, insights, icon, bestPractices, detailedAnalysis })=>/*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, icon), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, title)), /*#__PURE__*/ React.createElement("div", { className: `text-2xl font-bold ${getScoreColor(score.score)}`, __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, score.score, "% ", getScoreEmoji(score.score))), score.strengths && score.strengths.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "What's Working Well:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, score.strengths.map((strength, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-start text-gray-700", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-green-500 mr-2", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mt-1", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this })), strength)))), score.insights && score.insights.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "Areas to Improve:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, score.insights.map((insight, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-start text-gray-700", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-red-500 mr-2", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mt-1", __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this })), insight)))), bestPractices && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "Industry Best Practices:"), /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 p-4 rounded-md", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, bestPractices.practices.map((practice, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-start text-gray-700", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-blue-500 mr-2", __source: { fileName: "", lineNumber: 136, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-sm mt-1", __source: { fileName: "", lineNumber: 137, columnNumber: 21 }, __self: this })), practice))))), score.examples && score.examples.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, "Implementation Examples:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 bg-gray-50 p-4 rounded-md", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, score.examples.map((example, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-start text-gray-700", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-blue-500 mr-2", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb mt-1", __source: { fileName: "", lineNumber: 156, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, example.split("\n").map((line, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "mb-1", __source: { fileName: "", lineNumber: 160, columnNumber: 21 }, __self: this }, line)))))))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8", __source: { fileName: "", lineNumber: 174, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 175, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/f1e9e92a-1a3e-4620-9ca3-c55346d6cc39/-/format/auto/", alt: "UpMedico Healthcare Marketing", className: "h-16 mx-auto", __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, "Medical Landing Page Analyzer"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, "Check your medical practice landing page against proven conversion best practices")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 mb-8", __source: { fileName: "", lineNumber: 193, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, "Landing Page URL"), /*#__PURE__*/ React.createElement("input", { type: "url", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "https://example.com", className: "w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }, "Target Keywords (e.g., physiotherapy, back pain, sports injury)"), /*#__PURE__*/ React.createElement("textarea", { value: keywords, onChange: (e)=>setKeywords(e.target.value), placeholder: "Enter keywords separated by commas", className: "w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 h-24", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleAnalyze, disabled: loading || !url, className: "w-full bg-blue-600 text-white py-3 rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, loading ? "Analyzing..." : "Analyze Landing Page")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border-l-4 border-red-500 p-4 mb-8", __source: { fileName: "", lineNumber: 229, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-700", __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, error)), analysis && /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 235, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 text-center", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 237, columnNumber: 15 }, __self: this }, "Overall Landing Page Score"), /*#__PURE__*/ React.createElement("div", { className: `text-5xl font-bold ${getScoreColor(analysis.overallScore)}`, __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, analysis.overallScore, "% ", getScoreEmoji(analysis.overallScore))), analysis.priorityRecommendations && analysis.priorityRecommendations.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 250, columnNumber: 19 }, __self: this }, "Priority Actions"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 253, columnNumber: 19 }, __self: this }, analysis.priorityRecommendations.map((rec, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-start p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 255, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `px-3 py-1 rounded-full text-sm font-semibold mr-3 ${rec.impact === "Critical" ? "bg-red-100 text-red-800" : rec.impact === "High" ? "bg-orange-100 text-orange-800" : "bg-yellow-100 text-yellow-800"}`, __source: { fileName: "", lineNumber: 259, columnNumber: 25 }, __self: this }, rec.impact), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 270, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-gray-800", __source: { fileName: "", lineNumber: 271, columnNumber: 27 }, __self: this }, rec.section), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 274, columnNumber: 27 }, __self: this }, rec.action)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 282, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, "Keyword Analysis"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, analysis.keywordAnalysis.map((kw, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b pb-4 last:border-b-0 last:pb-0", __source: { fileName: "", lineNumber: 286, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 290, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-medium text-gray-800", __source: { fileName: "", lineNumber: 291, columnNumber: 23 }, __self: this }, kw.keyword), /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm font-semibold ${kw.effectiveness === "High" ? "bg-green-100 text-green-800" : kw.effectiveness === "Medium" ? "bg-yellow-100 text-yellow-800" : "bg-red-100 text-red-800"}`, __source: { fileName: "", lineNumber: 294, columnNumber: 23 }, __self: this }, kw.effectiveness)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mb-2", __source: { fileName: "", lineNumber: 306, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-3 rounded", __source: { fileName: "", lineNumber: 307, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 308, columnNumber: 25 }, __self: this }, "Occurrences"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 309, columnNumber: 25 }, __self: this }, kw.count)), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-3 rounded", __source: { fileName: "", lineNumber: 311, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 312, columnNumber: 25 }, __self: this }, "Placement"), /*#__PURE__*/ React.createElement("div", { className: "space-y-1 mt-1", __source: { fileName: "", lineNumber: 313, columnNumber: 25 }, __self: this }, kw.placement.inTitle && /*#__PURE__*/ React.createElement("span", { className: "text-green-600 text-sm", __source: { fileName: "", lineNumber: 315, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-1", __source: { fileName: "", lineNumber: 316, columnNumber: 31 }, __self: this }), "Title"), kw.placement.inFirstParagraph && /*#__PURE__*/ React.createElement("span", { className: "text-green-600 text-sm block", __source: { fileName: "", lineNumber: 320, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-1", __source: { fileName: "", lineNumber: 321, columnNumber: 31 }, __self: this }), "First Paragraph"), kw.placement.inMetaDescription && /*#__PURE__*/ React.createElement("span", { className: "text-green-600 text-sm block", __source: { fileName: "", lineNumber: 326, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-1", __source: { fileName: "", lineNumber: 327, columnNumber: 31 }, __self: this }), "Meta Description")))), kw.suggestions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 335, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 336, columnNumber: 25 }, __self: this }, "Suggestions:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-1", __source: { fileName: "", lineNumber: 339, columnNumber: 25 }, __self: this }, kw.suggestions.map((suggestion, idx)=>/*#__PURE__*/ React.createElement("li", { key: idx, className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 341, columnNumber: 29 }, __self: this }, suggestion)))))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-6", __source: { fileName: "", lineNumber: 353, columnNumber: 13 }, __self: this }, analysis.scores && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ScoreCard, { title: "Navigation Menu", score: analysis.scores.navigation || { score: 0, strengths: [], insights: [], examples: [] }, icon: "🧭", bestPractices: analysis.bestPractices.navigation, detailedAnalysis: analysis.detailedAnalysis.navigation, __source: { fileName: "", lineNumber: 356, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(ScoreCard, { title: "Hero Section", score: analysis.scores.hero || { score: 0, strengths: [], insights: [], examples: [] }, icon: "🎯", bestPractices: analysis.bestPractices.hero, detailedAnalysis: analysis.detailedAnalysis.hero, __source: { fileName: "", lineNumber: 363, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(ScoreCard, { title: "Benefits & Features", score: analysis.scores.benefits || { score: 0, strengths: [], insights: [], examples: [] }, icon: "✨", bestPractices: analysis.bestPractices.benefits, detailedAnalysis: analysis.detailedAnalysis.benefits, __source: { fileName: "", lineNumber: 370, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(ScoreCard, { title: "Social Proof", score: analysis.scores.socialProof || { score: 0, strengths: [], insights: [], examples: [] }, icon: "💬", bestPractices: analysis.bestPractices.socialProof, detailedAnalysis: analysis.detailedAnalysis.socialProof, __source: { fileName: "", lineNumber: 377, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(ScoreCard, { title: "Doctor Profile", score: analysis.scores.doctorProfile || { score: 0, strengths: [], insights: [], examples: [] }, icon: "👨‍⚕️", bestPractices: analysis.bestPractices.doctorProfile, detailedAnalysis: analysis.detailedAnalysis.doctorProfile, __source: { fileName: "", lineNumber: 384, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(ScoreCard, { title: "Contact Form", score: analysis.scores.contactForm || { score: 0, strengths: [], insights: [], examples: [] }, icon: "📝", bestPractices: analysis.bestPractices.contactForm, detailedAnalysis: analysis.detailedAnalysis.contactForm, __source: { fileName: "", lineNumber: 391, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(ScoreCard, { title: "Booking System", score: analysis.scores.booking || { score: 0, strengths: [], insights: [], examples: [] }, icon: "📅", bestPractices: analysis.bestPractices.booking, detailedAnalysis: analysis.detailedAnalysis.booking, __source: { fileName: "", lineNumber: 398, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(ScoreCard, { title: "FAQ Section", score: analysis.scores.faq || { score: 0, strengths: [], insights: [], examples: [] }, icon: "❓", bestPractices: analysis.bestPractices.faq, detailedAnalysis: analysis.detailedAnalysis.faq, __source: { fileName: "", lineNumber: 405, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(ScoreCard, { title: "Footer Content", score: analysis.scores.footer || { score: 0, strengths: [], insights: [], examples: [] }, icon: "🔻", bestPractices: analysis.bestPractices.footer, detailedAnalysis: analysis.detailedAnalysis.footer, __source: { fileName: "", lineNumber: 412, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 423, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 424, columnNumber: 15 }, __self: this }, "Page Metrics"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 425, columnNumber: 15 }, __self: this }, Object.entries(analysis.metrics).map(([key, value])=>/*#__PURE__*/ React.createElement("div", { key: key, className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 427, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 428, columnNumber: 21 }, __self: this }, key.replace(/([A-Z])/g, " $1").trim()), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 431, columnNumber: 21 }, __self: this }, value)))))))); }