"use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { fadeIn, scaleIn, slideUp, buttonTap } from "@/lib/animations" import { GradientMesh } from "@/components/backgrounds/gradient-mesh" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Wrench, Mail, ExternalLink, Bell } from "lucide-react" function calculateTimeLeft(target: Date) { const diff = target.getTime() - Date.now() if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 } return { days: Math.floor(diff / (1000 * 60 * 60 * 24)), hours: Math.floor((diff / (1000 * 60 * 60)) % 24), minutes: Math.floor((diff / (1000 * 60)) % 60), seconds: Math.floor((diff / 1000) % 60), } } export default function Maintenance() { const targetDate = new Date() targetDate.setHours(targetDate.getHours() + 8) const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(targetDate)) const [email, setEmail] = useState("") const [notified, setNotified] = useState(false) useEffect(() => { const target = new Date() target.setHours(target.getHours() + 8) const timer = setInterval(() => { setTimeLeft(calculateTimeLeft(target)) }, 1000) return () => clearInterval(timer) }, []) const handleNotify = () => { if (!email) return setNotified(true) } return (

Under Maintenance

We'll be back soon

We're performing scheduled maintenance to improve your experience. Expected to complete in:

{(["days", "hours", "minutes", "seconds"] as const).map((unit) => (

{String(timeLeft[unit]).padStart(2, "0")}

{unit}

))}

Get notified when we're back

{notified ? ( You'll be notified at {email} ) : (

setEmail(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleNotify()} />

)}

Check status page

) }