function StrategyCard({ title, keywords, contentIdeas, technicalImprovements }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto p-6 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl font-bold mb-6 text-[#333333]", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, title || "SEO Strategy Recommendations"), /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl font-semibold mb-3 text-[#444444]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-key mr-2", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }), "Target Keywords"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, keywords?.map((keyword, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-500 mr-2", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, keyword))))), /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl font-semibold mb-3 text-[#444444]", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb mr-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), "Content Ideas"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, contentIdeas?.map((idea, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pencil-alt text-blue-500 mr-2", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, idea))))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl font-semibold mb-3 text-[#444444]", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cogs mr-2", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }), "Technical Improvements"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, technicalImprovements?.map((improvement, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-wrench text-purple-500 mr-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, improvement)))))); } function StrategyCardStory() { const sampleData = { keywords: [ "Digital Marketing", "SEO Strategy", "Content Optimization" ], contentIdeas: [ "Write a guide on SEO basics", "Create industry-specific case studies", "Develop how-to tutorials" ], technicalImprovements: [ "Optimize meta descriptions", "Improve page load speed", "Fix broken links" ] }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-8", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StrategyCard, { ...sampleData, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this })); } function SeoForm({ onSubmit }) { const [formData, setFormData] = useState({ websiteUrl: "", businessType: "", targetAudience: "", mainKeywords: "" }); const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); onSubmit?.(formData); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "websiteUrl", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Website URL"), /*#__PURE__*/ React.createElement("input", { type: "url", name: "websiteUrl", id: "websiteUrl", value: formData.websiteUrl, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "https://example.com", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "businessType", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Business Type"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "businessType", id: "businessType", value: formData.businessType, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "e.g., E-commerce, Services, Consulting", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "targetAudience", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Target Audience"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "targetAudience", id: "targetAudience", value: formData.targetAudience, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "e.g., Small Business Owners, Students", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mainKeywords", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Main Keywords"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "mainKeywords", id: "mainKeywords", value: formData.mainKeywords, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "e.g., digital marketing, web design", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "Submit"))); } function SeoFormStory() { const handleSubmit = (data)=>{ console.log("Form submitted:", data); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SeoForm, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this })); } function MainComponent() { const [strategy, setStrategy] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [streamingMessage, setStreamingMessage] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ try { const data = JSON.parse(message); setStrategy({ title: "Your SEO Strategy", keywords: data.primaryKeywords, contentIdeas: data.contentIdeas, technicalImprovements: data.technicalImprovements }); } catch (err) { setError("Failed to parse strategy data"); } setStreamingMessage(""); } }); const generateStrategy = async (formData)=>{ setLoading(true); setError(null); setStrategy(null); if (!formData.websiteUrl || !formData.businessType || !formData.targetAudience || !formData.mainKeywords) { setError("Please fill in all fields"); setLoading(false); return; } try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `As an SEO expert, analyze and provide recommendations for: Website: ${formData.websiteUrl} Business Type: ${formData.businessType} Target Audience: ${formData.targetAudience} Main Keywords: ${formData.mainKeywords} Provide: - primaryKeywords: Array of 5 most important keywords - secondaryKeywords: Array of 8 long-tail keyword variations - contentIdeas: Array of 6 content topics with titles - technicalImprovements: Array of 5 technical SEO improvements` } ], stream: true }) }); handleStreamResponse(response); const apiResponse = await fetch("/api/generate-strategy", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData) }); if (!apiResponse.ok) { throw new Error("Failed to save strategy"); } } catch (err) { setError(err.message || "Something went wrong. Please try again."); setStrategy(null); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 px-4 py-12 font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-4xl", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-16", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "AI SEO Strategy Generator"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Get data-driven SEO strategies powered by artificial intelligence")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 mb-16", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(SeoForm, { onSubmit: generateStrategy, __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this })), error ? /*#__PURE__*/ React.createElement("div", { className: "text-red-600 text-center p-4 mb-4 bg-red-50 rounded-lg border border-red-200", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }), error) : null, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center py-12", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-blue-600 mb-4", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "Generating your SEO strategy..."))) : strategy ? /*#__PURE__*/ React.createElement("div", { className: "mb-16 animate-fade-in", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(StrategyCard, { title: strategy.title, keywords: strategy.content.split("\n").filter((line)=>line.includes("keyword")).map((k)=>k.trim()), contentIdeas: strategy.content.split("\n").filter((line)=>line.includes("Content")).map((c)=>c.trim()), technicalImprovements: strategy.content.split("\n").filter((line)=>line.includes("Technical")).map((t)=>t.trim()), __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-8", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/history", className: "text-blue-600 hover:text-blue-800 font-medium", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-history mr-2", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }), "View Strategy History"))) : /*#__PURE__*/ React.createElement("div", { className: "mb-16", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-center mb-12", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, "How It Works"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pencil-alt text-blue-600 text-2xl", __source: { fileName: "", lineNumber: 148, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, "1. Enter Details"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, "Fill in your website and target keywords")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-blue-600 text-2xl", __source: { fileName: "", lineNumber: 157, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }, "2. AI Analysis"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }, "Our AI analyzes your input")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-blue-600 text-2xl", __source: { fileName: "", lineNumber: 164, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, "3. Get Strategy"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, "Receive your customized SEO plan")))))); }