function MainComponent() { const [teamSize, setTeamSize] = useState(''); const [primaryNeeds, setPrimaryNeeds] = useState([]); const [budget, setBudget] = useState(''); const [mustHaveFeatures, setMustHaveFeatures] = useState([]); const [showResults, setShowResults] = useState(false); const toolDatabase = { 'Team Communication': [ { name: 'Slack', description: 'Real-time messaging platform with channels and threads', features: [ 'Channel organization', 'Thread discussions', 'File sharing', 'App integrations' ], pricing: '$8-15 per user/month', link: 'https://slack.com' }, { name: 'Microsoft Teams', description: 'Integrated communication and collaboration platform', features: [ 'Video calls', 'Chat', 'File sharing', 'Office integration' ], pricing: '$4-13 per user/month', link: 'https://teams.microsoft.com' } ], 'Project Management': [ { name: 'Asana', description: 'Flexible project and task management tool', features: [ 'Task tracking', 'Project timelines', 'Team collaboration', 'Custom workflows' ], pricing: '$11-25 per user/month', link: 'https://asana.com' }, { name: 'Trello', description: 'Visual project management with boards and cards', features: [ 'Kanban boards', 'Task cards', 'Team collaboration', 'Power-ups' ], pricing: '$5-18 per user/month', link: 'https://trello.com' } ] }; const handlePrimaryNeedsChange = (need)=>{ setPrimaryNeeds((prev)=>prev.includes(need) ? prev.filter((n)=>n !== need) : [ ...prev, need ]); }; const handleMustHaveFeaturesChange = (feature)=>{ setMustHaveFeatures((prev)=>prev.includes(feature) ? prev.filter((f)=>f !== feature) : [ ...prev, feature ]); }; const resetForm = ()=>{ setTeamSize(''); setPrimaryNeeds([]); setBudget(''); setMustHaveFeatures([]); setShowResults(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0f1c] p-4 md:p-8", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-16", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl md:text-7xl font-bold text-white mb-6 font-inter", __source: { fileName: "", lineNumber: 67, columnNumber: 3 }, __self: this }, "Remote Work Tool Selector"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-gray-300 font-inter", __source: { fileName: "", lineNumber: 70, columnNumber: 3 }, __self: this }, "Find the perfect tools for your remote team")), !showResults ? /*#__PURE__*/ React.createElement("div", { className: "space-y-12 bg-[#0a0f1c] rounded-xl p-6 md:p-8", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-6 font-inter", __source: { fileName: "", lineNumber: 78, columnNumber: 3 }, __self: this }, "Team Size"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-row gap-4", __source: { fileName: "", lineNumber: 79, columnNumber: 3 }, __self: this }, [ '1-10', '11-50', '51-200', '200+' ].map((size)=>/*#__PURE__*/ React.createElement("button", { key: size, onClick: ()=>setTeamSize(size), className: `flex-1 p-4 rounded-lg border border-white text-white font-inter text-lg ${teamSize === size ? 'bg-white/20' : 'bg-transparent hover:bg-white/10 transition-colors'}`, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, size)))), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 95, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-6 font-inter", __source: { fileName: "", lineNumber: 96, columnNumber: 3 }, __self: this }, "Primary Needs"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 97, columnNumber: 3 }, __self: this }, [ 'Team Communication', 'Project Management', 'File Sharing & Collaboration', 'Time Tracking', 'Video Conferencing', 'Document Collaboration' ].map((need)=>/*#__PURE__*/ React.createElement("button", { key: need, onClick: ()=>handlePrimaryNeedsChange(need), className: `p-4 rounded-lg border border-white text-white font-inter text-lg text-left ${primaryNeeds.includes(need) ? 'bg-white/20' : 'bg-transparent hover:bg-white/10 transition-colors'}`, __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, need)))), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-6 font-inter", __source: { fileName: "", lineNumber: 122, columnNumber: 3 }, __self: this }, "Budget per User/Month"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-row gap-4", __source: { fileName: "", lineNumber: 123, columnNumber: 3 }, __self: this }, [ '$0-10', '$11-25', '$26-50', '$50+' ].map((price)=>/*#__PURE__*/ React.createElement("button", { key: price, onClick: ()=>setBudget(price), className: `flex-1 p-4 rounded-lg border border-white text-white font-inter text-lg ${budget === price ? 'bg-white/20' : 'bg-transparent hover:bg-white/10 transition-colors'}`, __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, price)))), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-6 font-inter", __source: { fileName: "", lineNumber: 141, columnNumber: 3 }, __self: this }, "Must-have Features"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 142, columnNumber: 3 }, __self: this }, [ 'Mobile App', 'Integration Capabilities', 'Security Features', 'Custom Branding', '24/7 Support' ].map((feature)=>/*#__PURE__*/ React.createElement("button", { key: feature, onClick: ()=>handleMustHaveFeaturesChange(feature), className: `p-4 rounded-lg border border-white text-white font-inter text-lg text-left ${mustHaveFeatures.includes(feature) ? 'bg-white/20' : 'bg-transparent hover:bg-white/10 transition-colors'}`, __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, feature)))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowResults(true), className: "w-full mt-12 p-4 rounded-lg border border-white text-white font-inter text-xl bg-transparent hover:bg-white/10 transition-colors disabled:opacity-50 disabled:cursor-not-allowed", disabled: !teamSize || primaryNeeds.length === 0 || !budget, __source: { fileName: "", lineNumber: 164, columnNumber: 1 }, __self: this }, "Get Recommendations")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, primaryNeeds.map((need)=>/*#__PURE__*/ React.createElement("div", { key: need, className: "bg-[#0a0f1c] rounded-xl p-6 md:p-8 border border-white/20", __source: { fileName: "", lineNumber: 175, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-6 font-inter", __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }, need), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 177, columnNumber: 7 }, __self: this }, toolDatabase[need]?.map((tool)=>/*#__PURE__*/ React.createElement("div", { key: tool.name, className: "border border-white/20 rounded-lg p-6", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2 font-inter", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, tool.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-4", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, tool.description), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-white mb-2", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, "Key Features:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside text-gray-300", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, tool.features.map((feature)=>/*#__PURE__*/ React.createElement("li", { key: feature, __source: { fileName: "", lineNumber: 186, columnNumber: 19 }, __self: this }, feature)))), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-4", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, "Pricing: ", tool.pricing), /*#__PURE__*/ React.createElement("a", { href: tool.link, target: "_blank", rel: "noopener noreferrer", className: "inline-block border border-white text-white rounded-lg py-2 px-4 bg-transparent hover:bg-white/10 transition-colors", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, "Learn More")))))), /*#__PURE__*/ React.createElement("button", { onClick: resetForm, className: "w-full border border-white text-white rounded-lg py-4 px-6 bg-transparent hover:bg-white/10 transition-colors font-inter", __source: { fileName: "", lineNumber: 204, columnNumber: 3 }, __self: this }, "Start Over")))); }