"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="EchoCart"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Shop", id: "/shop" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="company-values" data-section="company-values" className="mx-auto px-4 md:px-6">
        <FeatureCardSixteen
          title="Our Mission & Values"
          description="We're transforming e-commerce by putting customers first and delivering exceptional experiences that exceed expectations."
          negativeCard={{
            items: ["Complicated checkout process", "Unreliable customer service", "Limited product information", "Slow delivery times", "Hidden fees and costs"]
          }}
          positiveCard={{
            items: ["Simple one-click checkout", "24/7 dedicated support team", "Detailed product specifications", "Fast 2-day shipping", "Transparent pricing always"]
          }}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          tag="Why We're Different"
        />
      </div>

      <div id="customer-love" data-section="customer-love" className="mx-auto px-4 md:px-6">
        <TestimonialCardOne
          title="Stories From Our Community"
          description="Hear from real customers who've experienced the EchoCart difference. Their success stories inspire us every day."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          testimonials={[
            { id: "1", name: "Sarah Johnson", role: "Small Business Owner", company: "Tech Startup", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", imageAlt: "Sarah Johnson" },
            { id: "2", name: "Michael Chen", role: "Content Creator", company: "Digital Media", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg", imageAlt: "Michael Chen" },
            { id: "3", name: "Emily Rodriguez", role: "Product Manager", company: "Innovation Lab", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg", imageAlt: "Emily Rodriguez" },
            { id: "4", name: "David Kim", role: "Engineering Lead", company: "Tech Solutions", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", imageAlt: "David Kim" }
          ]}
        />
      </div>

      <div id="company-achievements" data-section="company-achievements" className="mx-auto px-4 md:px-6">
        <MetricCardTwo
          title="Our Journey in Numbers"
          description="Since our founding, we've focused on building trust and delivering value to customers worldwide."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          metrics={[
            { id: "1", value: "500K+", description: "Customers Served" },
            { id: "2", value: "99.2%", description: "Customer Satisfaction" },
            { id: "3", value: "150+", description: "Countries Reached" },
            { id: "4", value: "5 Years", description: "Industry Experience" }
          ]}
        />
      </div>

      <FooterBaseReveal
        copyrightText="© 2025 EchoCart. All rights reserved."
        columns={[
          {
            title: "Shop",
            items: [
              { label: "All Products", href: "/shop" },
              { label: "New Arrivals", href: "/shop?filter=new" },
              { label: "Best Sellers", href: "/shop?filter=bestsellers" },
              { label: "On Sale", href: "/shop?filter=sale" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Our Story", href: "/about" },
              { label: "Careers", href: "/careers" },
              { label: "Press", href: "/press" }
            ]
          },
          {
            title: "Support",
            items: [
              { label: "Contact Us", href: "/contact" },
              { label: "Help Center", href: "/help" },
              { label: "Shipping Info", href: "/shipping" },
              { label: "Returns", href: "/returns" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}