import Topbar from "@/components/layout/Topbar";
import SecondaryNav from "@/components/layout/SecondaryNav";
import CategoryHeader from "@/components/layout/CategoryHeader";
import SectionHeader from "@/components/layout/SectionHeader";
import PromoCard from "@/components/ui/PromoCard";
import ProductCardWithCartModal from "@/components/ui/ProductCardWithCartModal";
import DealBanner from "@/components/ui/DealBanner";
import RoundImageLabel from "@/components/ui/RoundImageLabel";

const productImages = [
  "/images/artisan-sauce-collection.png",
  "/images/tote-gallery-1.png",
  "/images/tote-gallery-2.png",
  "/images/tote-gallery-3.png",
  "/images/tote-gallery-4.png",
  "/images/deal-banner-product.png",
  "/images/promo-beauty-card.png",
  "/images/feature-fashion-side.png",
  "/images/large-sale-banner.png",
];

const heroPromos = [
  {
    eyebrow: "Special Marketplace Pricing",
    title: "Thoughtfully priced products, available for a limited time.",
    imageSrc: "/images/promo-beauty-card.png",
  },
  {
    eyebrow: "Handcrafted By Local Artisans",
    title: "Limited collections from women artisans.",
    imageSrc: "/images/feature-fashion-side.png",
  },
  {
    eyebrow: "Wellness Essentials",
    title: "Designed to support everyday energy and wellness.",
    imageSrc: "/images/deal-banner-product.png",
  },
  {
    eyebrow: "Fresh Finds",
    title: "Curated daily picks from trusted local sellers.",
    imageSrc: "/images/large-sale-banner.png",
  },
  {
    eyebrow: "Seasonal Picks",
    title: "New arrivals made for gifting and everyday care.",
    imageSrc: "/images/tote-gallery-2.png",
  },
];

const bestDeals = [
  { name: "Heritage Mug", rating: 4.8, soldCount: "210 Sold", price: "LKR 1,200.00", oldPrice: "LKR 1,600.00", discountBadge: "-25%" },
  { name: "Ceramic Cake", rating: 4.6, soldCount: "98 Sold", price: "LKR 1,800.00" },
  { name: "Handcrafted Bracelet", rating: 4.9, soldCount: "340 Sold", price: "LKR 2,400.00", oldPrice: "LKR 3,000.00", discountBadge: "-20%" },
  { name: "Dried Beauty Mix", rating: 4.7, soldCount: "76 Sold", price: "LKR 3,950.00" },
  { name: "Heritage Candle Trio", rating: 4.5, soldCount: "152 Sold", price: "LKR 1,300.00" },
  { name: "Tamarind Chili Snack", rating: 4.8, soldCount: "412 Sold", price: "LKR 950.00", oldPrice: "LKR 1,200.00", discountBadge: "-15%" },
  { name: "Forest Coffee Beans", rating: 4.9, soldCount: "289 Sold", price: "LKR 2,650.00" },
  { name: "Artisan Sauce Collection", rating: 4.6, soldCount: "64 Sold", price: "LKR 5,000.00", oldPrice: "LKR 5,500.00" },
  { name: "Ceylon Tea Selection", rating: 4.7, soldCount: "178 Sold", price: "LKR 1,990.00" },
  { name: "Handwoven Cotton Tote", rating: 4.8, soldCount: "133 Sold", price: "LKR 3,300.00", oldPrice: "LKR 3,800.00", discountBadge: "-13%" },
];

const featuredProducts = [
  { name: "Ceylon Tea Gift Box", rating: 4.8, soldCount: "245 Sold", price: "LKR 1,690.00" },
  { name: "Almond Bar Soap", rating: 4.6, soldCount: "87 Sold", price: "LKR 850.00" },
  { name: "Clay Pot Set", rating: 4.7, soldCount: "119 Sold", price: "LKR 2,200.00", oldPrice: "LKR 2,600.00", discountBadge: "-15%" },
  { name: "Kids Pouch", rating: 4.9, soldCount: "302 Sold", price: "LKR 1,750.00" },
  { name: "Gift Wrap Pack", rating: 4.5, soldCount: "58 Sold", price: "LKR 3,100.00" },
  { name: "Cotton Tote Bag", rating: 4.8, soldCount: "201 Sold", price: "LKR 1,450.00" },
  { name: "Coconut Bracelet Trio", rating: 4.7, soldCount: "144 Sold", price: "LKR 990.00", oldPrice: "LKR 1,250.00", discountBadge: "-21%" },
  { name: "Palm Leaf Basket", rating: 4.6, soldCount: "93 Sold", price: "LKR 2,800.00" },
  { name: "Woven Tea Holder", rating: 4.9, soldCount: "267 Sold", price: "LKR 1,150.00" },
  { name: "Traditional Support Cloth", rating: 4.7, soldCount: "118 Sold", price: "LKR 1,990.00" },
];

