"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Star } from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Shop", id: "/shop" },
    { name: "About", id: "/about" },
    { name: "Reviews", id: "/testimonials" },
    { name: "Contact", id: "/contact" },
  ];

  const handleNavClick = (id: string) => {
    if (id === "/") {
      window.location.href = "/";
    } else if (id.startsWith("/")) {
      window.location.href = id;
    } else if (id.startsWith("http")) {
      window.open(id, "_blank");
    } else {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    }
  };

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={{ text: "Shop Now", href: "/shop" }}
          brandName="StyleHub"
        />
      </div>

      <div id="about-mission" data-section="about-mission">
        <TextSplitAbout
          title="Our Mission & Vision"
          description={[
            "StyleHub was founded on a simple belief: everyone deserves access to high-quality, stylish fashion. Since 2015, we've been on a mission to curate the world's best fashion and apparel.",            "We believe in sustainable practices, ethical manufacturing, and building a community of style-conscious individuals who value quality over quantity. Our vision is to become the most trusted fashion destination globally."]}
          buttons={[
            { text: "Shop Now", href: "/shop" },
            { text: "Explore Values", href: "#" },
          ]}
          showBorder={true}
          useInvertedBackground={false}
        />
      </div>

      <div id="partners" data-section="partners">
        <SocialProofOne
          title="Our Trusted Partners"
          description="Collaborating with leading brands and manufacturers worldwide to bring you the best fashion experiences"
          tag="Global Network"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Global Partners",            "Fashion Brands",            "Quality Makers",            "Ethical Partners",            "Sustainable Brands",            "Industry Leaders",            "Trusted Makers",            "Premium Partners"]}
          logos={[
            "http://img.b2bpic.net/free-vector/collection-abstract-lineal-logo_23-2148457951.jpg",            "http://img.b2bpic.net/free-vector/retro-logo-collection_23-2148445976.jpg",            "http://img.b2bpic.net/free-vector/geometric-harmony-hills-private-school-logo-template_742173-18879.jpg",            "http://img.b2bpic.net/free-vector/flat-design-outlet-stamp-collection_23-2149753026.jpg",            "http://img.b2bpic.net/free-vector/flat-design-fashion-accessories-logo-set_23-2148888960.jpg",            "http://img.b2bpic.net/free-vector/health-store-logo-design_23-2148472971.jpg",            "http://img.b2bpic.net/free-vector/geometric-harmony-hills-private-school-logo-template_742173-18879.jpg",            "http://img.b2bpic.net/free-vector/retro-logo-collection_23-2148445976.jpg"]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="sustainability" data-section="sustainability">
        <TextSplitAbout
          title="Sustainability Commitment"
          description={[
            "At StyleHub, we're committed to reducing our environmental impact. We source materials responsibly, partner with manufacturers who follow ethical labor practices, and continuously innovate our supply chain.",            "Every purchase supports our sustainability initiatives. From eco-friendly packaging to carbon-neutral shipping options, we're building a fashion future that works for people and the planet."]}
          buttons={[
            { text: "Learn More", href: "#" },
            { text: "View Certifications", href: "#" },
          ]}
          showBorder={false}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="StyleHub"
          leftLink={{ text: "Privacy Policy", href: "#privacy" }}
          rightLink={{ text: "Terms of Service", href: "#terms" }}
        />
      </div>
    </ThemeProvider>
  );
}