"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { AnimatedButton } from "@/components/ui/animated-button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AnimatedCard } from "@/components/ui/animated-card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Header } from "@/components/ui/header"
import { Footer } from "@/components/ui/footer"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Search,
  HelpCircle,
  MessageCircle,
  Phone,
  Mail,
  ChevronDown,
  ChevronRight,
  Play,
  FileText,
  Users,
  Building,
  Heart,
  Shield,
  Clock,
  CheckCircle,
  ExternalLink,
  BookOpen,
  Video,
  Download,
  Star,
  ArrowRight
} from "lucide-react"
import Link from "next/link"
import { motion, AnimatePresence } from "framer-motion"

// Mock FAQ data
const faqCategories = [
  {
    id: "getting-started",
    title: "Getting Started",
    icon: Users,
    questions: [
      {
        id: 1,
        question: "How do I create an account on Geezer Guide?",
        answer: "Creating an account is simple! Click the 'Sign Up' button in the top right corner of any page. You can register as either a family member searching for care or as a facility owner. We'll guide you through the process step by step."
      },
      {
        id: 2,
        question: "Is Geezer Guide free to use for families?",
        answer: "Yes! Geezer Guide is completely free for families searching for senior care. You can browse facilities, read reviews, contact facilities, and use all our search tools at no cost. We're funded through partnerships with care facilities."
      },
      {
        id: 3,
        question: "How do I search for facilities in my area?",
        answer: "Use our search bar on the homepage to enter your city, state, or ZIP code. You can also use our advanced search feature to filter by care type, price range, amenities, and more. Our location-based search will show you facilities within your specified radius."
      },
      {
        id: 4,
        question: "What types of senior care can I find on Geezer Guide?",
        answer: "We list all types of senior care including Independent Living, Assisted Living, Memory Care, Skilled Nursing, Continuing Care Retirement Communities (CCRC), Adult Day Care, and Respite Care facilities."
      }
    ]
  },
  {
    id: "searching-facilities",
    title: "Searching for Facilities",
    icon: Building,
    questions: [
      {
        id: 5,
        question: "How do I know if a facility has availability?",
        answer: "Each facility listing shows current availability status. Look for the availability badge on facility cards. You can also contact facilities directly through our platform to inquire about current openings and waitlist options."
      },
      {
        id: 6,
        question: "Can I schedule tours through Geezer Guide?",
        answer: "Yes! Many facilities allow you to schedule tours directly through our platform. Look for the 'Schedule Tour' button on facility pages. You can also call facilities directly using the contact information provided."
      },
      {
        id: 7,
        question: "How do I compare multiple facilities?",
        answer: "Use our comparison tool by clicking the 'Compare' button on facility listings. You can compare up to 4 facilities side-by-side, viewing pricing, amenities, services, and reviews all in one place."
      },
      {
        id: 8,
        question: "What do the facility ratings mean?",
        answer: "Our 5-star rating system is based on verified reviews from families and residents. Ratings consider factors like care quality, staff friendliness, cleanliness, activities, and overall satisfaction. All reviews are moderated for authenticity."
      }
    ]
  },
  {
    id: "reviews-ratings",
    title: "Reviews & Ratings",
    icon: Star,
    questions: [
      {
        id: 9,
        question: "How do I leave a review for a facility?",
        answer: "To leave a review, visit the facility's page and click 'Write a Review'. You'll need to be logged in and verify your connection to the facility. This helps ensure all reviews are from actual families or residents."
      },
      {
        id: 10,
        question: "Are all reviews verified?",
        answer: "Yes, we take review authenticity seriously. All reviews go through a verification process to confirm the reviewer has a genuine connection to the facility. Fake or spam reviews are removed by our moderation team."
      },
      {
        id: 11,
        question: "Can facilities respond to reviews?",
        answer: "Yes, facility owners can respond to reviews to address concerns, provide clarification, or thank families for positive feedback. This creates transparency and helps other families make informed decisions."
      }
    ]
  },
  {
    id: "facility-owners",
    title: "For Facility Owners",
    icon: Building,
    questions: [
      {
        id: 12,
        question: "How do I list my facility on Geezer Guide?",
        answer: "Start by creating a facility owner account. Complete your facility profile with photos, amenities, pricing, and services. Basic listings are free, with premium options available for enhanced visibility and features."
      },
      {
        id: 13,
        question: "What are the benefits of a premium listing?",
        answer: "Premium listings receive priority placement in search results, enhanced profile features, detailed analytics, lead management tools, and priority customer support. View our pricing page for complete details."
      },
      {
        id: 14,
        question: "How do I manage my facility's information?",
        answer: "Log into your facility dashboard to update your profile, respond to reviews, view analytics, and manage your subscription. You can update availability, pricing, photos, and amenities anytime."
      }
    ]
  },
  {
    id: "account-settings",
    title: "Account & Settings",
    icon: Shield,
    questions: [
      {
        id: 15,
        question: "How do I change my password?",
        answer: "Go to your account settings and click 'Security'. You can change your password by entering your current password and choosing a new one. We recommend using a strong, unique password."
      },
      {
        id: 16,
        question: "How do I update my notification preferences?",
        answer: "In your account settings, go to 'Notifications' to customize email and SMS preferences. You can choose to receive updates about new facilities, review responses, and account activity."
      },
      {
        id: 17,
        question: "Can I delete my account?",
        answer: "Yes, you can delete your account from the account settings page. Please note that this action is permanent and cannot be undone. Your reviews and data will be removed from our platform."
      }
    ]
  }
]

