"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function ShopPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Onze Troeven", id: "troeven" },
            { name: "Shop", id: "/shop" },
            { name: "Galerij", id: "galerij" },
            { name: "Contact", id: "contact" },
          ]}
          brandName="Frituur Op Den Hoek"
        />
        
        <div className="pt-32 pb-20">
          <ProductCardFour
            title="Shop Onze Accessoires"
            description="Bekijk onze collectie kwalitatieve accessoires en telefoonhoesjes."
            gridVariant="four-items-2x2-equal-grid"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            products={[
              { id: "a1", name: "Siliconen Hoesje - Zwart", price: "19.99€", variant: "Accessory", imageSrc: "http://img.b2bpic.net/free-photo/silicone-phone-case-black_123.jpg" },
              { id: "a2", name: "Screen Protector - Glas", price: "14.99€", variant: "Accessory", imageSrc: "http://img.b2bpic.net/free-photo/glass-screen-protector_456.jpg" },
              { id: "a3", name: "Lader", price: "25.00€", variant: "Accessory", imageSrc: "http://img.b2bpic.net/free-photo/charger.jpg" },
            ]}
          />
        </div>

        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/young-woman-with-dyed-hair-near-shop_23-2149488667.jpg"
          logoText="Frituur Op Den Hoek"
          columns={[]}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}