import Image from 'next/image';
import Link from 'next/link';
import { getHomeCategories, getFeaturedProducts, getFeaturedArtisans } from '@/lib/catalog';
import { ROUTES } from '@/lib/routes';
import { ProductCard } from '@/components/shop/product-card';
import { ArtisanCard } from '@/components/artisans/artisan-card';
import { HeroSlider } from '@/components/home/hero-slider';
import { ArtisanCtaSection } from '@/components/home/artisan-cta-section';
import { GrowWithUsSection } from '@/components/home/grow-with-us-section';
import { getSiteSettings } from '@/lib/site-settings';
import { categoryImage } from '@/lib/category-images';

export default async function HomePage() {
  const [categories, featuredProducts, artisans, settings] = await Promise.all([
    getHomeCategories(),
    getFeaturedProducts(8),
    getFeaturedArtisans(3),
    getSiteSettings(),
  ]);

  return (
    <>
      <HeroSlider />

      <ArtisanCtaSection />

      {/* Categories */}
      <section className="py-16">
        <div className="container-page">
          <div className="flex items-end justify-between">
            <div className="mx-auto max-w-xl text-center sm:mx-0 sm:text-left">
              <h2 className="text-left text-3xl font-serif font-semibold text-navy-800">Explore Sri Lankan Craft</h2>
              <p className="mt-2 text-sm text-navy-600">Discover unique handmade treasures across our categories.</p>
            </div>
            <Link href={ROUTES.shop} className="hidden shrink-0 text-sm font-semibold text-gold-600 hover:text-gold-700 sm:block">View All Categories &rarr;</Link>
          </div>

          <div className="mt-10 grid grid-cols-2 gap-5 md:grid-cols-4 lg:gap-6">
            {categories.map((category) => (
              <Link
                key={category.name}
                href={`${ROUTES.shop}?category=${encodeURIComponent(category.name)}`}
                className="group relative aspect-square overflow-hidden rounded-lg shadow-sm transition hover:-translate-y-1 hover:shadow-md"
              >
                <Image
                  src={categoryImage(category.name, category.image)}
                  alt={category.name}
                  fill
                  sizes="(min-width: 768px) 25vw, 50vw"
                  className="object-cover transition duration-300 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-navy-900/80 via-navy-900/10 to-transparent" />
                <span className="absolute inset-x-0 bottom-0 bg-navy-800/90 px-3 py-2.5 text-center text-sm font-semibold text-white">
                  {category.name}
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Featured products */}
      <section className="bg-beige py-16">
        <div className="container-page">
          <div className="flex items-end justify-between">
            <div>
              <h2 className="text-left text-3xl font-serif font-semibold text-navy-800">Handpicked for You</h2>
              <p className="mt-2 text-sm text-navy-600">Beautiful handmade pieces from our talented artisans.</p>
            </div>
            <Link href={ROUTES.shop} className="hidden text-sm font-semibold text-gold-600 hover:text-gold-700 sm:block">View All Products &rarr;</Link>
          </div>

          <div className="mt-10 grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
            {featuredProducts.map((product) => (
              <ProductCard key={product.name} product={product} currency={settings.currency} />
            ))}
          </div>
        </div>
      </section>

      {/* Artisan spotlight */}
      <section className="py-16">
        <div className="container-page">
          <h2 className="section-title">Meet the Makers</h2>
          <p className="mx-auto mt-3 max-w-xl text-center text-sm text-navy-600">Real people. Extraordinary crafts.</p>

          {artisans.length > 0 ? (
            <div className="mt-10 grid gap-6 sm:grid-cols-3">
              {artisans.map((artisan) => (
                <ArtisanCard key={artisan.id} artisan={artisan} />
              ))}
            </div>
          ) : (
            <p className="mt-10 text-center text-sm text-navy-600">Our first artisans are setting up their stores — check back soon.</p>
          )}

          <div className="mt-10 text-center">
            <Link href={ROUTES.artisans} className="btn-dark">Explore All Artisans</Link>
          </div>
        </div>
      </section>

      <GrowWithUsSection />

      {/* Vendor CTA */}
      <section className="relative overflow-hidden bg-navy-800">
        <div className="container-page relative z-10 flex flex-col items-center justify-between gap-6 py-12 text-center md:flex-row md:text-left">
          <div>
            <h3 className="text-2xl font-serif font-bold text-white">Your Craft Deserves a Wider Audience</h3>
            <p className="mt-2 text-navy-100/80">Join our marketplace and share Sri Lankan craftsmanship with the world.</p>
          </div>
          <Link href={ROUTES.vendorShow} className="btn-primary shrink-0">Become a Vendor</Link>
        </div>
        <p className="pointer-events-none absolute bottom-3 right-6 hidden font-serif text-xs italic text-gold-400/60 sm:block">
          Small Crafts, Brighter Futures
        </p>
      </section>
    </>
  );
}