"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import ProductCardThree from '@/components/sections/product/ProductCardThree';

export default function ShopPage() {
  const products = [
    {
      id: "prod-1",      name: "Exclusieve Rode Wijn",      price: "€34,95",      imageSrc: "http://img.b2bpic.net/free-photo/carafe-glass-wine-white-table_52683-96526.jpg?_wi=2",      imageAlt: "Fles rode wijn",      onProductClick: () => (window.location.href = "/shop/prod-1"),
    },
    {
      id: "prod-2",      name: "Frisse Witte Wijn",      price: "€19,50",      imageSrc: "http://img.b2bpic.net/free-photo/message-bottle-beach_1204-107.jpg?_wi=2",      imageAlt: "Fles witte wijn",      onProductClick: () => (window.location.href = "/shop/prod-2"),
    },
    {
      id: "prod-3",      name: "Ambachtelijke Gin",      price: "€49,00",      imageSrc: "http://img.b2bpic.net/free-photo/wine-bottle-with-goblet-hookah-tubes-ashtray_176474-6111.jpg?_wi=2",      imageAlt: "Fles gin",      onProductClick: () => (window.location.href = "/shop/prod-3"),
    },
    {
      id: "prod-4",      name: "Premium Single Malt Whisky",      price: "€75,00",      imageSrc: "http://img.b2bpic.net/free-photo/scotch-whiskey-glass-wooden-table_123827-22162.jpg?_wi=2",      imageAlt: "Glas whisky met fles",      onProductClick: () => (window.location.href = "/shop/prod-4"),
    },
    {
      id: "prod-5",      name: "Gourmet Kaasplank",      price: "€28,75",      imageSrc: "http://img.b2bpic.net/free-photo/delicious-gourmet-snacks-board_23-2148325932.jpg?_wi=2",      imageAlt: "Kaasplank met delicatessen",      onProductClick: () => (window.location.href = "/shop/prod-5"),
    },
    {
      id: "prod-6",      name: "Feestelijke Mousserende Wijn",      price: "€22,95",      imageSrc: "http://img.b2bpic.net/free-photo/top-view-champagne-dark-table_140725-99998.jpg?_wi=2",      imageAlt: "Fles mousserende wijn",      onProductClick: () => (window.location.href = "/shop/prod-6"),
    },
    {
      id: "prod-7",      name: "Italiaanse Olijfolie",      price: "€12,99",      imageSrc: "http://img.b2bpic.net/free-photo/olive-oil-with-black-olives-glass-bowl_140725-10368.jpg",      imageAlt: "Fles olijfolie",      onProductClick: () => (window.location.href = "/shop/prod-7"),
    },
    {
      id: "prod-8",      name: "Luxueuze Chocolade Truffels",      price: "€15,00",      imageSrc: "http://img.b2bpic.net/free-photo/assortment-chocolate-truffles_23-2147779268.jpg",      imageAlt: "Chocolade truffels",      onProductClick: () => (window.location.href = "/shop/prod-8"),
    },
    {
      id: "prod-9",      name: "Biologisch Bier Pakket",      price: "€25,00",      imageSrc: "http://img.b2bpic.net/free-photo/assortment-beer-bottles_23-2147910100.jpg",      imageAlt: "Bierpakket",      onProductClick: () => (window.location.href = "/shop/prod-9"),
    },
    {
      id: "prod-10",      name: "Vintage Port",      price: "€89,00",      imageSrc: "http://img.b2bpic.net/free-photo/vintage-port-wine-bottle_140725-72439.jpg",      imageAlt: "Vintage Port fles",      onProductClick: () => (window.location.href = "/shop/prod-10"),
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="fluid"
      cardStyle="subtle-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={[
              {
                name: "Home",                id: "/"
              },
              {
                name: "Over Pyk",                id: "/over-pyk"
              },
              {
                name: "Webshop",                id: "/shop"
              },
              {
                name: "Winkelwagen",                id: "/cart"
              },
              {
                name: "Events",                id: "/events"
              },
              {
                name: "Blog",                id: "/blog"
              },
              {
                name: "Relatiegeschenken",                id: "/relatiegeschenken"
              },
              {
                name: "Contact",                id: "/contact"
              },
            ]}
            brandName="Pyk Slyterij"
          />
        </div>

        <div id="product-catalog" data-section="product-catalog">
          <ProductCardThree
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="four-items-2x2-equal-grid"
            useInvertedBackground={false}
            products={products}
            title="Onze Webshop"
            description="Ontdek ons uitgebreide assortiment van wijnen, sterke dranken en delicatessen."
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={[
              {
                items: [
                  {
                    label: "Over Pyk",                    href: "/over-pyk"
                  },
                  {
                    label: "Ons Team",                    href: "/over-pyk#team"
                  },
                  {
                    label: "De Wynkantine",                    href: "/wynkantine"
                  },
                ],
              },
              {
                items: [
                  {
                    label: "Webshop",                    href: "/shop"
                  },
                  {
                    label: "Wijnen",                    href: "/shop?category=wijn"
                  },
                  {
                    label: "Sterke Dranken",                    href: "/shop?category=sterkedranken"
                  },
                  {
                    label: "Delicatessen",                    href: "/shop?category=delicatessen"
                  },
                ],
              },
              {
                items: [
                  {
                    label: "Evenementen",                    href: "/events"
                  },
                  {
                    label: "Blog",                    href: "/blog"
                  },
                  {
                    label: "Relatiegeschenken",                    href: "/relatiegeschenken"
                  },
                  {
                    label: "Contact",                    href: "/contact"
                  },
                ],
              },
              {
                items: [
                  {
                    label: "Instagram",                    href: "https://instagram.com/pykslyterij"
                  },
                  {
                    label: "Facebook",                    href: "https://facebook.com/pykslyterij"
                  },
                ],
              },
            ]}
            logoText="Pyk Slyterij"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
