"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { AnimatedCard } from "@/components/ui/animated-card"
import { AnimatedButton } from "@/components/ui/animated-button"
import { Header } from "@/components/ui/header"
import { Footer } from "@/components/ui/footer"
import FeaturedFacilities from "@/components/featured-facilities"
import { AdCarousel, type AdData } from "@/components/ui/ad-carousel"
import { Search, Shield, Users, Heart, Star, Phone, Mail, ArrowRight, Sparkles } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { motion, useScroll, useTransform, useInView } from "framer-motion"
import { useRef, useState, useEffect } from "react"

export default function HomePage() {
  const { scrollYProgress } = useScroll()
  
  const heroRef = useRef(null)
  const servicesRef = useRef(null)
  const facilitiesRef = useRef(null)
  const trustRef = useRef(null)
  
  const heroInView = useInView(heroRef, { once: true, margin: "-100px" })
  const servicesInView = useInView(servicesRef, { once: true, margin: "-100px" })
  const facilitiesInView = useInView(facilitiesRef, { once: true, margin: "-100px" })
  const trustInView = useInView(trustRef, { once: true, margin: "-100px" })
  
  const y = useTransform(scrollYProgress, [0, 1], ["0%", "50%"])
  const opacity = useTransform(scrollYProgress, [0, 0.3], [1, 0])

  // State for active ads fetched from API
  const [topBannerAds, setTopBannerAds] = useState<AdData[]>([])
  const [rightSideAds, setRightSideAds] = useState<AdData[]>([])
  const [leftSideAds, setLeftSideAds] = useState<AdData[]>([])
  const [adsLoading, setAdsLoading] = useState(true)

  // Fetch active ads from API
  useEffect(() => {
    const fetchActiveAds = async () => {
      try {
        console.log('[Homepage] Fetching active ads...')
        const response = await fetch('/api/ads/active')
        if (response.ok) {
          const data = await response.json()
          console.log('[Homepage] Received ads from API:', data.ads.length, 'total ads')
          
          // Separate ads by placement type
          const topAds = data.ads
            .filter((ad: any) => ad.placementType === 'top-banner')
            .map((ad: any) => ({
              id: ad._id,
              title: ad.facilityName,
              description: ad.description,
              imageUrl: ad.imageUrl,
              facilityName: ad.facilityName,
              location: ad.location,
              category: ad.category,
              placementType: ad.placementType,
              link: ad.targetUrl
            }))
          
          const rightAds = data.ads
            .filter((ad: any) => ad.placementType === 'right-side')
            .map((ad: any) => ({
              id: ad._id,
              title: ad.facilityName,
              description: ad.description,
              imageUrl: ad.imageUrl,
              facilityName: ad.facilityName,
              location: ad.location,
              category: ad.category,
              placementType: ad.placementType,
              link: ad.targetUrl
            }))
          
          const leftAds = data.ads
            .filter((ad: any) => ad.placementType === 'left-side')
            .map((ad: any) => ({
              id: ad._id,
              title: ad.facilityName,
              description: ad.description,
              imageUrl: ad.imageUrl,
              facilityName: ad.facilityName,
              location: ad.location,
              category: ad.category,
              placementType: ad.placementType,
              link: ad.targetUrl
            }))
          
          console.log('[Homepage] Ad breakdown:')
          console.log('  - Top Banner:', topAds.length, 'ads')
          console.log('  - Right Side:', rightAds.length, 'ads')
          console.log('  - Left Side:', leftAds.length, 'ads')
          
          if (leftAds.length > 0) {
            console.log('[Homepage] Left side ads:', leftAds.map((ad: AdData) => ad.facilityName).join(', '))
          }
          if (rightAds.length > 0) {
            console.log('[Homepage] Right side ads:', rightAds.map((ad: AdData) => ad.facilityName).join(', '))
          }
          
          setTopBannerAds(topAds)
          setRightSideAds(rightAds)
          setLeftSideAds(leftAds)
        } else {
          console.error('[Homepage] Failed to fetch ads:', response.status, response.statusText)
        }
      } catch (error) {
        console.error('[Homepage] Error fetching active ads:', error)
      } finally {
        setAdsLoading(false)
      }
    }
    
    fetchActiveAds()
  }, [])

  // Use real ads only - no mock data fallback
  // AdCarousel component will show placeholder when ads array is empty
  const displayTopAds = topBannerAds
  const displayRightAds = rightSideAds
  const displayLeftAds = leftSideAds

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50 relative overflow-hidden">
      {/* Animated background elements */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <motion.div
          className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-blue-100/40 to-purple-100/40 rounded-full blur-3xl"
          animate={{
            scale: [1, 1.2, 1],
            rotate: [0, 180, 360],
          }}
          transition={{
            duration: 20,
            repeat: Infinity,
            ease: "linear",
          }}
        />
        <motion.div
          className="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-br from-indigo-100/40 to-cyan-100/40 rounded-full blur-3xl"
          animate={{
            scale: [1.2, 1, 1.2],
            rotate: [360, 180, 0],
          }}
          transition={{
            duration: 25,
            repeat: Infinity,
            ease: "linear",
          }}
        />
      </div>
      {/* Header */}
      <Header />

      {/* Hero Section - Premium Enhanced */}
      <motion.section 
        ref={heroRef}
        className="relative w-full h-screen min-h-[600px] sm:min-h-[700px] md:min-h-[800px] lg:min-h-[900px] xl:min-h-[95vh] 2xl:min-h-[90vh] flex items-center justify-center overflow-hidden"
      >
        {/* Background Image with Advanced Parallax */}
        <motion.div 
          className="absolute inset-0 z-0"
          style={{ y }}
        >
          <div className="relative w-full h-full">
            {/* Primary Background Image */}
            <Image
              src="/senior-care-facility-exterior-with-family-walking-.jpg"
              alt="Senior care facility with family"
              fill
              className="object-cover scale-105 transition-all duration-1000 ease-out"
              style={{ 
                objectPosition: "center 30%",
                filter: "brightness(0.55) contrast(0.9) saturate(0.8) blur(1.5px)",
              }}
              priority
              quality={95}
              sizes="100vw"
            />
            
          </div>
          
          {/* Multi-layer Gradient Overlays */}
          <div className="absolute inset-0">
            {/* Primary dark overlay */}
            <motion.div 
              className="absolute inset-0 bg-gradient-to-br from-slate-900/70 via-blue-900/60 to-purple-900/60"
              style={{ opacity }}
            />
            
            {/* Secondary depth overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-black/40" />
            
            {/* Accent color overlay */}
            <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 via-transparent to-purple-600/10" />
            
            {/* Vignette effect */}
            <div className="absolute inset-0 bg-radial-gradient from-transparent via-transparent to-black/60" 
                 style={{
                   background: "radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%)"
                 }} 
            />
          </div>
        </motion.div>

        {/* Animated Background Elements */}
        <div className="absolute inset-0 z-5">
          {/* Floating geometric shapes */}
          {[...Array(8)].map((_, i) => (
            <motion.div
              key={`geo-${i}`}
              className="absolute opacity-10"
              style={{
                left: `${10 + i * 12}%`,
                top: `${20 + i * 8}%`,
                width: `${20 + i * 5}px`,
                height: `${20 + i * 5}px`,
              }}
              animate={{
                y: [-30, 30, -30],
                rotate: [0, 180, 360],
                opacity: [0.1, 0.3, 0.1],
              }}
              transition={{
                duration: 8 + i * 1.5,
                repeat: Infinity,
                ease: "easeInOut",
                delay: i * 0.5,
              }}
            >
              <div className="w-full h-full bg-gradient-to-br from-white/30 to-blue-200/20 rounded-lg rotate-45" />
            </motion.div>
          ))}
          
          {/* Floating light particles */}
          {[...Array(12)].map((_, i) => (
            <motion.div
              key={`particle-${i}`}
              className="absolute w-1.5 h-1.5 bg-white/40 rounded-full"
              style={{
                left: `${15 + i * 7}%`,
                top: `${25 + i * 6}%`,
              }}
              animate={{
                y: [-25, 25, -25],
                x: [-10, 10, -10],
                opacity: [0.2, 0.8, 0.2],
                scale: [0.8, 1.2, 0.8],
              }}
              transition={{
                duration: 4 + i * 0.3,
                repeat: Infinity,
                ease: "easeInOut",
                delay: i * 0.2,
              }}
            />
          ))}
        </div>


        {/* Hero Content */}
        <motion.div 
          className="relative z-20 text-center text-white px-4 sm:px-6 md:px-8 w-full max-w-[90vw] sm:max-w-[85vw] md:max-w-6xl xl:max-w-7xl mx-auto py-2 sm:py-4 md:py-6 lg:py-8"
          initial={{ opacity: 0, y: 50 }}
          animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
          transition={{ duration: 0.8, delay: 0.2 }}
        >
          {/* Content backdrop for better readability */}
          <div className="absolute inset-0 bg-gradient-to-b from-black/25 via-black/15 to-black/25 rounded-3xl border border-white/20 -z-10" />
        
          <motion.h1 
            className="font-primary font-bold mb-3 sm:mb-4 md:mb-6 lg:mb-8 leading-tight space-y-2"
            initial={{ opacity: 0, y: 30 }}
            animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            {/* First line - white, larger */}
            <motion.span
              className="block text-white drop-shadow-2xl text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl whitespace-nowrap overflow-visible"
              initial={{ opacity: 0, x: -50 }}
              animate={heroInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
              transition={{ duration: 1, delay: 0.6 }}
            >
              Let us guide you to your next home...
            </motion.span>
            
            {/* Second line - gradient, smaller, italic */}
            <motion.span
              className="block bg-gradient-to-r from-blue-300 via-purple-300 to-pink-300 bg-clip-text text-transparent drop-shadow-lg text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl 2xl:text-7xl italic font-semibold whitespace-nowrap overflow-visible"
              initial={{ opacity: 0, x: 50 }}
              animate={heroInView ? { 
                opacity: 1, 
                x: 0,
                backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
              } : { 
                opacity: 0, 
                x: 50,
                backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
              }}
              transition={{ 
                opacity: { duration: 1, delay: 0.8 },
                x: { duration: 1, delay: 0.8 },
                backgroundPosition: { duration: 4, repeat: Infinity, ease: "easeInOut" }
              }}
              style={{
                backgroundSize: "200% 200%",
              }}
            >
              so you don't end up on your kid's couch.
            </motion.span>
          </motion.h1>

          <motion.div
            className="relative mb-4 sm:mb-6 md:mb-8 lg:mb-10"
            initial={{ opacity: 0, y: 30 }}
            animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, delay: 1.0 }}
          >
            {/* Glassmorphic background */}
            <div className="absolute inset-0 bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 -z-10" />
            
            <p className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl text-white/95 max-w-3xl xl:max-w-4xl mx-auto leading-relaxed font-medium p-6">
              Discover trusted senior care facilities with{" "}
              <motion.span 
                className="relative inline-block font-bold bg-gradient-to-r from-blue-200 via-cyan-200 to-blue-300 bg-clip-text text-transparent"
                animate={{
                  backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
                }}
                transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
                style={{
                  backgroundSize: "200% 200%",
                  textShadow: "0 0 30px rgba(96, 165, 250, 0.5)"
                }}
              >
                transparency
                <motion.span
                  className="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-blue-300 to-transparent"
                  animate={{
                    scaleX: [0, 1, 0],
                    opacity: [0, 1, 0],
                  }}
                  transition={{ duration: 3, repeat: Infinity, delay: 0.5 }}
                />
              </motion.span>{" "}
              and{" "}
              <motion.span 
                className="relative inline-block font-bold bg-gradient-to-r from-purple-200 via-pink-200 to-purple-300 bg-clip-text text-transparent"
                animate={{
                  backgroundPosition: ["100% 50%", "0% 50%", "100% 50%"],
                }}
                transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
                style={{
                  backgroundSize: "200% 200%",
                  textShadow: "0 0 30px rgba(192, 132, 252, 0.5)"
                }}
              >
                independence
                <motion.span
                  className="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-purple-300 to-transparent"
                  animate={{
                    scaleX: [0, 1, 0],
                    opacity: [0, 1, 0],
                  }}
                  transition={{ duration: 3, repeat: Infinity, delay: 1 }}
                />
              </motion.span>
              .{" "}
              <span className="block mt-3 text-yellow-100 font-semibold" style={{ textShadow: "0 0 20px rgba(254, 243, 199, 0.6)" }}>
                Your family deserves the best care.
              </span>
            </p>
          </motion.div>

          {/* Care Type Selection */}
          <motion.div 
            className="w-full max-w-[95vw] sm:max-w-[90vw] md:max-w-4xl xl:max-w-5xl mx-auto mb-4 sm:mb-6 md:mb-8 lg:mb-10"
            initial={{ opacity: 0, y: 30 }}
            animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, delay: 1.2 }}
          >
            {/* Section Header */}
            <div className="text-center mb-6 sm:mb-8 md:mb-10">
              <motion.p 
                className="text-white text-xl sm:text-2xl md:text-3xl font-semibold drop-shadow-lg"
                initial={{ opacity: 0, y: 20 }}
                animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
                transition={{ duration: 0.6, delay: 1.3 }}
              >
                Select the type of care you're searching for.
              </motion.p>
            </div>
            
            {/* Care Type Buttons */}
            <div className="w-full max-w-6xl mx-auto px-4">
              {/* Mobile: 2x2 Grid with 5th button spanning 2 columns */}
              <div className="grid grid-cols-2 gap-3 sm:hidden">
                {[
                  { name: "Assisted Living", color: "from-blue-500 to-cyan-500", icon: "🏡" },
                  { name: "Memory Care", color: "from-purple-500 to-pink-500", icon: "🧠" },
                  { name: "Boarding Home", color: "from-green-500 to-emerald-500", icon: "🌟" },
                  { name: "Skilled Nursing", color: "from-red-500 to-orange-500", icon: "🏥" }
                ].map((term, index) => (
                  <Link key={term.name} href={{ pathname: "/search", query: { care: term.name } }}>
                    <motion.button
                      className={`w-full px-3 py-3 bg-gradient-to-r ${term.color} text-white rounded-xl hover:shadow-lg transition-all duration-300 text-xs font-bold border border-white/20 group flex flex-col items-center justify-center h-[70px]`}
                      whileHover={{ scale: 1.03 }}
                      whileTap={{ scale: 0.98 }}
                      initial={{ opacity: 0, y: 20 }}
                      animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
                      transition={{ duration: 0.5, delay: 1.4 + index * 0.1 }}
                    >
                      <span className="text-lg mb-1 group-hover:scale-105 transition-transform duration-200">
                        {term.icon}
                      </span>
                      <span className="text-center leading-tight text-[10px] font-semibold whitespace-pre-line">
                        {term.name.replace(" ", "\n")}
                      </span>
                    </motion.button>
                  </Link>
                ))}
                {/* "I don't know" button - spans 2 columns on mobile */}
                <Link href="/resources#care-types-explained" className="col-span-2">
                  <motion.button
                    className="w-full px-3 py-3 bg-gradient-to-r from-amber-500 via-yellow-500 to-orange-400 text-white rounded-xl hover:shadow-xl hover:shadow-yellow-500/50 transition-all duration-300 text-xs font-bold border border-yellow-300/30 group flex items-center justify-center h-[60px] relative overflow-hidden"
                    whileHover={{ scale: 1.03 }}
                    whileTap={{ scale: 0.98 }}
                    initial={{ opacity: 0, y: 20 }}
                    animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
                    transition={{ duration: 0.5, delay: 1.8 }}
                  >
                    {/* Shine effect */}
                    <motion.div
                      className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
                      animate={{ x: ["-200%", "200%"] }}
                      transition={{ duration: 3, repeat: Infinity, repeatDelay: 1 }}
                    />
                    <span className="text-center leading-tight font-semibold relative z-10 drop-shadow-md">
                      💡 I don't know what type of care I need
                    </span>
                  </motion.button>
                </Link>
              </div>

              {/* Tablet and Desktop: Horizontal Layout */}
              <div className="hidden sm:flex flex-col gap-4">
                <div className="flex flex-wrap justify-center gap-3 md:gap-4">
                  {[
                    { name: "Assisted Living", color: "from-blue-500 to-cyan-500", icon: "🏡" },
                    { name: "Memory Care", color: "from-purple-500 to-pink-500", icon: "🧠" },
                    { name: "Boarding Home", color: "from-green-500 to-emerald-500", icon: "🌟" },
                    { name: "Skilled Nursing", color: "from-red-500 to-orange-500", icon: "🏥" }
                  ].map((term, index) => (
                    <Link key={term.name} href={{ pathname: "/search", query: { care: term.name } }}>
                      <motion.button
                        className={`px-4 md:px-6 py-3 md:py-4 bg-gradient-to-r ${term.color} text-white rounded-xl md:rounded-2xl hover:shadow-xl transition-all duration-300 text-sm md:text-base font-bold border border-white/20 group flex items-center gap-2 md:gap-3 min-w-[140px] md:min-w-[180px]`}
                        whileHover={{ scale: 1.05, y: -2 }}
                        whileTap={{ scale: 0.98 }}
                        initial={{ opacity: 0, y: 30 }}
                        animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                        transition={{ duration: 0.6, delay: 1.4 + index * 0.15 }}
                      >
                        <span className="text-xl md:text-2xl group-hover:scale-110 transition-transform duration-200">
                          {term.icon}
                        </span>
                        <span className="text-center leading-tight">
                          {term.name}
                        </span>
                      </motion.button>
                    </Link>
                  ))}
                </div>
                
                {/* "I don't know" button - centered below on desktop */}
                <div className="flex justify-center">
                  <Link href="/resources#care-types-explained">
                    <motion.button
                      className="px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-amber-500 via-yellow-500 to-orange-400 text-white rounded-xl md:rounded-2xl hover:shadow-2xl hover:shadow-yellow-500/50 transition-all duration-300 text-sm md:text-base font-bold border border-yellow-300/30 group flex items-center gap-2 relative overflow-hidden"
                      whileHover={{ scale: 1.05, y: -2 }}
                      whileTap={{ scale: 0.98 }}
                      initial={{ opacity: 0, y: 30 }}
                      animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                      transition={{ duration: 0.6, delay: 2.0 }}
                    >
                      {/* Animated shine effect */}
                      <motion.div
                        className="absolute inset-0 bg-gradient-to-r from-transparent via-white/25 to-transparent"
                        animate={{ x: ["-200%", "200%"] }}
                        transition={{ duration: 3, repeat: Infinity, repeatDelay: 1.5 }}
                      />
                      <motion.span
                        className="text-xl group-hover:scale-110 transition-transform duration-200 relative z-10"
                        animate={{ rotate: [0, 10, -10, 0] }}
                        transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}
                      >
                        💡
                      </motion.span>
                      <span className="text-center leading-tight relative z-10 drop-shadow-md">
                        I don't know what type of care I need
                      </span>
                    </motion.button>
                  </Link>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </motion.section>

      {/* Top Banner Ad Section */}
      <motion.section 
        className="py-8 px-4 relative overflow-hidden"
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        viewport={{ once: true }}
      >
        <div className="container mx-auto max-w-7xl">
          <AdCarousel ads={displayTopAds} placementType="top-banner" autoPlayInterval={6000} />
        </div>
      </motion.section>

      {/* Service Cards - Enhanced */}
      <motion.section 
        ref={servicesRef}
        className="py-20 px-4 bg-gradient-to-br from-gray-50 via-white to-blue-50/30 relative overflow-hidden"
      >
        {/* Background decoration */}
        <div className="absolute inset-0 opacity-40">
          <div className="absolute top-20 left-10 w-32 h-32 bg-gradient-to-br from-blue-100 to-purple-100 rounded-full blur-2xl"></div>
          <div className="absolute bottom-20 right-10 w-40 h-40 bg-gradient-to-br from-indigo-100 to-cyan-100 rounded-full blur-2xl"></div>
        </div>
        
        <div className="container mx-auto max-w-7xl relative">
          <motion.div
            className="text-center mb-16"
            initial={{ opacity: 0, y: 50 }}
            animate={servicesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
            transition={{ duration: 0.8, ease: "easeOut" }}
          >
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={servicesInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="relative inline-block mb-6"
            >
              <motion.div
                className="absolute -inset-4 bg-gradient-to-r from-blue-200/30 via-purple-200/30 to-indigo-200/30 rounded-2xl blur-xl"
                animate={{
                  scale: [1, 1.1, 1],
                  rotate: [0, 1, -1, 0],
                }}
                transition={{
                  duration: 4,
                  repeat: Infinity,
                  ease: "easeInOut",
                }}
              />
              <h2 className="font-primary text-5xl md:text-7xl lg:text-8xl font-bold text-gray-900 relative">
                <motion.span
                  initial={{ opacity: 0, x: -20 }}
                  animate={servicesInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
                  transition={{ duration: 0.6, delay: 0.4 }}
                >
                 Your Guide to
                </motion.span>
                <br />
                <motion.span
                  className="bg-gradient-to-r from-[#3F5CEA] via-[#4A6CF7] to-[#6366F1] bg-clip-text text-transparent"
                  initial={{ opacity: 0, x: 20 }}
                  animate={servicesInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 20 }}
                  transition={{ duration: 0.6, delay: 0.6 }}
                >
                 Quality Care
                </motion.span>
              </h2>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={servicesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
              transition={{ duration: 0.6, delay: 0.8 }}
              className="relative"
            >
              <motion.p 
                className="font-sans text-2xl md:text-3xl lg:text-4xl text-gray-600 max-w-4xl mx-auto leading-relaxed"
                animate={servicesInView ? {
                  backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
                } : {}}
                transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
              >
                Discover, compare, and connect with the perfect senior living community for your loved one
              </motion.p>
              
              {/* Animated decorative elements */}
              <motion.div
                className="absolute -top-2 -left-4 w-8 h-8 bg-gradient-to-br from-blue-400/20 to-purple-400/20 rounded-full"
                animate={{
                  scale: [1, 1.5, 1],
                  opacity: [0.3, 0.8, 0.3],
                }}
                transition={{
                  duration: 3,
                  repeat: Infinity,
                  delay: 1,
                }}
              />
              <motion.div
                className="absolute -bottom-2 -right-4 w-6 h-6 bg-gradient-to-br from-indigo-400/20 to-cyan-400/20 rounded-full"
                animate={{
                  scale: [1.2, 1, 1.2],
                  opacity: [0.4, 0.9, 0.4],
                }}
                transition={{
                  duration: 2.5,
                  repeat: Infinity,
                  delay: 0.5,
                }}
              />
            </motion.div>
            
            {/* Progress indicator */}
            <motion.div
              className="flex justify-center mt-8 space-x-2"
              initial={{ opacity: 0 }}
              animate={servicesInView ? { opacity: 1 } : { opacity: 0 }}
              transition={{ duration: 0.6, delay: 1.2 }}
            >
              {[0, 1, 2].map((index) => (
                <motion.div
                  key={index}
                  className="w-2 h-2 bg-[#3F5CEA] rounded-full"
                  animate={{
                    scale: [1, 1.5, 1],
                    opacity: [0.4, 1, 0.4],
                  }}
                  transition={{
                    duration: 1.5,
                    repeat: Infinity,
                    delay: index * 0.2,
                  }}
                />
              ))}
            </motion.div>
          </motion.div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Resources Card - NOW FIRST */}
            <motion.div
              initial={{ opacity: 0, y: 50 }}
              animate={servicesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="h-full"
            >
              <AnimatedCard className="bg-white/95 border-0 shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden group hover:-translate-y-2 h-full">
                <CardContent className="p-10 text-center flex flex-col h-full">
                  <motion.div 
                    className="mb-6 relative"
                    whileHover={{ scale: 1.05 }}
                    transition={{ type: "spring", stiffness: 300, damping: 20 }}
                  >
                    <div className="absolute inset-0 bg-gradient-to-br from-purple-50/50 to-pink-50/50 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <Image
                      src="/memory-care-facility-garden.jpg"
                      alt="Memory care facility garden"
                      width={350}
                      height={240}
                      className="mx-auto rounded-lg relative z-10 object-cover"
                      style={{ aspectRatio: "3/2" }}
                    />
                  </motion.div>
                  <h3 className="font-primary text-4xl lg:text-5xl xl:text-6xl font-bold care-sub-heading text-gray-900 mb-6 group-hover:text-[#3F5CEA] transition-colors duration-300">
                    Care Resources
                  </h3>
                  <div className="font-secondary text-xl lg:text-2xl text-gray-600 mb-8 leading-relaxed flex-grow relative">
                    <div className="absolute inset-0 bg-gradient-to-br from-purple-50/30 to-pink-50/30 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-xl"></div>
                    <p className="relative">
                      Access <span className="font-bold text-purple-600">expert guides</span>, <span className="font-bold text-pink-600">checklists</span>, and <span className="font-bold text-indigo-600">resources</span> to help you navigate the senior care journey with confidence and peace of mind.
                    </p>
                  </div>
                  <Link href="/resources" className="mt-auto">
                    <AnimatedButton
                      variant="outline"
                      className="border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white font-secondary w-full bg-transparent hover:shadow-lg hover:shadow-[#3F5CEA]/25 text-lg py-4"
                    >
                      Explore Resources
                    </AnimatedButton>
                  </Link>
                </CardContent>
              </AnimatedCard>
            </motion.div>

            {/* For Families Card - NOW SECOND */}
            <motion.div
              initial={{ opacity: 0, y: 50 }}
              animate={servicesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="h-full"
            >
              <AnimatedCard className="bg-white/95 border-0 shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden group hover:-translate-y-2 h-full">
                <CardContent className="p-10 text-center flex flex-col h-full">
                  <motion.div 
                    className="mb-6 relative"
                    whileHover={{ scale: 1.05 }}
                    transition={{ type: "spring", stiffness: 300, damping: 20 }}
                  >
                    <div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-50/50 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <Image
                      src="/senior-care-facility-exterior-with-family-walking-.jpg"
                      alt="Family searching for senior care"
                      width={350}
                      height={240}
                      className="mx-auto rounded-lg relative z-10 object-cover"
                      style={{ aspectRatio: "3/2" }}
                    />
                  </motion.div>
                  <h3 className="font-primary text-4xl lg:text-5xl xl:text-6xl care-sub-heading font-bold text-gray-900 mb-6 group-hover:text-[#3F5CEA] transition-colors duration-300">
                    Find Senior Care
                  </h3>
                  <div className="font-secondary text-xl lg:text-2xl text-gray-600 mb-8 leading-relaxed flex-grow relative">
                    <div className="absolute inset-0 bg-gradient-to-br from-blue-50/30 to-purple-50/30 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-xl"></div>
                    <p className="relative">
                      Search <span className="font-bold text-blue-600">thousands</span> of verified senior living facilities. Compare amenities, read <span className="font-bold text-purple-600">reviews</span>, and find the perfect care community for your loved one.
                    </p>
                  </div>
                  <Link href="/search" className="mt-auto">
                    <AnimatedButton className="bg-[#3F5CEA] hover:bg-[#09183D] font-secondary w-full hover:shadow-lg hover:shadow-[#3F5CEA]/25 text-lg py-4">
                      Start Your Search
                    </AnimatedButton>
                  </Link>
                </CardContent>
              </AnimatedCard>
            </motion.div>

            {/* For Facility Owners Card - REMAINS THIRD */}
            <motion.div
              initial={{ opacity: 0, y: 50 }}
              animate={servicesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="h-full"
            >
              <AnimatedCard className="bg-white/95 border-0 shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden group hover:-translate-y-2 h-full">
                <CardContent className="p-10 text-center flex flex-col h-full">
                  <motion.div 
                    className="mb-6 relative"
                    whileHover={{ scale: 1.05 }}
                    transition={{ type: "spring", stiffness: 300, damping: 20 }}
                  >
                    <div className="absolute inset-0 bg-gradient-to-br from-green-50/50 care-sub-heading to-blue-50/50 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <Image
                      src="/senior-living-facility-exterior.jpg"
                      alt="Senior living facility exterior"
                      width={350}
                      height={240}
                      className="mx-auto rounded-lg relative z-10 object-cover"
                      style={{ aspectRatio: "3/2" }}
                    />
                  </motion.div>
                  <h3 className="font-primary text-4xl lg:text-5xl xl:text-6xl care-sub-heading font-bold text-gray-900 mb-6 group-hover:text-[#3F5CEA] transition-colors duration-300">
                    For Facility Owners
                  </h3>
                  <div className="font-secondary text-xl lg:text-2xl text-gray-600 mb-8 leading-relaxed flex-grow relative">
                    <div className="absolute inset-0 bg-gradient-to-br from-green-50/30 to-blue-50/30 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-xl"></div>
                    <p className="relative">
                      <span className="font-bold text-green-600">Showcase</span> your senior care facility to families actively searching. Manage your profile, respond to reviews, and <span className="font-bold text-blue-600">connect</span> with potential residents.
                    </p>
                  </div>
                  <Link href="/register?type=facility" className="mt-auto">
                    <AnimatedButton
                      variant="outline"
                      className="border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white font-secondary w-full bg-transparent hover:shadow-lg hover:shadow-[#3F5CEA]/25 text-lg py-4"
                    >
                      Get Started
                    </AnimatedButton>
                  </Link>
                </CardContent>
              </AnimatedCard>
            </motion.div>
          </div>
        </div>
      </motion.section>

      {/* Featured Facilities with Side Ads - Enhanced */}
      <motion.section 
        ref={facilitiesRef}
        className="py-12 sm:py-16 lg:py-20 px-4 sm:px-6 lg:px-4 bg-gradient-to-br from-white via-gray-50/50 to-indigo-50/30 relative overflow-hidden"
      >
        {/* Background decoration */}
        <div className="absolute inset-0 opacity-30">
          <div className="absolute top-32 right-20 w-48 h-48 bg-gradient-to-br from-indigo-100 to-blue-100 rounded-full blur-3xl"></div>
          <div className="absolute bottom-32 left-20 w-36 h-36 bg-gradient-to-br from-purple-100 to-pink-100 rounded-full blur-2xl"></div>
        </div>
        
        <div className="container mx-auto max-w-[1600px] relative">
          {/* Layout with Left Ad, Main Content, Right Ad */}
          <div className="grid grid-cols-1 xl:grid-cols-[320px_1fr_320px] gap-6 items-start">
            
            {/* Left Side Ad - Desktop Only */}
            <div className="hidden xl:block sticky top-20 self-start">
              <motion.div
                initial={{ opacity: 0, x: -50 }}
                animate={facilitiesInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
                transition={{ duration: 0.6, delay: 0.2 }}
              >
                <h3 className="text-lg font-bold text-gray-900 mb-4 text-center">Sponsored</h3>
                <AdCarousel ads={displayLeftAds} placementType="left-side" autoPlayInterval={7000} />
              </motion.div>
            </div>

            {/* Main Content */}
            <div className="relative">
          <motion.div 
            className="text-center mb-10 sm:mb-12 lg:mb-16 px-4"
            initial={{ opacity: 0, y: 50 }}
            animate={facilitiesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
            transition={{ duration: 0.8, ease: "easeOut" }}
          >
            <motion.div
              className="relative inline-block mb-6 sm:mb-8"
              initial={{ opacity: 0, scale: 0.9 }}
              animate={facilitiesInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              {/* Animated background glow */}
              <motion.div
                className="absolute -inset-4 sm:-inset-6 bg-gradient-to-r from-indigo-200/20 via-blue-200/20 to-purple-200/20 rounded-3xl blur-2xl"
                animate={{
                  scale: [1, 1.15, 1],
                  opacity: [0.3, 0.6, 0.3],
                }}
                transition={{
                  duration: 5,
                  repeat: Infinity,
                  ease: "easeInOut",
                }}
              />
              
              <div className="relative">
                <motion.h2 
                  className="font-primary text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-3 sm:mb-4 leading-tight px-2"
                  initial={{ opacity: 0, y: 20 }}
                  animate={facilitiesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
                  transition={{ duration: 0.6, delay: 0.4 }}
                >
                  <motion.span
                    initial={{ opacity: 0, rotateX: -90 }}
                    animate={facilitiesInView ? { opacity: 1, rotateX: 0 } : { opacity: 0, rotateX: -90 }}
                    transition={{ duration: 0.8, delay: 0.5 }}
                    className="inline-block"
                  >
                    Featured
                  </motion.span>{" "}
                  <motion.span
                    initial={{ opacity: 0, rotateX: -90 }}
                    animate={facilitiesInView ? { opacity: 1, rotateX: 0 } : { opacity: 0, rotateX: -90 }}
                    transition={{ duration: 0.8, delay: 0.7 }}
                    className="inline-block bg-gradient-to-r from-[#3F5CEA] to-[#6366F1] bg-clip-text text-transparent"
                  >
                    Senior Care
                  </motion.span>{" "}
                  <motion.span
                    initial={{ opacity: 0, rotateX: -90 }}
                    animate={facilitiesInView ? { opacity: 1, rotateX: 0 } : { opacity: 0, rotateX: -90 }}
                    transition={{ duration: 0.8, delay: 0.9 }}
                    className="inline-block"
                  >
                    Facilities
                  </motion.span>
                </motion.h2>
                
                {/* Animated underline */}
                <motion.div
                  className="h-0.5 sm:h-1 bg-gradient-to-r from-[#3F5CEA] to-[#6366F1] rounded-full mx-auto"
                  initial={{ width: 0 }}
                  animate={facilitiesInView ? { width: "150px" } : { width: 0 }}
                  transition={{ duration: 1, delay: 1.1 }}
                  style={{ maxWidth: "200px" }}
                />
              </div>
            </motion.div>
            
            <motion.div
              className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6"
              initial={{ opacity: 0, y: 20 }}
              animate={facilitiesInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
              transition={{ duration: 0.6, delay: 1.2 }}
            >
              <motion.p 
                className="font-sans text-base sm:text-lg md:text-xl lg:text-2xl text-gray-600 max-w-2xl font-medium px-4"
                animate={facilitiesInView ? {
                  color: ["#6b7280", "#4b5563", "#6b7280"],
                } : {}}
                transition={{ duration: 4, repeat: Infinity }}
              >
                Highly rated communities in your area
              </motion.p>
              
              <motion.div
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <Link href="/search">
                  <AnimatedButton
                    size="sm"
                    variant="outline"
                    className="border-2 border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white font-sans font-semibold bg-white hover:shadow-xl hover:shadow-[#3F5CEA]/30 px-5 sm:px-6 py-2 sm:py-3 text-sm sm:text-base whitespace-nowrap"
                  >
                    <motion.span
                      className="flex items-center gap-2"
                      animate={{ x: [0, 5, 0] }}
                      transition={{ duration: 2, repeat: Infinity }}
                    >
                      View All
                      <ArrowRight className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
                    </motion.span>
                  </AnimatedButton>
                </Link>
              </motion.div>
            </motion.div>
            
            {/* Floating icons */}
            <div className="absolute inset-0 pointer-events-none">
              <motion.div
                className="absolute top-20 left-1/4 w-4 h-4 bg-[#3F5CEA]/20 rounded-full"
                animate={{
                  y: [-10, 10, -10],
                  opacity: [0.3, 0.8, 0.3],
                }}
                transition={{
                  duration: 3,
                  repeat: Infinity,
                  delay: 0.5,
                }}
              />
              <motion.div
                className="absolute top-32 right-1/4 w-3 h-3 bg-indigo-400/20 rounded-full"
                animate={{
                  y: [10, -10, 10],
                  opacity: [0.4, 0.9, 0.4],
                }}
                transition={{
                  duration: 2.5,
                  repeat: Infinity,
                  delay: 1,
                }}
              />
              <motion.div
                className="absolute top-16 right-1/3 w-2 h-2 bg-purple-400/20 rounded-full"
                animate={{
                  scale: [1, 1.5, 1],
                  opacity: [0.2, 0.7, 0.2],
                }}
                transition={{
                  duration: 4,
                  repeat: Infinity,
                  delay: 1.5,
                }}
              />
            </div>
          </motion.div>

          {/* Dynamic Featured Facilities Component */}
          <FeaturedFacilities />
            </div>
            {/* End Main Content */}

            {/* Right Side Ad - Desktop Only */}
            <div className="hidden xl:block sticky top-20 self-start">
              <motion.div
                initial={{ opacity: 0, x: 50 }}
                animate={facilitiesInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
                transition={{ duration: 0.6, delay: 0.4 }}
              >
                <h3 className="text-lg font-bold text-gray-900 mb-4 text-center">Featured Partner</h3>
                <AdCarousel ads={displayRightAds} placementType="right-side" autoPlayInterval={8000} />
              </motion.div>
            </div>
          </div>
        </div>
      </motion.section>

      {/* Mobile Ad Section - Right Side Ads */}
      <motion.section 
        className="py-8 px-4 bg-gradient-to-br from-indigo-50/30 via-blue-50/20 to-white xl:hidden"
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        viewport={{ once: true }}
      >
        <div className="container mx-auto max-w-2xl">
          <h3 className="text-lg font-bold text-gray-900 mb-4 text-center">Featured Partner</h3>
          <AdCarousel ads={displayRightAds} placementType="right-side" autoPlayInterval={8000} />
        </div>
      </motion.section>

      {/* Trust & Transparency Section - Enhanced */}
      <motion.section 
        ref={trustRef}
        className="py-20 px-4 bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/50 relative overflow-hidden"
      >
        {/* Background decoration */}
        <div className="absolute inset-0 opacity-20">
          <div className="absolute top-20 left-1/4 w-64 h-64 bg-gradient-to-br from-blue-200 to-indigo-200 rounded-full blur-3xl"></div>
          <div className="absolute bottom-20 right-1/4 w-48 h-48 bg-gradient-to-br from-purple-200 to-pink-200 rounded-full blur-2xl"></div>
        </div>
        
        <div className="container mx-auto max-w-4xl text-center relative">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <motion.h2 
              className="font-primary text-4xl md:text-5xl font-bold mb-6 relative inline-block"
              whileHover={{ scale: 1.02 }}
            >
              <span className="relative z-10 bg-gradient-to-r from-gray-900 via-[#3F5CEA] to-gray-900 bg-clip-text text-transparent bg-[length:200%_100%]"
                style={{
                  animation: "shimmer-gradient 3s linear infinite"
                }}
              >
                Why Families Trust Geezer Guide
              </span>
              <motion.div
                className="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-[#3F5CEA] to-transparent rounded-full"
                animate={{
                  scaleX: [0.5, 1, 0.5],
                  opacity: [0.5, 1, 0.5],
                }}
                transition={{ duration: 2, repeat: Infinity }}
              />
            </motion.h2>
            
            <div className="relative mb-12 max-w-2xl mx-auto">
              {/* Glassmorphic background */}
              <div className="absolute inset-0 bg-gradient-to-r from-blue-50/50 via-white/80 to-purple-50/50 backdrop-blur-sm rounded-2xl border border-gray-200/50 shadow-lg" />
              
              <p className="font-sans text-xl text-gray-700 p-6 relative leading-relaxed">
                We're <span className="font-bold text-red-600 relative">
                  different
                  <span className="absolute -bottom-1 left-0 w-full h-0.5 bg-red-400"></span>
                </span> from other platforms. <span className="font-bold text-green-600">No sales pressure</span>, <span className="font-bold text-blue-600">no data selling</span>, just <span className="font-bold text-purple-600">honest information</span> to help your family make the right choice.
              </p>
            </div>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <motion.div 
              className="text-center group"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <motion.div
                className="inline-block p-4 rounded-full bg-gradient-to-br from-blue-50 to-indigo-50 mb-4 group-hover:from-blue-100 group-hover:to-indigo-100 transition-all duration-300"
                whileHover={{ scale: 1.1, rotate: 5 }}
                transition={{ type: "spring", stiffness: 300, damping: 20 }}
              >
                <Shield className="h-16 w-16 text-[#3F5CEA]" />
              </motion.div>
              <h3 className="font-serif text-4xl font-bold text-gray-900 mb-3 group-hover:text-[#3F5CEA] transition-colors duration-300 relative">
                Privacy Protected
                <motion.span
                  className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 h-1 bg-gradient-to-r from-transparent via-[#3F5CEA] to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                  style={{ width: "80%" }}
                />
              </h3>
              <p className="font-sans text-gray-600 leading-relaxed">
                We <span className="font-semibold text-gray-800">never sell</span> your personal information or share it with aggressive sales teams.
              </p>
            </motion.div>

            <motion.div 
              className="text-center group"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.3 }}
            >
              <motion.div
                className="inline-block p-4 rounded-full bg-gradient-to-br from-green-50 to-blue-50 mb-4 group-hover:from-green-100 group-hover:to-blue-100 transition-all duration-300"
                whileHover={{ scale: 1.1, rotate: -5 }}
                transition={{ type: "spring", stiffness: 300, damping: 20 }}
              >
                <Users className="h-16 w-16 text-[#3F5CEA]" />
              </motion.div>
              <h3 className="font-serif text-4xl font-bold text-gray-900 mb-3 group-hover:text-[#3F5CEA] transition-colors duration-300 relative">
                Real Family Reviews
                <motion.span
                  className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 h-1 bg-gradient-to-r from-transparent via-[#3F5CEA] to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                  style={{ width: "80%" }}
                />
              </h3>
              <p className="font-sans text-gray-600 leading-relaxed">
                Read <span className="font-semibold text-gray-800">honest reviews</span> from <span className="font-semibold text-gray-800">real families</span> who have experience with each facility.
              </p>
            </motion.div>

            <motion.div 
              className="text-center group"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.4 }}
            >
              <motion.div
                className="inline-block p-4 rounded-full bg-gradient-to-br from-purple-50 to-pink-50 mb-4 group-hover:from-purple-100 group-hover:to-pink-100 transition-all duration-300"
                whileHover={{ scale: 1.1, rotate: 5 }}
                transition={{ type: "spring", stiffness: 300, damping: 20 }}
              >
                <Heart className="h-16 w-16 text-[#3F5CEA]" />
              </motion.div>
              <h3 className="font-serif text-4xl font-bold text-gray-900 mb-3 group-hover:text-[#3F5CEA] transition-colors duration-300 relative">
                Independent Search
                <motion.span
                  className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 h-1 bg-gradient-to-r from-transparent via-[#3F5CEA] to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                  style={{ width: "80%" }}
                />
              </h3>
              <p className="font-sans text-gray-600 leading-relaxed">
                Browse and compare facilities at <span className="font-semibold text-gray-800">your own pace</span> without pressure from sales representatives.
              </p>
            </motion.div>
          </div>

          {/* Stats */}
          <motion.div 
            className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12 pt-12 border-t border-gray-200/50"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.6 }}
          >
            <motion.div 
              className="text-center group"
              whileHover={{ scale: 1.05 }}
              transition={{ type: "spring", stiffness: 300, damping: 20 }}
            >
              <motion.div 
                className="text-5xl font-serif font-bold text-[#3F5CEA] mb-2 group-hover:text-[#09183D] transition-colors duration-300"
                initial={{ scale: 0 }}
                whileInView={{ scale: 1 }}
                viewport={{ once: true }}
                transition={{ delay: 0.8, type: "spring", stiffness: 300 }}
              >
                15,000+
              </motion.div>
              <div className="font-sans text-gray-600 group-hover:text-gray-800 transition-colors duration-300">
                Verified Facilities
              </div>
            </motion.div>
            <motion.div 
              className="text-center group"
              whileHover={{ scale: 1.05 }}
              transition={{ type: "spring", stiffness: 300, damping: 20 }}
            >
              <motion.div 
                className="text-5xl font-serif font-bold text-[#3F5CEA] mb-2 group-hover:text-[#09183D] transition-colors duration-300"
                initial={{ scale: 0 }}
                whileInView={{ scale: 1 }}
                viewport={{ once: true }}
                transition={{ delay: 0.9, type: "spring", stiffness: 300 }}
              >
                75,000+
              </motion.div>
              <div className="font-sans text-gray-600 group-hover:text-gray-800 transition-colors duration-300">
                Family Reviews
              </div>
            </motion.div>
            <motion.div 
              className="text-center group"
              whileHover={{ scale: 1.05 }}
              transition={{ type: "spring", stiffness: 300, damping: 20 }}
            >
              <motion.div 
                className="text-5xl font-serif font-bold text-[#3F5CEA] mb-2 group-hover:text-[#09183D] transition-colors duration-300"
                initial={{ scale: 0 }}
                whileInView={{ scale: 1 }}
                viewport={{ once: true }}
                transition={{ delay: 1.0, type: "spring", stiffness: 300 }}
              >
                100%
              </motion.div>
              <div className="font-sans text-gray-600 group-hover:text-gray-800 transition-colors duration-300">
                Independent Platform
              </div>
            </motion.div>
          </motion.div>
        </div>
      </motion.section>

      {/* CTA Section - Enhanced */}
      <motion.section 
        className="py-20 px-4 bg-gradient-to-br from-[#3F5CEA] via-[#4A6CF7] to-[#09183D] relative overflow-hidden"
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        transition={{ duration: 0.8 }}
        viewport={{ once: true }}
      >
        {/* Background decoration */}
        <div className="absolute inset-0 opacity-20">
          <div className="absolute top-10 left-10 w-32 h-32 bg-white rounded-full blur-2xl"></div>
          <div className="absolute bottom-10 right-10 w-40 h-40 bg-white rounded-full blur-3xl"></div>
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
        </div>
        
        <div className="container mx-auto text-center max-w-3xl relative">
          <motion.h2 
            className="font-primary text-4xl md:text-6xl font-bold text-white mb-6 relative"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
            style={{ textShadow: "0 0 40px rgba(255,255,255,0.3)" }}
          >
            <motion.span
              animate={{
                textShadow: [
                  "0 0 20px rgba(255,255,255,0.3)",
                  "0 0 40px rgba(255,255,255,0.5)",
                  "0 0 20px rgba(255,255,255,0.3)"
                ]
              }}
              transition={{ duration: 2, repeat: Infinity }}
            >
              Ready to Find the Right Care?
            </motion.span>
          </motion.h2>
          
          <motion.div
            className="relative mb-8"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            viewport={{ once: true }}
          >
            {/* Glassmorphic background */}
            <div className="absolute inset-0 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20" />
            
            <p className="font-sans text-xl text-white p-6 relative leading-relaxed">
              Join <motion.span 
                className="font-bold text-yellow-200"
                animate={{ scale: [1, 1.05, 1] }}
                transition={{ duration: 2, repeat: Infinity }}
              >
                thousands of families
              </motion.span> who have found the perfect senior care facility through our platform. <span className="font-semibold text-cyan-200">Start your search today.</span>
            </p>
          </motion.div>
          <motion.div 
            className="flex flex-col sm:flex-row gap-4 justify-center"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.6 }}
            viewport={{ once: true }}
          >
            <Link href="/search">
              <AnimatedButton
                size="lg"
                variant="secondary"
                className="font-sans bg-white text-[#3F5CEA] hover:bg-gray-100 px-8 py-3 hover:shadow-2xl hover:shadow-white/25"
              >
                <Search className="w-5 h-5 mr-2" />
                Start Searching Now
              </AnimatedButton>
            </Link>
            <Link href="/how-it-works">
              <AnimatedButton
                size="lg"
                variant="outline"
                className="font-sans border-white text-white hover:bg-white hover:text-[#3F5CEA] px-8 py-3 bg-transparent hover:shadow-2xl hover:shadow-white/25"
              >
                Learn How It Works
                <ArrowRight className="w-5 h-5 ml-2" />
              </AnimatedButton>
            </Link>
          </motion.div>
        </div>
      </motion.section>

      {/* Footer */}
      <Footer />
    </div>
  )
}