"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { TrendingUp, Star } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="blurBottom"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="UrbanStyle"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Shop", id: "/products" },
            { name: "About", id: "/about" },
            { name: "Pricing", id: "/pricing" }
          ]}
          button={{
            text: "Contact Us",
            href: "/contact"
          }}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Our Story & Mission"
          description={[
            "UrbanStyle was founded in 2015 with a simple yet powerful vision: to democratize access to authentic, high-quality urban fashion. Our founders, themselves passionate about street culture and contemporary design, recognized a gap in the market for accessible luxury streetwear that didn't compromise on ethics or quality.",
            "We've built strong partnerships with independent designers, emerging artists, and ethical manufacturers across the globe. Every piece in our collection tells a story—from the sustainable materials we source to the fair wages we ensure for every person in our supply chain. Our commitment extends beyond fashion to community building and cultural celebration.",
            "Today, UrbanStyle serves over 50,000 customers worldwide, but we haven't forgotten our roots. We continue to champion creativity, sustainability, and individual expression through every collection we curate. Our journey is just beginning, and we invite you to be part of shaping the future of urban fashion with us."
          ]}
          buttons={[
            { text: "Shop Our Story", href: "/products" }
          ]}
          showBorder={true}
          useInvertedBackground={false}
        />
      </div>

      <div id="company-metrics" data-section="company-metrics">
        <MetricCardSeven
          title="Our Impact by the Numbers"
          description="Measurable progress in building a sustainable and inclusive fashion community"
          tag="Company Growth"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          carouselMode="buttons"
          metrics={[
            {
              id: "1",
              value: "9 Years",
              title: "Fashion Industry Experience",
              items: ["Founded in 2015", "Consistent year-over-year growth", "Industry recognition and awards"]
            },
            {
              id: "2",
              value: "25+",
              title: "Countries Served Globally",
              items: ["International shipping network", "Local partnerships established", "Cultural diversity celebrated"]
            },
            {
              id: "3",
              value: "100+",
              title: "Designer Collaborations",
              items: ["Independent artist support", "Exclusive collections launched", "Creative community building"]
            }
          ]}
        />
      </div>

      <div id="customer-voices" data-section="customer-voices">
        <TestimonialCardTen
          title="Voices from Our Community"
          description="Stories from customers who've found their unique style through UrbanStyle's curated collections"
          tag="Community Stories"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",
              title: "Building Confidence Through Style",
              quote: "UrbanStyle helped me discover my personal aesthetic. The pieces I've collected over the years have become staples in my wardrobe, and I constantly get compliments on my style. It's more than clothing—it's confidence.",
              name: "Alex Rodriguez",
              role: "Style Blogger",
              imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-stylish-brunette-man-with-coat-shoulders-intently-looking-camera-outdoor_574295-1313.jpg",
              imageAlt: "fashion blogger portrait man headshot professional photo"
            },
            {
              id: "2",
              title: "Quality That Stands the Test of Time",
              quote: "I've been shopping with UrbanStyle for over three years now, and my earliest purchases still look brand new. The quality of materials and craftsmanship is exceptional. It's rare to find this level of durability in contemporary fashion.",
              name: "Emma Thompson",
              role: "Sustainability Advocate",
              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
              imageAlt: "woman professional headshot female portrait professional photo"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="UrbanStyle"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Shop", href: "/products" },
                { label: "About", href: "/about" },
                { label: "Pricing", href: "/pricing" }
              ]
            },
            {
              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "#" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Accessibility", href: "#" },
                { label: "Sustainability", href: "#" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "TikTok", href: "https://tiktok.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}