// Mock support resources
const supportResources = [
  {
    id: 1,
    title: "Getting Started Guide",
    description: "A comprehensive guide to using Geezer Guide effectively",
    type: "guide",
    duration: "5 min read",
    url: "#"
  },
  {
    id: 2,
    title: "How to Choose the Right Care Level",
    description: "Understanding different types of senior care",
    type: "video",
    duration: "8 min watch",
    url: "#"
  },
  {
    id: 3,
    title: "Questions to Ask During Facility Tours",
    description: "Essential questions for evaluating facilities",
    type: "checklist",
    duration: "Download PDF",
    url: "#"
  },
  {
    id: 4,
    title: "Understanding Senior Care Costs",
    description: "Breaking down pricing and payment options",
    type: "guide",
    duration: "7 min read",
    url: "#"
  }
]

const contactMethods = [
  {
    method: "Email Support",
    description: "Get help with your account or general questions",
    contact: "support@geezerguide.com",
    icon: Mail,
    response: "24-48 hours"
  },
  {
    method: "Phone Support",
    description: "Speak with our support team directly",
    contact: "(555) 123-HELP",
    icon: Phone,
    response: "Mon-Fri 9AM-6PM"
  },
  {
    method: "Live Chat",
    description: "Chat with a support representative",
    contact: "Start Chat",
    icon: MessageCircle,
    response: "Available now"
  }
]

