function MainComponent() { const [projectId, setProjectId] = useState(null); const [businessUrl, setBusinessUrl] = useState(""); const [loading, setLoading] = useState(false); const [analyzing, setAnalyzing] = useState(false); const [error, setError] = useState(null); const [analysis, setAnalysis] = useState(null); const [insights, setInsights] = useState({ job: [ "" ], pain: [ "" ], gain: [ "" ] }); const [selectedPlatforms, setSelectedPlatforms] = useState(new Set()); const [selectedLanguage, setSelectedLanguage] = useState("en"); const [suggestions, setSuggestions] = useState([]); const [generating, setGenerating] = useState(false); const [mandatoryWords, setMandatoryWords] = useState(""); const [forbiddenWords, setForbiddenWords] = useState(""); const [toneLevel, setToneLevel] = useState(3); const [predefinedOptions, setPredefinedOptions] = useState({ job: [], pain: [], gain: [] }); const platformGuide = { facebook: "casual and engaging, focus on community and connection, friendly conversational tone", instagram: "visual storytelling, trendy modern tone, emoji-friendly ✨, lifestyle focused", linkedin: "professional and business tone, industry expertise, solution-focused content", tiktok: "very casual and authentic, conversational, trendy language, youthful vibe" }; const languageOptions = { en: "English", nl: "Nederlands", fr: "Français", de: "Deutsch" }; const handlePredefinedOption = (type, option)=>{ setInsights((prev)=>{ const currentValues = prev[type]; if (currentValues.includes(option)) { return { ...prev, [type]: currentValues.filter((v)=>v !== option) }; } return { ...prev, [type]: [ ...currentValues.filter((v)=>v.trim() !== ""), option ] }; }); }; const updateInsight = (type, index, value)=>{ setInsights((prev)=>{ const newValues = [ ...prev[type] ]; newValues[index] = value; return { ...prev, [type]: newValues }; }); }; const addInsight = (type, index)=>{ setInsights((prev)=>{ const values = prev[type]; if (index === values.length - 1 && values[index].trim() !== "") { return { ...prev, [type]: [ ...values, "" ] }; } return prev; }); }; const removeInsight = (type, index)=>{ setInsights((prev)=>{ const newValues = [ ...prev[type] ]; newValues.splice(index, 1); if (newValues.length === 0) { newValues.push(""); } return { ...prev, [type]: newValues }; }); }; const addNewField = (type)=>{ setInsights((prev)=>({ ...prev, [type]: [ ...prev[type], "" ] })); }; const handleCreateProject = async (e)=>{ e.preventDefault(); if (!businessUrl) { setError("Please enter your business URL"); return; } let processedUrl = businessUrl; if (!businessUrl.startsWith("http")) { processedUrl = `https://${businessUrl}`; } setLoading(true); setAnalyzing(true); setError(null); try { const analysisResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Analyze this website: ${processedUrl} and extract: 1. The main value proposition 2. The target audience 3. One key job to be done (2-3 words max) 4. One key customer pain point (2-3 words max) 5. One key customer gain (2-3 words max) For points 3-5, use short keywords instead of full sentences. Example format: - Job: "increase sales" - Pain: "wasted time" - Gain: "higher revenue" Format as JSON.` } ], json_schema: { name: "website_analysis", schema: { type: "object", properties: { value_proposition: { type: "string" }, target_audience: { type: "string" }, example_job: { type: "string" }, example_pain: { type: "string" }, example_gain: { type: "string" } }, required: [ "value_proposition", "target_audience", "example_job", "example_pain", "example_gain" ], additionalProperties: false } } }) }); const analysisData = await analysisResponse.json(); if (!analysisData.choices?.[0]?.message?.content) { throw new Error("Could not analyze website"); } const analysisResult = JSON.parse(analysisData.choices[0].message.content); setAnalysis(analysisResult); setInsights({ job: [ "" ], pain: [ "" ], gain: [ "" ] }); const analysisResponse2 = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Based on this value proposition: "${analysisResult.value_proposition}" and target audience: "${analysisResult.target_audience}" Generate for each category: 1. 4 jobs to be done (2-3 words each) 2. 4 customer pains (2-3 words each) 3. 4 customer gains (2-3 words each) Keep them short and specific to the business. Format as JSON.` } ], json_schema: { name: "suggestions", schema: { type: "object", properties: { jobs: { type: "array", items: { type: "string" } }, pains: { type: "array", items: { type: "string" } }, gains: { type: "array", items: { type: "string" } } }, required: [ "jobs", "pains", "gains" ], additionalProperties: false } } }) }); const suggestionsData = await analysisResponse2.json(); const suggestions = JSON.parse(suggestionsData.choices[0].message.content); setPredefinedOptions({ job: suggestions.jobs, pain: suggestions.pains, gain: suggestions.gains }); const response = await fetch("/api/projects/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ business_url: processedUrl, value_proposition: analysisResult.value_proposition, target_audience: analysisResult.target_audience }) }); const data = await response.json(); if (data.error) throw new Error(data.error); setProjectId(data.id); try { await Promise.all([ fetch("/api/insights/add", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ project_id: data.id, type: "job", content: analysisResult.example_job }) }), fetch("/api/add-customer-insight", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ project_id: data.id, type: "pain", content: analysisResult.example_pain }) }), fetch("/api/add-customer-insight", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ project_id: data.id, type: "gain", content: analysisResult.example_gain }) }) ]); } catch (err) { console.error("Failed to save initial insights:", err); } } catch (err) { setError("Could not analyze website and create project: " + err.message); } finally{ setLoading(false); setAnalyzing(false); } }; const generateSuggestions = async ()=>{ if (!projectId || selectedPlatforms.size === 0) { setError("Please enter a business URL first and select at least one platform"); return; } const hasValidJob = insights.job.some((job)=>job.trim() !== ""); const hasValidPain = insights.pain.some((pain)=>pain.trim() !== ""); const hasValidGain = insights.gain.some((gain)=>gain.trim() !== ""); if (!hasValidJob || !hasValidPain || !hasValidGain) { setError("Please fill in at least one insight for each category (Jobs, Pains, and Gains)"); return; } setGenerating(true); setError(null); const getToneDescription = (level)=>{ switch(level){ case 1: return "very formal, professional and corporate style"; case 2: return "business-friendly and polite tone"; case 3: return "balanced and conversational approach"; case 4: return "friendly and approachable manner"; case 5: return "super casual and fun style"; default: return "balanced and conversational approach"; } }; const approachVariations = [ "focus on emotional benefits", "emphasize practical solutions", "highlight unique features", "showcase customer success stories", "address pain points directly" ]; try { const allSuggestions = []; for (const platform of selectedPlatforms){ const randomApproach = approachVariations[Math.floor(Math.random() * approachVariations.length)]; const mandatoryWordsList = mandatoryWords.split(",").map((word)=>word.trim()).filter((word)=>word.length > 0); const forbiddenWordsList = forbiddenWords.split(",").map((word)=>word.trim()).filter((word)=>word.length > 0); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Create 3 unique and distinct ad suggestions for ${platform} in ${languageOptions[selectedLanguage]}. The ads should be completely in ${languageOptions[selectedLanguage]}, including the headline, copy and targeting suggestions. Platform style: ${platformGuide[platform]} Tone: ${getToneDescription(toneLevel)} Creative approach: ${randomApproach} ${mandatoryWordsList.length > 0 ? `IMPORTANT - Required words: Each ad MUST include at least one of these exact words (do not translate these words): ${mandatoryWordsList.join(", ")}` : ""} ${forbiddenWordsList.length > 0 ? `IMPORTANT - Do not use these exact words (the literal words, not their translations): ${forbiddenWordsList.join(", ")}` : ""} For each ad, provide: 1. Attention-grabbing headline (under 40 characters) 2. Compelling ad copy (appropriate length for ${platform}) 3. Targeting suggestion Use these customer insights to create the ads: Jobs to be Done: ${insights.job.filter((j)=>j.trim()).join(", ")} Customer Pains: ${insights.pain.filter((p)=>p.trim()).join(", ")} Customer Gains: ${insights.gain.filter((g)=>g.trim()).join(", ")} Make each ad distinct and different from the others. Vary the approaches between emotional appeal, practical benefits, and problem-solving. Keep the tone ${getToneDescription(toneLevel)} throughout all ads.` } ], json_schema: { name: "ad_suggestions", schema: { type: "object", properties: { suggestions: { type: "array", items: { type: "object", properties: { headline: { type: "string" }, copy: { type: "string" }, targeting: { type: "string" } }, required: [ "headline", "copy", "targeting" ], additionalProperties: false } } }, required: [ "suggestions" ], additionalProperties: false } } }) }); const data = await response.json(); if (!data.choices?.[0]?.message?.content) { throw new Error("Failed to generate suggestions"); } const platformSuggestions = JSON.parse(data.choices[0].message.content).suggestions.map((suggestion)=>({ ...suggestion, platform })); allSuggestions.push(...platformSuggestions); } setSuggestions(allSuggestions); } catch (err) { setError(err.message); } finally{ setGenerating(false); } }; const togglePlatform = (platform)=>{ setSelectedPlatforms((prev)=>{ const newSelection = new Set(prev); if (newSelection.has(platform)) { newSelection.delete(platform); } else { newSelection.add(platform); } return newSelection; }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FDF6E9] text-[#194454] font-futura relative", __source: { fileName: "", lineNumber: 463, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-[-10%] right-[-10%] w-[600px] h-[600px] bg-[#C21717] opacity-5 rounded-[40%_60%_70%_30%/40%_50%_60%_50%] animate-blob z-0", __source: { fileName: "", lineNumber: 464, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "fixed top-[20%] left-[-15%] w-[500px] h-[500px] bg-[#E76219] opacity-5 rounded-[60%_40%_30%_70%/50%_40%_60%_50%] animate-blob animation-delay-2000 z-0", __source: { fileName: "", lineNumber: 465, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-[-10%] right-[10%] w-[400px] h-[400px] bg-[#FEA712] opacity-10 rounded-[30%_70%_60%_40%/50%_30%_70%_50%] animate-blob animation-delay-4000 z-0", __source: { fileName: "", lineNumber: 466, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("header", { className: "p-4 md:p-8 flex justify-between items-center max-w-7xl mx-auto relative", __source: { fileName: "", lineNumber: 467, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", type: "image/png", href: "https://ucarecdn.com/425b943e-1321-4497-aa08-8168a40f83c9/-/format/auto/-/quality/smart/-/resize/32x32/", __source: { fileName: "", lineNumber: 468, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#194454]", __source: { fileName: "", lineNumber: 473, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/d51403be-6952-4b4b-a6bd-3e41edadf3d9/-/format/auto/", alt: "Radicle Logo", className: "h-8 md:h-10", __source: { fileName: "", lineNumber: 474, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative z-10", __source: { fileName: "", lineNumber: 482, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("main", { className: "p-4 md:p-8", __source: { fileName: "", lineNumber: 483, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto mb-8 text-center", __source: { fileName: "", lineNumber: 484, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#194454] mb-4", __source: { fileName: "", lineNumber: 485, columnNumber: 13 }, __self: this }, "The Radicle Ad Creator"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#194454]", __source: { fileName: "", lineNumber: 488, columnNumber: 13 }, __self: this }, "Give your website URL, and we'll analyze it to provide a base value proposition and target audience. Adjust the pains, gains, and jobs to be done of your customers, then select which ads you want to generate. Our AI will provide you with creative ad suggestions to inspire your own ad campaigns.")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleCreateProject, className: "max-w-2xl mx-auto mb-8 px-4", __source: { fileName: "", lineNumber: 496, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-4 md:p-6 shadow-sm", __source: { fileName: "", lineNumber: 500, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 501, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#194454] font-bold mb-3", htmlFor: "businessUrl", __source: { fileName: "", lineNumber: 502, columnNumber: 17 }, __self: this }, "Business URL"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-3", __source: { fileName: "", lineNumber: 508, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", id: "businessUrl", value: businessUrl, onChange: (e)=>setBusinessUrl(e.target.value), placeholder: "Enter website (e.g. www.yourcompany.com)", className: "w-full p-3 border rounded bg-white focus:outline-none focus:ring-2 focus:ring-[#41B8AA] focus:border-[#41B8AA] placeholder-gray-400", required: true, __source: { fileName: "", lineNumber: 509, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full bg-[#41B8AA] text-white px-6 py-3 rounded hover:bg-[#194454] transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 518, columnNumber: 19 }, __self: this }, analyzing ? "Analyzing..." : loading ? "Creating..." : "Analyze & Start"))))), projectId && /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 535, columnNumber: 13 }, __self: this }, analysis && /*#__PURE__*/ React.createElement("div", { className: "bg-[#41B8AA] bg-opacity-10 p-4 rounded-lg border border-[#41B8AA]", __source: { fileName: "", lineNumber: 537, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-[#194454] mb-2", __source: { fileName: "", lineNumber: 538, columnNumber: 19 }, __self: this }, "Website Analysis Summary:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 text-[#194454]", __source: { fileName: "", lineNumber: 541, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 542, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 543, columnNumber: 23 }, __self: this }, "Value Proposition:"), " ", analysis.value_proposition), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 546, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 547, columnNumber: 23 }, __self: this }, "Target Audience:"), " ", analysis.target_audience))), Object.entries(insights).map(([type, values])=>/*#__PURE__*/ React.createElement("div", { key: type, className: "bg-white rounded-lg p-6 shadow-sm", __source: { fileName: "", lineNumber: 554, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 555, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#194454] mb-2 capitalize", __source: { fileName: "", lineNumber: 556, columnNumber: 21 }, __self: this }, type === "job" ? "Jobs to be Done" : type === "pain" ? "Customer Pains" : "Customer Gains"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#194454] mb-4 italic", __source: { fileName: "", lineNumber: 563, columnNumber: 21 }, __self: this }, type === "job" ? "What is your customer trying to achieve? Add your own or select from our AI suggestions below." : type === "pain" ? "What frustrations or challenges does your customer face? Add your own or choose from our suggestions below." : "What benefits or positive outcomes does your customer want? Add your own or pick from our suggestions below.")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 mb-6", __source: { fileName: "", lineNumber: 572, columnNumber: 19 }, __self: this }, (values.filter((v)=>!predefinedOptions[type].includes(v)).length > 0 ? values.filter((v)=>!predefinedOptions[type].includes(v)) : [ "" ]).map((value, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex gap-2", __source: { fileName: "", lineNumber: 580, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: value, onChange: (e)=>updateInsight(type, index, e.target.value), onBlur: ()=>addInsight(type, index), onKeyDown: (e)=>{ if (e.key === "Enter") { e.preventDefault(); addNewField(type); } }, placeholder: `Enter custom ${type}...`, className: "flex-1 p-2 border rounded focus:outline-none focus:ring-2 focus:ring-[#41B8AA]", __source: { fileName: "", lineNumber: 581, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>removeInsight(type, index), className: "px-3 py-2 text-red-500 hover:text-red-700 transition-colors", title: "Remove", __source: { fileName: "", lineNumber: 597, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 603, columnNumber: 27 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>addNewField(type), className: "text-[#41B8AA] hover:text-[#194454] transition-colors", __source: { fileName: "", lineNumber: 607, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 612, columnNumber: 23 }, __self: this }), "Add another")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 617, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-[#194454] mb-3", __source: { fileName: "", lineNumber: 618, columnNumber: 21 }, __self: this }, "Or select from AI suggestions:"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 621, columnNumber: 21 }, __self: this }, predefinedOptions[type].map((option)=>/*#__PURE__*/ React.createElement("button", { key: option, onClick: ()=>handlePredefinedOption(type, option), className: `p-2 rounded-lg border-2 text-left transition-colors ${values.includes(option) ? "border-[#41B8AA] bg-[#41B8AA] text-white" : "border-[#194454] hover:border-[#41B8AA]"}`, __source: { fileName: "", lineNumber: 623, columnNumber: 25 }, __self: this }, option)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 shadow-sm", __source: { fileName: "", lineNumber: 640, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#194454] mb-4", __source: { fileName: "", lineNumber: 641, columnNumber: 17 }, __self: this }, "Ad Controls"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 644, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 645, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#194454] font-semibold mb-4", __source: { fileName: "", lineNumber: 646, columnNumber: 21 }, __self: this }, "Tone of Voice", /*#__PURE__*/ React.createElement("span", { className: "text-sm font-normal ml-2 text-gray-500", __source: { fileName: "", lineNumber: 648, columnNumber: 23 }, __self: this }, "(Adjust how formal or casual your ads should be)")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 652, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#194454]", __source: { fileName: "", lineNumber: 653, columnNumber: 23 }, __self: this }, "Formal"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "5", value: toneLevel, onChange: (e)=>setToneLevel(parseInt(e.target.value)), className: "flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-[#41B8AA]", __source: { fileName: "", lineNumber: 654, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#194454]", __source: { fileName: "", lineNumber: 662, columnNumber: 23 }, __self: this }, "Casual")), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-sm text-gray-500 text-center", __source: { fileName: "", lineNumber: 664, columnNumber: 21 }, __self: this }, toneLevel === 1 && "Very professional and corporate", toneLevel === 2 && "Business-friendly and polite", toneLevel === 3 && "Balanced and conversational", toneLevel === 4 && "Friendly and approachable", toneLevel === 5 && "Super casual and fun")), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 673, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 674, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#194454] font-semibold mb-2", __source: { fileName: "", lineNumber: 675, columnNumber: 23 }, __self: this }, "Must Include Words", /*#__PURE__*/ React.createElement("span", { className: "text-sm font-normal ml-2 text-gray-500", __source: { fileName: "", lineNumber: 677, columnNumber: 25 }, __self: this }, "(separate with commas)")), /*#__PURE__*/ React.createElement("textarea", { value: mandatoryWords, onChange: (e)=>setMandatoryWords(e.target.value), placeholder: "Words that must appear in the ads...", className: "w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-[#41B8AA] h-24", __source: { fileName: "", lineNumber: 681, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mt-1", __source: { fileName: "", lineNumber: 687, columnNumber: 23 }, __self: this }, "These exact words will be included in every ad (they will not be translated)")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 693, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#194454] font-semibold mb-2", __source: { fileName: "", lineNumber: 694, columnNumber: 23 }, __self: this }, "Forbidden Words", /*#__PURE__*/ React.createElement("span", { className: "text-sm font-normal ml-2 text-gray-500", __source: { fileName: "", lineNumber: 696, columnNumber: 25 }, __self: this }, "(separate with commas)")), /*#__PURE__*/ React.createElement("textarea", { value: forbiddenWords, onChange: (e)=>setForbiddenWords(e.target.value), placeholder: "Words to avoid in the ads...", className: "w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-[#41B8AA] h-24", __source: { fileName: "", lineNumber: 700, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mt-1", __source: { fileName: "", lineNumber: 706, columnNumber: 23 }, __self: this }, "These exact words will be excluded from all ads (translations are allowed)"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 shadow-sm", __source: { fileName: "", lineNumber: 715, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#194454] mb-4", __source: { fileName: "", lineNumber: 716, columnNumber: 17 }, __self: this }, "Select Platform"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 719, columnNumber: 17 }, __self: this }, [ "facebook", "instagram", "linkedin", "tiktok" ].map((platform)=>/*#__PURE__*/ React.createElement("div", { key: platform, className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 722, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>togglePlatform(platform), disabled: generating, className: `p-4 rounded-lg border-2 transition-colors ${selectedPlatforms.has(platform) ? "border-[#41B8AA] bg-[#41B8AA] text-white" : "border-[#194454] hover:border-[#41B8AA]"}`, __source: { fileName: "", lineNumber: 723, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fab fa-${platform} text-2xl mb-2`, __source: { fileName: "", lineNumber: 732, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "capitalize", __source: { fileName: "", lineNumber: 733, columnNumber: 27 }, __self: this }, platform)), selectedPlatforms.has(platform) && /*#__PURE__*/ React.createElement("div", { className: "text-xs text-[#194454] text-center italic", __source: { fileName: "", lineNumber: 736, columnNumber: 27 }, __self: this }, platformGuide[platform])))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 745, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#194454] mb-4", __source: { fileName: "", lineNumber: 746, columnNumber: 19 }, __self: this }, "Select Language"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 749, columnNumber: 19 }, __self: this }, [ { code: "en", name: "English", flag: "🇬🇧" }, { code: "nl", name: "Nederlands", flag: "🇳🇱" }, { code: "fr", name: "Français", flag: "🇫🇷" }, { code: "de", name: "Deutsch", flag: "🇩🇪" } ].map(({ code, name, flag })=>/*#__PURE__*/ React.createElement("button", { key: code, onClick: ()=>setSelectedLanguage(code), disabled: generating, className: `p-4 rounded-lg border-2 transition-colors ${selectedLanguage === code ? "border-[#41B8AA] bg-[#41B8AA] text-white" : "border-[#194454] hover:border-[#41B8AA]"}`, __source: { fileName: "", lineNumber: 756, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl mb-1", __source: { fileName: "", lineNumber: 766, columnNumber: 25 }, __self: this }, flag), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 767, columnNumber: 25 }, __self: this }, name))))), /*#__PURE__*/ React.createElement("button", { onClick: generateSuggestions, disabled: generating || selectedPlatforms.size === 0, className: "mt-4 w-full bg-[#41B8AA] text-white px-6 py-2 rounded hover:bg-[#194454] transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 773, columnNumber: 17 }, __self: this }, generating ? "Generating..." : selectedPlatforms.size > 0 ? `Generate Suggestions for ${Array.from(selectedPlatforms).join(", ")}` : "Select at least one platform")), generating && /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 789, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin text-[#41B8AA] text-4xl mb-4", __source: { fileName: "", lineNumber: 790, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch", __source: { fileName: "", lineNumber: 791, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-[#194454]", __source: { fileName: "", lineNumber: 793, columnNumber: 19 }, __self: this }, "Generating ad suggestions...")), suggestions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 shadow-sm", __source: { fileName: "", lineNumber: 798, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 799, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-[#194454]", __source: { fileName: "", lineNumber: 800, columnNumber: 21 }, __self: this }, "Ad Suggestions"), /*#__PURE__*/ React.createElement("button", { onClick: generateSuggestions, disabled: generating, className: "bg-[#41B8AA] text-white px-4 py-2 rounded hover:bg-[#194454] transition-colors disabled:opacity-50 flex items-center gap-2", __source: { fileName: "", lineNumber: 803, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt", __source: { fileName: "", lineNumber: 808, columnNumber: 23 }, __self: this }), generating ? "Regenerating..." : "Regenerate")), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 812, columnNumber: 19 }, __self: this }, suggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b last:border-0 pb-6", __source: { fileName: "", lineNumber: 814, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-2", __source: { fileName: "", lineNumber: 815, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fab fa-${suggestion.platform} text-[#41B8AA]`, __source: { fileName: "", lineNumber: 816, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#41B8AA]", __source: { fileName: "", lineNumber: 819, columnNumber: 27 }, __self: this }, suggestion.headline)), /*#__PURE__*/ React.createElement("div", { className: "text-[#194454] mb-2", __source: { fileName: "", lineNumber: 823, columnNumber: 25 }, __self: this }, suggestion.copy), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 826, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 827, columnNumber: 27 }, __self: this }, "Targeting:"), " ", suggestion.targeting)))))), error && /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto mt-4 p-4 bg-red-100 text-red-700 rounded flex items-center gap-2", __source: { fileName: "", lineNumber: 838, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle", __source: { fileName: "", lineNumber: 839, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 840, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 841, columnNumber: 17 }, __self: this }, "Error"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 842, columnNumber: 17 }, __self: this }, error)))), /*#__PURE__*/ React.createElement("footer", { className: "border-t border-[#194454]/10 mt-16 py-8", __source: { fileName: "", lineNumber: 848, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 md:px-8 text-center text-sm text-[#194454]", __source: { fileName: "", lineNumber: 849, columnNumber: 11 }, __self: this }, "© ", new Date().getFullYear(), " Radicle. All rights reserved.")))); }