'use client';

import { useState } from 'react';
import { ChevronDown, ChevronUp, GraduationCap, Globe, Award, Users, BookOpen, HelpCircle, Shield, Mail } from 'lucide-react';

interface FAQS {
  question: string;
  answer: string;
}

interface FAQItem {
  faqs: FAQS[]
}

const FAQSection = ({faqs}: FAQItem) => {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const handleAccordionClick = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <section className="relative py-20 bg-linear-to-b from-gray-50 to-white overflow-hidden">

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        {/* Header Section */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-linear-to-r from-teal-600 to-blue-500 mb-6 shadow-lg">
            <HelpCircle className="w-8 h-8 text-white" />
          </div>
          
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Frequently Asked{' '}
            <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
              Questions
            </span>
          </h2>
          
          <div className="w-24 h-1 bg-linear-to-r from-teal-600 to-blue-500 mx-auto mb-6 rounded-full"></div>
          
          <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            Find answers to common questions about studying abroad with our expert consultants
          </p>
        </div>

        {/* FAQ Grid - 2 per row on desktop */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-6xl mx-auto items-start">
          {faqs.map((faq, index) => {
            const isOpen = openIndex === index;
            
            return (
              <div 
                key={index} 
                className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden"
              >
                <button
                  onClick={() => handleAccordionClick(index)}
                  className={`w-full p-6 text-left flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-teal-600/20 ${
                    isOpen ? 'rounded-t-2xl' : 'rounded-2xl'
                  } ${isOpen ? 'bg-linear-to-r from-teal-50/50 to-blue-50/50' : 'hover:bg-gray-50/50'}`}
                  aria-expanded={isOpen}
                  aria-controls={`faq-answer-${index}`}
                >
                  <div className="flex items-start space-x-4 flex-1">
                    
                    
                    <div className="flex-1 min-w-0">
                      <h3 className={`font-bold text-lg leading-tight ${
                        isOpen ? 'text-teal-600' : 'text-gray-900'
                      }`}>
                        {faq.question}
                      </h3>
                    </div>
                  </div>
                  
                  <div className="shrink-0 ml-4">
                    <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                      isOpen 
                        ? 'bg-linear-to-r from-teal-600 to-blue-500 text-white' 
                        : 'bg-gray-100 text-gray-600'
                    }`}>
                      {isOpen ? (
                        <ChevronUp className="w-5 h-5" />
                      ) : (
                        <ChevronDown className="w-5 h-5" />
                      )}
                    </div>
                  </div>
                </button>
                
                <div
                  id={`faq-answer-${index}`}
                  className={`overflow-hidden transition-all duration-300 ${
                    isOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
                  }`}
                  style={{
                    // Fix for flex/grid layout issue
                    visibility: isOpen ? 'visible' : 'hidden',
                    display: isOpen ? 'block' : 'none'
                  }}
                  aria-hidden={!isOpen}
                >
                  <div className="p-6 pt-0">
                    <div>
                      <div className="w-full h-px bg-linear-to-r from-teal-600/20 to-blue-500/20 mb-4"></div>
                      <p className="text-gray-600 leading-relaxed">
                        {faq.answer}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        
      </div>

      <style jsx>{`
        @keyframes float {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-10px); }
        }
        
        .animate-float {
          animation: float 20s ease-in-out infinite;
        }
        
        /* Fix for the grid layout issue */
        @media (min-width: 768px) {
          .grid-cols-2 > * {
            min-height: 0; /* Important fix for grid items */
          }
        }
        
        /* Respect user's motion preferences */
        @media (prefers-reduced-motion: reduce) {
          .animate-float {
            animation: none;
          }
        }
      `}</style>
    </section>
  );
};

export default FAQSection;