// app/components/Landing/FAQSection.tsx
'use client';

import { useState } from 'react';
import { 
  HelpCircle,
  ChevronDown,
  Search,
  MessageCircle,
  Phone,
  Mail,
  ArrowRight,
  Sparkles,
  Home,
  Heart,
  Shield,
  Users,
  Calendar,
  FileText
} from 'lucide-react';
import Link from 'next/link';

const FAQSection = () => {
  const [openItems, setOpenItems] = useState<number[]>([0]);
  const [searchQuery, setSearchQuery] = useState('');
  const [activeCategory, setActiveCategory] = useState('all');

  const toggleItem = (index: number) => {
    setOpenItems(prev => 
      prev.includes(index) 
        ? prev.filter(i => i !== index)
        : [...prev, index]
    );
  };

  const categories = [
    { id: 'all', name: 'All Questions', icon: HelpCircle, count: 12 },
    { id: 'community', name: 'Community Life', icon: Home, count: 4 },
    { id: 'care', name: 'Care Services', icon: Heart, count: 3 },
    { id: 'financial', name: 'Financial', icon: Shield, count: 3 },
    { id: 'activities', name: 'Activities', icon: Users, count: 2 }
  ];

  const faqs = [
    {
      id: 1,
      question: 'What levels of care do you offer?',
      answer: 'We offer a full continuum of care including independent living, assisted living, memory care, and skilled nursing. Each resident receives a personalized care plan that adapts as their needs change, ensuring they always receive the right level of support.',
      category: 'care',
      popular: true
    },
    {
      id: 2,
      question: 'How do I schedule a tour?',
      answer: 'You can schedule a tour by calling us at (555) 123-4567, using our online scheduling form, or emailing tours@americas.care. We offer in-person and virtual tour options 7 days a week, including evenings and weekends.',
      category: 'community',
      popular: true
    },
    {
      id: 3,
      question: 'What are the costs and payment options?',
      answer: 'Costs vary by location and level of care. We accept private pay, long-term care insurance, and veterans benefits. Our financial counselors can help you understand your options and create a payment plan that works for your budget.',
      category: 'financial',
      popular: true
    },
    {
      id: 4,
      question: 'Can residents bring their own furniture?',
      answer: 'Absolutely! We encourage residents to personalize their space with their own furniture and belongings. Each private room includes ample space for personal items, making it feel truly like home.',
      category: 'community',
      popular: false
    },
    {
      id: 5,
      question: 'What types of activities do you offer?',
      answer: 'We offer 50+ weekly activities including exercise classes, art workshops, live music, book clubs, gardening, cooking classes, and social events. Our activities directors work with residents to create engaging programs that match their interests.',
      category: 'activities',
      popular: false
    },
    {
      id: 6,
      question: 'Is transportation provided?',
      answer: 'Yes, we provide scheduled transportation for medical appointments, shopping trips, and group outings. Our vehicles are wheelchair accessible and accompanied by trained staff.',
      category: 'community',
      popular: false
    },
    {
      id: 7,
      question: 'What is your staff-to-resident ratio?',
      answer: 'We maintain a 1:6 staff-to-resident ratio during daytime hours and 1:8 at night, exceeding industry standards. All staff are trained in senior care, first aid, and emergency response.',
      category: 'care',
      popular: false
    },
    {
      id: 8,
      question: 'Are meals included?',
      answer: 'Yes, three delicious meals are included daily, prepared by our executive chefs. We accommodate all dietary needs including low-sodium, diabetic-friendly, vegetarian, and texture-modified diets.',
      category: 'community',
      popular: false
    },
    {
      id: 9,
      question: 'Do you accept Medicare or Medicaid?',
      answer: 'We accept Medicare for skilled nursing services. For long-term care, we work with long-term care insurance providers and offer private pay options. Our financial team can help you understand your coverage.',
      category: 'financial',
      popular: false
    },
    {
      id: 10,
      question: 'What happens if my loved one needs more care?',
      answer: 'We conduct regular assessments and can adjust care plans as needs change. Our continuum of care model means residents can transition to higher levels of care within the same community, providing peace of mind.',
      category: 'care',
      popular: false
    },
    {
      id: 11,
      question: 'Can family members visit anytime?',
      answer: 'Yes! We encourage family involvement and have open visiting hours. We also offer family dining options, special events for families, and a private family room for gatherings.',
      category: 'community',
      popular: false
    },
    {
      id: 12,
      question: 'What safety measures are in place?',
      answer: 'We have 24/7 security, emergency call systems in every room, secured entrances, and staff trained in emergency response. Our buildings are fully sprinklered and regularly inspected.',
      category: 'community',
      popular: false
    }
  ];

  const filteredFaqs = faqs.filter(faq => {
    const matchesCategory = activeCategory === 'all' || faq.category === activeCategory;
    const matchesSearch = searchQuery === '' || 
      faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
      faq.answer.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  const popularFaqs = faqs.filter(faq => faq.popular);

  return (
    <section className="py-24 bg-gradient-to-b from-white to-gray-50 relative overflow-hidden" id='faqs'>
      {/* Decorative Background */}
      <div className="absolute inset-0">
        <div className="absolute top-0 right-0 w-96 h-96 bg-emerald-100 rounded-full blur-3xl opacity-20 translate-x-1/2 -translate-y-1/2"></div>
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-amber-100 rounded-full blur-3xl opacity-20 -translate-x-1/2 translate-y-1/2"></div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        
        {/* Header */}
        <div className="text-center max-w-3xl mx-auto mb-12">
          <div className="inline-flex items-center gap-2 bg-emerald-50 px-4 py-2 rounded-full mb-4">
            <HelpCircle className="w-4 h-4 text-emerald-600" />
            <span className="text-sm font-semibold text-emerald-700 uppercase tracking-wider">
              Got Questions?
            </span>
          </div>
          
          <h2 className="text-4xl md:text-5xl font-light text-gray-900 mb-4">
            We Have{' '}
            <span className="font-bold bg-gradient-to-r from-emerald-600 to-amber-500 bg-clip-text text-transparent">
              Answers
            </span>
          </h2>
          
          <p className="text-lg text-gray-600">
            Find answers to common questions about our communities, care services, 
            and how we can help your loved one thrive.
          </p>
        </div>

        {/* Search Bar */}
        <div className="max-w-2xl mx-auto mb-8">
          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-r from-emerald-600 to-amber-500 rounded-xl opacity-20 group-hover:opacity-30 transition-opacity blur"></div>
            <div className="relative flex items-center">
              <Search className="absolute left-4 w-5 h-5 text-gray-400" />
              <input
                type="text"
                placeholder="Search questions..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-12 pr-4 py-4 bg-white border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent shadow-lg"
              />
            </div>
          </div>
        </div>

        {/* Category Tabs */}
        <div className="flex flex-wrap justify-center gap-2 mb-10">
          {categories.map((category) => {
            const Icon = category.icon;
            const isActive = activeCategory === category.id;
            
            return (
              <button
                key={category.id}
                onClick={() => setActiveCategory(category.id)}
                className={`
                  flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all
                  ${isActive 
                    ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-600/30 scale-105' 
                    : 'bg-white text-gray-600 hover:bg-emerald-50 border border-gray-200'
                  }
                `}
              >
                <Icon className="w-4 h-4" />
                {category.name}
                <span className={`
                  text-xs px-1.5 py-0.5 rounded-full
                  ${isActive ? 'bg-white/20' : 'bg-gray-100 text-gray-500'}
                `}>
                  {category.count}
                </span>
              </button>
            );
          })}
        </div>

        {/* Popular Questions */}
        {searchQuery === '' && activeCategory === 'all' && (
          <div className="mb-10">
            <div className="flex items-center gap-2 mb-4">
              <Sparkles className="w-5 h-5 text-amber-500" />
              <h3 className="text-lg font-semibold text-gray-900">Most Asked Questions</h3>
            </div>
            <div className="grid md:grid-cols-3 gap-3">
              {popularFaqs.map((faq) => (
                <button
                  key={faq.id}
                  onClick={() => {
                    setActiveCategory(faq.category);
                    setSearchQuery('');
                    if (!openItems.includes(faq.id)) {
                      toggleItem(faq.id);
                    }
                  }}
                  className="group text-left bg-white p-4 rounded-xl border border-gray-100 hover:border-emerald-200 hover:shadow-md transition-all"
                >
                  <p className="text-sm font-medium text-gray-900 group-hover:text-emerald-600 transition-colors">
                    {faq.question}
                  </p>
                  <span className="text-xs text-gray-400 mt-2 inline-block group-hover:text-emerald-600">
                    Click to view answer →
                  </span>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* FAQ Accordion */}
        <div className="max-w-3xl mx-auto">
          {filteredFaqs.length > 0 ? (
            <div className="space-y-3">
              {filteredFaqs.map((faq, index) => {
                const isOpen = openItems.includes(faq.id);
                const category = categories.find(c => c.id === faq.category);
                const CategoryIcon = category?.icon || HelpCircle;

                return (
                  <div
                    key={faq.id}
                    className={`
                      bg-white rounded-xl border transition-all duration-300
                      ${isOpen 
                        ? 'border-emerald-200 shadow-lg' 
                        : 'border-gray-100 shadow-sm hover:shadow-md hover:border-gray-200'
                      }
                    `}
                  >
                    {/* Question */}
                    <button
                      onClick={() => toggleItem(faq.id)}
                      className="w-full text-left px-6 py-4 flex items-center justify-between gap-4"
                    >
                      <div className="flex items-start gap-3 flex-1">
                        <div className={`
                          w-8 h-8 rounded-lg flex items-center justify-center shrink-0 mt-0.5
                          ${isOpen ? 'bg-emerald-100' : 'bg-gray-100'}
                          transition-colors
                        `}>
                          <CategoryIcon className={`w-4 h-4 ${isOpen ? 'text-emerald-600' : 'text-gray-500'}`} />
                        </div>
                        <span className="text-base font-medium text-gray-900 flex-1">
                          {faq.question}
                        </span>
                      </div>
                      <div className={`
                        w-8 h-8 rounded-full flex items-center justify-center transition-all
                        ${isOpen ? 'bg-emerald-600 rotate-180' : 'bg-gray-100'}
                      `}>
                        <ChevronDown className={`w-4 h-4 ${isOpen ? 'text-white' : 'text-gray-500'}`} />
                      </div>
                    </button>

                    {/* Answer */}
                    {isOpen && (
                      <div className="px-6 pb-4 pt-2 border-t border-gray-100">
                        <div className="flex gap-3 pl-11">
                          <p className="text-gray-600 text-sm leading-relaxed flex-1">
                            {faq.answer}
                          </p>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="text-center py-12 bg-white rounded-xl border border-gray-100">
              <HelpCircle className="w-12 h-12 text-gray-300 mx-auto mb-3" />
              <p className="text-gray-500">No questions match your search.</p>
              <button
                onClick={() => {
                  setSearchQuery('');
                  setActiveCategory('all');
                }}
                className="mt-2 text-emerald-600 hover:text-emerald-700 font-medium"
              >
                Clear search
              </button>
            </div>
          )}
        </div>

        {/* Still Have Questions */}
        <div className="mt-16 max-w-4xl mx-auto">
          <div className="bg-gradient-to-r from-emerald-700 to-emerald-600 rounded-3xl p-8 text-white relative overflow-hidden">
            {/* Decorative elements */}
            <div className="absolute inset-0 opacity-10">
              <div className="absolute top-0 right-0 w-64 h-64 bg-white rounded-full blur-3xl"></div>
              <div className="absolute bottom-0 left-0 w-64 h-64 bg-amber-400 rounded-full blur-3xl"></div>
            </div>

            <div className="relative flex flex-col md:flex-row items-center justify-between gap-6">
              <div className="flex items-center gap-4">
                <div className="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm">
                  <MessageCircle className="w-8 h-8 text-white" />
                </div>
                <div>
                  <h4 className="text-xl font-semibold mb-1">Still have questions?</h4>
                  <p className="text-emerald-100">Our team is here to help you 7 days a week</p>
                </div>
              </div>

              <div className="flex flex-col sm:flex-row gap-3">
                <Link
                  href="tel:+15551234567"
                  className="group px-6 py-3 bg-white text-emerald-600 rounded-xl hover:bg-emerald-50 transition-all shadow-lg hover:shadow-xl flex items-center gap-2"
                >
                  <Phone className="w-4 h-4" />
                  <span className="font-semibold">Call Us</span>
                </Link>
                <Link
                  href="/contact"
                  className="group px-6 py-3 bg-white/20 backdrop-blur-sm text-white rounded-xl hover:bg-white/30 transition-all border border-white/30 flex items-center gap-2"
                >
                  <Mail className="w-4 h-4" />
                  <span className="font-semibold">Email Us</span>
                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                </Link>
              </div>
            </div>
          </div>
        </div>

        {/* Quick Links */}
        {/* <div className="mt-12 flex flex-wrap justify-center items-center gap-6 text-sm">
          <span className="text-gray-400">Quick links:</span>
          {[
            { label: 'Pricing Guide', icon: FileText },
            { label: 'Virtual Tour', icon: Home },
            { label: 'Care Services', icon: Heart },
            { label: 'Family Resources', icon: Users }
          ].map((link, idx) => {
            const Icon = link.icon;
            return (
              <Link
                key={idx}
                href="#"
                className="flex items-center gap-1 text-gray-600 hover:text-emerald-600 transition-colors"
              >
                <Icon className="w-4 h-4" />
                {link.label}
              </Link>
            );
          })}
        </div> */}
      </div>
    </section>
  );
};

export default FAQSection;