export default function HelpSupportPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [expandedQuestions, setExpandedQuestions] = useState<number[]>([])
  const [contactForm, setContactForm] = useState({
    name: "",
    email: "",
    subject: "",
    category: "",
    message: ""
  })

  const toggleQuestion = (questionId: number) => {
    setExpandedQuestions(prev =>
      prev.includes(questionId)
        ? prev.filter(id => id !== questionId)
        : [...prev, questionId]
    )
  }

  const filteredCategories = faqCategories.filter(category => {
    if (selectedCategory === "all") return true
    return category.id === selectedCategory
  }).map(category => ({
    ...category,
    questions: category.questions.filter(q =>
      searchQuery === "" ||
      q.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
      q.answer.toLowerCase().includes(searchQuery.toLowerCase())
    )
  })).filter(category => category.questions.length > 0)

  const handleContactSubmit = () => {
    console.log("Contact form submitted:", contactForm)
    // Handle form submission
  }

  const getResourceIcon = (type: string) => {
    switch (type) {
      case "video": return Video
      case "checklist": return Download
      default: return BookOpen
    }
  }

  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-8">
        <div className="max-w-6xl mx-auto">
          {/* Header */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center mb-12"
          >
            <h1 className="font-primary text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              How can we help you?
            </h1>
            <p className="font-body text-lg text-gray-600 max-w-2xl mx-auto mb-8">
              Find answers to common questions, browse helpful resources, or contact our support team
            </p>

            {/* Search Bar */}
            <div className="max-w-2xl mx-auto">
              <div className="relative">
                <Search className="absolute left-4 top-4 h-5 w-5 text-gray-400" />
                <Input
                  placeholder="Search for help topics..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-12 h-14 text-lg border-gray-300 focus:border-[#3F5CEA] focus:ring-[#3F5CEA]"
                />
              </div>
            </div>
          </motion.div>

          <Tabs defaultValue="faq" className="w-full">
            <TabsList className="grid w-full grid-cols-4 h-16 bg-white border border-blue-200/50 rounded-xl shadow-sm mb-8">
              <TabsTrigger value="faq" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
                <HelpCircle className="h-4 w-4 mr-2" />
                FAQ
              </TabsTrigger>
              <TabsTrigger value="guides" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
                <BookOpen className="h-4 w-4 mr-2" />
                Guides
              </TabsTrigger>
              <TabsTrigger value="contact" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
                <MessageCircle className="h-4 w-4 mr-2" />
                Contact Us
              </TabsTrigger>
              <TabsTrigger value="status" className="font-body data-[state=active]:bg-[#3F5CEA] data-[state=active]:text-white">
                <CheckCircle className="h-4 w-4 mr-2" />
                System Status
              </TabsTrigger>
            </TabsList>

            {/* FAQ Tab */}
            <TabsContent value="faq" className="space-y-8">
              {/* Category Filter */}
              <div className="flex flex-wrap gap-3 justify-center">
                <Button
                  variant={selectedCategory === "all" ? "default" : "outline"}
                  onClick={() => setSelectedCategory("all")}
                  className={selectedCategory === "all" ? "bg-[#3F5CEA] text-white" : ""}
                >
                  All Topics
                </Button>
                {faqCategories.map((category) => (
                  <Button
                    key={category.id}
                    variant={selectedCategory === category.id ? "default" : "outline"}
                    onClick={() => setSelectedCategory(category.id)}
                    className={selectedCategory === category.id ? "bg-[#3F5CEA] text-white" : ""}
                  >
                    <category.icon className="h-4 w-4 mr-2" />
                    {category.title}
                  </Button>
                ))}
              </div>

              {/* FAQ Questions */}
              <div className="space-y-6">
                {filteredCategories.map((category) => (
                  <AnimatedCard key={category.id}>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-3 font-primary text-xl text-gray-900">
                        <category.icon className="h-6 w-6 text-[#3F5CEA]" />
                        {category.title}
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      {category.questions.map((question) => (
                        <div key={question.id} className="border border-gray-200 rounded-lg">
                          <button
                            onClick={() => toggleQuestion(question.id)}
                            className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 transition-colors"
                          >
                            <span className="font-body font-medium text-gray-900">{question.question}</span>
                            {expandedQuestions.includes(question.id) ? (
                              <ChevronDown className="h-5 w-5 text-gray-500" />
                            ) : (
                              <ChevronRight className="h-5 w-5 text-gray-500" />
                            )}
                          </button>
                          <AnimatePresence>
                            {expandedQuestions.includes(question.id) && (
                              <motion.div
                                initial={{ opacity: 0, height: 0 }}
                                animate={{ opacity: 1, height: "auto" }}
                                exit={{ opacity: 0, height: 0 }}
                                transition={{ duration: 0.3 }}
                                className="px-4 pb-4"
                              >
                                <p className="font-body text-gray-700 leading-relaxed">{question.answer}</p>
                              </motion.div>
                            )}
                          </AnimatePresence>
                        </div>
                      ))}
                    </CardContent>
                  </AnimatedCard>
                ))}
              </div>

              {filteredCategories.length === 0 && (
                <AnimatedCard>
                  <CardContent className="p-12 text-center">
                    <HelpCircle className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                    <h3 className="font-body text-lg font-medium text-gray-900 mb-2">No results found</h3>
                    <p className="font-body text-gray-600">
                      Try adjusting your search terms or browse our help categories above
                    </p>
                  </CardContent>
                </AnimatedCard>
              )}
            </TabsContent>

            {/* Guides Tab */}
            <TabsContent value="guides" className="space-y-6">
              <div className="text-center mb-8">
                <h2 className="font-primary text-2xl font-bold text-gray-900 mb-4">Helpful Resources</h2>
                <p className="font-body text-gray-600">
                  Guides, videos, and resources to help you make informed decisions about senior care
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {supportResources.map((resource) => {
                  const IconComponent = getResourceIcon(resource.type)
                  return (
                    <AnimatedCard key={resource.id} className="group hover:shadow-lg transition-all duration-300">
                      <CardContent className="p-6">
                        <div className="flex items-start gap-4">
                          <div className="w-12 h-12 bg-[#3F5CEA]/10 rounded-lg flex items-center justify-center">
                            <IconComponent className="h-6 w-6 text-[#3F5CEA]" />
                          </div>
                          <div className="flex-1">
                            <h3 className="font-body font-semibold text-gray-900 mb-2 group-hover:text-[#3F5CEA] transition-colors">
                              {resource.title}
                            </h3>
                            <p className="font-body text-gray-600 mb-3">{resource.description}</p>
                            <div className="flex items-center justify-between">
                              <span className="font-body text-sm text-gray-500">{resource.duration}</span>
                              <Button
                                variant="outline"
                                size="sm"
                                className="border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white"
                              >
                                <ExternalLink className="h-4 w-4 mr-1" />
                                View
                              </Button>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </AnimatedCard>
                  )
                })}
              </div>

              {/* Popular Topics */}
              <AnimatedCard className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
                <CardHeader>
                  <CardTitle className="font-primary text-xl text-gray-900">Popular Topics</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {[
                      "How to evaluate facility quality",
                      "Understanding Medicare and insurance",
                      "Preparing for facility tours",
                      "Questions to ask potential facilities",
                      "Managing the transition process",
                      "Understanding care plan options"
                    ].map((topic, index) => (
                      <div key={index} className="flex items-center gap-3 p-3 bg-white/60 rounded-lg hover:bg-white/80 transition-colors cursor-pointer">
                        <ArrowRight className="h-4 w-4 text-[#3F5CEA]" />
                        <span className="font-body text-gray-900">{topic}</span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </AnimatedCard>
            </TabsContent>

            {/* Contact Tab */}
            <TabsContent value="contact" className="space-y-8">
              <div className="text-center mb-8">
                <h2 className="font-primary text-2xl font-bold text-gray-900 mb-4">Get in Touch</h2>
                <p className="font-body text-gray-600">
                  Can't find what you're looking for? Our support team is here to help
                </p>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* Contact Methods */}
                <div className="space-y-6">
                  <h3 className="font-body font-semibold text-lg text-gray-900">Contact Methods</h3>
                  {contactMethods.map((method, index) => (
                    <AnimatedCard key={index} className="hover:shadow-md transition-shadow">
                      <CardContent className="p-6">
                        <div className="flex items-start gap-4">
                          <div className="w-12 h-12 bg-[#3F5CEA]/10 rounded-lg flex items-center justify-center">
                            <method.icon className="h-6 w-6 text-[#3F5CEA]" />
                          </div>
                          <div className="flex-1">
                            <h4 className="font-body font-semibold text-gray-900 mb-1">{method.method}</h4>
                            <p className="font-body text-gray-600 mb-2">{method.description}</p>
                            <div className="flex items-center justify-between">
                              <span className="font-body font-medium text-[#3F5CEA]">{method.contact}</span>
                              <span className="font-body text-sm text-gray-500">{method.response}</span>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </AnimatedCard>
                  ))}
                </div>

                {/* Contact Form */}
                <AnimatedCard>
                  <CardHeader>
                    <CardTitle className="font-primary text-xl text-gray-900">Send us a message</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="name" className="font-body">Name</Label>
                        <Input
                          id="name"
                          value={contactForm.name}
                          onChange={(e) => setContactForm(prev => ({ ...prev, name: e.target.value }))}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="email" className="font-body">Email</Label>
                        <Input
                          id="email"
                          type="email"
                          value={contactForm.email}
                          onChange={(e) => setContactForm(prev => ({ ...prev, email: e.target.value }))}
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="category" className="font-body">Category</Label>
                      <Select value={contactForm.category} onValueChange={(value) => setContactForm(prev => ({ ...prev, category: value }))}>
                        <SelectTrigger>
                          <SelectValue placeholder="Select a category" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="account">Account Issues</SelectItem>
                          <SelectItem value="technical">Technical Problems</SelectItem>
                          <SelectItem value="facility">Facility Questions</SelectItem>
                          <SelectItem value="billing">Billing Support</SelectItem>
                          <SelectItem value="feedback">Feedback</SelectItem>
                          <SelectItem value="other">Other</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="subject" className="font-body">Subject</Label>
                      <Input
                        id="subject"
                        value={contactForm.subject}
                        onChange={(e) => setContactForm(prev => ({ ...prev, subject: e.target.value }))}
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="message" className="font-body">Message</Label>
                      <Textarea
                        id="message"
                        value={contactForm.message}
                        onChange={(e) => setContactForm(prev => ({ ...prev, message: e.target.value }))}
                        className="min-h-[120px]"
                      />
                    </div>

                    <AnimatedButton
                      onClick={handleContactSubmit}
                      className="w-full bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white"
                    >
                      Send Message
                    </AnimatedButton>
                  </CardContent>
                </AnimatedCard>
              </div>
            </TabsContent>

            {/* System Status Tab */}
            <TabsContent value="status" className="space-y-6">
              <div className="text-center mb-8">
                <h2 className="font-primary text-2xl font-bold text-gray-900 mb-4">System Status</h2>
                <p className="font-body text-gray-600">
                  Current status of Geezer Guide services and recent updates
                </p>
              </div>

              {/* Overall Status */}
              <AnimatedCard className="bg-gradient-to-r from-green-50 to-emerald-50 border-green-200">
                <CardContent className="p-6">
                  <div className="flex items-center gap-3 mb-4">
                    <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                    <h3 className="font-body font-semibold text-lg text-green-900">All Systems Operational</h3>
                  </div>
                  <p className="font-body text-green-700">
                    All services are running normally. Last updated: {new Date().toLocaleString()}
                  </p>
                </CardContent>
              </AnimatedCard>

              {/* Service Status */}
              <AnimatedCard>
                <CardHeader>
                  <CardTitle className="font-primary text-xl text-gray-900">Service Status</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {[
                    { service: "Website", status: "operational", uptime: "99.9%" },
                    { service: "Search & Filters", status: "operational", uptime: "99.8%" },
                    { service: "User Accounts", status: "operational", uptime: "99.9%" },
                    { service: "Facility Listings", status: "operational", uptime: "99.7%" },
                    { service: "Reviews & Ratings", status: "operational", uptime: "99.9%" },
                    { service: "Contact Forms", status: "operational", uptime: "99.8%" }
                  ].map((service, index) => (
                    <div key={index} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                      <div className="flex items-center gap-3">
                        <div className={`w-3 h-3 rounded-full ${service.status === "operational" ? "bg-green-500" :
                            service.status === "degraded" ? "bg-yellow-500" : "bg-red-500"
                          }`}></div>
                        <span className="font-body font-medium text-gray-900">{service.service}</span>
                      </div>
                      <div className="flex items-center gap-4">
                        <span className="font-body text-sm text-gray-600">{service.uptime} uptime</span>
                        <Badge className="bg-green-100 text-green-800">
                          {service.status === "operational" ? "Operational" :
                            service.status === "degraded" ? "Degraded" : "Down"}
                        </Badge>
                      </div>
                    </div>
                  ))}
                </CardContent>
              </AnimatedCard>

              {/* Recent Updates */}
              <AnimatedCard>
                <CardHeader>
                  <CardTitle className="font-primary text-xl text-gray-900">Recent Updates</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {[
                      {
                        date: "Jan 15, 2024",
                        title: "Enhanced Search Filters",
                        description: "Added new specialty care filters and improved location-based search accuracy."
                      },
                      {
                        date: "Jan 10, 2024",
                        title: "Mobile App Improvements",
                        description: "Fixed loading issues and improved performance on mobile devices."
                      },
                      {
                        date: "Jan 5, 2024",
                        title: "New Facility Features",
                        description: "Facility owners can now upload virtual tour videos and manage availability calendars."
                      }
                    ].map((update, index) => (
                      <div key={index} className="flex gap-4 p-4 bg-gray-50 rounded-lg">
                        <div className="w-2 h-2 bg-[#3F5CEA] rounded-full mt-2"></div>
                        <div className="flex-1">
                          <div className="flex items-center gap-3 mb-1">
                            <h4 className="font-body font-medium text-gray-900">{update.title}</h4>
                            <span className="font-body text-sm text-gray-500">{update.date}</span>
                          </div>
                          <p className="font-body text-gray-700">{update.description}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </AnimatedCard>
            </TabsContent>
          </Tabs>

          {/* Quick Links */}
          <AnimatedCard className="mt-8 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-gray-900 mb-4">
                Still need help?
              </h3>
              <p className="font-body text-gray-600 mb-6">
                Explore our other resources or get personalized assistance
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link href="/search">
                  <Button className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white">
                    Start Searching
                  </Button>
                </Link>
                <Button variant="outline" className="border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white">
                  Schedule a Call
                </Button>
              </div>
            </CardContent>
          </AnimatedCard>
        </div>
      </div>

      <Footer />
    </div>
  )
}