export default function Destinations() {
  const regions = [
    { name: 'BODRUM', image: 'https://images.unsplash.com/photo-1544650039-33827ca79f06?q=80&w=2070&auto=format&fit=crop' },
    { name: 'GÖCEK', image: 'https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?q=80&w=2071&auto=format&fit=crop' },
    { name: 'GREEK ISLANDS', image: 'https://images.unsplash.com/photo-1533105079780-92b9be482077?q=80&w=2068&auto=format&fit=crop' }
  ];

  return (
    <section className="py-24 bg-white px-8">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <span className="text-gold luxury-text text-sm mb-4 block">The Journey</span>
          <h2 className="text-midnight text-5xl mb-6">Unforgettable Destinations</h2>
          <p className="text-gray-500 max-w-2xl mx-auto">
            Explore the most exclusive bays and historical harbors of the Aegean and Mediterranean.
            From the turquoise waters of Bodrum to the secluded islands of Greece.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-12 gap-4 h-[600px]">
          <div className="md:col-span-8 relative overflow-hidden group">
            <img src={regions[0].image} className="w-full h-full object-cover smooth-transition group-hover:scale-105" alt={regions[0].name} />
            <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
              <h3 className="text-white text-4xl tracking-widest font-serif">{regions[0].name}</h3>
            </div>
          </div>
          <div className="md:col-span-4 grid grid-rows-2 gap-4">
            {regions.slice(1).map((region) => (
              <div key={region.name} className="relative overflow-hidden group">
                <img src={region.image} className="w-full h-full object-cover smooth-transition group-hover:scale-105" alt={region.name} />
                <div className="absolute inset-0 bg-black/30 flex items-center justify-center">
                  <h3 className="text-white text-2xl tracking-widest font-serif">{region.name}</h3>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}