import Image from "next/image";
import Link from "next/link";
import { ArrowRight, ShieldCheck, Sparkles, Star } from "lucide-react";
import heroVilla from "@/assets/hero-villa.jpg";
import capeTown from "@/assets/dest-capetown.jpg";
import kyoto from "@/assets/dest-kyoto.jpg";
import lisbon from "@/assets/dest-lisbon.jpg";
import marrakech from "@/assets/dest-marrakech.jpg";
import balloon from "@/assets/exp-balloon.jpg";
import chef from "@/assets/exp-chef.jpg";
import { ListingCard } from "@/components/site/listing-card";
import { SearchBar } from "@/components/site/search-bar";
import { loadListings } from "@/lib/listings";

const destinations = [
  ["Cape Town", "South Africa", capeTown], ["Kyoto", "Japan", kyoto],
  ["Lisbon", "Portugal", lisbon], ["Marrakech", "Morocco", marrakech],
] as const;

export default async function HomePage() {
  const featuredListings = await loadListings({ featured: true, limit: 3 });
  return (
    <>
      <section className="relative min-h-[680px] overflow-hidden bg-ink text-white">
        <Image src={heroVilla} alt="Sunlit villa overlooking the ocean" fill priority className="object-cover opacity-65" sizes="100vw" />
        <div className="absolute inset-0 bg-gradient-to-r from-ink/90 via-ink/45 to-transparent" />
        <div className="relative mx-auto flex min-h-[680px] max-w-7xl flex-col justify-center px-5 pb-20 pt-16 sm:px-8">
          <span className="mb-5 flex w-fit items-center gap-2 rounded-full border border-white/25 bg-white/10 px-4 py-2 text-xs font-bold uppercase tracking-[.18em] backdrop-blur"><Sparkles size={15} /> Stay somewhere unforgettable</span>
          <h1 className="max-w-3xl text-balance text-5xl font-bold leading-[1.02] sm:text-7xl">The world feels closer from the right place.</h1>
          <p className="mt-6 max-w-xl text-lg leading-8 text-white/80">Discover character-filled homes, remarkable hosts, and experiences that turn a trip into your story.</p>
          <div className="mt-10 max-w-5xl"><SearchBar /></div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-5 py-20 sm:px-8">
        <div className="flex items-end justify-between gap-6">
          <div><p className="text-sm font-bold uppercase tracking-[.18em] text-ember">Handpicked for you</p><h2 className="mt-3 text-3xl font-bold sm:text-4xl">Stays worth traveling for</h2></div>
          <Link href="/listings" className="hidden items-center gap-2 font-bold text-ember sm:flex">View all <ArrowRight size={18} /></Link>
        </div>
        <div className="mt-9 grid gap-6 md:grid-cols-2 lg:grid-cols-3">{featuredListings.map((listing) => <ListingCard key={listing.id} listing={listing} />)}</div>
      </section>

      <section className="bg-cocoa py-20 text-white">
        <div className="mx-auto max-w-7xl px-5 sm:px-8">
          <p className="text-sm font-bold uppercase tracking-[.18em] text-ember-soft">Find your next favorite place</p><h2 className="mt-3 text-3xl font-bold sm:text-4xl">Explore by destination</h2>
          <div className="mt-9 grid grid-cols-2 gap-4 lg:grid-cols-4">{destinations.map(([city, country, image]) => (
            <Link href={`/listings?q=${city}`} key={city} className="group relative aspect-[3/4] overflow-hidden rounded-3xl">
              <Image src={image} alt={city} fill className="object-cover transition duration-500 group-hover:scale-105" sizes="25vw" /><div className="absolute inset-0 bg-gradient-ink" />
              <div className="absolute bottom-0 p-5"><h3 className="text-xl font-bold">{city}</h3><p className="text-sm text-white/70">{country}</p></div>
            </Link>
          ))}</div>
        </div>
      </section>

      <section id="experiences" className="mx-auto grid max-w-7xl gap-10 px-5 py-20 sm:px-8 lg:grid-cols-2 lg:items-center">
        <div className="grid grid-cols-2 gap-4"><Image src={balloon} alt="Hot-air balloon experience" className="mt-10 aspect-[3/4] rounded-3xl object-cover" /><Image src={chef} alt="Private chef experience" className="aspect-[3/4] rounded-3xl object-cover" /></div>
        <div className="lg:pl-10"><p className="text-sm font-bold uppercase tracking-[.18em] text-ember">More than a stay</p><h2 className="mt-3 text-4xl font-bold sm:text-5xl">Come home with stories.</h2><p className="mt-6 text-lg leading-8 text-muted-foreground">Meet local makers, learn a family recipe, or see sunrise from above. Every experience is selected for connection and wonder.</p>
          <div className="mt-8 grid gap-4 sm:grid-cols-2"><p className="flex gap-3 font-bold"><ShieldCheck className="text-ember" /> Vetted hosts</p><p className="flex gap-3 font-bold"><Star className="text-ember" /> Guest-loved</p></div>
          <Link href="/listings" className="mt-9 inline-flex items-center gap-2 rounded-xl bg-cocoa px-6 py-3.5 font-bold text-white">Start exploring <ArrowRight size={18} /></Link>
        </div>
      </section>
    </>
  );
}
