function MainComponent() { const [currentScreen, setCurrentScreen] = useState(0); const [menuOpen, setMenuOpen] = useState(false); const screens = [ { title: "Real-Time Protection", description: "Get instant alerts about online threats and block malicious activity before it reaches your devices. Our AI-powered system keeps you one step ahead.", image: "https://ucarecdn.com/8fab9373-add7-4ee5-b67f-c95cd23ed82f/-/format/auto/", alt: "Zora the fox with a protective shield" }, { title: "Learn Through Play", description: "Turn cybersecurity training into an adventure! Complete missions, earn rewards, and master real digital safety skills while having fun.", image: "https://ucarecdn.com/8fab9373-add7-4ee5-b67f-c95cd23ed82f/-/format/auto/", alt: "Playful Zora the fox showing gaming elements" }, { title: "Protect Your Family", description: "Keep up to 4 devices safe with our group plan. Perfect for families, with easy-to-use parental controls and age-appropriate security training.", image: "https://ucarecdn.com/8fab9373-add7-4ee5-b67f-c95cd23ed82f/-/format/auto/", alt: "Zora the fox with family protection features" } ]; const navigate = (path)=>{ window.location.href = path; }; const handleNext = ()=>{ if (currentScreen === screens.length - 1) { navigate("/createprofile"); } else { setCurrentScreen((prev)=>prev + 1); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#243156] to-[#16848a] overflow-hidden relative", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 z-10", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMenuOpen(!menuOpen), className: "text-white hover:text-[#f57b14] transition-colors font-poppins p-2 text-xl", "aria-label": "Menu", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${menuOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })), menuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 rounded-lg bg-[#243156] shadow-lg py-2", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigate("/survey"); setMenuOpen(false); }, className: "block w-full text-left px-4 py-2 text-white hover:bg-[#16848a] hover:text-[#f57b14] transition-colors font-poppins", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "Quick Survey"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigate("/productinfo"); setMenuOpen(false); }, className: "block w-full text-left px-4 py-2 text-white hover:bg-[#16848a] hover:text-[#f57b14] transition-colors font-poppins bg-[#f57b14] text-[#243156] mx-2 rounded", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "Meet Zora 🦊"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigate("/signin"); setMenuOpen(false); }, className: "block w-full text-left px-4 py-2 text-white hover:bg-[#16848a] hover:text-[#f57b14] transition-colors font-poppins", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "Sign In")))), /*#__PURE__*/ React.createElement("div", { className: "flex transition-transform duration-500 ease-in-out", style: { transform: `translateX(-${currentScreen * 100}%)` }, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, screens.map((screen, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "min-w-full min-h-screen flex flex-col items-center justify-center px-4", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: screen.image, alt: screen.alt, className: "w-[120px] h-[120px] my-8 object-contain", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-white mb-4 text-center font-poppins", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, screen.title), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-300 mb-12 text-center max-w-md", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, screen.description), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleNext, className: "bg-[#f57b14] text-[#243156] font-semibold py-4 px-8 rounded-lg hover:bg-opacity-90 transition-all", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, currentScreen === screens.length - 1 ? "Get Started" : "Next"), currentScreen === screens.length - 1 && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 116, columnNumber: 19 }, __self: this }, "Already have an account?", " ", /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigate("/signin"), className: "text-[#f57b14] hover:underline", __source: { fileName: "", lineNumber: 118, columnNumber: 21 }, __self: this }, "Sign In")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 125, columnNumber: 19 }, __self: this }, "Learn more about Zora", " ", /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigate("/productinfo"), className: "bg-[#f57b14] text-[#243156] px-4 py-1 rounded hover:bg-opacity-90 transition-all", __source: { fileName: "", lineNumber: 127, columnNumber: 21 }, __self: this }, "Meet Zora 🦊")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm", __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }, "Help us improve!", " ", /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigate("/survey"), className: "text-[#f57b14] hover:underline", __source: { fileName: "", lineNumber: 136, columnNumber: 21 }, __self: this }, "Quick Survey"))))))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-8 left-0 right-0 flex justify-center space-x-2", __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, screens.map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-2 h-2 rounded-full transition-colors duration-300 ${currentScreen === index ? "bg-[#f57b14]" : "bg-white bg-opacity-30"}`, __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this })))); }