"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import TextAbout from '@/components/sections/about/TextAbout';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Users, TrendingUp, BarChart3, Star } from 'lucide-react';

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Dashboard"
          navItems={[
            { name: "Overview", id: "overview" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" },
            { name: "Help", id: "help" }
          ]}
          button={{ text: "Export Data", href: "#" }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroCentered
          title="Dashboard Analytics"
          description="Monitor your key metrics and performance indicators in real-time with our comprehensive dashboard interface"
          background={{ variant: "plain" }}
          avatars={[
            {
              src: "https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29391.jpg",              alt: "Dashboard interface"
            }
          ]}
          avatarText="Real-time data monitoring"
          buttons={[
            { text: "View Full Dashboard", href: "#charts" },
            { text: "Learn More", href: "#" }
          ]}
        />
      </div>
      
      <div id="stats" data-section="stats">
        <MetricCardOne
          title="Key Performance Indicators"
          description="Track your most important metrics at a glance"
          tag="Statistics"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "24.5K",              title: "Total Users",              description: "Active users this month",              icon: Users
            },
            {
              id: "2",              value: "$128K",              title: "Revenue",              description: "Monthly revenue generated",              icon: TrendingUp
            },
            {
              id: "3",              value: "78%",              title: "Conversion",              description: "Conversion rate increase",              icon: BarChart3
            },
            {
              id: "4",              value: "4.8/5",              title: "Satisfaction",              description: "Customer satisfaction score",              icon: Star
            }
          ]}
        />
      </div>
      
      <div id="charts" data-section="charts">
        <FeatureCardSix
          title="Data Visualization"
          description="Interactive charts and graphs to analyze your performance metrics"
          tag="Charts"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: 1,
              title: "Revenue Trends",              description: "Track revenue patterns across different time periods with detailed line charts showing growth trajectories",              imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg"
            },
            {
              id: 2,
              title: "User Demographics",              description: "Analyze user distribution by region, age, and behavior patterns using comprehensive bar charts",              imageSrc: "https://img.b2bpic.net/free-vector/social-media-analysis-design-graphs_53876-114315.jpg"
            },
            {
              id: 3,
              title: "Category Breakdown",              description: "Visualize market segments and product category distribution through interactive pie charts",              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-infographic-element-set_23-2148375529.jpg"
            }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <TextAbout
          tag="Dashboard Features"
          title="Comprehensive monitoring tools designed for data-driven decision making with real-time updates and advanced filtering capabilities"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Explore Features", href: "#" },
            { text: "Contact Support", href: "#" }
          ]}
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29391.jpg"
          imageAlt="Dashboard footer"
          logoText="Dashboard Pro"
          copyrightText="© 2025 Dashboard Pro. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#" },
                { label: "Pricing", href: "#" },
                { label: "Security", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "Support", href: "#" },
                { label: "Contact", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}