import { Shield, Clock, Award, Users } from "lucide-react";
import accommodation1 from "../assets/accommodation-1.jpg";

const SecureSection = () => {
  const features = [
    {
      icon: Shield,
      title: "Secure Booking",
      description: "Your payment and personal information is protected with industry-standard encryption."
    },
    {
      icon: Clock,
      title: "24/7 Support", 
      description: "Round-the-clock customer service to assist you anytime you need help."
    },
    {
      icon: Award,
      title: "Quality Assured",
      description: "All properties are personally verified to meet our high standards."
    },
    {
      icon: Users,
      title: "Trusted by Thousands",
      description: "Join over 50,000 satisfied guests who chose us for their stays."
    }
  ];

  return (
    <section className="section-dark py-16 lg:py-24">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          {/* Content */}
          <div className="space-y-8">
            <div className="space-y-6">
              <h2 className="text-4xl lg:text-5xl font-light leading-tight">
                secure &<br />
                <span className="text-secondary">affordable</span>
              </h2>
              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Experience peace of mind with our secure booking platform and competitive prices. 
                We guarantee the best rates for premium accommodations.
              </p>
            </div>
            
            <div className="grid gap-6">
              {features.map((feature, index) => (
                <div key={index} className="flex items-start space-x-4">
                  <div className="flex-shrink-0 w-12 h-12 bg-secondary/20 rounded-lg flex items-center justify-center">
                    <feature.icon className="w-6 h-6 text-secondary" />
                  </div>
                  <div className="space-y-1">
                    <h3 className="font-medium text-white">{feature.title}</h3>
                    <p className="text-sm text-gray-300">{feature.description}</p>
                  </div>
                </div>
              ))}
            </div>
            
            <button className="bg-secondary text-secondary-foreground hover:bg-secondary/90 px-8 py-3 rounded-lg font-medium transition-all duration-300 hover:shadow-lg">
              Learn More
            </button>
          </div>
          
          {/* Image */}
          <div className="relative">
            <div className="rounded-2xl overflow-hidden shadow-2xl">
              <img 
                src={accommodation1} 
                alt="Secure and comfortable accommodation"
                className="w-full h-[500px] object-cover"
              />
            </div>
            
            {/* Stats overlay */}
            <div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-sm rounded-xl p-6">
              <div className="grid grid-cols-3 gap-4 text-center">
                <div>
                  <div className="text-2xl font-bold text-dark-bg">50K+</div>
                  <div className="text-sm text-gray-600">Happy Guests</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-dark-bg">500+</div>
                  <div className="text-sm text-gray-600">Properties</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-dark-bg">4.9</div>
                  <div className="text-sm text-gray-600">Rating</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SecureSection;