import { setRequestLocale } from 'next-intl/server';
import { HeroSlider } from '@/components/home/HeroSlider';
import { turlar, aktiviteler } from '@/lib/data';
import { TourCard } from '@/components/ui/TourCard';
import { Link } from '@/i18n/routing';
import { ArrowRight, Sparkles } from 'lucide-react';

export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  setRequestLocale(locale);
  
  return (
    <div className="flex flex-col">
      <HeroSlider />

      {/* Featured Tours Section */}
      <section className="py-24 bg-sandwhite-100 relative overflow-hidden">
        {/* Background decorative elements */}
        <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
          <div className="absolute -top-[20%] -right-[10%] w-[50%] h-[50%] rounded-full bg-turquoise-500/5 blur-[120px]" />
          <div className="absolute top-[60%] -left-[10%] w-[40%] h-[40%] rounded-full bg-vibrantorange-500/5 blur-[100px]" />
        </div>

        <div className="container mx-auto px-4 relative z-10">
          <div className="text-center mb-16 flex flex-col items-center">
            <div className="inline-flex items-center justify-center p-3 bg-white rounded-2xl shadow-sm mb-4">
              <Sparkles className="w-6 h-6 text-turquoise-500" />
            </div>
            <h2 className="text-4xl md:text-5xl font-extrabold text-deepblue-900 mb-6 tracking-tight">Öne Çıkan Turlar</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Unutulmaz anılar biriktireceğiniz, özenle seçilmiş tur programlarımızı keşfedin ve hayalinizdeki tatili yaşayın.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {turlar.slice(0, 4).map((tour, index) => (
              <TourCard key={tour.id} item={tour} basePath="/turlar" index={index} />
            ))}
          </div>
          <div className="text-center mt-16">
            <Link href="/turlar" className="inline-flex items-center gap-2 px-8 py-4 bg-white border border-gray-200 text-deepblue-900 hover:text-turquoise-500 hover:border-turquoise-500 rounded-2xl font-bold transition-all shadow-sm hover:shadow-md group">
              <span>Tüm Turları Görüntüle</span>
              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </Link>
          </div>
        </div>
      </section>

      {/* Featured Activities Section */}
      <section className="py-24 bg-white relative">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-extrabold text-deepblue-900 mb-6 tracking-tight">Popüler Aktiviteler</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Tatilinize heyecan katacak, birbirinden eğlenceli ve adrenalin dolu aktiviteler.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {aktiviteler.slice(0, 4).map((activity, index) => (
              <TourCard key={activity.id} item={activity} basePath="/aktiviteler" index={index} />
            ))}
          </div>
          <div className="text-center mt-16">
            <Link href="/aktiviteler" className="inline-flex items-center gap-2 px-8 py-4 bg-deepblue-900 text-white hover:bg-turquoise-500 rounded-2xl font-bold transition-colors shadow-md hover:shadow-xl group">
              <span>Tüm Aktiviteleri Keşfet</span>
              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </Link>
          </div>
        </div>
      </section>

      {/* Intro / About Summary */}
      <section className="py-28 bg-deepblue-900 relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1542837265-728b971a812d')] bg-cover bg-center opacity-10 mix-blend-overlay" />
        <div className="container mx-auto px-4 max-w-4xl relative z-10 text-center">
          <h2 className="text-4xl md:text-6xl font-extrabold text-white mb-8 tracking-tight">Sınırları Aşan Bir Deneyim</h2>
          <p className="text-xl md:text-2xl text-gray-300 leading-relaxed mb-12 font-light">
            Uzman kadroya sahip olan şirketimiz; deniz turları, kara turları ve birbirinden heyecanlı aktiviteler ile siz değerli misafirlerimize yıllardır unutulmaz bir tatil vaat ediyor. 
          </p>
          <Link href="/hakkimizda" className="inline-flex items-center gap-2 px-10 py-5 bg-gradient-to-r from-vibrantorange-500 to-orange-400 hover:from-orange-400 hover:to-vibrantorange-500 text-white rounded-2xl font-bold text-lg transition-all shadow-[0_0_40px_rgba(249,115,22,0.4)] hover:shadow-[0_0_60px_rgba(249,115,22,0.6)] hover:-translate-y-1">
            Bizimle Tanışın
          </Link>
        </div>
      </section>
    </div>
  );
}