"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { BarChart3, LineChart, Target, TrendingUp, Users, Activity, MapPin } from "lucide-react";

export default function Dashboard() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Dashboard", id: "dashboard" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" },
            { name: "Help", id: "help" }
          ]}
          button={{
            text: "Get Started",            href: "contact"
          }}
          brandName="Dashboard"
        />
      </div>
      
      <div id="dashboard" data-section="dashboard">
        <HeroCarouselLogo
          logoText="DASHBOARD"
          description="Real-time analytics and metrics monitoring platform for your business intelligence"
          buttons={[
            {
              text: "View Analytics",              href: "analytics"
            },
            {
              text: "Learn More",              href: "reports"
            }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg",              imageAlt: "Dashboard Overview"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg",              imageAlt: "Analytics Charts"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/analyzing-business-chart_1098-19461.jpg",              imageAlt: "Business Metrics"
            }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>
      
      <div id="stats" data-section="stats">
        <MetricCardThree
          title="Key Performance Indicators"
          description="Monitor your most important business metrics at a glance"
          metrics={[
            {
              id: "1",              icon: TrendingUp,
              title: "Revenue",              value: "$124.5K"
            },
            {
              id: "2",              icon: Users,
              title: "Active Users",              value: "8,342"
            },
            {
              id: "3",              icon: BarChart3,
              title: "Conversion Rate",              value: "12.4%"
            },
            {
              id: "4",              icon: Target,
              title: "Goals Met",              value: "87/100"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>
      
      <div id="charts" data-section="charts">
        <FeatureCardTen
          title="Data Visualization Dashboard"
          description="Interactive charts and graphs for comprehensive data analysis and insights"
          features={[
            {
              id: "1",              title: "Revenue Trends",              description: "Track revenue performance over time with detailed monthly and quarterly breakdowns for strategic planning",              media: {
                imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg"
              },
              items: [
                {
                  icon: LineChart,
                  text: "Monthly trend analysis"
                },
                {
                  icon: BarChart3,
                  text: "Comparative reports"
                },
                {
                  icon: TrendingUp,
                  text: "Growth projections"
                }
              ],
              reverse: false
            },
            {
              id: "2",              title: "User Analytics",              description: "Comprehensive user behavior tracking with engagement metrics and demographic breakdowns",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/analyzing-business-chart_1098-19461.jpg"
              },
              items: [
                {
                  icon: Users,
                  text: "User segmentation"
                },
                {
                  icon: Activity,
                  text: "Engagement tracking"
                },
                {
                  icon: MapPin,
                  text: "Geographic data"
                }
              ],
              reverse: true
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Dashboard"
          columns={[
            {
              items: [
                {
                  label: "Dashboard",                  href: "dashboard"
                },
                {
                  label: "Analytics",                  href: "analytics"
                },
                {
                  label: "Reports",                  href: "reports"
                }
              ]
            },
            {
              items: [
                {
                  label: "Settings",                  href: "settings"
                },
                {
                  label: "Preferences",                  href: "preferences"
                },
                {
                  label: "Profile",                  href: "profile"
                }
              ]
            },
            {
              items: [
                {
                  label: "Documentation",                  href: "docs"
                },
                {
                  label: "API Reference",                  href: "api"
                },
                {
                  label: "Support",                  href: "support"
                }
              ]
            },
            {
              items: [
                {
                  label: "Privacy Policy",                  href: "privacy"
                },
                {
                  label: "Terms of Service",                  href: "terms"
                },
                {
                  label: "Contact",                  href: "contact"
                }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}