"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";

const navItems = [
  { name: "Products", id: "products" },
  { name: "Categories", id: "categories" },
  { name: "Deals", id: "best-sellers" },
  { name: "About", id: "about" },
  { name: "Contact", id: "contact" },
];

const navButton = {
  text: "Shop Now",
  href: "/products",
};

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="noise"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={navButton}
          brandName="3DStore"
        />
      </div>

      <div id="about-hero" data-section="about-hero">
        <HeroOverlay
          title="About 3DStore"
          description="We're revolutionizing the ecommerce experience with innovative 3D visualization technology, premium product curation, and customer-first values. Our mission is to make online shopping more immersive, confident, and enjoyable."
          tag="Our Story"
          imageSrc="http://img.b2bpic.net/free-psd/cyber-monday-landing-page-template_23-2149839009.jpg?_wi=2"
          imageAlt="3DStore About"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={false}
          buttons={[
            { text: "Start Shopping", href: "/products" },
            { text: "Contact Us", href: "/contact" },
          ]}
          buttonAnimation="blur-reveal"
          className="w-full"
        />
      </div>

      <div id="about-values" data-section="about-values">
        <MetricCardTwo
          title="Our Core Values"
          description="The principles that drive everything we do at 3DStore."
          tag="What We Stand For"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          metrics={[
            { id: "1", value: "Innovation", description: "Cutting-edge technology for better shopping" },
            { id: "2", value: "Quality", description: "Only premium products in our catalog" },
            { id: "3", value: "Trust", description: "Transparent, secure, and reliable" },
            { id: "4", value: "Customer", description: "Every decision centered on you" },
          ]}
        />
      </div>

      <div id="about-partners" data-section="about-partners">
        <SocialProofOne
          title="Trusted Partners"
          description="We work with the best brands and service providers to deliver excellence."
          tag="Our Partners"
          textboxLayout="default"
          useInvertedBackground={false}
          names={["Amazon", "Stripe", "Shopify", "PayPal", "FedEx", "UPS"]}
          logos={[
            "http://img.b2bpic.net/free-vector/gradient-instagram-shop-logo-design_23-2149714663.jpg",
            "http://img.b2bpic.net/free-vector/gradient-money-logo-design_23-2150934165.jpg",
            "http://img.b2bpic.net/free-vector/gradient-instagram-shop-logo-design_23-2149714663.jpg",
            "http://img.b2bpic.net/free-vector/flat-design-monogram-logo_23-2150588944.jpg",
            "http://img.b2bpic.net/free-vector/modern-delivery-logo-template_23-2147878086.jpg",
            "http://img.b2bpic.net/free-vector/modern-delivery-logo-template_23-2147878086.jpg",
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="3DStore"
          columns={[
            {
              items: [
                { label: "Shop All Products", href: "/products" },
                { label: "Categories", href: "#categories" },
                { label: "Best Sellers", href: "#best-sellers" },
                { label: "New Arrivals", href: "/products?sort=new" },
              ],
            },
            {
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Story", href: "/about" },
                { label: "Blog", href: "/blog" },
                { label: "Careers", href: "/careers" },
              ],
            },
            {
              items: [
                { label: "Customer Support", href: "/contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Shipping Info", href: "/shipping" },
                { label: "Track Order", href: "/track" },
              ],
            },
            {
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Return Policy", href: "/returns" },
                { label: "Contact Us", href: "/contact" },
              ],
            },
            {
              items: [
                { label: "Follow Facebook", href: "https://facebook.com" },
                { label: "Follow Instagram", href: "https://instagram.com" },
                { label: "Follow Twitter", href: "https://twitter.com" },
                { label: "Follow LinkedIn", href: "https://linkedin.com" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}