function MainComponent() { const [walletAddress, setWalletAddress] = useState(""); const [showModal, setShowModal] = useState(false); const [showWhitepaperModal, setShowWhitepaperModal] = useState(false); const [email, setEmail] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [success, setSuccess] = useState(false); const connectWallet = async ()=>{ if (typeof window.ethereum !== "undefined") { try { setLoading(true); const accounts = await window.ethereum.request({ method: "eth_requestAccounts" }); setWalletAddress(accounts[0]); setSuccess(true); setLoading(false); } catch (err) { setError("Failed to connect wallet"); setLoading(false); } } else { setError("Please install MetaMask"); } }; const handleWaitlist = async (e)=>{ e.preventDefault(); setLoading(true); try { await new Promise((resolve)=>setTimeout(resolve, 1000)); setSuccess(true); setEmail(""); } catch (err) { setError("Failed to join waitlist"); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-blue-900 text-white", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "fixed w-full z-50 bg-gray-900/80 backdrop-blur-sm border-b border-gray-800", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between h-20", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-2xl bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "SELFPAID"), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-8", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#about", className: "text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#roadmap", className: "text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Roadmap"), /*#__PURE__*/ React.createElement("a", { href: "#", onClick: ()=>setShowWhitepaperModal(true), className: "text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "Whitepaper"), walletAddress && /*#__PURE__*/ React.createElement("a", { href: "#waitlist", className: "text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, "Join Waitlist")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, walletAddress ? /*#__PURE__*/ React.createElement("div", { className: "text-sm bg-gray-800 px-4 py-2 rounded-full border border-gray-700", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}`) : /*#__PURE__*/ React.createElement("button", { onClick: connectWallet, disabled: loading, className: "bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-full font-medium transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, loading ? "Connecting..." : "Connect Wallet"))))), /*#__PURE__*/ React.createElement("div", { className: "pt-32 pb-20 px-4", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto text-center", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold mb-6 animate-fadeIn", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "Work. Complete. Earn. Become SELFPAID."), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-gray-300 mb-12 animate-fadeIn", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "Complete simple tasks. Get rewarded in $SPT."), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 justify-center items-center", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, !walletAddress && /*#__PURE__*/ React.createElement("button", { onClick: connectWallet, disabled: loading, className: "w-full md:w-auto bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-full font-medium transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, loading ? "Connecting..." : "Connect Wallet"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowModal(true), className: "w-full md:w-auto bg-purple-600 hover:bg-purple-700 px-8 py-3 rounded-full font-medium transition-colors", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, "Post a Mission"), /*#__PURE__*/ React.createElement("a", { href: "#roadmap", className: "w-full md:w-auto bg-gray-800 hover:bg-gray-700 px-8 py-3 rounded-full font-medium transition-colors", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, "Learn More")), walletAddress && /*#__PURE__*/ React.createElement("div", { className: "mt-12 max-w-md mx-auto animate-fadeIn", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleWaitlist, className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Enter email or wallet address", className: "px-4 py-3 rounded-full bg-gray-800 border border-gray-700 focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-green-600 hover:bg-green-700 px-8 py-3 rounded-full font-medium transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, loading ? "Joining..." : "Join Waitlist")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-red-400 text-sm", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, error), success && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-green-400 text-sm", __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }, "Wallet connected successfully!")))), /*#__PURE__*/ React.createElement("div", { id: "roadmap", className: "py-20 px-4 bg-gray-900/50", __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-12", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, "2025 Roadmap"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 lg:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, [ { quarter: "Q2 2025", title: "Alpha Launch", desc: "Platform alpha release" }, { quarter: "Q3 2025", title: "Mission Posting", desc: "Mission posting feature goes live" }, { quarter: "Q4 2025", title: "$SPT Token & Staking", desc: "Token utility and staking launch" }, { quarter: "Q4 2025", title: "Mobile & DAO", desc: "Mobile app beta + DAO governance preview" } ].map((item, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "p-6 rounded-xl bg-gray-800/50 border border-gray-700 hover:border-blue-500 transition-colors", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-blue-400 font-medium mb-2", __source: { fileName: "", lineNumber: 200, columnNumber: 17 }, __self: this }, item.quarter), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }, item.desc)))))), /*#__PURE__*/ React.createElement("footer", { className: "py-12 px-4 bg-gray-900", __source: { fileName: "", lineNumber: 211, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 212, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-8 mb-8", __source: { fileName: "", lineNumber: 213, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://x.com/getselfpaid", target: "_blank", rel: "noopener noreferrer", className: "text-gray-400 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-2xl", __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://t.me/getselfpaid", target: "_blank", rel: "noopener noreferrer", className: "text-gray-400 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-telegram text-2xl", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-400", __source: { fileName: "", lineNumber: 231, columnNumber: 11 }, __self: this }, "© 2025 SELFPAID. All Rights Reserved."))), showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 238, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-8 rounded-xl max-w-md w-full", __source: { fileName: "", lineNumber: 239, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 240, columnNumber: 13 }, __self: this }, "Coming Soon"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-6", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, "Mission posting will be available in Q3 2025"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowModal(false), className: "w-full bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-full font-medium transition-colors", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, "Close"))), showWhitepaperModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 255, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-8 rounded-xl max-w-md w-full", __source: { fileName: "", lineNumber: 256, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 257, columnNumber: 13 }, __self: this }, "Coming Soon"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-6", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, "The whitepaper will be available soon."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowWhitepaperModal(false), className: "w-full bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-full font-medium transition-colors", __source: { fileName: "", lineNumber: 261, columnNumber: 13 }, __self: this }, "Close"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 271, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 0.6s ease-out forwards; } `)); }