function MainComponent() { const [searchCriteria, setSearchCriteria] = React.useState({ industry: '', location: '', size: '' }); const [leads, setLeads] = React.useState([]); const [email, setEmail] = React.useState(''); const [emailSubmitted, setEmailSubmitted] = React.useState(false); const [loading, setLoading] = React.useState(false); const [aiSuggestion, setAiSuggestion] = React.useState(''); const [showEmailPrompt, setShowEmailPrompt] = React.useState(false); const [consent, setConsent] = React.useState(false); const [aiTitle, setAiTitle] = React.useState(''); const [activeTab, setActiveTab] = React.useState('discovery'); const [crmIntegration, setCrmIntegration] = React.useState(''); const handleInputChange = (e)=>{ const { name, value } = e.target; setSearchCriteria((prev)=>({ ...prev, [name]: value })); }; const handleEmailChange = (e)=>{ setEmail(e.target.value); }; const handleEmailSubmit = (e)=>{ e.preventDefault(); if (consent) { setEmailSubmitted(true); setShowEmailPrompt(false); } else { alert("Please consent to receive emails and newsletters from LeadGenPro"); } }; const handleSearch = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: `Generate 5 fictional leads including email address, phone number, company name, and a quality score based on the following criteria: Industry: ${searchCriteria.industry}, Location: ${searchCriteria.location}, Size: ${searchCriteria.size}` } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); const generatedLeads = JSON.parse(data.choices[0].message.content); setLeads(generatedLeads); } catch (error) { console.error("Error fetching AI suggestion:", error); } setLoading(false); }; const handleCrmIntegration = (e)=>{ setCrmIntegration(e.target.value); }; const handleExport = (format)=>{ if (leads.length === 0) { alert("No leads to export. Please generate leads first."); return; } const csvContent = "data:text/csv;charset=utf-8," + leads.map((lead)=>Object.values(lead).join(",")).join("\n"); const encodedUri = encodeURI(csvContent); const link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", `leads.${format}`); document.body.appendChild(link); link.click(); }; React.useEffect(()=>{ const fetchAiTitle = async ()=>{ try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: "Generate a catchy title for a free AI service for LeadGenPro" } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); setAiTitle(data.choices[0].message.content); } catch (error) { console.error("Error fetching AI title:", error); } }; fetchAiTitle(); }, []); if (!emailSubmitted) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8 font-sans flex items-center justify-center", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleEmailSubmit, className: "bg-white p-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-blue-600 mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "LeadGenPro"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 mb-6", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, aiTitle || "Free Lead Generation Service"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Enter your email", className: "border p-2 rounded w-full mb-4", value: email, onChange: handleEmailChange, required: true, __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "consent", checked: consent, onChange: ()=>setConsent(!consent), className: "mr-2", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "consent", className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "I consent to receiving emails and newsletters from LeadGenPro")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-full", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, "Get Started"))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8 font-sans", __source: { fileName: "", lineNumber: 146, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-8", __source: { fileName: "", lineNumber: 147, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, "LeadGenPro"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, aiTitle || "Free Lead Generation Service")), /*#__PURE__*/ React.createElement("nav", { className: "mb-8", __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('discovery'), className: `px-4 py-2 rounded ${activeTab === 'discovery' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, "Lead Discovery")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('management'), className: `px-4 py-2 rounded ${activeTab === 'management' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "Lead Management")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab('integration'), className: `px-4 py-2 rounded ${activeTab === 'integration' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "CRM Integration")))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 181, columnNumber: 7 }, __self: this }, activeTab === 'discovery' && /*#__PURE__*/ React.createElement("section", { className: "bg-white p-6 rounded-lg shadow-md mb-8", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, "Lead Discovery"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 mb-4", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "industry", placeholder: "Industry", className: "border p-2 rounded", value: searchCriteria.industry, onChange: handleInputChange, __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", placeholder: "Location", className: "border p-2 rounded", value: searchCriteria.location, onChange: handleInputChange, __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "size", placeholder: "Company Size", className: "border p-2 rounded", value: searchCriteria.size, onChange: handleInputChange, __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", disabled: loading, __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, loading ? 'Searching...' : 'Generate Leads')), activeTab === 'management' && /*#__PURE__*/ React.createElement("section", { className: "bg-white p-6 rounded-lg shadow-md mb-8", __source: { fileName: "", lineNumber: 222, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }, "Lead Management"), leads.length > 0 ? /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 225, columnNumber: 15 }, __self: this }, leads.map((lead, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-4 p-4 border rounded", __source: { fileName: "", lineNumber: 227, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 228, columnNumber: 21 }, __self: this }, lead.companyName), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 229, columnNumber: 21 }, __self: this }, "Email: ", lead.email), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 230, columnNumber: 21 }, __self: this }, "Phone: ", lead.phoneNumber), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 231, columnNumber: 21 }, __self: this }, "Quality Score: ", lead.qualityScore)))) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this }, "No leads generated yet. Try searching for leads in the Lead Discovery tab."), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, "Export Options"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleExport('csv'), className: "bg-green-500 text-white px-4 py-2 rounded mr-2", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, "Export CSV"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleExport('xlsx'), className: "bg-green-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 241, columnNumber: 15 }, __self: this }, "Export Excel"))), activeTab === 'integration' && /*#__PURE__*/ React.createElement("section", { className: "bg-white p-6 rounded-lg shadow-md mb-8", __source: { fileName: "", lineNumber: 247, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 248, columnNumber: 13 }, __self: this }, "CRM Integration"), /*#__PURE__*/ React.createElement("select", { value: crmIntegration, onChange: handleCrmIntegration, className: "border p-2 rounded w-full mb-4", __source: { fileName: "", lineNumber: 249, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, "Select CRM"), /*#__PURE__*/ React.createElement("option", { value: "salesforce", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, "Salesforce"), /*#__PURE__*/ React.createElement("option", { value: "hubspot", __source: { fileName: "", lineNumber: 256, columnNumber: 15 }, __self: this }, "HubSpot")), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", disabled: !crmIntegration, __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, "Connect CRM"))), /*#__PURE__*/ React.createElement("footer", { className: "text-center text-gray-500 mt-8", __source: { fileName: "", lineNumber: 268, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 269, columnNumber: 9 }, __self: this }, "© 2024 LeadGenPro. All rights reserved."))); }