"use client"; function MainComponent() { const [currentTab, setCurrentTab] = useState("Influencers"); const [selected, setSelected] = useState(new Set()); const [isDark, setIsDark] = useState(true); const [theme, setTheme] = useState({ calculated: "dark" }); useEffect(()=>{ const fetchTheme = async ()=>{ try { const hours = new Date().getHours(); const isDaytime = hours >= 6 && hours < 18; const response = await fetch("/api/get-theme", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ calculated: isDaytime ? "light" : "dark" }) }); if (!response.ok) { throw new Error(`Failed to fetch theme: ${response.status}`); } const data = await response.json(); if (data?.mode) { setTheme({ mode: data.mode, calculated: data.mode === "auto" ? isDaytime ? "light" : "dark" : data.mode }); setIsDark(data.mode === "auto" ? !isDaytime : data.mode === "dark"); } } catch (err) { console.error(err); } }; fetchTheme(); }, []); const servicesData = { Influencers: [ { id: "starter-boost", name: "Starter Boost", price: 199, desc: "One-page responsive site, delivered in 5 days with 1 revision." }, { id: "growth-engine", name: "Growth Engine", price: 499, desc: "Web Design + 24/7 AI Chatbot + 1 Ad Creation bundle." }, { id: "full-stream", name: "Full Stream", price: 1299, desc: "Web, AI Chatbot, Ads & Crypto Consultation all-in-one." }, { id: "memecoin-concept", name: "Memecoin/NFT Concept", price: 1200, desc: "Tokenomics blueprint, branding & launch strategy." }, { id: "memecoin-launch", name: "Memecoin/NFT Launch", price: 3000, desc: "Smart-contract dev, deployment & initial marketing." } ], Businesses: [ { id: "launch-kit", name: "Launch Kit", price: 799, desc: "3-page custom site + logo design." }, { id: "support-plan", name: "Support Plan", price: 1299, desc: "Site + AI Chatbot + Knowledge Base with AI automation." }, { id: "scale-machine", name: "Scale Machine", price: 2499, desc: "Support Plan + AI Agent Setup + 3 Ads." }, { id: "memecoin-concept-biz", name: "Memecoin/NFT Concept", price: 1200, desc: "Corporate tokenomics & branding strategy session." }, { id: "memecoin-launch-biz", name: "Memecoin/NFT Launch", price: 3000, desc: "Enterprise launch: dev, secure deployment & PR support." } ], Enterprise: [ { id: "custom-roadmap", name: "Custom Roadmap", price: 5000, desc: "Dedicated team & SLA for tailored blockchain strategy." } ] }; const serviceMap = useMemo(()=>{ const map = new Map(); Object.values(servicesData).forEach((arr)=>arr.forEach((svc)=>map.set(svc.id, svc))); return map; }, [ servicesData ]); const handleTabClick = (tab)=>setCurrentTab(tab); const handleSelectClick = (id)=>{ setSelected((prev)=>{ const copy = new Set(prev); copy.has(id) ? copy.delete(id) : copy.add(id); return copy; }); }; const calculateTotal = ()=>{ let sum = 0; selected.forEach((id)=>{ const svc = serviceMap.get(id); if (svc) sum += svc.price; }); return sum; }; const handleCheckout = ()=>{ const items = Array.from(selected).map((id)=>serviceMap.get(id)?.name).filter(Boolean).join(", "); const total = calculateTotal(); window.location.href = `mailto:admin@sonnon.xyz?subject=New Service Order&body=` + `Services:%20${encodeURIComponent(items)}%0A` + `Total:%20$${total}`; }; const toggleTheme = ()=>{ const newIsDark = !isDark; setIsDark(newIsDark); setTheme({ mode: newIsDark ? "dark" : "light", calculated: newIsDark ? "dark" : "light" }); }; const cardBase = isDark ? "bg-white/10 backdrop-blur-lg border border-white/20 shadow-2xl" : "bg-white border border-gray-200 shadow-lg"; const containerBg = isDark ? "bg-gradient-to-br from-gray-900 to-gray-800 text-white" : "bg-gradient-to-br from-white to-gray-100 text-gray-900"; return /*#__PURE__*/ React.createElement("div", { className: `${containerBg} relative min-h-screen overflow-hidden px-4 lg:px-16 py-10`, __source: { fileName: "", lineNumber: 171, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", "aria-label": "Search Engine", className: "absolute top-4 left-4 z-20 px-3 py-1 bg-white/20 text-white rounded-full hover:bg-white/30 transition", __source: { fileName: "", lineNumber: 174, columnNumber: 7 }, __self: this }, "Search Engine"), /*#__PURE__*/ React.createElement("button", { onClick: toggleTheme, "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", className: "fixed top-4 right-4 z-20 p-2 rounded-full bg-gray-200 dark:bg-gray-700 focus:outline-none", __source: { fileName: "", lineNumber: 181, columnNumber: 7 }, __self: this }, isDark ? "⚪" : "⚫"), /*#__PURE__*/ React.createElement("div", { className: "pointer-events-none fixed inset-0 opacity-10 z-10", __source: { fileName: "", lineNumber: 189, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("header", { className: "relative z-20 text-center mb-12", __source: { fileName: "", lineNumber: 191, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 192, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block text-6xl", __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, "?")), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600", __source: { fileName: "", lineNumber: 199, columnNumber: 9 }, __self: this }, "Our Services"), /*#__PURE__*/ React.createElement("p", { className: `${isDark ? "text-gray-300" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 202, columnNumber: 9 }, __self: this }, "Choose your tier or token service—instant quote and checkout.")), /*#__PURE__*/ React.createElement("div", { className: "relative z-20 flex flex-col lg:flex-row gap-8", __source: { fileName: "", lineNumber: 207, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("main", { className: "flex-1", __source: { fileName: "", lineNumber: 208, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-6 mb-8 justify-center lg:justify-start", __source: { fileName: "", lineNumber: 209, columnNumber: 11 }, __self: this }, Object.keys(servicesData).map((tab)=>/*#__PURE__*/ React.createElement("button", { key: tab, onClick: ()=>handleTabClick(tab), className: `px-5 py-2 rounded-full text-lg font-medium transition-colors duration-200 ${currentTab === tab ? "bg-white text-gray-900 shadow-xl" : isDark ? "text-gray-400 hover:text-white" : "text-gray-600 hover:text-gray-900"}`, __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, tab))), /*#__PURE__*/ React.createElement("div", { className: "grid gap-10 sm:grid-cols-2 lg:grid-cols-3", __source: { fileName: "", lineNumber: 227, columnNumber: 11 }, __self: this }, servicesData[currentTab].map((service)=>/*#__PURE__*/ React.createElement("div", { key: service.id, className: `${cardBase} rounded-2xl p-6 flex flex-col justify-between transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400`, tabIndex: 0, __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 234, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold mb-2 text-inherit", __source: { fileName: "", lineNumber: 235, columnNumber: 19 }, __self: this }, service.name), /*#__PURE__*/ React.createElement("p", { className: `${isDark ? "text-gray-300" : "text-gray-700"} mb-4`, __source: { fileName: "", lineNumber: 238, columnNumber: 19 }, __self: this }, service.desc)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-4", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 247, columnNumber: 19 }, __self: this }, `$${service.price}`), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSelectClick(service.id), className: `px-4 py-2 rounded-full font-medium transition-colors duration-200 ${selected.has(service.id) ? "bg-red-500 text-white" : "bg-blue-500 text-white hover:bg-blue-600"}`, __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, selected.has(service.id) ? "Remove" : "Add")))))), /*#__PURE__*/ React.createElement("aside", { className: "lg:w-80 sticky top-20", __source: { fileName: "", lineNumber: 264, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${cardBase} rounded-2xl p-6`, __source: { fileName: "", lineNumber: 265, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 266, columnNumber: 13 }, __self: this }, "Summary"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 max-h-48 overflow-y-auto", __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this }, Array.from(selected).map((id)=>{ const svc = serviceMap.get(id); return svc && /*#__PURE__*/ React.createElement("div", { key: id, className: "flex justify-between text-inherit", __source: { fileName: "", lineNumber: 272, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 273, columnNumber: 23 }, __self: this }, svc.name), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 274, columnNumber: 23 }, __self: this }, "$", svc.price)); })), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-4 mt-4 flex justify-between items-center border-white/20", __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 281, columnNumber: 15 }, __self: this }, "Total:"), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this }, "$", calculateTotal())), /*#__PURE__*/ React.createElement("button", { onClick: handleCheckout, className: "mt-6 w-full py-3 bg-blue-500 text-white rounded-full font-medium hover:bg-blue-600 transition-colors duration-200", __source: { fileName: "", lineNumber: 284, columnNumber: 13 }, __self: this }, "Checkout")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 294, columnNumber: 7 }, __self: this }, ` .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } `)); }