const featuredStores = [
  { name: "Leafy", imageSrc: "/images/leafy-round.svg" },
  { name: "Cottage", imageSrc: "/images/cozy-round.svg" },
  { name: "Coconut", imageSrc: "/images/leafy-round.svg" },
  { name: "Cosy", imageSrc: "/images/cozy-round.svg" },
  { name: "Home", imageSrc: "/images/leafy-round.svg" },
  { name: "Potter Craft", imageSrc: "/images/cozy-round.svg" },
  { name: "Bansiri", imageSrc: "/images/leafy-round.svg" },
  { name: "Tiki", imageSrc: "/images/cozy-round.svg" },
];

export default function Home() {
  return (
    <div className="min-h-screen bg-white text-[#151933]">
      <div className="min-h-screen w-full overflow-hidden bg-white shadow-[0_0_0_1px_rgba(15,23,42,0.04)]">
        <Topbar />

        <div className="space-y-8 py-8">
          <SecondaryNav />
          <CategoryHeader />
        </div>

        <main className="space-y-9 px-4 pb-12 pt-4 sm:px-6 lg:px-16">
          <section className="mx-auto grid w-full max-w-[1680px] grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
            {heroPromos.map((promo) => (
              <PromoCard
                key={promo.title}
                {...promo}
                showArrowButton
                className="max-w-none aspect-[0.78/1] rounded-lg [&_h2]:text-lg [&_p]:text-[11px] sm:[&_h2]:text-xl"
              />
            ))}
          </section>

          <section className="-mx-4 space-y-4 bg-[#f3f3f4] px-4 py-8 sm:-mx-6 sm:px-6 lg:-mx-16 lg:px-16">
            <SectionHeader
              title="Best Deals"
              details="Everyday essentials, made with purpose."
              viewAllHref="/dashboard"
            />
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-8">
              {bestDeals.map((product, index) => (
                <ProductCardWithCartModal
                  key={product.name}
                  {...product}
                  imageSrc={productImages[index % productImages.length]}
                  showWishlist
                  showAddToCart
                  size="compact"
                  className="mx-auto"
                />
              ))}
            </div>
          </section>

          <DealBanner
            title="There's a deal for you, too"
            description="Don't miss a chance to save on items you've been looking for."
            showIcon
            className="min-h-[124px] rounded-lg sm:min-h-[148px]"
          />

          <section className="-mx-4 space-y-4 bg-[#f3f3f4] px-4 py-8 sm:-mx-6 sm:px-6 lg:-mx-16 lg:px-16">
            <SectionHeader
              title="Featured Stores"
              details="Selected for quality, creativity, and care."
              viewAllHref="/dashboard"
            />
            <div className="grid grid-cols-4 gap-4 sm:grid-cols-6 lg:grid-cols-8">
              {featuredStores.map((store) => (
                <RoundImageLabel
                  key={store.name}
                  {...store}
                  size="sm"
                  className="mx-auto"
                />
              ))}
            </div>
          </section>

          <section className="space-y-4">
            <SectionHeader
              title="Featured Products"
              details="Chosen for quality, design, and purpose."
              viewAllHref="/dashboard"
            />
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-8">
              {featuredProducts.map((product, index) => (
                <ProductCardWithCartModal
                  key={product.name}
                  {...product}
                  imageSrc={productImages[(index + 3) % productImages.length]}
                  showWishlist
                  showAddToCart
                  size="compact"
                  className="mx-auto"
                />
              ))}
            </div>
          </section>
        </main>
      </div>
    </div>
  );
}
