import { ChevronDown } from "lucide-react";
import { useState } from "react";

const QueriesSection = () => {
  const [openFaq, setOpenFaq] = useState(0);
  
  const faqs = [
    {
      question: "What is included in the booking?",
      answer: "All bookings include room accommodation, complimentary WiFi, 24/7 concierge service, and access to hotel facilities. Breakfast and additional services may vary by property."
    },
    {
      question: "Can I cancel or modify my reservation?",
      answer: "Most reservations can be cancelled or modified up to 24 hours before check-in without penalty. Please check the specific cancellation policy for your selected property."
    },
    {
      question: "Do you offer group booking discounts?",
      answer: "Yes, we offer special rates for group bookings of 5 or more rooms. Contact our group sales team for customized packages and exclusive rates."
    },
    {
      question: "What payment methods do you accept?",
      answer: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers. Payment is secure and encrypted for your protection."
    }
  ];

  return (
    <section className="py-16 lg:py-24">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Title */}
        <div className="text-center mb-16">
          <h2 className="text-section-title">Common Queries</h2>
          <p className="text-muted-foreground text-lg mt-4">
            Find answers to frequently asked questions about our services
          </p>
        </div>
        
        {/* FAQ List */}
        <div className="space-y-4">
          {faqs.map((faq, index) => (
            <div key={index} className="card-elevated">
              <button
                onClick={() => setOpenFaq(openFaq === index ? -1 : index)}
                className="w-full p-6 text-left flex items-center justify-between hover:bg-muted/20 transition-colors"
              >
                <h3 className="text-lg font-medium pr-4">{faq.question}</h3>
                <ChevronDown 
                  className={`w-5 h-5 text-muted-foreground transition-transform duration-200 ${
                    openFaq === index ? 'rotate-180' : ''
                  }`}
                />
              </button>
              
              <div className={`overflow-hidden transition-all duration-300 ${
                openFaq === index ? 'max-h-96 pb-6' : 'max-h-0'
              }`}>
                <div className="px-6">
                  <p className="text-muted-foreground leading-relaxed">
                    {faq.answer}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
        
        {/* Contact CTA */}
        <div className="text-center mt-12">
          <p className="text-muted-foreground mb-4">
            Still have questions? We're here to help.
          </p>
          <button className="btn-secondary">
            Contact Support
          </button>
        </div>
      </div>
    </section>
  );
};

export default QueriesSection;