function MainComponent() { const [activeSection, setActiveSection] = useState("overview"); const [showPayoutForm, setShowPayoutForm] = useState(false); const [showProfileForm, setShowProfileForm] = useState(false); const [payoutFormData, setPayoutFormData] = useState({ fullName: "", email: "", paymentMethod: "", accountDetails: "" }); const [profileFormData, setProfileFormData] = useState({ fullName: "", email: "", phone: "", address: "", headshot: null, idPhoto: null }); const [upload, { loading }] = useUpload(); const [isAuthenticated, setIsAuthenticated] = useState(false); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const [salesHeroImage, setSalesHeroImage] = useState(null); useEffect(()=>{ const link = document.createElement("link"); link.rel = "icon"; link.href = "https://ucarecdn.com/a496d7b1-926c-428e-8f55-ab48586ecabd/-/format/auto/"; link.type = "image/jpeg"; document.head.appendChild(link); return ()=>document.head.removeChild(link); }, []); useEffect(()=>{ const generateHeroImage = async ()=>{ try { const response = await fetch("/integrations/dall-e-3/?prompt=hyper-realistic photograph of a professional sales representative in a modern home office, wearing business attire, speaking on a wireless headset while typing on a laptop, natural lighting from window, clean modern desk setup with dual monitors, 4k quality, photojournalistic style"); const data = await response.json(); if (data.data && data.data[0]) { setSalesHeroImage(data.data[0]); } } catch (error) { console.error("Error generating hero image:", error); } }; generateHeroImage(); }, []); const handlePayoutSubmit = async (e)=>{ e.preventDefault(); try { await fetch("/api/db/payoutdata", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `payout_info` (`full_name`, `email`, `payment_method`, `account_details`) VALUES (?, ?, ?, ?)", values: [ payoutFormData.fullName, payoutFormData.email, payoutFormData.paymentMethod, payoutFormData.accountDetails ] }) }); setShowPayoutForm(false); setPayoutFormData({ fullName: "", email: "", paymentMethod: "", accountDetails: "" }); } catch (error) { console.error("Error saving payout information:", error); } }; const handleProfileSubmit = async (e)=>{ e.preventDefault(); try { const headshotUpload = await upload({ file: profileFormData.headshot }); const idPhotoUpload = await upload({ file: profileFormData.idPhoto }); if (headshotUpload.error || idPhotoUpload.error) { throw new Error("Error uploading images"); } await fetch("/api/db/subcontractor-data", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `subcontractor_profile` (`full_name`, `email`, `phone`, `address`, `headshot_url`, `id_photo_url`) VALUES (?, ?, ?, ?, ?, ?)", values: [ profileFormData.fullName, profileFormData.email, profileFormData.phone, profileFormData.address, headshotUpload.url, idPhotoUpload.url ] }) }); setShowProfileForm(false); setProfileFormData({ fullName: "", email: "", phone: "", address: "", headshot: null, idPhoto: null }); } catch (error) { console.error("Error saving profile information:", error); } }; const sections = { overview: { title: "Company Overview", content: { company: "Five Stars App Solutions specializes in no-coded apps and designs, offering comprehensive digital solutions for businesses. Our five-star rated services span across multiple industries with a focus on quality and innovation.", owner: { name: "Josette ColePinnix", title: "Founder & CEO", bio: "With over a decade of experience in digital solutions and app development, Josette ColePinnix founded Five Stars App Solutions with a vision to make technology accessible to businesses of all sizes. Her innovative approach to no-code development has revolutionized how companies approach digital transformation.", achievements: [ "Pioneer in no-code development solutions", "Successfully launched 12+ industry-specific platforms", "Developed proprietary rapid deployment methodology", "Built strategic partnerships across multiple industries" ], image: "https://ucarecdn.com/a496d7b1-926c-428e-8f55-ab48586ecabd/-/format/auto/" } } }, compensation: { title: "Compensation Structure", content: { base: "25% commission on all project payments", details: [ "Commission earned on every payment received from clients", "50% project down payment required before project start", "Continuous earnings as clients make payments", "Example: $10,000 project = $2,500 total commission potential", "Initial commission on down payment: $1,250 (50% of $10,000 × 25%)", "Remaining $1,250 earned as client completes payments", "Real-time Stripe payment notifications for payment tracking", "Compensation transfer within 1-3 days of client payment", "Payout method must be submitted during onboarding process", "Customer must be registered in company CRM for payout processing" ], notification: { title: "Payment Tracking", description: "Access to company Stripe account notifications for real-time payment monitoring", icon: "fa-bell" }, payout: { title: "Payout Process", description: "Compensation transferred within 1-3 business days of client payment. Submit preferred payout method during onboarding.", icon: "fa-money-bill-transfer" }, icon: "fa-dollar-sign" } }, onboarding: { title: "Onboarding Process", content: [ { step: "Intro Call", description: "Initial meeting to discuss role expectations and company culture", icon: "fa-phone", link: "tel:9185500186" }, { step: "Interview", description: "Formal discussion of experience, skills, and alignment with company goals", icon: "fa-user-tie", link: "https://meetings.dialpad.com/jayceepee1" }, { step: "Contract Signing", description: "Review and signing of employment agreement and confidentiality documents", icon: "fa-file-signature", link: "https://pdf.ac/4kKmHT" }, { step: "Profile Setup", description: "Submit your identification and profile information", icon: "fa-id-card", onClick: ()=>setShowProfileForm(true) }, { step: "Training", description: "Comprehensive product and sales methodology training program", icon: "fa-graduation-cap", link: "https://meetings.dialpad.com/jayceepee1" }, { step: "CRM Setup", description: "Access and training for company CRM system, including lead management from company generator", icon: "fa-database", link: "https://incomestatement.created.app/crm" }, { step: "Weekly Briefing", description: "Regular team meetings to discuss progress, targets, and strategies", icon: "fa-calendar-check", link: "https://meetings.dialpad.com/jayceepee1" }, { step: "Payout Setup", description: "Submit your payment information for commission processing", icon: "fa-money-bill-transfer", onClick: ()=>setShowPayoutForm(true) } ] }, services: { title: "Our Service Portfolio", content: [ { name: "Safehouse Foundation", description: "The Ark (Safe House Foundation) provides a home lowering system for in-ground vault protection of a home, prior to potential weather danger or natural disaster.", link: "https://safehousefoundation.created.app/" }, { name: "App Development", description: "End-to-end mobile application development services with focus on user experience, performance, and scalability across iOS and Android platforms.", link: "https://fivestarsappdevelopment.created.app/" }, { name: "Website Development", description: "Custom website solutions including e-commerce, corporate sites, and web applications with responsive design and modern technologies.", link: "https://fivestarsappdiy.created.app/" }, { name: "Content Creation", description: "Professional content creation services including copywriting, video production, and social media content to enhance brand presence.", link: "https://fivestarssalespitchgenerator.created.app/" }, { name: "Graphic Designs", description: "Creative design services covering branding, marketing materials, UI/UX design, and visual identity development.", link: "https://fivestarslogomaker.created.app/" }, { name: "Vending Machines", description: "Smart vending solutions with digital payment integration, inventory management, and remote monitoring capabilities.", link: "https://fivestarsapps.created.app/vending-machine" }, { name: "Heart Monitor", description: "Healthcare technology solutions focused on cardiac monitoring with real-time data tracking and medical professional integration.", link: "https://fivestarsheartmonitor.created.app/" }, { name: "Five Star Financials", description: "Comprehensive financial service solutions including payment processing, accounting software, and financial reporting tools.", link: "https://fivestarfinancials.org/" }, { name: "goDDess Designs", description: "Premium design services specializing in luxury branding, high-end marketing materials, and exclusive visual content.", link: "https://goddessdesigns.company.site/" }, { name: "Smart Foods Tulsa", description: "Food industry technology solutions including POS systems, inventory management, and online ordering platforms.", link: "https://smartfoodstulsa.com/" }, { name: "Book Publisher", description: "Complete publishing services including digital and print publication, distribution, and marketing for authors.", link: "https://fivestarsappsolutions.com/book-diy" }, { name: "Music Publisher", description: "Music industry solutions covering digital distribution, rights management, and promotional tools for artists.", link: "https://jayceepeediymusic.company.site/" } ] }, salesProcess: { title: "Sales Process", content: [ { text: "1. Find Contact", link: "https://fivestarsalesleads.created.app/" }, { text: "2. Add Contact", link: "https://incomestatement.created.app/crm" }, { text: "3. Send Proposal", link: "https://fivestartemplates.created.app/" }, { text: "4. Follow Up", link: "https://incomestatement.created.app/crm" }, { text: "5. Request for Quote", link: "mailto:admin@fivestarsappsolutions.com" }, { text: "6. Contract Signing", link: "https://pdf.ac/1PVJyr" }, { text: "7. Request Payment", link: "https://buy.stripe.com/cN2eYnauY9X775ebJl" } ] }, contactInfo: { title: "Key Contact Information", content: [ { type: "Phone", value: "(918) 550-0186", link: "tel:9185500186", icon: "fa-phone" }, { type: "Email", value: "jayceepee1@fivestarsappsolutions.com", link: "mailto:jayceepee1@fivestarsappsolutions.com", icon: "fa-envelope" } ] } }; const handleLogin = (e)=>{ e.preventDefault(); if (password === "sales001!") { setIsAuthenticated(true); setError(""); } else { setError("Incorrect password"); } }; if (!isAuthenticated) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-[#00FF00] flex items-center justify-center p-8", __source: { fileName: "", lineNumber: 372, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-xl p-8 w-full max-w-md", __source: { fileName: "", lineNumber: 373, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 text-center", __source: { fileName: "", lineNumber: 374, columnNumber: 11 }, __self: this }, "Login Required"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "space-y-4", __source: { fileName: "", lineNumber: 377, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 378, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 379, columnNumber: 15 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full p-2 rounded bg-[#222222] border border-[#00FF00] text-white", required: true, __source: { fileName: "", lineNumber: 380, columnNumber: 15 }, __self: this })), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500", __source: { fileName: "", lineNumber: 388, columnNumber: 23 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 rounded bg-[#00FF00] text-black hover:bg-[#00CC00]", __source: { fileName: "", lineNumber: 389, columnNumber: 13 }, __self: this }, "Enter")))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-[#00FF00] p-8", __source: { fileName: "", lineNumber: 402, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 403, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 404, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4", __source: { fileName: "", lineNumber: 405, columnNumber: 11 }, __self: this }, "Sales Executive Onboarding"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-8", __source: { fileName: "", lineNumber: 408, columnNumber: 11 }, __self: this }, "Five Stars App Solutions"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mb-8", __source: { fileName: "", lineNumber: 409, columnNumber: 11 }, __self: this }, Object.keys(sections).map((section)=>/*#__PURE__*/ React.createElement("button", { key: section, onClick: ()=>setActiveSection(section), className: `px-4 py-2 rounded-lg border border-[#00FF00] ${activeSection === section ? "bg-[#00FF00] text-black" : "hover:bg-[#00FF00] hover:text-black transition-colors"}`, __source: { fileName: "", lineNumber: 411, columnNumber: 15 }, __self: this }, sections[section].title)))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-xl p-8 shadow-lg", __source: { fileName: "", lineNumber: 425, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 426, columnNumber: 11 }, __self: this }, sections[activeSection].title), activeSection === "overview" ? /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 430, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "leading-relaxed text-gray-300", __source: { fileName: "", lineNumber: 431, columnNumber: 15 }, __self: this }, sections[activeSection].content.company), /*#__PURE__*/ React.createElement("div", { className: "border-t border-[#00FF00] pt-8", __source: { fileName: "", lineNumber: 434, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center gap-8", __source: { fileName: "", lineNumber: 435, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-48 h-48 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 436, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: sections[activeSection].content.owner.image, alt: sections[activeSection].content.owner.name, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 437, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 443, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 444, columnNumber: 21 }, __self: this }, sections[activeSection].content.owner.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#00FF00] mb-4", __source: { fileName: "", lineNumber: 447, columnNumber: 21 }, __self: this }, sections[activeSection].content.owner.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-6", __source: { fileName: "", lineNumber: 450, columnNumber: 21 }, __self: this }, sections[activeSection].content.owner.bio), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 453, columnNumber: 21 }, __self: this }, sections[activeSection].content.owner.achievements.map((achievement, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 456, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-[#00FF00] mr-2", __source: { fileName: "", lineNumber: 457, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-300", __source: { fileName: "", lineNumber: 458, columnNumber: 29 }, __self: this }, achievement)))))))) : activeSection === "services" ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 468, columnNumber: 13 }, __self: this }, sections[activeSection].content.map((service, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-[#00FF00] rounded-lg p-4 hover:bg-[#222222] transition-colors", __source: { fileName: "", lineNumber: 470, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 474, columnNumber: 19 }, __self: this }, service.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-3", __source: { fileName: "", lineNumber: 475, columnNumber: 19 }, __self: this }, service.description), /*#__PURE__*/ React.createElement("a", { href: service.link, className: "text-[#00FF00] hover:text-white inline-flex items-center", __source: { fileName: "", lineNumber: 476, columnNumber: 19 }, __self: this }, "Learn More ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right ml-2", __source: { fileName: "", lineNumber: 480, columnNumber: 32 }, __self: this }))))) : activeSection === "contactInfo" ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 486, columnNumber: 13 }, __self: this }, sections[activeSection].content.map((contact, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: contact.link, className: "flex items-center space-x-3 text-[#00FF00] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 488, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${contact.icon} text-xl`, __source: { fileName: "", lineNumber: 493, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 494, columnNumber: 19 }, __self: this }, contact.value)))) : activeSection === "onboarding" ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 499, columnNumber: 13 }, __self: this }, sections[activeSection].content.map((step, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-[#00FF00] rounded-lg p-6 flex flex-col items-center text-center cursor-pointer", __source: { fileName: "", lineNumber: 501, columnNumber: 17 }, __self: this }, step.link ? /*#__PURE__*/ React.createElement("a", { href: step.link, className: "flex flex-col items-center w-full", __source: { fileName: "", lineNumber: 506, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${step.icon} text-3xl mb-4`, __source: { fileName: "", lineNumber: 510, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 511, columnNumber: 23 }, __self: this }, step.step), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 512, columnNumber: 23 }, __self: this }, step.description)) : step.onClick ? /*#__PURE__*/ React.createElement("button", { onClick: step.onClick, className: "flex flex-col items-center w-full", __source: { fileName: "", lineNumber: 515, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${step.icon} text-3xl mb-4`, __source: { fileName: "", lineNumber: 519, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 520, columnNumber: 23 }, __self: this }, step.step), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 521, columnNumber: 23 }, __self: this }, step.description)) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: `fas ${step.icon} text-3xl mb-4`, __source: { fileName: "", lineNumber: 525, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("h4", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 526, columnNumber: 23 }, __self: this }, step.step), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 527, columnNumber: 23 }, __self: this }, step.description))))) : activeSection === "compensation" ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 534, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-8", __source: { fileName: "", lineNumber: 535, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${sections[activeSection].content.icon} text-4xl`, __source: { fileName: "", lineNumber: 536, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 540, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-2xl font-bold text-[#00FF00] mb-4", __source: { fileName: "", lineNumber: 541, columnNumber: 17 }, __self: this }, sections[activeSection].content.base)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 545, columnNumber: 15 }, __self: this }, sections[activeSection].content.details.map((detail, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-[#00FF00] rounded-lg p-4 hover:bg-[#222222] transition-colors", __source: { fileName: "", lineNumber: 548, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 552, columnNumber: 23 }, __self: this }, detail)))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-[#00FF00] pt-6 mt-6", __source: { fileName: "", lineNumber: 557, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 justify-center mb-6", __source: { fileName: "", lineNumber: 558, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${sections[activeSection].content.notification.icon} text-2xl`, __source: { fileName: "", lineNumber: 559, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 562, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 563, columnNumber: 21 }, __self: this }, sections[activeSection].content.notification.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 566, columnNumber: 21 }, __self: this }, sections[activeSection].content.notification.description))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 justify-center", __source: { fileName: "", lineNumber: 571, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${sections[activeSection].content.payout.icon} text-2xl`, __source: { fileName: "", lineNumber: 572, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 575, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 576, columnNumber: 21 }, __self: this }, sections[activeSection].content.payout.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 579, columnNumber: 21 }, __self: this }, sections[activeSection].content.payout.description))))) : activeSection === "salesProcess" ? /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 587, columnNumber: 13 }, __self: this }, salesHeroImage && /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px] rounded-lg overflow-hidden mb-8", __source: { fileName: "", lineNumber: 589, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: salesHeroImage, alt: "Professional sales representative working remotely", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 590, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 597, columnNumber: 15 }, __self: this }, sections[activeSection].content.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 599, columnNumber: 19 }, __self: this }, typeof item === "string" ? /*#__PURE__*/ React.createElement("span", { className: "text-gray-300", __source: { fileName: "", lineNumber: 601, columnNumber: 23 }, __self: this }, item) : /*#__PURE__*/ React.createElement("a", { href: item.link, className: "text-[#00FF00] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 603, columnNumber: 23 }, __self: this }, item.text))))) : /*#__PURE__*/ React.createElement("p", { className: "leading-relaxed", __source: { fileName: "", lineNumber: 615, columnNumber: 13 }, __self: this }, sections[activeSection].content)), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 618, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 619, columnNumber: 11 }, __self: this }, "For additional support, contact your team leader or visit our resource center"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mt-4", __source: { fileName: "", lineNumber: 623, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.linkedin.com/company/five-stars-app-solutions", className: "text-[#00FF00] hover:text-white", __source: { fileName: "", lineNumber: 624, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-linkedin text-xl", __source: { fileName: "", lineNumber: 628, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.facebook.com/fivestarsappsolutions/", className: "text-[#00FF00] hover:text-white", __source: { fileName: "", lineNumber: 630, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook text-xl", __source: { fileName: "", lineNumber: 634, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.instagram.com/fivestarsappsolutions/", className: "text-[#00FF00] hover:text-white", __source: { fileName: "", lineNumber: 636, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-xl", __source: { fileName: "", lineNumber: 640, columnNumber: 15 }, __self: this })))), showPayoutForm && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 646, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-xl p-8 w-full max-w-md", __source: { fileName: "", lineNumber: 647, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 648, columnNumber: 15 }, __self: this }, "Payout Information"), /*#__PURE__*/ React.createElement("form", { onSubmit: handlePayoutSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 649, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 650, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 651, columnNumber: 19 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "fullName", value: payoutFormData.fullName, onChange: (e)=>setPayoutFormData({ ...payoutFormData, fullName: e.target.value }), className: "w-full p-2 rounded bg-[#222222] border border-[#00FF00] text-white", required: true, __source: { fileName: "", lineNumber: 652, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 666, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 667, columnNumber: 19 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: payoutFormData.email, onChange: (e)=>setPayoutFormData({ ...payoutFormData, email: e.target.value }), className: "w-full p-2 rounded bg-[#222222] border border-[#00FF00] text-white", required: true, __source: { fileName: "", lineNumber: 668, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 682, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 683, columnNumber: 19 }, __self: this }, "Payment Method"), /*#__PURE__*/ React.createElement("select", { name: "paymentMethod", value: payoutFormData.paymentMethod, onChange: (e)=>setPayoutFormData({ ...payoutFormData, paymentMethod: e.target.value }), className: "w-full p-2 rounded bg-[#222222] border border-[#00FF00] text-white", required: true, __source: { fileName: "", lineNumber: 684, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 696, columnNumber: 21 }, __self: this }, "Select payment method"), /*#__PURE__*/ React.createElement("option", { value: "bank", __source: { fileName: "", lineNumber: 697, columnNumber: 21 }, __self: this }, "Bank Transfer"), /*#__PURE__*/ React.createElement("option", { value: "paypal", __source: { fileName: "", lineNumber: 698, columnNumber: 21 }, __self: this }, "PayPal"), /*#__PURE__*/ React.createElement("option", { value: "stripe", __source: { fileName: "", lineNumber: 699, columnNumber: 21 }, __self: this }, "Stripe"), /*#__PURE__*/ React.createElement("option", { value: "cashapp", __source: { fileName: "", lineNumber: 700, columnNumber: 21 }, __self: this }, "Cash App"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 703, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 704, columnNumber: 19 }, __self: this }, "Account Info (Routing & Acct. Num)/ Payment Handle/ Payment Email"), /*#__PURE__*/ React.createElement("textarea", { name: "accountDetails", value: payoutFormData.accountDetails, onChange: (e)=>setPayoutFormData({ ...payoutFormData, accountDetails: e.target.value }), className: "w-full p-2 rounded bg-[#222222] border border-[#00FF00] text-white", rows: "3", placeholder: "For Bank Transfer: Routing & Account Number For PayPal/Stripe: Payment Email For Cash App: $handle", required: true, __source: { fileName: "", lineNumber: 708, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-4 mt-6", __source: { fileName: "", lineNumber: 725, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowPayoutForm(false), className: "px-4 py-2 rounded border border-[#00FF00] hover:bg-[#222222]", __source: { fileName: "", lineNumber: 726, columnNumber: 19 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 rounded bg-[#00FF00] text-black hover:bg-[#00CC00]", __source: { fileName: "", lineNumber: 733, columnNumber: 19 }, __self: this }, "Submit"))))), showProfileForm && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 746, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] rounded-xl p-8 w-full max-w-md max-h-[90vh] overflow-y-auto", __source: { fileName: "", lineNumber: 747, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 748, columnNumber: 15 }, __self: this }, "Subcontractor Profile"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleProfileSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 749, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 750, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 751, columnNumber: 19 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "fullName", value: profileFormData.fullName, onChange: (e)=>setProfileFormData({ ...profileFormData, fullName: e.target.value }), className: "w-full p-2 rounded bg-[#222222] border border-[#00FF00] text-white", required: true, __source: { fileName: "", lineNumber: 752, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 766, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 767, columnNumber: 19 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: profileFormData.email, onChange: (e)=>setProfileFormData({ ...profileFormData, email: e.target.value }), className: "w-full p-2 rounded bg-[#222222] border border-[#00FF00] text-white", required: true, __source: { fileName: "", lineNumber: 768, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 782, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 783, columnNumber: 19 }, __self: this }, "Phone Number"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", value: profileFormData.phone, onChange: (e)=>setProfileFormData({ ...profileFormData, phone: e.target.value }), className: "w-full p-2 rounded bg-[#222222] border border-[#00FF00] text-white", required: true, __source: { fileName: "", lineNumber: 784, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 798, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 799, columnNumber: 19 }, __self: this }, "Address"), /*#__PURE__*/ React.createElement("textarea", { name: "address", value: profileFormData.address, onChange: (e)=>setProfileFormData({ ...profileFormData, address: e.target.value }), className: "w-full p-2 rounded bg-[#222222] border border-[#00FF00] text-white", rows: "2", required: true, __source: { fileName: "", lineNumber: 800, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 814, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 815, columnNumber: 19 }, __self: this }, "Profile Photo"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>{ if (e.target.files) { setProfileFormData({ ...profileFormData, headshot: e.target.files[0] }); } }, className: "w-full p-2 rounded bg-[#222222] border border-[#00FF00] text-white", required: true, __source: { fileName: "", lineNumber: 816, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 831, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 832, columnNumber: 19 }, __self: this }, "ID Photo"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>{ if (e.target.files) { setProfileFormData({ ...profileFormData, idPhoto: e.target.files[0] }); } }, className: "w-full p-2 rounded bg-[#222222] border border-[#00FF00] text-white", required: true, __source: { fileName: "", lineNumber: 833, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-4 mt-6", __source: { fileName: "", lineNumber: 848, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowProfileForm(false), className: "px-4 py-2 rounded border border-[#00FF00] hover:bg-[#222222]", __source: { fileName: "", lineNumber: 849, columnNumber: 19 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "px-4 py-2 rounded bg-[#00FF00] text-black hover:bg-[#00CC00]", __source: { fileName: "", lineNumber: 856, columnNumber: 19 }, __self: this }, loading ? "Uploading..." : "Submit"))))))); }