import Navbar from '@/components/Navbar';
import Hero from '@/components/Hero';
import VillaCard from '@/components/VillaCard';
import Footer from '@/components/Footer';
import { villas } from '@/data/villas';

export default function HomePage() {
  return (
    <main className="min-h-screen">
      <Navbar />
      <Hero />
      
      {/* Featured Villas Section */}
      <section id="villas" className="py-24 px-6 bg-bone">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <span className="text-salmakis-blue font-bold tracking-[0.3em] uppercase text-xs mb-4 block">
              Özel Seçki
            </span>
            <h2 className="text-4xl md:text-6xl font-serif text-aegean-dark mb-6">
              Lüks Konaklama Seçenekleri
            </h2>
            <div className="w-24 h-[1px] bg-aegean-dark/20 mx-auto" />
          </div>

          <div className="flex flex-wrap justify-center gap-8 md:gap-12">
            {villas.map((villa, index) => (
              <div key={villa.id} className="w-full md:w-[calc(50%-1.5rem)] lg:w-[calc(33.33%-2.5rem)] max-w-sm">
                <VillaCard villa={villa} index={index} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About Preview Section */}
      <section className="py-24 px-6 bg-aegean-dark text-bone overflow-hidden relative">
        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div>
            <h2 className="text-4xl md:text-6xl font-serif mb-8 leading-tight">
              Ege'nin Kalbinde <br />
              Unutulmaz Bir Tatil
            </h2>
            <p className="text-bone/60 text-lg mb-10 leading-relaxed max-w-lg">
              Salmakis Villas olarak, Bodrum'un en özel koylarında, size özel havuzlu ve lüks donanımlı villalarımızla hayalinizdeki tatili gerçeğe dönüştürüyoruz.
            </p>
            <div className="flex space-x-12">
              <div>
                <span className="block text-3xl font-serif text-salmakis-blue mb-1">10+</span>
                <span className="text-[10px] uppercase font-bold tracking-widest opacity-50">Özel Villa</span>
              </div>
              <div>
                <span className="block text-3xl font-serif text-salmakis-blue mb-1">500+</span>
                <span className="text-[10px] uppercase font-bold tracking-widest opacity-50">Mutlu Misafir</span>
              </div>
              <div>
                <span className="block text-3xl font-serif text-salmakis-blue mb-1">12 Ay</span>
                <span className="text-[10px] uppercase font-bold tracking-widest opacity-50">Kesintisiz Hizmet</span>
              </div>
            </div>
          </div>
          <div className="relative">
             <div className="aspect-video rounded-2xl overflow-hidden border border-bone/10 shadow-2xl skew-y-3 hover:skew-y-0 transition-transform duration-700">
                <img 
                  src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=2070&auto=format&fit=crop" 
                  className="w-full h-full object-cover"
                  alt="Background"
                />
             </div>
             <div className="absolute -bottom-8 -left-8 w-32 h-32 bg-salmakis-blue/20 rounded-full blur-3xl" />
          </div>
        </div>
      </section>

      <Footer />
    </main>
  );
}