"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function AboutPage() {
  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="about-sharkwave" data-section="about-sharkwave">
          <MetricSplitMediaAbout
            useInvertedBackground={false}
            title="Our Vision: Luxury Accessible."
            description="Shark Wave was founded on the principle that premium style shouldn't come with an unattainable price tag. We meticulously curate and design each piece, blending high fashion aesthetics with everyday affordability, inspired by the profound elegance of the ocean."
            metrics={[
              {value: "100K+", title: "Happy Customers"},
              {value: "25+", title: "Exclusive Drops"},
              {value: "5 Continents", title: "Global Reach"}
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/serious-stylish-curly-haired-young-woman-looks-watch-checks-time-waits-somone-wears-sunglasses-casual-hoodie-jacket-poses-street_273609-55747.jpg"
            imageAlt="Fashion models in a dynamic urban setting"
            mediaAnimation="slide-up"
            metricsAnimation="slide-up"
          />
        </div>

        <div id="our-team" data-section="our-team">
          <TeamCardTen
            useInvertedBackground={false}
            title="The Crew Behind the Wave"
            tag="Our Innovators"
            membersAnimation="slide-up"
            members={[
              {id: "t_member_1", name: "Ethan Vance", imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-working-computer-office_1303-22674.jpg", imageAlt: "Ethan Vance, CEO"},
              {id: "t_member_2", name: "Sophia Chen", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-woman-posing-with-transparent-fabric_23-2148239957.jpg", imageAlt: "Sophia Chen, Creative Director"},
              {id: "t_member_3", name: "Marcus Blake", imageSrc: "http://img.b2bpic.net/free-photo/positive-businesswoman-showing-digital-tablet_1262-6180.jpg", imageAlt: "Marcus Blake, Head of Marketing"}
            ]}
            memberVariant="card"
          />
        </div>

        <div id="social-proof" data-section="social-proof">
          <SocialProofOne
            textboxLayout="default"
            useInvertedBackground={false}
            names={["Vogue Collective", "StreetPulse Magazine", "EcoThread Alliance", "FashionTech Innovate", "Global Fashion Freight", "Creative Edge Studio", "SecurePay Fashion"]}
            title="Trusted by Style Icons & Industry Leaders"
            description="Our collaborations and partnerships empower us to bring the latest trends and highest quality to your wardrobe, cementing our place in the global fashion scene."
            tag="Our Partners"
          />
        </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>
  );
}
