"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 MenPage() {
  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="men-collection" data-section="men-collection">
          <ProductCardOne
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={[
              {id: "m1", name: "Apex Cargo Pants", price: "$130", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-young-african-man-standing-against-city-skyline_23-2148151906.jpg", imageAlt: "Men's luxury denim jeans"},
              {id: "m2", name: "Deep Blue Blazer", price: "$250", imageSrc: "http://img.b2bpic.net/free-photo/moder-man-sunglasses-black-jacket-tie_613910-16977.jpg", imageAlt: "Men's tailored blazer"},
              {id: "m3", name: "Current Longsleeve", price: "$80", imageSrc: "http://img.b2bpic.net/free-photo/man-holding-lifesaving-buoy-medium-shot_23-2149461848.jpg", imageAlt: "Men's graphic long sleeve t-shirt"},
              {id: "m4", name: "Tidal Knit Sweater", price: "$140", imageSrc: "http://img.b2bpic.net/free-photo/happy-man-smiling-camera_197531-33440.jpg", imageAlt: "Premium knitted sweater"},
              {id: "m5", name: "Hydro-Flex Hoodie", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-hoodie-having-her-eyes-closed_23-2148322452.jpg", imageAlt: "Dark premium hoodie"},
              {id: "m6", name: "Tidal Bomber Jacket", price: "$180", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-posing-winter-autumn-fashion-trend-black-puffer-coat-leather-hat-beret-old-beautiful-street-wearing-high-heel-shoes_285396-6964.jpg", imageAlt: "Stylish bomber jacket"}
            ]}
            title="Men's Collection: Power & Precision"
            description="Discover high-performance luxury streetwear for the modern man. Bold designs, superior comfort, and unmatched style."
          />
        </div>

        <div id="men-style-features" data-section="men-style-features">
          <FeatureCardTwentyThree
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
              {id: "mf1", title: "Precision Tailoring", tags: ["Impeccable Fit"], imageSrc: "http://img.b2bpic.net/free-photo/businessman-wearing-jacket-before-going-work_181624-25224.jpg", imageAlt: "Male model in perfectly fitted suit"},
              {id: "mf2", title: "Advanced Fabrics", tags: ["Superior Comfort"], imageSrc: "http://img.b2bpic.net/free-photo/fabric-textured-background_53876-14873.jpg", imageAlt: "Close up of luxury fabric texture"},
              {id: "mf3", title: "Functional Design", tags: ["Everyday Wear"], imageSrc: "http://img.b2bpic.net/free-photo/girl_1303-4477.jpg", imageAlt: "Unisex premium jogger pants"}
            ]}
            title="Engineered for Excellence"
            description="Experience the perfect fusion of form and function. Our menswear is designed for impeccable fit, premium feel, and lasting style."
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            videoSrc=""
            videoAriaLabel="Footer video"
            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>
  );
}
