import { ThemeProvider } from '@/components/ui/providers/theme-provider';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterBase from '@/components/sections/footer/FooterBase';
import ProductCardOne from '@/components/sections/product/ProductCardOne';

export default function ShopPage() {
  // Sample product data
  const sampleProducts = [
    {
      id: '1',
      name: 'Premium Rose Bouquet',
      price: '$45.00',
      imageSrc: '/images/products/rose-bouquet.jpg',
      imageAlt: 'Premium Rose Bouquet',
      onProductClick: () => window.open('/product/1', '_blank')
    },
    {
      id: '2',
      name: 'Elegant Lily Arrangement',
      price: '$65.00',
      imageSrc: '/images/products/lily-arrangement.jpg',
      imageAlt: 'Elegant Lily Arrangement',
      onProductClick: () => window.open('/product/2', '_blank')
    },
    {
      id: '3',
      name: 'Seasonal Mixed Bouquet',
      price: '$35.00',
      imageSrc: '/images/products/mixed-bouquet.jpg',
      imageAlt: 'Seasonal Mixed Bouquet',
      onProductClick: () => window.open('/product/3', '_blank')
    },
    {
      id: '4',
      name: 'Wedding Centerpiece',
      price: '$120.00',
      imageSrc: '/images/products/wedding-centerpiece.jpg',
      imageAlt: 'Wedding Centerpiece',
      onProductClick: () => window.open('/product/4', '_blank')
    },
    {
      id: '5',
      name: 'Orchid Collection',
      price: '$85.00',
      imageSrc: '/images/products/orchid-collection.jpg',
      imageAlt: 'Orchid Collection',
      onProductClick: () => window.open('/product/5', '_blank')
    },
    {
      id: '6',
      name: 'Spring Garden Basket',
      price: '$55.00',
      imageSrc: '/images/products/spring-basket.jpg',
      imageAlt: 'Spring Garden Basket',
      onProductClick: () => window.open('/product/6', '_blank')
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div className="min-h-screen flex flex-col">
        <NavbarStyleApple
          brandName="Baklajan"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Gallery", id: "gallery" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" },
            { name: "Shop", id: "/shop" }
          ]}
        />
        
        <main className="flex-grow">
          <ProductCardOne
            products={sampleProducts}
            title="Our Flower Collection"
            description="Discover our beautiful selection of fresh flowers and elegant arrangements, perfect for any occasion"
            tag="Featured Products"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            useInvertedBackground="noInvert"
            buttons={[
              {
                text: "View All Products",                href: "/shop/all"
              },
              {
                text: "Custom Orders",                href: "/contact"
              }
            ]}
          />
        </main>
        
        <FooterBase
          logoText="Baklajan"
          copyrightText="© 2025 Baklajan Flowers Studio. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Weddings", href: "services" },
                { label: "Events", href: "services" },
                { label: "Subscriptions", href: "services" },
                { label: "Custom Orders", href: "contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Gallery", href: "gallery" },
                { label: "Testimonials", href: "testimonials" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "faq" },
                { label: "Delivery Info", href: "#" },
                { label: "Care Guide", href: "#" },
                { label: "Privacy Policy", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}