import Link from "next/link";
import { ChevronRight, Crown } from "lucide-react";
import { HeroImageSlider } from "@/components/home/HeroImageSlider";
import { BookingWidget } from "@/components/home/BookingWidget";
import { BenefitsSection } from "@/components/home/BenefitsSection";
import { PopularDestinations } from "@/components/home/PopularDestinations";
import { PromoBanner } from "@/components/home/PromoBanner";
import { TourSection } from "@/components/home/TourSection";
import { WhyChooseUs } from "@/components/home/WhyChooseUs";
import { ArticleSection } from "@/components/home/ArticleSection";
import { PartnersSection } from "@/components/home/PartnersSection";
import { TestimonialsSection } from "@/components/home/TestimonialsSection";

import { ContactSection } from "@/components/home/ContactSection";
import { NewsletterSection } from "@/components/home/NewsletterSection";
import { MembershipSection } from "@/components/home/MembershipSection";
import { getSiteSettings } from "@/lib/site-settings";
import { prisma } from "@/lib/prisma";

export default async function HomePage() {
  const [siteSetting, heroImages, tours, articles, destinations, promo, clients, testimonials] =
    await Promise.all([
      getSiteSettings(),
      prisma.heroImage.findMany({ orderBy: { sortOrder: "asc" } }),
      prisma.tour.findMany({
        orderBy: [{ isFeatured: "desc" }, { sortOrder: "asc" }],
      }),
      prisma.article.findMany({
        orderBy: [{ isFeatured: "desc" }, { sortOrder: "asc" }],
      }),
      prisma.destination.findMany({
        where: { isFeatured: true },
        orderBy: { sortOrder: "asc" },
      }),
      prisma.promo.findFirst({
        where: { isActive: true },
        orderBy: { createdAt: "desc" },
      }),

      prisma.client.findMany({
        orderBy: [{ isFeatured: "desc" }, { sortOrder: "asc" }],
      }),
      prisma.testimonial.findMany({
        where: { isFeatured: true },
        orderBy: { sortOrder: "asc" },
      }),
    ]);

  return (
    <>
      <section className="relative h-[85vh] md:h-[90vh] overflow-hidden text-white">
        <HeroImageSlider images={heroImages.map((image) => image.imageUrl)} />
        <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" />
        <div className="relative z-10 mx-auto flex h-full max-w-6xl flex-col justify-center px-6 md:px-10">
          <p className="text-sm font-bold tracking-[0.2em] text-merah-ranata uppercase mb-2">
            RANATA TOUR
          </p>
          <h1 className="text-4xl md:text-6xl font-bold leading-[1.1] max-w-2xl mb-6">
            {siteSetting?.homeHeroTitle ?? (
              <>
                Jelajahi Dunia Bersama <br />
                <span className="text-merah-ranata">Ranata Tour</span>
              </>
            )}
          </h1>
          <p className="max-w-xl text-base text-white/90 md:text-lg mb-8 leading-relaxed">
            {siteSetting?.homeHeroSubtitle ??
              "Paket tour dan tiket pesawat terbaik untuk perjalanan Anda yang tak terlupakan."}
          </p>
          <div className="flex flex-wrap items-center gap-4">
            <Link
              href="/tour"
              className="inline-flex items-center gap-2 rounded-full bg-merah-ranata px-8 py-3.5 text-sm font-bold text-white transition hover:bg-merah-hover shadow-lg shadow-merah-ranata/30"
            >
              Jelajahi Paket Tour
              <ChevronRight className="h-4 w-4" />
            </Link>
            <Link
              href="#membership-tiers"
              className="group inline-flex items-center gap-2 rounded-full bg-black/40 backdrop-blur-md px-8 py-3.5 text-sm font-bold text-white transition-all duration-300 hover:bg-black/60 border border-merah-ranata shadow-[0_0_15px_rgba(200,30,30,0.3)] hover:shadow-[0_0_20px_rgba(200,30,30,0.6)]"
            >
              <Crown className="h-4 w-4 text-white/80 group-hover:text-white transition-colors" />
              Lihat Tier Membership
              <ChevronRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>

      {/* Floating Booking Widget */}
      <BookingWidget />

      <BenefitsSection />

      <PopularDestinations destinations={destinations} />

      {promo && <PromoBanner promo={promo} />}

      <TourSection tours={tours} />

      {/* Full width Articles */}
      <section className="bg-bg-white py-20 relative overflow-hidden">
        <div className="absolute top-0 right-0 -mt-20 -mr-20 w-[600px] h-[600px] bg-red-50 rounded-full blur-3xl opacity-50 pointer-events-none" />
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
          <ArticleSection articles={articles} />
        </div>
      </section>

      <WhyChooseUs />

      <MembershipSection />

      {testimonials.length > 0 && (
        <section className="bg-slate-50 py-20">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <TestimonialsSection testimonials={testimonials} />
          </div>
        </section>
      )}

      <PartnersSection clients={clients} />

      <ContactSection />

      <NewsletterSection />
    </>
  );
}