import room3Image from "../assets/room-3.jpg";

const HesitationsSection = () => {
  const faqs = [
    {
      question: "What makes your accommodation special?",
      answer: "Our unique blend of luxury, personalized service, and attention to detail sets us apart from others."
    },
    {
      question: "Do you offer flexible booking options?",
      answer: "Yes, we provide flexible booking with easy cancellation policies and modification options."
    },
    {
      question: "What amenities are included?",
      answer: "All rooms include premium amenities like high-speed WiFi, smart TV, climate control, and 24/7 room service."
    },
    {
      question: "Is parking available?",
      answer: "We offer complimentary valet parking for all our guests with secure underground facilities."
    },
    {
      question: "Do you have dining options?",
      answer: "Our award-winning restaurant offers gourmet dining with international and local cuisine options."
    }
  ];

  return (
    <section className="section-dark py-20 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <div className="space-y-8">
            <h2 className="text-6xl font-light text-[hsl(var(--dark-foreground))]">
              hesitations<span className="text-secondary">?</span>
            </h2>
            
            <div className="space-y-6">
              {faqs.map((faq, index) => (
                <div key={index} className="border-b border-[hsl(var(--dark-muted))]/20 pb-4">
                  <h3 className="text-lg font-medium text-[hsl(var(--dark-foreground))] mb-2">
                    {faq.question}
                  </h3>
                  <p className="text-[hsl(var(--dark-muted))] text-sm leading-relaxed">
                    {faq.answer}
                  </p>
                </div>
              ))}
            </div>
            
            <button className="btn-secondary bg-secondary text-secondary-foreground hover:bg-secondary/90">
              Contact Us
            </button>
          </div>
          
          <div className="relative">
            <div className="card-elevated bg-[hsl(var(--dark-muted))] p-0 overflow-hidden rounded-3xl">
              <img 
                src={room3Image}
                alt="Hesitations resolved with quality service"
                className="w-full h-96 object-cover"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HesitationsSection;