// components/Landing/LandingHero.tsx

'use client';

import Link from 'next/link';
import { useState, useEffect } from 'react';
import { 
  Heart,
  ArrowRight,
  MapPin,
  CheckCircle,
  Shield,
  Users,
  Briefcase,
  Star,
  Smartphone,
  Apple
} from 'lucide-react';
import Header from './Header';

  const handleSmoothScroll = (e: React.MouseEvent<HTMLAnchorElement>, sectionId: string) => {
    e.preventDefault();
    const section = document.getElementById(sectionId);
    if (section) {
      section.scrollIntoView({ behavior: 'smooth' });
    }
  };

const LandingHero = () => {
  const [activeImage, setActiveImage] = useState(0);
  const [activeTab, setActiveTab] = useState<'marketplace' | 'communities'>('marketplace');

  const facilityImages = [
    {
      url: 'https://images.pexels.com/photos/1643383/pexels-photo-1643383.jpeg?auto=compress&cs=tinysrgb&w=800',
      alt: 'Elegant senior living community entrance',
      caption: 'Welcome to our community'
    },
    {
      url: 'https://images.pexels.com/photos/271624/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&w=800',
      alt: 'Beautiful dining room with residents',
      caption: 'Restaurant-style dining'
    },
    {
      url: 'https://images.pexels.com/photos/3771097/pexels-photo-3771097.jpeg?auto=compress&cs=tinysrgb&w=800',
      alt: 'Cozy living room area',
      caption: 'Comfortable gathering spaces'
    },
    {
      url: 'https://images.pexels.com/photos/261579/pexels-photo-261579.jpeg?auto=compress&cs=tinysrgb&w=800',
      alt: 'Garden walking paths',
      caption: 'Beautiful gardens & courtyards'
    },
  ];

  useEffect(() => {
    const interval = setInterval(() => {
      setActiveImage((prev) => (prev + 1) % facilityImages.length);
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  const marketplaceStats = [
    { value: '2,000+', label: 'Active Caregivers', icon: Users },
    { value: '5,000+', label: 'Care Seekers', icon: Heart },
    { value: '98%', label: 'Satisfaction Rate', icon: Star },
    { value: '24/7', label: 'Support Available', icon: Shield },
  ];

  const communitiesStats = [
    { value: '40+', label: 'Years of Service', icon: Shield },
    { value: '5', label: 'Communities', icon: MapPin },
    { value: '1,000+', label: 'Happy Residents', icon: Users },
    { value: '24/7', label: 'RN on Site', icon: Heart },
  ];

  const currentStats = activeTab === 'marketplace' ? marketplaceStats : communitiesStats;

  return (
    <div className="min-h-screen bg-white">
      <Header />
      {/* Hero Section */}
      <main className="pt-28 md:pt-32">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            
            {/* Left Column */}
            <div className="space-y-6">
              {/* Service Toggle */}
              <div className="flex flex-wrap gap-3">
                <button
                  onClick={() => setActiveTab('marketplace')}
                  className={`px-5 py-2.5 rounded-full text-sm font-medium transition-all ${
                    activeTab === 'marketplace'
                      ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-600/30'
                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  }`}
                >
                  <Briefcase className="w-4 h-4 inline mr-2" />
                  Find a Caregiver
                </button>
                <button
                  onClick={() => setActiveTab('communities')}
                  className={`px-5 py-2.5 rounded-full text-sm font-medium transition-all ${
                    activeTab === 'communities'
                      ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-600/30'
                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  }`}
                >
                  <MapPin className="w-4 h-4 inline mr-2" />
                  Senior Living Communities
                </button>
              </div>

              {/* Badge */}
              <div className="inline-flex items-center gap-2 bg-emerald-50 px-4 py-2 rounded-full">
                <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
                <span className="text-sm text-emerald-700 font-medium">
                  {activeTab === 'marketplace' 
                    ? 'Connecting families with compassionate caregivers since 2015'
                    : 'Welcoming families to our communities since 1984'}
                </span>
              </div>

              {/* Headline */}
              <div className="space-y-3">
                {activeTab === 'marketplace' ? (
                  <>
                    <h1 className="text-5xl sm:text-6xl lg:text-6xl xl:text-7xl font-light tracking-tight text-gray-900">
                      Find the Perfect
                    </h1>
                    <div className="relative">
                      <h2 className="text-5xl sm:text-6xl lg:text-6xl xl:text-7xl font-bold text-emerald-600">
                        Caregiver for Your Family
                      </h2>
                      <div className="absolute -bottom-2 left-0 w-32 h-2 bg-amber-200 rounded-full"></div>
                    </div>
                    <p className="text-lg sm:text-xl text-gray-600 pt-4 max-w-lg leading-relaxed">
                      Post a job, review proposals, and connect with trusted caregivers in your area. 
                      Flexible, affordable, and compassionate care when you need it.
                    </p>
                  </>
                ) : (
                  <>
                    <h1 className="text-5xl sm:text-6xl lg:text-6xl xl:text-7xl font-light tracking-tight text-gray-900">
                      A Place Where
                    </h1>
                    <div className="relative">
                      <h2 className="text-5xl sm:text-6xl lg:text-6xl xl:text-7xl font-bold text-emerald-600">
                        Loved Ones Thrive
                      </h2>
                      <div className="absolute -bottom-2 left-0 w-32 h-2 bg-amber-200 rounded-full"></div>
                    </div>
                    <p className="text-lg sm:text-xl text-gray-600 pt-4 max-w-lg leading-relaxed">
                      Beautiful communities with compassionate care, delicious dining, and engaging activities. 
                      Where every day feels like home.
                    </p>
                  </>
                )}
              </div>

              {/* Stats */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 pt-2">
                {currentStats.map((stat, idx) => {
                  const Icon = stat.icon;
                  return (
                    <div key={idx} className="text-center sm:text-left">
                      <div className="flex items-center justify-center sm:justify-start gap-2">
                        <Icon className="w-4 h-4 text-emerald-600" />
                        <div className="text-xl sm:text-2xl font-bold text-gray-900">{stat.value}</div>
                      </div>
                      <div className="text-xs text-gray-500 mt-1">{stat.label}</div>
                    </div>
                  );
                })}
              </div>

              {/* CTA Buttons */}
              <div className="flex flex-col sm:flex-row gap-4 pt-4">
                {activeTab === 'marketplace' ? (
                  <>
                    <Link
                      href="#"
                      className="group px-8 py-4 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 transition-all flex items-center justify-center gap-2 shadow-lg shadow-emerald-600/20 text-base"
                    >
                      <span>Post a Job (Free)</span>
                      <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                    </Link>
                    <Link
                      href="#"
                      className="px-8 py-4 bg-amber-50 text-amber-700 rounded-xl hover:bg-amber-100 transition-all flex items-center justify-center gap-2 text-base"
                    >
                      <Users className="w-5 h-5" />
                      <span>Find Caregivers</span>
                    </Link>
                  </>
                ) : (
                  <>
                    <Link
                      href="#"
                      className="group px-8 py-4 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 transition-all flex items-center justify-center gap-2 shadow-lg shadow-emerald-600/20 text-base"
                    >
                      <span>Schedule a Visit</span>
                      <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                    </Link>
                    <Link
                       href="#communities"
                  onClick={(e) => handleSmoothScroll(e, 'communities')}
                      className="px-8 py-4 bg-amber-50 text-amber-700 rounded-xl hover:bg-amber-100 transition-all flex items-center justify-center gap-2 text-base"
                    >
                      <MapPin className="w-5 h-5" />
                      <span>Find a Community</span>
                    </Link>
                  </>
                )}
              </div>

              {/* Trust Indicators */}
              <div className="flex flex-wrap items-center gap-6 pt-4">
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-emerald-600" />
                  <span className="text-sm text-gray-600">Background Checked</span>
                </div>
                <div className="flex items-center gap-2">
                  <Shield className="w-5 h-5 text-emerald-600" />
                  <span className="text-sm text-gray-600">
                    {activeTab === 'marketplace' ? 'Insured Professionals' : 'Licensed & Regulated'}
                  </span>
                </div>
              </div>

              {/* Mobile App Badge */}
              <div className="pt-4 border-t border-gray-100">
                <p className="text-xs text-gray-500 mb-2">Also available on mobile</p>
                <div className="flex gap-3">
                  <Link href="#" className="flex items-center gap-2 px-3 py-1.5 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-all">
                    <Apple className="w-4 h-4" />
                    <span className="text-xs font-medium">App Store</span>
                  </Link>
                  <Link href="#" className="flex items-center gap-2 px-3 py-1.5 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-all">
                    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zM14.5 12.707l5.5 5.5-6.5-3.5 1-2zm0-1.414l-1-2 6.5-3.5-5.5 5.5z"/>
                    </svg>
                    <span className="text-xs font-medium">Google Play</span>
                  </Link>
                </div>
              </div>
            </div>

            {/* Right Column - Images */}
            <div className="relative">
              <div className="relative rounded-2xl overflow-hidden shadow-2xl aspect-[4/3]">
                <img
                  src={facilityImages[activeImage].url}
                  alt={facilityImages[activeImage].alt}
                  className="w-full h-full object-cover transition-all duration-700"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"></div>
                
                <div className="absolute bottom-4 left-4 right-4">
                  <span className="text-white text-lg font-light block">
                    {facilityImages[activeImage].caption}
                  </span>
                </div>

                <div className="absolute bottom-4 right-4 flex gap-2">
                  {facilityImages.map((_, index) => (
                    <button
                      key={index}
                      onClick={() => setActiveImage(index)}
                      className={`h-2 rounded-full transition-all ${
                        activeImage === index 
                          ? 'w-8 bg-white' 
                          : 'w-2 bg-white/50 hover:bg-white/80'
                      }`}
                    />
                  ))}
                </div>
              </div>

              {/* Floating Card - Changes based on active tab */}
              {activeTab === 'marketplace' ? (
                <div className="absolute -bottom-6 -left-6 hidden lg:block bg-white rounded-xl shadow-xl p-4 border border-gray-100">
                  <div className="flex items-center gap-4">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-emerald-600">5K+</div>
                      <div className="text-xs text-gray-500">Active Jobs</div>
                    </div>
                    <div className="w-px h-8 bg-gray-200"></div>
                    <div className="text-center">
                      <div className="text-2xl font-bold text-emerald-600">24h</div>
                      <div className="text-xs text-gray-500">Avg Response</div>
                    </div>
                    <div className="w-px h-8 bg-gray-200"></div>
                    <div className="text-center">
                      <div className="text-2xl font-bold text-emerald-600">98%</div>
                      <div className="text-xs text-gray-500">Match Rate</div>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="absolute -bottom-6 -left-6 hidden lg:block bg-white rounded-xl shadow-xl p-4 border border-gray-100">
                  <div className="flex items-center gap-4">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-emerald-600">40+</div>
                      <div className="text-xs text-gray-500">Years Serving</div>
                    </div>
                    <div className="w-px h-8 bg-gray-200"></div>
                    <div className="text-center">
                      <div className="text-2xl font-bold text-emerald-600">5</div>
                      <div className="text-xs text-gray-500">Communities</div>
                    </div>
                    <div className="w-px h-8 bg-gray-200"></div>
                    <div className="text-center">
                      <div className="text-2xl font-bold text-emerald-600">1,000+</div>
                      <div className="text-xs text-gray-500">Happy Residents</div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default LandingHero;