// app/page.tsx
'use client';

import Link from 'next/link';
import { useState, useEffect } from 'react';
import { 
  Building2,
  Home,
  Heart,
  Calendar,
  Star,
  Shield,
  Phone,
  Menu,
  X,
  ArrowRight,
  Users,
  Clock,
  Award,
  Activity,
  Coffee,
  Pill,
  Sparkles,
  CheckCircle2
} from 'lucide-react';

const AmericascareMultiService = () => {
  const [scrolled, setScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeService, setActiveService] = useState(0);
  const [counts, setCounts] = useState({ years: 0, caregivers: 0, families: 0 });

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        let start = 0;
        const interval = setInterval(() => {
          start += 1;
          setCounts({
            years: Math.min(40, start),
            caregivers: Math.min(20, Math.floor(start * 0.5)),
            families: Math.min(500, Math.floor(start * 12.5))
          });
          if (start >= 40) clearInterval(interval);
        }, 50);
      }
    }, { threshold: 0.5 });

    const statsSection = document.getElementById('stats-section');
    if (statsSection) observer.observe(statsSection);

    return () => {
      window.removeEventListener('scroll', handleScroll);
      observer.disconnect();
    };
  }, []);

  // Auto-rotate through services for preview
  useEffect(() => {
    const interval = setInterval(() => {
      setActiveService((prev) => (prev + 1) % 3);
    }, 4000);
    return () => clearInterval(interval);
  }, []);

  const navigation = [
    { name: 'Home', href: '/' },
    { name: 'Services', href: '/services' },
    { name: 'Careers', href: '/careers' },
    { name: 'Locations', href: '/locations' },
  ];

  const services = [
    {
      id: 'facility',
      title: 'Assistant Home Facility',
      icon: Building2,
      description: 'Assisted living facility management',
      patientName: 'Eleanor Richardson',
      patientAge: 82,
      caregiver: 'Maria Rodriguez',
      caregiverImage: 'https://images.pexels.com/photos/3778603/pexels-photo-3778603.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&fit=crop',
      visitTime: '2:30 PM',
      duration: 'Full day',
      score: '98%',
      progress: 85,
      activities: [
        { time: '08:00', task: 'Morning medications', icon: Pill, completed: true },
        { time: '10:00', task: 'Physical therapy', icon: Activity, completed: true },
        { time: '12:00', task: 'Group lunch', icon: Coffee, completed: false },
        { time: '14:30', task: 'Activities program', icon: Sparkles, completed: false },
        { time: '16:00', task: 'Family visit', icon: Heart, completed: false },
        { time: '18:00', task: 'Evening medications', icon: Pill, completed: false },
      ]
    },
    {
      id: 'homecare',
      title: 'In-Home Care Portal',
      icon: Home,
      description: 'Personalized home care services',
      patientName: 'Robert Chen',
      patientAge: 76,
      caregiver: 'James Wilson',
      caregiverImage: 'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&fit=crop',
      visitTime: '10:00 AM',
      duration: '4 hours',
      score: '96%',
      progress: 70,
      activities: [
        { time: '10:00', task: 'Medication setup', icon: Pill, completed: true },
        { time: '11:30', task: 'Light housekeeping', icon: Home, completed: true },
        { time: '13:00', task: 'Meal preparation', icon: Coffee, completed: false },
        { time: '14:00', task: 'Companionship', icon: Heart, completed: false },
        { time: '15:30', task: 'Medication check', icon: Pill, completed: false },
        { time: '16:45', task: 'Evening walk', icon: Activity, completed: false },
      ]
    },
    {
      id: 'hospice',
      title: 'Hospice',
      icon: Heart,
      description: 'Compassionate end-of-life care',
      patientName: 'Patricia Moore',
      patientAge: 91,
      caregiver: 'Dr. Sarah Johnson',
      caregiverImage: 'https://images.pexels.com/photos/5215024/pexels-photo-5215024.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&fit=crop',
      visitTime: '11:30 AM',
      duration: '2 hours',
      score: '100%',
      progress: 60,
      activities: [
        { time: '11:30', task: 'Pain management', icon: Activity, completed: true },
        { time: '12:30', task: 'Family support', icon: Heart, completed: true },
        { time: '13:30', task: 'Comfort care', icon: Shield, completed: false },
        { time: '14:30', task: 'Spiritual care', icon: Sparkles, completed: false },
        { time: '15:30', task: 'Medication review', icon: Pill, completed: false },
        { time: '16:30', task: 'Family consultation', icon: Users, completed: false },
      ]
    }
  ];

  const activeServiceData = services[activeService];
  const ActiveIcon = activeServiceData.icon;

  return (
    <div className="min-h-screen bg-gradient-to-b from-[#F8FAFC] to-white">
      {/* Header */}
      <header className={`fixed top-0 w-full z-50 transition-all duration-300 ${
        scrolled ? 'bg-white/95 backdrop-blur-md shadow-md py-3' : 'bg-transparent py-5'
      }`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-3 group">
              <div className="relative">
                <div className="w-11 h-11 bg-emerald-50 rounded-2xl flex items-center justify-center transform rotate-3 group-hover:rotate-0 transition-transform duration-300">
                  <Heart className="w-5 h-5 text-emerald-600" />
                </div>
                <div className="absolute -top-1 -right-1 w-3 h-3 bg-amber-400 rounded-full border-2 border-white"></div>
              </div>
              <div>
                <span className="text-2xl font-light tracking-tight text-gray-900">americas</span>
                <span className="text-2xl font-bold text-emerald-600">.care</span>
              </div>
            </Link>

            <nav className="hidden md:flex items-center gap-1">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="px-4 py-2 text-gray-600 hover:text-emerald-600 rounded-full hover:bg-emerald-50 transition-all"
                >
                  {item.name}
                </Link>
              ))}
            </nav>

            <div className="hidden md:flex items-center gap-3">
              <Link href="tel:+15551234567" className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-emerald-600">
                <Phone className="w-4 h-4" />
                <span className="text-sm font-medium">(555) 123-4567</span>
              </Link>
              <Link
                href="#"
                className="px-5 py-2.5 bg-emerald-600 text-white text-sm font-medium rounded-full hover:bg-emerald-700 shadow-sm hover:shadow transition-all"
              >
                Find Care
              </Link>
            </div>

            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="md:hidden p-2 rounded-xl bg-gray-100"
            >
              {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </button>
          </div>

          {mobileMenuOpen && (
            <div className="md:hidden mt-4 p-4 bg-white rounded-2xl shadow-lg border border-gray-100">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="block py-3 text-gray-600 hover:text-emerald-600 border-b border-gray-100 last:border-0"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  {item.name}
                </Link>
              ))}
              <Link
                href="#"
                className="block mt-3 px-4 py-3 bg-emerald-600 text-white text-center rounded-xl"
              >
                Find Care
              </Link>
            </div>
          )}
        </div>
      </header>

      {/* Hero Section */}
      <main className="pt-28 md:pt-32 pb-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-start">
            
            {/* Left Column - Main Content */}
            <div className="space-y-6">
              {/* 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">40 Years of Compassion</span>
                <span className="text-xs bg-white px-2 py-0.5 rounded-full text-emerald-600 ml-2">Since 1984</span>
              </div>

              {/* Headline */}
              <div className="space-y-2">
                <h1 className="text-5xl sm:text-6xl lg:text-6xl xl:text-7xl font-light tracking-tight text-gray-900">
                  We're Here to
                </h1>
                <div className="relative">
                  <h2 className="text-5xl sm:text-6xl lg:text-6xl xl:text-7xl font-bold text-emerald-600">
                    Help You 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-3 max-w-lg leading-relaxed">
                  Simple, attentive care that honors your independence and brings peace of mind to your family.
                </p>
              </div>

              {/* Service Tabs */}
              <div className="flex flex-wrap gap-2 pt-2">
                {services.map((service, index) => {
                  const ServiceIcon = service.icon;
                  return (
                    <button
                      key={service.id}
                      onClick={() => setActiveService(index)}
                      className={`px-4 py-2 rounded-full text-sm font-medium transition-all flex items-center gap-1.5 ${
                        activeService === index
                          ? 'bg-emerald-100 text-emerald-700 shadow-sm border border-emerald-200'
                          : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                      }`}
                    >
                      <ServiceIcon className="w-4 h-4" />
                      {service.title}
                    </button>
                  );
                })}
              </div>

              {/* CTA Buttons */}
              <div className="flex flex-col sm:flex-row gap-3 pt-2">
                <Link
                  href="#"
                  className="group px-6 py-3.5 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-sm sm:text-base"
                >
                  <span>Start Your Care Journey</span>
                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                </Link>
                <Link
                  href="#"
                  className="px-6 py-3.5 bg-amber-50 text-amber-700 rounded-xl hover:bg-amber-100 transition-all flex items-center justify-center gap-2 text-sm sm:text-base"
                >
                  <Users className="w-4 h-4" />
                  <span>Join Our Team</span>
                </Link>
              </div>

              {/* Stats */}
              <div id="stats-section" className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-200">
                <div>
                  <div className="text-2xl sm:text-3xl font-bold text-gray-900">{counts.years}+</div>
                  <div className="text-xs sm:text-sm text-gray-500 mt-1">Years of Service</div>
                  <div className="w-8 h-1 bg-emerald-200 rounded-full mt-2"></div>
                </div>
                <div>
                  <div className="text-2xl sm:text-3xl font-bold text-gray-900">{counts.caregivers}+</div>
                  <div className="text-xs sm:text-sm text-gray-500 mt-1">Dedicated Caregivers</div>
                  <div className="w-8 h-1 bg-amber-200 rounded-full mt-2"></div>
                </div>
                <div>
                  <div className="text-2xl sm:text-3xl font-bold text-gray-900">{counts.families}+</div>
                  <div className="text-xs sm:text-sm text-gray-500 mt-1">Happy Families</div>
                  <div className="w-8 h-1 bg-emerald-200 rounded-full mt-2"></div>
                </div>
              </div>
            </div>

            {/* Right Column - Taller Service Card */}
            <div className="relative">
              {/* Service Card - Height increased with more content */}
              <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100 min-h-[600px] flex flex-col">
                {/* Card Header */}
                <div className="bg-gradient-to-r from-emerald-600 to-emerald-500 px-5 py-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center backdrop-blur-sm">
                        <ActiveIcon className="w-4 h-4 text-white" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-white text-sm">{activeServiceData.title}</h3>
                        <p className="text-[10px] text-white/80">{activeServiceData.description}</p>
                      </div>
                    </div>
                    <span className="flex items-center gap-1.5 bg-white/20 px-2 py-1 rounded-full backdrop-blur-sm">
                      <span className="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></span>
                      <span className="text-[10px] font-medium text-white">Live</span>
                    </span>
                  </div>
                </div>

                {/* Card Content - Expanded with more details */}
                <div className="p-5 flex-1">
                  {/* Care Team Info with more details */}
                  <div className="flex items-start justify-between mb-5">
                    <div className="flex items-center gap-3">
                      <div className="relative">
                        <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-gray-100 to-gray-50 overflow-hidden ring-2 ring-gray-200">
                          <img
                            src={activeServiceData.caregiverImage}
                            alt={`Caregiver ${activeServiceData.caregiver}`}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <div className="absolute -bottom-1 -right-1 w-3.5 h-3.5 bg-emerald-500 rounded-full border-2 border-white"></div>
                      </div>
                      <div>
                        <div className="text-xs text-gray-500">Primary Caregiver</div>
                        <div className="text-base font-semibold text-gray-900">{activeServiceData.caregiver}</div>
                        <div className="flex items-center gap-2 mt-1">
                          <div className="flex items-center gap-0.5">
                            {[...Array(5)].map((_, i) => (
                              <Star key={i} className="w-3 h-3 text-amber-400 fill-current" />
                            ))}
                          </div>
                          <span className="text-[10px] text-gray-400">CNA certified</span>
                        </div>
                      </div>
                    </div>
                    <div className="text-right bg-gray-50 px-3 py-2 rounded-lg">
                      <div className="text-[10px] text-gray-500">Patient</div>
                      <div className="text-sm font-semibold text-gray-900">{activeServiceData.patientName}</div>
                      <div className="text-[9px] text-gray-400">Age {activeServiceData.patientAge} • Room 204</div>
                    </div>
                  </div>

                  {/* Stats Grid with more visual detail */}
                  <div className="grid grid-cols-3 gap-3 mb-5">
                    <div className="bg-gray-50 rounded-xl p-3">
                      <Calendar className="w-3.5 h-3.5 text-emerald-600 mb-1" />
                      <div className="text-[9px] text-gray-500">Today's Visit</div>
                      <div className="text-sm font-semibold text-gray-900">{activeServiceData.visitTime}</div>
                      <div className="text-[8px] text-emerald-600 mt-1">In 45 mins</div>
                    </div>
                    <div className="bg-gray-50 rounded-xl p-3">
                      <Clock className="w-3.5 h-3.5 text-amber-600 mb-1" />
                      <div className="text-[9px] text-gray-500">Duration</div>
                      <div className="text-sm font-semibold text-gray-900">{activeServiceData.duration}</div>
                      <div className="text-[8px] text-amber-600 mt-1">Daily care</div>
                    </div>
                    <div className="bg-gray-50 rounded-xl p-3">
                      <Award className="w-3.5 h-3.5 text-emerald-600 mb-1" />
                      <div className="text-[9px] text-gray-500">Care Score</div>
                      <div className="text-sm font-semibold text-gray-900">{activeServiceData.score}</div>
                      <div className="text-[8px] text-emerald-600 mt-1">Top rated</div>
                    </div>
                  </div>

                  {/* Progress Section with additional metrics */}
                  <div className="mb-5">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-xs font-medium text-gray-700">Weekly Progress</span>
                      <span className="text-xs font-semibold text-emerald-600">{activeServiceData.progress}% Complete</span>
                    </div>
                    <div className="h-2 bg-gray-100 rounded-full overflow-hidden mb-2">
                      <div 
                        className="h-full bg-gradient-to-r from-emerald-500 to-emerald-400 rounded-full" 
                        style={{ width: `${activeServiceData.progress}%` }}
                      ></div>
                    </div>
                    <div className="flex justify-between text-[9px] text-gray-400">
                      <span>Mon</span>
                      <span>Tue</span>
                      <span>Wed</span>
                      <span>Thu</span>
                      <span>Fri</span>
                      <span>Sat</span>
                      <span>Sun</span>
                    </div>
                  </div>

                  {/* Today's Schedule - Expanded with 6 items */}
                  <div className="border-t border-gray-100 pt-4">
                    <div className="flex items-center justify-between mb-3">
                      <h4 className="text-xs font-medium text-gray-900">Today's Schedule</h4>
                      <span className="text-[9px] text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">
                        6 activities
                      </span>
                    </div>
                    <div className="space-y-3">
                      {activeServiceData.activities.map((item, i) => {
                        const ActivityIcon = item.icon;
                        return (
                          <div key={i} className="flex items-center gap-3">
                            <div className={`w-1.5 h-1.5 rounded-full ${item.completed ? 'bg-emerald-500' : 'bg-gray-300'}`}></div>
                            <span className="text-[10px] font-medium text-gray-500 w-12">{item.time}</span>
                            <span className="text-xs text-gray-700 flex-1">{item.task}</span>
                            <div className="flex items-center gap-2">
                              {item.completed && <CheckCircle2 className="w-3 h-3 text-emerald-500" />}
                              <ActivityIcon className="w-3.5 h-3.5 text-gray-400" />
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>

                  {/* Additional Notes */}
                  <div className="mt-4 bg-amber-50/50 rounded-lg p-3">
                    <p className="text-[9px] text-amber-700 italic">
                      ✨ Next family consultation scheduled for tomorrow at 10:00 AM
                    </p>
                  </div>
                </div>

                {/* Card Footer with more info */}
                <div className="bg-gray-50/80 px-5 py-3 border-t border-gray-100">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <span className="flex items-center gap-1.5 text-[10px] text-gray-600">
                        <Shield className="w-3.5 h-3.5 text-emerald-600" />
                        Background Verified
                      </span>
                      <span className="w-0.5 h-3 bg-gray-300 rounded-full"></span>
                      <span className="flex items-center gap-1 text-[10px] text-gray-600">
                        <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span>
                        Active Today
                      </span>
                    </div>
                    <span className="text-[9px] text-gray-400">Care ID: {activeServiceData.id}-{Math.floor(Math.random() * 1000)}</span>
                  </div>
                </div>
              </div>

              {/* Service Indicator Dots */}
              <div className="flex justify-center gap-1.5 mt-4">
                {services.map((_, index) => (
                  <button
                    key={index}
                    onClick={() => setActiveService(index)}
                    className={`h-2 rounded-full transition-all ${
                      activeService === index 
                        ? 'w-8 bg-emerald-500' 
                        : 'w-2 bg-gray-300 hover:bg-gray-400'
                    }`}
                  />
                ))}
              </div>
            </div>
          </div>

          {/* WHY FAMILIES CHOOSE US */}
          <div className="mt-12 pt-6 border-t border-gray-200">
            <div className="flex items-center gap-2 mb-5">
              <span className="w-1 h-6 bg-emerald-500 rounded-full"></span>
              <h4 className="text-base font-semibold text-gray-700">Why Families Choose Us</h4>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {features.map((feature, idx) => {
                const FeatureIcon = feature.icon;
                return (
                  <div key={idx} className="bg-white rounded-xl p-4 border border-gray-100 shadow-sm hover:shadow-md transition-all hover:border-emerald-200">
                    <div className="flex items-start gap-3">
                      <div className="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
                        <FeatureIcon className="w-4 h-4 text-emerald-600" />
                      </div>
                      <div>
                        <h5 className="text-sm font-semibold text-gray-900">{feature.title}</h5>
                        <p className="text-xs text-gray-500 leading-tight mt-1">{feature.description}</p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
            
            {/* Testimonial */}
            <div className="mt-5 flex items-center justify-end gap-3">
              <p className="text-xs text-gray-500 italic">"The best care decision we ever made for our mother."</p>
              <p className="text-xs font-medium text-gray-700">— Thompson Family</p>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

// Feature icons using Lucide
const features = [
  {
    icon: ({ className }: { className?: string }) => <Users className={className} />,
    title: 'Expert Caregivers',
    description: 'Thoroughly vetted & trained professionals',
  },
  {
    icon: ({ className }: { className?: string }) => <Clock className={className} />,
    title: '24/7 Support',
    description: 'Round-the-clock assistance when you need it',
  },
  {
    icon: ({ className }: { className?: string }) => <Shield className={className} />,
    title: 'Fully Insured',
    description: 'Complete protection and peace of mind',
  },
  {
    icon: ({ className }: { className?: string }) => <Heart className={className} />,
    title: 'Personalized Care',
    description: 'Tailored plans for your unique needs',
  },
];

export default AmericascareMultiService;




Essential Sections for Senior Care Landing Page
1. Header/Navigation
Logo

Main menu (Communities, Services, Contact)

Phone number

CTA button (Schedule Tour)

2. Hero Section (Most Important)
Warm, emotional headline

Subheadline with value proposition

Primary CTA (Schedule Tour / Virtual Tour)

Secondary CTA (Find Community)

Trust badges (Licensed, 40+ Years, etc.)

High-quality facility image or slideshow

3. Location Selector
Interactive map or location tabs

Number of communities per state/region

"View All Communities" link

4. Amenities & Services
Visual grid of amenities (icons + labels)

Private rooms, dining, activities, gardens, wellness, etc.

Hover effects for engagement

5. Why Choose Us / Value Props
3-4 key differentiators

Icon + title + short description

Examples: Compassionate Care, Vibrant Community, Peace of Mind, Expert Staff

6. Photo Gallery / Virtual Tour
Collection of facility images

Building exteriors, dining rooms, living areas, gardens

Optional video tour link

7. Testimonials / Family Stories
2-3 quotes from real families

Star ratings

Names and locations

Emotional, authentic messaging

8. Trust Indicators
Accreditations

Awards

Years of service

Licensed & regulated badges

9. Staff / Caregiver Highlights
Photos of caring staff

Qualifications and training

Caregiver-to-resident ratio

10. Blog / Resources Preview
Senior care tips

Guides for families

Community news

11. FAQ Section
Common questions from families

Quick answers

Link to full FAQ page

12. Contact / Visit Section
Form or contact info

Map of locations

Phone number and email

Office hours

13. Footer
Quick links

Social media icons

Privacy policy & terms

Copyright

Newsletter signup (optional)