"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Activity, BarChart3, TrendingUp, Users } from "lucide-react";

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Dashboard"
          navItems={[
            { name: "Overview", id: "overview" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" },
            { name: "Support", id: "support" }
          ]}
          button={{
            text: "Launch App",            href: "https://github.com"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="DASHBOARD"
          description="Real-time analytics and insights at your fingertips. Monitor key metrics, track performance, and make data-driven decisions with our intuitive dashboard interface."
          buttons={[
            { text: "View Analytics", href: "#metrics" },
            { text: "Explore Charts", href: "#charts" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29391.jpg",              imageAlt: "Dashboard interface with analytics"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29391.jpg",              imageAlt: "Data visualization dashboard"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29391.jpg",              imageAlt: "Analytics overview"
            }
          ]}
          autoplayDelay={4000}
          showDimOverlay={true}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Key Performance Indicators"
          description="Monitor your most important metrics in real-time. Track revenue, user engagement, conversion rates, and system performance at a glance."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "$48.5K",              title: "Total Revenue",              description: "Monthly recurring revenue across all sources",              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-infographic-element-set_23-2148375529.jpg",              imageAlt: "Revenue metrics"
            },
            {
              id: "2",              value: "12.4K",              title: "Active Users",              description: "Currently engaged platform users",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-infographic-elements-with-dark-background_52683-8247.jpg",              imageAlt: "User metrics"
            },
            {
              id: "3",              value: "94.2%",              title: "System Uptime",              description: "Average monthly availability",              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-element-collection-template_52683-24453.jpg",              imageAlt: "System performance"
            },
            {
              id: "4",              value: "3.8%",              title: "Conversion Rate",              description: "Trial to paid customer conversions",              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-infographic-element-set_23-2148375529.jpg",              imageAlt: "Conversion metrics"
            }
          ]}
        />
      </div>

      <div id="charts" data-section="charts">
        <FeatureCardTwentyFive
          title="Interactive Charts & Visualizations"
          description="Comprehensive data visualization tools designed to reveal insights and trends. Navigate your business metrics with intuitive, responsive charts."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          features={[
            {
              title: "Revenue Trends",              description: "Track monthly revenue patterns and identify growth opportunities with interactive line charts and trend analysis.",              icon: TrendingUp,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/dashboard-infographic-element-set_23-2148375529.jpg",                  imageAlt: "Revenue trend chart"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/gradient-infographic-elements-with-dark-background_52683-8247.jpg",                  imageAlt: "Revenue comparison"
                }
              ]
            },
            {
              title: "User Analytics",              description: "Monitor user behavior, engagement patterns, and demographic insights with detailed statistical visualizations.",              icon: Users,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/gradient-infographic-elements-with-dark-background_52683-8247.jpg",                  imageAlt: "User analytics chart"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/dashboard-element-collection-template_52683-24453.jpg",                  imageAlt: "User engagement metrics"
                }
              ]
            },
            {
              title: "Performance Metrics",              description: "Real-time monitoring of system performance, load times, and resource utilization across all infrastructure.",              icon: Activity,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/dashboard-element-collection-template_52683-24453.jpg",                  imageAlt: "Performance dashboard"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/dashboard-infographic-element-set_23-2148375529.jpg",                  imageAlt: "System metrics"
                }
              ]
            },
            {
              title: "Sales Forecast",              description: "Predictive analytics and forecasting tools to plan ahead and optimize your sales strategy with data-driven insights.",              icon: BarChart3,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/dashboard-infographic-element-set_23-2148375529.jpg",                  imageAlt: "Sales forecast chart"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/gradient-infographic-elements-with-dark-background_52683-8247.jpg",                  imageAlt: "Prediction models"
                }
              ]
            }
          ]}
        />
      </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 background"
          logoText="Dashboard"
          copyrightText="© 2025 Dashboard Inc. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#security" },
                { label: "Roadmap", href: "#roadmap" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#blog" },
                { label: "Careers", href: "#careers" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" },
                { label: "Cookie Policy", href: "#cookies" },
                { label: "Support", href: "#support" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}