function MainComponent() { const [currentPage, setCurrentPage] = React.useState('splash'); const [loading, setLoading] = React.useState(true); React.useEffect(()=>{ const timer = setTimeout(()=>setLoading(false), 2000); return ()=>clearTimeout(timer); }, []); const navigationBar = ()=>/*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center px-4 py-2 bg-[#003f5c] text-white font-roboto fixed bottom-0 w-full", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-home fa-lg", onClick: ()=>setCurrentPage('home'), __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-leaf fa-lg", onClick: ()=>setCurrentPage('explore'), __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-book fa-lg", onClick: ()=>setCurrentPage('learn'), __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-users fa-lg", onClick: ()=>setCurrentPage('community'), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-bell fa-lg", onClick: ()=>setCurrentPage('news'), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); const renderPage = ()=>{ if (currentPage === 'splash' || loading) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#0077b6]", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/app-logo.png", alt: "EcoSea app logo", className: "w-[150px] h-[150px] mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-white font-roboto text-2xl", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "EcoSea")); } switch(currentPage){ case 'home': return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col pt-16 pb-8 items-center min-h-screen bg-center bg-cover text-white font-roboto", style: { backgroundImage: "url('/ocean-background.jpg')" }, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, navigationBar(), /*#__PURE__*/ React.createElement("div", { className: "mt-4 px-4", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })); case 'explore': return /*#__PURE__*/ React.createElement("div", { className: "pt-16 pb-8 min-h-screen bg-[#0077b6] text-white font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, navigationBar(), /*#__PURE__*/ React.createElement("div", { className: "mt-4 px-4", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this })); case 'learn': return /*#__PURE__*/ React.createElement("div", { className: "pt-16 pb-8 min-h-screen bg-[#003f5c] text-white font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, navigationBar(), /*#__PURE__*/ React.createElement("div", { className: "mt-4 px-4", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this })); case 'community': return /*#__PURE__*/ React.createElement("div", { className: "pt-16 pb-8 min-h-screen bg-[#5f0f40] text-white font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, navigationBar(), /*#__PURE__*/ React.createElement("div", { className: "mt-4 px-4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })); case 'news': return /*#__PURE__*/ React.createElement("div", { className: "pt-16 pb-8 min-h-screen bg-[#005f73] text-white font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, navigationBar(), /*#__PURE__*/ React.createElement("div", { className: "mt-4 px-4", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this })); default: return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#0077b6]", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-roboto text-2xl", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "EcoSea"), navigationBar()); } }; return /*#__PURE__*/ React.createElement(React.Fragment, null, renderPage(), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeIn { animation: slideIn 0.5s ease-out forwards; } `)); }