function MainComponent() { const [topic, setTopic] = useState(""); const [keywords, setKeywords] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [sortBy, setSortBy] = useState("keyword"); const [sortDirection, setSortDirection] = useState("asc"); const generateKeywords = async ()=>{ if (!topic.trim()) { setError("Voer een onderwerp in om te beginnen"); return; } setLoading(true); setError(null); try { const chatResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Generate 10 relevant search keywords in Dutch for the topic: ${topic}. Return as JSON array with properties: keyword (string), monthlyVolume (random number between 100-10000), difficulty (random number between 10-100). Only return the JSON array, no other text.` } ], json_schema: { name: "keyword_suggestions", schema: { type: "object", properties: { keywords: { type: "array", items: { type: "object", properties: { keyword: { type: "string" }, monthlyVolume: { type: "number" }, difficulty: { type: "number" } }, required: [ "keyword", "monthlyVolume", "difficulty" ], additionalProperties: false } } }, required: [ "keywords" ], additionalProperties: false } } }) }); if (!chatResponse.ok) { throw new Error("Er ging iets mis bij het genereren van zoekwoorden"); } const chatData = await chatResponse.json(); const generatedKeywords = chatData.choices[0].message.content; const parsedKeywords = JSON.parse(generatedKeywords).keywords; const validatedKeywords = await Promise.all(parsedKeywords.map(async (kw)=>{ const searchResponse = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(kw.keyword)}`); if (searchResponse.ok) { const searchData = await searchResponse.json(); return { ...kw, searchResults: searchData.items ? searchData.items.length : 0 }; } return kw; })); setKeywords(validatedKeywords); } catch (err) { setError("Er ging iets mis. Probeer het later opnieuw."); console.error(err); } finally{ setLoading(false); } }; const sortKeywords = (a, b)=>{ if (sortBy === "keyword") { return sortDirection === "asc" ? a.keyword.localeCompare(b.keyword) : b.keyword.localeCompare(a.keyword); } if (sortBy === "volume") { return sortDirection === "asc" ? a.monthlyVolume - b.monthlyVolume : b.monthlyVolume - a.monthlyVolume; } if (sortBy === "difficulty") { return sortDirection === "asc" ? a.difficulty - b.difficulty : b.difficulty - a.difficulty; } return 0; }; const downloadResults = ()=>{ const csv = [ [ "Zoekwoord", "Maandelijks Zoekvolume", "Moeilijkheidsgraad (10-100)" ], ...keywords.map((item)=>[ item.keyword, item.monthlyVolume, item.difficulty ]) ].map((row)=>row.join(",")).join("\n"); const blob = new Blob([ csv ], { type: "text/csv" }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "zoekwoorden-analyse.csv"; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white p-4 md:p-8 font-roboto", __source: { fileName: "", lineNumber: 134, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 135, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-8", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-4xl text-[#00D6A4] mr-4", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "Zoekwoord Analyse Tool"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-8 mb-8 shadow-lg border border-gray-100", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-black mb-4", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, "Hoe werkt het?"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4 leading-relaxed", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, "1. Voer je onderwerp of niche in", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }), "2. Klik op 'Genereer Suggesties'", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }), "3. Bekijk de relevante zoekwoorden en volumes", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }), "4. Download de resultaten als CSV bestand")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: topic, onChange: (e)=>setTopic(e.target.value), placeholder: "Voer je onderwerp in (bijv. 'yoga voor beginners')", className: "flex-1 p-4 border border-gray-200 rounded-lg text-black bg-white focus:outline-none focus:border-[#00D6A4] focus:ring-2 focus:ring-[#00D6A4] focus:ring-opacity-50 transition-all", name: "topic", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateKeywords, disabled: loading, className: "bg-[#00D6A4] hover:bg-[#00c094] text-white font-bold px-8 py-4 rounded-lg transition-colors shadow-md", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 170, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }), "Genereren...") : "Genereer Suggesties")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-50 text-red-600 rounded-lg border border-red-100", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, error)), keywords.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-8 bg-white rounded-lg shadow-lg border border-gray-100 p-6", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-black", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this }, "Resultaten"), /*#__PURE__*/ React.createElement("button", { onClick: downloadResults, className: "bg-white border-2 border-[#00D6A4] text-[#00D6A4] hover:bg-[#00D6A4] hover:text-white font-bold px-6 py-2 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }), "Download CSV")), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-6 space-x-4", __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "p-3 border border-gray-200 rounded-lg text-black bg-white focus:outline-none focus:border-[#00D6A4] focus:ring-2 focus:ring-[#00D6A4] focus:ring-opacity-50 transition-all", value: sortBy, onChange: (e)=>setSortBy(e.target.value), __source: { fileName: "", lineNumber: 202, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "keyword", __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this }, "Sorteer op Zoekwoord"), /*#__PURE__*/ React.createElement("option", { value: "volume", __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }, "Sorteer op Zoekvolume"), /*#__PURE__*/ React.createElement("option", { value: "difficulty", __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, "Sorteer op Moeilijkheidsgraad")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSortDirection(sortDirection === "asc" ? "desc" : "asc"), className: "p-3 border border-gray-200 rounded-lg text-black bg-white hover:border-[#00D6A4] hover:text-[#00D6A4] transition-colors", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-sort-${sortDirection === "asc" ? "up" : "down"}`, __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 224, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 225, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "border-b-2 border-gray-100", __source: { fileName: "", lineNumber: 226, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "text-left p-4 text-black font-bold", __source: { fileName: "", lineNumber: 227, columnNumber: 21 }, __self: this }, "Zoekwoord"), /*#__PURE__*/ React.createElement("th", { className: "text-left p-4 text-black font-bold", __source: { fileName: "", lineNumber: 230, columnNumber: 21 }, __self: this }, "Maandelijks Zoekvolume"), /*#__PURE__*/ React.createElement("th", { className: "text-left p-4 text-black font-bold", __source: { fileName: "", lineNumber: 233, columnNumber: 21 }, __self: this }, "Moeilijkheidsgraad"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 238, columnNumber: 17 }, __self: this }, keywords.sort(sortKeywords).map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b border-gray-100 hover:bg-gray-50 transition-colors", __source: { fileName: "", lineNumber: 240, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-4 text-gray-800", __source: { fileName: "", lineNumber: 244, columnNumber: 23 }, __self: this }, item.keyword), /*#__PURE__*/ React.createElement("td", { className: "p-4 text-gray-800", __source: { fileName: "", lineNumber: 245, columnNumber: 23 }, __self: this }, item.monthlyVolume.toLocaleString()), /*#__PURE__*/ React.createElement("td", { className: "p-4 text-gray-800", __source: { fileName: "", lineNumber: 248, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 249, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 250, columnNumber: 27 }, __self: this }, item.difficulty), /*#__PURE__*/ React.createElement("div", { className: "w-24 h-3 bg-gray-100 rounded-full", __source: { fileName: "", lineNumber: 251, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full rounded-full bg-[#00D6A4]", style: { width: `${item.difficulty}%` }, __source: { fileName: "", lineNumber: 252, columnNumber: 29 }, __self: this }))))))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 space-y-3 text-sm text-gray-600 bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-2 text-[#00D6A4]", __source: { fileName: "", lineNumber: 267, columnNumber: 17 }, __self: this }), "Let op: Zoekvolumes zijn schattingen en kunnen variëren afhankelijk van seizoen en trends."), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line mr-2 text-[#00D6A4]", __source: { fileName: "", lineNumber: 272, columnNumber: 17 }, __self: this }), "Moeilijkheidsgraad: 10 = makkelijk om te ranken, 100 = zeer moeilijk"))), loading && keywords.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 281, columnNumber: 11 }, __self: this }, [ ...Array.from({ length: 5 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "animate-pulse flex space-x-4", __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 space-y-4 py-1", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-100 rounded-lg w-3/4", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }))))))); }