function MainComponent() { const [url, setUrl] = useState(""); const [loading, setLoading] = useState({ scraping: false, keywords: false, stats: false }); const [results, setResults] = useState(null); const [keywords, setKeywords] = useState([]); const [stats, setStats] = useState({}); const [error, setError] = useState(null); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading({ scraping: true, keywords: false, stats: false }); setError(null); try { const scrapeResponse = await fetch("/integrations/web-scraping/post", { method: "POST", body: JSON.stringify({ url, getText: true }) }); const text = await scrapeResponse.text(); setResults(text); setLoading({ scraping: false, keywords: true, stats: false }); const aiResponse = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", body: JSON.stringify({ messages: [ { role: "user", content: `Analyze this text and return a JSON object with: - 5 most relevant SEO keywords - A 2-3 sentence summary - Main topic/category Text to analyze: ${text}` } ], json_schema: { name: "seo_analysis", schema: { type: "object", properties: { keywords: { type: "array", items: { type: "string" } }, summary: { type: "string" }, topic: { type: "string" } }, required: [ "keywords", "summary", "topic" ], additionalProperties: false } } }) }); const aiData = await aiResponse.json(); const analysis = JSON.parse(aiData.choices[0].message.content); setKeywords(analysis.keywords); setResults({ text: text.substring(0, 300), summary: analysis.summary, topic: analysis.topic }); setLoading({ scraping: false, keywords: false, stats: true }); const keywordStats = {}; for (const keyword of analysis.keywords){ const statsResponse = await fetch(`/integrations/seo-keyword-research/keynew.php?keyword=${encodeURIComponent(keyword.trim())}&country=us`); const statsData = await statsResponse.json(); keywordStats[keyword] = statsData[0]; setStats({ ...keywordStats }); } } catch (err) { setError("An error occurred while analyzing the URL"); console.error(err); } setLoading({ scraping: false, keywords: false, stats: false }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FAF9F6]", __source: { fileName: "", lineNumber: 98, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-8", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-12 text-center", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "AI SEO Analysis"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "Analyze any webpage for SEO optimization")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6 mb-8", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex gap-4", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "url", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "Enter any URL to analyze", className: "flex-1 px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:border-gray-300", required: true, __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading.scraping || loading.keywords || loading.stats, className: "px-6 py-3 bg-[#444444] text-white rounded-lg hover:bg-[#333333] disabled:opacity-50 disabled:hover:bg-[#444444] transition-colors", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, loading.scraping || loading.keywords || loading.stats ? "Analyzing..." : "Analyze"))), (loading.scraping || loading.keywords || loading.stats) && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center py-12", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-4 border-[#444444] border-t-transparent", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-gray-600", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, loading.scraping && "Analyzing webpage content...", loading.keywords && "Extracting keywords...", loading.stats && "Gathering keyword statistics...")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 text-red-600 p-4 rounded-lg mb-8", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, error), results && /*#__PURE__*/ React.createElement("div", { className: "grid gap-8", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, "Content Analysis"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }, "Topic"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }, results.topic)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 154, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 155, columnNumber: 19 }, __self: this }, "Summary"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 156, columnNumber: 19 }, __self: this }, results.summary)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }, "Content Preview"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 leading-relaxed", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, results.text, "...")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-6", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "Keyword Analysis"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-4", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, keywords.map((keyword)=>/*#__PURE__*/ React.createElement("div", { key: keyword, className: "border border-gray-100 rounded-lg p-4 hover:border-gray-200 transition-colors", __source: { fileName: "", lineNumber: 173, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg mb-3", __source: { fileName: "", lineNumber: 177, columnNumber: 21 }, __self: this }, keyword), stats[keyword] && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 179, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 180, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-1", __source: { fileName: "", lineNumber: 181, columnNumber: 27 }, __self: this }, "Monthly Volume"), /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 184, columnNumber: 27 }, __self: this }, stats[keyword].vol.toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 188, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-1", __source: { fileName: "", lineNumber: 189, columnNumber: 27 }, __self: this }, "CPC"), /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 190, columnNumber: 27 }, __self: this }, "$", stats[keyword].cpc)), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 192, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-1", __source: { fileName: "", lineNumber: 193, columnNumber: 27 }, __self: this }, "Competition"), /*#__PURE__*/ React.createElement("p", { className: "font-medium capitalize", __source: { fileName: "", lineNumber: 196, columnNumber: 27 }, __self: this }, stats[keyword].competition)))))))))); }