"use client";

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

export default function AccessoriesPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Shop", id: "/shop" },
    { name: "Men's", id: "/men" },
    { name: "Women's", id: "/women" },
    { name: "Accessories", id: "/accessories" },
    { name: "Drops", id: "/seasonal-drops" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" }
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="compact"
        sizing="mediumLargeSizeLargeTitles"
        background="noise"
        cardStyle="gradient-bordered"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={navItems}
            logoSrc="http://img.b2bpic.net/free-vector/flat-design-beach-club-logo-template_23-2149496426.jpg"
            logoAlt="Shark Wave logo"
            brandName="Shark Wave"
            bottomLeftText="Luxury Streetwear"
            bottomRightText="Premium Style, Affordable Price."
            button={{
              text: "Account", href: "/account" }}
          />
        </div>

        <div id="accessories-showcase" data-section="accessories-showcase">
          <ProductCardOne
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={[
              {id: "a1", name: "Deep Dive Backpack", price: "$180", imageSrc: "http://img.b2bpic.net/free-photo/toilet-bag-with-products-assortment-table_23-2149879647.jpg", imageAlt: "Luxury leather backpack"},
              {id: "a2", name: "Eclipse Sunglasses", price: "$90", imageSrc: "http://img.b2bpic.net/free-photo/smiled-girl-with-glasses-hat_141793-252.jpg", imageAlt: "Designer sunglasses"},
              {id: "a3", name: "Tidal Leather Belt", price: "$70", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-model-man-stylish-summer-clothes-posing-hat-with-bag_158538-14800.jpg", imageAlt: "Luxury leather belt"},
              {id: "a4", name: "Wave Silk Scarf", price: "$90", imageSrc: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63514.jpg", imageAlt: "Limited edition luxury silk scarf"},
              {id: "a5", name: "Deep Dive Wallet", price: "$110", imageSrc: "http://img.b2bpic.net/free-photo/knitting-products-ready-use_23-2149397717.jpg", imageAlt: "Rare leather wallet"},
              {id: "a6", name: "Tidal Cap", price: "$45", imageSrc: "http://img.b2bpic.net/free-vector/ugly-sweater-flyer-template-design_742173-28595.jpg", imageAlt: "Exclusive custom baseball cap"}
            ]}
            title="Accessories: The Perfect Finish"
            description="Elevate your look with Shark Wave's collection of premium accessories. Designed to complement our apparel and define your personal style."
          />
        </div>

        <div id="accessories-features" data-section="accessories-features">
          <FeatureCardTwentyThree
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
              {id: "af1", title: "Versatile Styling", tags: ["Mix & Match"], imageSrc: "http://img.b2bpic.net/free-photo/two-young-beautiful-smiling-hipster-girls-trendy-white-sweater-coat_158538-16991.jpg", imageAlt: "Versatile fashion accessories display"},
              {id: "af2", title: "Premium Materials", tags: ["Lasting Quality"], imageSrc: "http://img.b2bpic.net/free-photo/fashion-designer-working-her-workshop-alone_23-2148877360.jpg", imageAlt: "Handcrafted luxury accessory detail"},
              {id: "af3", title: "Timeless Design", tags: ["Enduring Style"], imageSrc: "http://img.b2bpic.net/free-photo/top-view-sunglasses-floating-water_23-2151013934.jpg", imageAlt: "Designer sunglasses"}
            ]}
            title="Crafted for Impact"
            description="Our accessories are designed to be both statement pieces and functional essentials, made with the same dedication to quality as our apparel."
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/beach-background-with-clam-shells-remixed-from-artworks-by-augustus-addison-gould_53876-104879.jpg"
            imageAlt="Stylized ocean wave with subtle shark fin"
            logoText="Shark Wave"
            columns={[
              {
                title: "Shop", items: [
                  {label: "All Products", href: "/shop"},
                  {label: "Men's Collection", href: "/men"},
                  {label: "Women's Collection", href: "/women"},
                  {label: "Accessories", href: "/accessories"},
                  {label: "Seasonal Drops", href: "/seasonal-drops"}
                ]
              },
              {
                title: "Company", items: [
                  {label: "About Us", href: "/about"},
                  {label: "Contact Us", href: "/contact"},
                  {label: "Blog", href: "/seasonal-drops"},
                  {label: "Careers", href: "#"}
                ]
              },
              {
                title: "Support", items: [
                  {label: "FAQ", href: "/contact#faq"},
                  {label: "Shipping & Returns", href: "#"},
                  {label: "Order Tracking", href: "#"},
                  {label: "Privacy Policy", href: "#"},
                  {label: "Terms of Service", href: "#"}
                ]
              },
              {
                title: "Social", items: [
                  {label: "Instagram", href: "https://instagram.com/sharkwave"},
                  {label: "TikTok", href: "https://tiktok.com/@sharkwave"},
                  {label: "Facebook", href: "https://facebook.com/sharkwave"},
                  {label: "Twitter", href: "https://twitter.com/sharkwave"}
                ]
              }
            ]}
            copyrightText="© 2024 Shark Wave. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
