"use client"

import { Button } from "@/components/ui/button"
import { AnimatedButton } from "@/components/ui/animated-button"
import { Card, CardContent } from "@/components/ui/card"
import { AnimatedCard } from "@/components/ui/animated-card"
import { Header } from "@/components/ui/header"
import { Footer } from "@/components/ui/footer"
import { Input } from "@/components/ui/input"
import {
  Search,
  Home,
  ArrowLeft,
  MapPin,
  Heart,
  MessageSquare,
  Phone,
  Mail,
  AlertTriangle
} from "lucide-react"
import Link from "next/link"
import { motion } from "framer-motion"
import { useState } from "react"

export default function NotFoundPage() {
  const [searchQuery, setSearchQuery] = useState("")

  const handleSearch = () => {
    if (searchQuery.trim()) {
      window.location.href = `/search?q=${encodeURIComponent(searchQuery)}`
    }
  }

  const popularLinks = [
    {
      title: "Search Facilities",
      description: "Find senior care facilities in your area",
      href: "/search",
      icon: Search,
      color: "from-blue-500 to-cyan-500"
    },
    {
      title: "Assisted Living",
      description: "Browse assisted living communities",
      href: "/search?care=Assisted%20Living",
      icon: Home,
      color: "from-green-500 to-emerald-500"
    },
    {
      title: "Memory Care",
      description: "Specialized memory care facilities",
      href: "/search?care=Memory%20Care",
      icon: Heart,
      color: "from-purple-500 to-pink-500"
    },
    {
      title: "How It Works",
      description: "Learn about our platform",
      href: "/how-it-works",
      icon: MessageSquare,
      color: "from-orange-500 to-red-500"
    }
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
      <Header />

      <div className="container mx-auto px-4 py-12">
        <div className="max-w-4xl mx-auto">
          {/* Main 404 Content */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center mb-12"
          >
            {/* 404 Animation */}
            <div className="mb-8">
              <motion.div
                initial={{ scale: 0.8, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                transition={{ duration: 0.8, type: "spring", stiffness: 300 }}
                className="relative"
              >
                <div className="text-8xl md:text-9xl font-primary font-bold text-gray-200 select-none">
                  404
                </div>
                <div className="absolute inset-0 flex items-center justify-center">
                  <motion.div
                    animate={{
                      rotate: [0, 10, -10, 0],
                      scale: [1, 1.1, 1]
                    }}
                    transition={{
                      duration: 3,
                      repeat: Infinity,
                      ease: "easeInOut"
                    }}
                    className="w-20 h-20 rounded-full bg-gradient-to-br from-[#3F5CEA] to-[#09183D] flex items-center justify-center"
                  >
                    <AlertTriangle className="h-10 w-10 text-white" />
                  </motion.div>
                </div>
              </motion.div>
            </div>

            <h1 className="font-primary text-4xl md:text-5xl font-bold text-gray-900 mb-4">
              Oops! Page Not Found
            </h1>

            <p className="font-body text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed mb-8">
              The page you're looking for doesn't exist or has been moved. But don't worry – we'll help you find what you need.
            </p>

            {/* Quick Search */}
            <div className="max-w-md mx-auto mb-8">
              <div className="flex gap-3">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
                  <Input
                    placeholder="Search for facilities..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
                    className="pl-10 h-12 text-lg"
                  />
                </div>
                <AnimatedButton
                  onClick={handleSearch}
                  className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white px-6"
                >
                  Search
                </AnimatedButton>
              </div>
            </div>

            {/* Navigation Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/">
                <AnimatedButton className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white">
                  <Home className="h-4 w-4 mr-2" />
                  Back to Home
                </AnimatedButton>
              </Link>

              <button
                onClick={() => window.history.back()}
                className="inline-flex items-center px-6 py-3 border border-[#3F5CEA] text-[#3F5CEA] bg-transparent rounded-lg hover:bg-[#3F5CEA] hover:text-white transition-colors font-body font-medium"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                Go Back
              </button>
            </div>
          </motion.div>

          {/* Popular Pages */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="mb-12"
          >
            <h2 className="font-primary text-3xl font-bold text-gray-900 text-center mb-8">
              Popular Pages
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {popularLinks.map((link, index) => {
                const Icon = link.icon
                return (
                  <motion.div
                    key={link.href}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.1 * index }}
                  >
                    <Link href={link.href}>
                      <AnimatedCard className="h-full hover:shadow-xl transition-all duration-300 cursor-pointer group">
                        <CardContent className="p-6">
                          <div className="flex items-start gap-4">
                            <div className={`w-12 h-12 rounded-lg bg-gradient-to-r ${link.color} flex items-center justify-center group-hover:scale-110 transition-transform duration-300`}>
                              <Icon className="h-6 w-6 text-white" />
                            </div>
                            <div className="flex-1">
                              <h3 className="font-primary text-xl font-bold text-gray-900 mb-2 group-hover:text-[#3F5CEA] transition-colors">
                                {link.title}
                              </h3>
                              <p className="font-body text-gray-600 leading-relaxed">
                                {link.description}
                              </p>
                            </div>
                          </div>
                        </CardContent>
                      </AnimatedCard>
                    </Link>
                  </motion.div>
                )
              })}
            </div>
          </motion.div>

          {/* Help Section */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            <AnimatedCard className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
              <CardContent className="p-8 text-center">
                <h3 className="font-primary text-2xl font-bold text-blue-900 mb-4">
                  Still Need Help?
                </h3>
                <p className="font-body text-blue-700 mb-6 max-w-2xl mx-auto">
                  Our support team is here to help you find the perfect senior care facility.
                  Don't hesitate to reach out if you can't find what you're looking for.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-lg mx-auto">
                  <div className="bg-white/50 p-4 rounded-lg">
                    <Phone className="h-6 w-6 text-blue-600 mx-auto mb-2" />
                    <p className="font-body font-semibold text-blue-900">Call Us</p>
                    <p className="font-body text-sm text-blue-700">(555) 123-HELP</p>
                    <p className="font-body text-xs text-blue-600">Mon-Fri 9AM-6PM EST</p>
                  </div>

                  <div className="bg-white/50 p-4 rounded-lg">
                    <Mail className="h-6 w-6 text-blue-600 mx-auto mb-2" />
                    <p className="font-body font-semibold text-blue-900">Email Us</p>
                    <p className="font-body text-sm text-blue-700">support@geezerguide.com</p>
                    <p className="font-body text-xs text-blue-600">24-48 hour response</p>
                  </div>
                </div>
              </CardContent>
            </AnimatedCard>
          </motion.div>
        </div>
      </div>

      <Footer />
    </div>
  )
}