"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Header } from "@/components/ui/header"
import { Footer } from "@/components/ui/footer"
import { AnimatedCard } from "@/components/ui/animated-card"
import { AnimatedButton } from "@/components/ui/animated-button"
import { BookOpen, Download, FileText, Users, Heart, Shield, Clock, CheckCircle } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { motion, useInView } from "framer-motion"
import { useRef } from "react"

export default function ResourcesPage() {
  const heroRef = useRef(null)
  const resourcesRef = useRef(null)
  const featuredRef = useRef(null)

  const heroInView = useInView(heroRef, { once: true, margin: "-100px" })
  const resourcesInView = useInView(resourcesRef, { once: true, margin: "-100px" })
  const featuredInView = useInView(featuredRef, { once: true, margin: "-100px" })

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

      {/* Hero Section */}
      <motion.section
        ref={heroRef}
        className="py-16 px-4 bg-gradient-to-br from-[#3F5CEA]/10 to-[#09183D]/5 relative overflow-hidden"
      >
        {/* Background Decoration */}
        <div className="absolute inset-0">
          {[...Array(8)].map((_, i) => (
            <div
              key={i}
              className="absolute w-32 h-32 bg-gradient-to-br from-blue-100/20 to-purple-100/20 rounded-full"
              style={{
                left: `${10 + i * 12}%`,
                top: `${20 + (i % 3) * 20}%`,
              }}
            />
          ))}
        </div>

        <div className="container mx-auto max-w-6xl relative z-10">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <motion.div
              className="text-center lg:text-left"
              initial={{ opacity: 0, x: -50 }}
              animate={heroInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
              <motion.h1
                className="font-primary text-4xl md:text-5xl lg:text-6xl font-bold bg-gradient-to-r from-gray-900 via-gray-800 to-[#3F5CEA] bg-clip-text text-transparent mb-8"
                initial={{ opacity: 0, y: 30 }}
                animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                transition={{ duration: 0.8, delay: 0.4 }}
              >
                Senior Care Resources
              </motion.h1>

              <motion.p
                className="text-xl md:text-2xl lg:text-2xl text-gray-600 mb-10 leading-relaxed"
                initial={{ opacity: 0, y: 30 }}
                animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                transition={{ duration: 0.8, delay: 0.6 }}
              >
                Expert guides, checklists, and resources to help you navigate the <span className="text-[#3F5CEA] font-semibold">senior care journey</span> with confidence and peace of mind.
              </motion.p>

              <motion.div
                className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"
                initial={{ opacity: 0, y: 30 }}
                animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                transition={{ duration: 0.8, delay: 0.8 }}
              >
                <AnimatedButton className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white text-lg px-8 py-4 shadow-lg hover:shadow-xl">
                  Browse All Resources
                </AnimatedButton>
                <AnimatedButton variant="outline" className="border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white text-lg px-8 py-4">
                  <Download className="w-5 h-5 mr-2" />
                  Download Guide
                </AnimatedButton>
              </motion.div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={heroInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              className="relative"
            >
              <div className="relative bg-white rounded-3xl shadow-2xl p-10 border border-slate-200/50">
                <div className="absolute -inset-1 bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] rounded-3xl opacity-10"></div>
                <div className="relative bg-white rounded-2xl p-8">
                  <div className="text-center mb-8">
                    <h3 className="font-primary text-4xl md:text-5xl font-black text-gray-900 mb-4">Resource Library</h3>
                    <p className="text-xl md:text-2xl text-gray-700 font-medium leading-relaxed">Everything you need to get started</p>
                  </div>
                  <div className="space-y-6">
                    <div className="flex items-center gap-4 p-5 bg-blue-50 rounded-xl border border-blue-100">
                      <div className="bg-blue-500 p-3 rounded-lg">
                        <BookOpen className="h-7 w-7 text-white" />
                      </div>
                      <div>
                        <h4 className="font-black text-2xl text-gray-900">50+ Guides</h4>
                        <p className="text-lg text-gray-700 font-medium">Comprehensive care guides</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-4 p-5 bg-green-50 rounded-xl border border-green-100">
                      <div className="bg-green-500 p-3 rounded-lg">
                        <CheckCircle className="h-7 w-7 text-white" />
                      </div>
                      <div>
                        <h4 className="font-black text-2xl text-gray-900">Checklists</h4>
                        <p className="text-lg text-gray-700 font-medium">Step-by-step planning tools</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-4 p-5 bg-purple-50 rounded-xl border border-purple-100">
                      <div className="bg-purple-500 p-3 rounded-lg">
                        <Users className="h-7 w-7 text-white" />
                      </div>
                      <div>
                        <h4 className="font-black text-2xl text-gray-900">Expert Support</h4>
                        <p className="text-lg text-gray-700 font-medium">Professional guidance</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </motion.section>

      {/* Resource Categories */}
      <motion.section
        ref={resourcesRef}
        className="py-16 px-4"
      >
        <div className="container mx-auto max-w-6xl">
          <motion.div
            className="text-center mb-12"
            initial={{ opacity: 0, y: 30 }}
            animate={resourcesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="font-primary text-4xl md:text-5xl lg:text-6xl font-black text-gray-900 mb-6">Featured Resources</h2>
            <p className="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto font-medium leading-relaxed">
              Essential guides and tools to help you navigate your senior care journey
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {/* Getting Started Guide */}
            <motion.div
              initial={{ opacity: 0, y: 50 }}
              animate={resourcesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
              transition={{ duration: 0.6, delay: 0.1 }}
            >
              <AnimatedCard className="bg-white border-0 shadow-lg hover:shadow-xl transition-all duration-300 h-full">
                <CardContent className="p-8">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="p-3 bg-[#3F5CEA]/10 rounded-xl">
                      <BookOpen className="h-10 w-10 text-[#3F5CEA]" />
                    </div>
                    <Badge variant="outline" className="border-[#3F5CEA] text-[#3F5CEA] px-4 py-2 text-sm font-semibold border-2">Essential</Badge>
                  </div>
                  <h3 className="font-primary text-3xl md:text-4xl lg:text-5xl font-black text-gray-900 care-sub-heading mb-6 leading-tight">Getting Started Guide</h3>
                  <p className="font-sans text-xl text-gray-700 mb-8 leading-relaxed">
                    A comprehensive guide to beginning your senior care search, including key questions to ask and
                    important factors to consider.
                  </p>
                  <AnimatedButton className="w-full bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] font-sans text-white shadow-lg hover:shadow-xl text-xl py-4 font-semibold">
                    <Download className="h-4 w-4 mr-2" />
                    Download PDF
                  </AnimatedButton>
                </CardContent>
              </AnimatedCard>
            </motion.div>

            {/* Care Types Explained */}
            <motion.div
              id="care-types-explained"
              initial={{ opacity: 0, y: 50 }}
              animate={resourcesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <AnimatedCard className="bg-white border-0 shadow-lg hover:shadow-xl transition-all duration-300 h-full">
                <CardContent className="p-8">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="p-3 bg-[#3F5CEA]/10 rounded-xl">
                      <Users className="h-10 w-10 text-[#3F5CEA]" />
                    </div>
                    <Badge variant="outline" className="border-[#3F5CEA] text-[#3F5CEA] px-4 py-2 text-sm font-semibold border-2">Popular</Badge>
                  </div>
                  <h3 className="font-primary text-3xl md:text-4xl lg:text-5xl font-black text-gray-900 mb-6 leading-tight">Care Types Explained</h3>
                  <p className="font-sans text-xl text-gray-700 mb-8 leading-relaxed">
                    Understanding the differences between assisted living, memory care, boarding homes, and skilled nursing facilities.
                  </p>
                  <Link href="/resources/care-types-explained">
                    <AnimatedButton className="w-full bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] font-sans text-white shadow-lg hover:shadow-xl text-xl py-4 font-semibold">
                      <FileText className="h-4 w-4 mr-2" />
                      Read Guide
                    </AnimatedButton>
                  </Link>
                </CardContent>
              </AnimatedCard>
            </motion.div>
          </div>
        </div>
      </motion.section>

      {/* Featured Resources Section */}
      <motion.section
        ref={featuredRef}
        className="py-16 px-4 bg-gradient-to-br from-gray-50 to-blue-50/30"
      >
        <div className="container mx-auto max-w-6xl">
          <motion.div
            className="text-center mb-12"
            initial={{ opacity: 0, y: 30 }}
            animate={featuredInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="font-primary text-4xl md:text-5xl lg:text-6xl font-black text-gray-900 mb-6">Additional Resources</h2>
            <p className="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto font-medium leading-relaxed">
              More tools and information to support your senior care decisions
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              animate={featuredInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <AnimatedCard className="bg-white border-0 shadow-lg hover:shadow-xl transition-all duration-300 h-full">
                <CardContent className="p-8">
                  <div className="flex items-center gap-4 mb-8">
                    <div className="p-4 bg-[#3F5CEA]/10 rounded-xl">
                      <Heart className="h-12 w-12 text-[#3F5CEA]" />
                    </div>
                    <div>
                      <h3 className="font-primary text-3xl md:text-4xl lg:text-5xl font-black text-gray-900 leading-tight">Family Support Hub</h3>
                      <p className="text-xl text-gray-700 font-medium mt-2">Resources for family members</p>
                    </div>
                  </div>
                  <p className="font-sans text-xl text-gray-700 mb-10 leading-relaxed">
                    Emotional support resources, communication tips, and guidance for families navigating the senior care journey together.
                  </p>
                  <AnimatedButton className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white font-sans shadow-lg hover:shadow-xl text-xl py-4 px-10 font-semibold">
                    Explore Resources
                  </AnimatedButton>
                </CardContent>
              </AnimatedCard>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={featuredInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
              transition={{ duration: 0.6, delay: 0.4 }}
            >
              <AnimatedCard className="bg-white border-0 shadow-lg hover:shadow-xl transition-all duration-300 h-full">
                <CardContent className="p-8">
                  <div className="flex items-center gap-4 mb-8">
                    <div className="p-4 bg-orange-100 rounded-xl">
                      <Clock className="h-12 w-12 text-orange-600" />
                    </div>
                    <div>
                      <h3 className="font-primary text-3xl md:text-4xl lg:text-5xl font-black care-sub-heading text-gray-900 leading-tight">Emergency Planning</h3>
                      <p className="text-xl text-gray-700 font-medium mt-2">Be prepared for urgent needs</p>
                    </div>
                  </div>
                  <p className="font-sans text-xl text-gray-700 mb-10 leading-relaxed">
                    Emergency care planning checklist, important documents guide, and rapid placement assistance information.
                  </p>
                  <Link href="/resources/emergency-planning">
                    <AnimatedButton className="bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] hover:from-[#09183D] hover:to-[#3F5CEA] text-white font-sans shadow-lg hover:shadow-xl text-xl py-4 px-10 font-semibold">
                      View Checklist
                    </AnimatedButton>
                  </Link>
                </CardContent>
              </AnimatedCard>
            </motion.div>
          </div>
        </div>
      </motion.section>

      {/* Call to Action */}
      <section className="py-16 px-4 bg-gradient-to-r from-[#3F5CEA] to-[#5B73F0] text-white">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="font-primary text-4xl md:text-5xl lg:text-6xl font-black mb-8">Need Personalized Guidance?</h2>
          <p className="font-sans text-xl md:text-2xl mb-10 max-w-3xl mx-auto opacity-95 leading-relaxed">
            Our Geezer Guide team is here to help you navigate your options and find the perfect fit for your loved one.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <AnimatedButton
              size="lg"
              className="font-sans bg-white text-[#3F5CEA] hover:bg-gray-100 px-10 py-4 shadow-lg hover:shadow-xl text-xl font-semibold"
            >
              Schedule a Consultation
            </AnimatedButton>
            <Link href="mailto:info@geezerguide.com">
              <AnimatedButton
                size="lg"
                variant="outline"
                className="font-sans border-white text-white hover:bg-white hover:text-[#3F5CEA] px-10 py-4 bg-transparent text-xl font-semibold"
              >
                Email Our Team
              </AnimatedButton>
            </Link>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  )
}