import { PageHero } from "@/components/sections/PageHero";
import { TourListingClient } from "@/components/tour/TourListingClient";
import { NewsletterSection } from "@/components/tour/NewsletterSection";
import { getSiteSettings } from "@/lib/site-settings";
import { prisma } from "@/lib/prisma";
import { Compass } from "lucide-react";

export default async function TourPage() {
  const [siteSetting, tours] = await Promise.all([
    getSiteSettings(),
    prisma.tour.findMany({
      orderBy: [{ isFeatured: "desc" }, { sortOrder: "asc" }],
    }),
  ]);

  return (
    <>
      <PageHero
        imageUrl="https://images.unsplash.com/photo-1488646953014-85cb44e25828?auto=format&fit=crop&w=1600&q=80"
        kicker={
          <div className="flex items-center gap-2">
            <Compass className="w-4 h-4" />
            <span>Jelajah keindahan Indonesia</span>
          </div>
        }
        title={siteSetting?.tourHeroTitle}
        subtitle={siteSetting?.tourHeroSubtitle}
        defaultTitle="Temukan Paket Tour Terbaik"
        defaultSubtitle="Pilih paket perjalanan sesuai impian Anda. Destinasi menakjubkan, harga terbaik, pengalaman tak terlupakan."
      />

      <section className="bg-[#fcfdfd] pb-24 relative">
        <div className="mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8">
          <TourListingClient tours={tours} />
          
          <NewsletterSection />
        </div>
      </section>
    </>
  );
}