"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, Star } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="plain"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="PowerFlow"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Products", id: "/products" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Shop Now", href: "/products" }}
        />
      </div>

      <div id="story" data-section="story">
        <MediaAbout
          title="Powering Your Mobile World"
          description="PowerFlow was founded with a simple mission: to create the most reliable and innovative portable power solutions for the modern mobile lifestyle. Our team of engineers and designers work tirelessly to deliver products that exceed expectations."
          tag="Our Story"
          tagIcon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/desk-arrangement-with-ssd-laptop-view_23-2149328278.jpg"
          imageAlt="PowerFlow technology and innovation"
          buttons={[
            { text: "Our Products", href: "/products" },
            { text: "Contact Team", href: "/contact" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Trusted by thousands of customers worldwide with proven reliability and performance metrics that speak for themselves"
          tag="Performance"
          metrics={[
            {
              id: "1",
              value: "50K+",
              description: "Happy customers across 25 countries enjoying our power banks daily with consistent satisfaction"
            },
            {
              id: "2",
              value: "99.2%",
              description: "Satisfaction rating based on verified customer reviews and comprehensive feedback analysis"
            },
            {
              id: "3",
              value: "5B+",
              description: "Total battery capacity delivered to users globally through our premium power bank solutions"
            },
            {
              id: "4",
              value: "2M+",
              description: "Devices successfully charged using PowerFlow technology across all our product lines"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Customer Stories"
          description="Hear from professionals, travelers, and tech enthusiasts who rely on PowerFlow every day"
          tag="Reviews"
          tagIcon={Star}
          showRating={true}
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              handle: "@sarahjtech",
              testimonial: "As a digital nomad, PowerFlow has been my constant companion. The reliability and fast charging have saved me countless times during long flights and remote work sessions.",
              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: "David Kim",
              handle: "@davidkim_startup",
              testimonial: "Running a startup means being constantly connected. PowerFlow's customer service and warranty support gave me peace of mind when I needed it most.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",
              imageAlt: "David Kim"
            },
            {
              id: "3",
              name: "Lisa Martinez",
              handle: "@lisamart_designer",
              testimonial: "The design is not just functional but beautiful. As a designer, I appreciate products that balance form and function - PowerFlow nails both aspects perfectly.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5391.jpg",
              imageAlt: "Lisa Martinez"
            },
            {
              id: "4",
              name: "James Thompson",
              handle: "@jthompson_dev",
              testimonial: "The technical specifications are impressive, but what really stands out is the consistent performance. No degradation after months of heavy use.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-therapist_23-2148759115.jpg",
              imageAlt: "James Thompson"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterMedia
        imageSrc="https://img.b2bpic.net/free-vector/blue-technology-wire-mesh-background_1017-17262.jpg"
        imageAlt="Technology background"
        logoText="PowerFlow"
        copyrightText="© 2025 PowerFlow. All rights reserved. Empowering your mobile lifestyle."
        columns={[
          {
            title: "Products",
            items: [
              { label: "Power Banks", href: "/products" },
              { label: "Accessories", href: "/products" },
              { label: "Bundles", href: "/products" },
              { label: "Compare", href: "/products" }
            ]
          },
          {
            title: "Support",
            items: [
              { label: "Documentation", href: "/about" },
              { label: "Warranty", href: "/about" },
              { label: "Returns", href: "/about" },
              { label: "Contact Us", href: "/contact" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Blog", href: "/about" },
              { label: "Careers", href: "/about" },
              { label: "Press", href: "/about" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}