"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { ShoppingBag } from 'lucide-react';

export default function ShopPage() {
  const products = [
    {
      id: "1",      name: "Elegant Rose Bouquet",      price: "$45.99",      imageSrc: "https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=400&fit=crop",      imageAlt: "Beautiful red rose bouquet",      onProductClick: () => console.log("Product 1 clicked")
    },
    {
      id: "2",      name: "Spring Tulip Mix",      price: "$32.50",      imageSrc: "https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=400&h=400&fit=crop",      imageAlt: "Colorful tulip arrangement",      onProductClick: () => console.log("Product 2 clicked")
    },
    {
      id: "3",      name: "Orchid Paradise",      price: "$67.25",      imageSrc: "https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=400&h=400&fit=crop",      imageAlt: "White orchid arrangement",      onProductClick: () => console.log("Product 3 clicked")
    },
    {
      id: "4",      name: "Sunflower Joy",      price: "$28.75",      imageSrc: "https://images.unsplash.com/photo-1597848212624-e4c11c4b8ccf?w=400&h=400&fit=crop",      imageAlt: "Bright sunflower bouquet",      onProductClick: () => console.log("Product 4 clicked")
    },
    {
      id: "5",      name: "Lily Elegance",      price: "$54.00",      imageSrc: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=400&fit=crop",      imageAlt: "White lily arrangement",      onProductClick: () => console.log("Product 5 clicked")
    },
    {
      id: "6",      name: "Mixed Garden Blooms",      price: "$39.99",      imageSrc: "https://images.unsplash.com/photo-1560717845-968823efbee1?w=400&h=400&fit=crop",      imageAlt: "Mixed flower garden bouquet",      onProductClick: () => console.log("Product 6 clicked")
    },
    {
      id: "7",      name: "Peony Dreams",      price: "$72.50",      imageSrc: "https://images.unsplash.com/photo-1595435742656-5272d0e22120?w=400&h=400&fit=crop",      imageAlt: "Pink peony bouquet",      onProductClick: () => console.log("Product 7 clicked")
    },
    {
      id: "8",      name: "Lavender Serenity",      price: "$41.25",      imageSrc: "https://images.unsplash.com/photo-1498307833015-e7b400441eb8?w=400&h=400&fit=crop",      imageAlt: "Purple lavender arrangement",      onProductClick: () => console.log("Product 8 clicked")
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="outline"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div className="min-h-screen bg-background">
        <NavbarLayoutFloatingOverlay
          brandName="Zayia"
          navItems={[
            {"name":"Home","id":"/"},
            {"name":"Products","id":"products"},
            {"name":"About","id":"about"},
            {"name":"FAQ","id":"faq"},
            {"name":"Contact","id":"contact"},
            {"name":"Shop","id":"/shop"}
          ]}
          button={{"text":"Order Now","href":"products"}}
        />
        
        <main className="pt-20">
          <ProductCardOne
            products={products}
            title="Our Flower Collection"
            description="Discover our carefully curated selection of premium flowers and arrangements, perfect for every special occasion"
            tag="Fresh Blooms"
            tagIcon={ShoppingBag}
            textboxLayout="default"
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            useInvertedBackground="noInvert"
            buttons={[
              {
                text: "View All Categories",                href: "#categories"
              },
              {
                text: "Custom Orders",                href: "#custom"
              }
            ]}
            ariaLabel="Shop flowers section"
          />
        </main>
        
        <FooterSimple
          columns={[
            {
              "title":"Shop",              "items":[
                {"label":"All Flowers","href":"#"},
                {"label":"Seasonal","href":"#"},
                {"label":"Custom Orders","href":"#"},
                {"label":"Gift Cards","href":"#"}
              ]
            },
            {
              "title":"About",              "items":[
                {"label":"Our Story","href":"#"},
                {"label":"Our Team","href":"#"},
                {"label":"Sustainability","href":"#"},
                {"label":"Blog","href":"#"}
              ]
            },
            {
              "title":"Support",              "items":[
                {"label":"Contact Us","href":"#"},
                {"label":"Delivery Info","href":"#"},
                {"label":"FAQ","href":"faq"},
                {"label":"Flower Care","href":"#"}
              ]
            },
            {
              "title":"Legal",              "items":[
                {"label":"Privacy Policy","href":"#"},
                {"label":"Terms of Service","href":"#"},
                {"label":"Return Policy","href":"#"},
                {"label":"Contact","href":"#"}
              ]
            }
          ]}
          bottomLeftText="© 2025 Zayia Flowers. All rights reserved."
          bottomRightText="Crafted with care and passion for beautiful moments."
        />
      </div>
    </ThemeProvider>
  );
}