"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { TrendingUp, Users, Activity, BarChart3 } from 'lucide-react';

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <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: "Sign Out",            href: "#"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="DASHBOARD"
          description="Monitor your performance metrics and analytics in one unified workspace with real-time data insights and interactive visualizations"
          background={{ variant: "aurora" }}
          buttons={[
            { text: "View Analytics", href: "#analytics" },
            { text: "Export Report", href: "#reports" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29391.jpg"
          imageAlt="Dashboard analytics interface"
          frameStyle="browser"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Key Performance Indicators"
          description="Real-time metrics tracking your dashboard performance and user engagement"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              icon: TrendingUp,
              title: "Revenue Growth",              value: "+24.5%"
            },
            {
              id: "2",              icon: Users,
              title: "Active Users",              value: "8,420"
            },
            {
              id: "3",              icon: Activity,
              title: "Conversion Rate",              value: "3.82%"
            },
            {
              id: "4",              icon: BarChart3,
              title: "Total Orders",              value: "1,283"
            }
          ]}
        />
      </div>

      <div id="charts" data-section="charts">
        <ProductCardThree
          title="Data Visualizations"
          description="Interactive charts and graphs for comprehensive data analysis and reporting"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "chart-1",              name: "Revenue Trend Chart",              price: "View Chart",              imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg",              imageAlt: "Revenue trend visualization"
            },
            {
              id: "chart-2",              name: "User Growth Analytics",              price: "View Chart",              imageSrc: "https://img.b2bpic.net/free-vector/colorful-dashboard-collection-chart-elements_23-2148263144.jpg",              imageAlt: "User growth chart"
            },
            {
              id: "chart-3",              name: "Market Distribution",              price: "View Chart",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "Market distribution pie chart"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Dashboard Features"
          title="Comprehensive Analytics Platform"
          description="Our dashboard provides a complete suite of tools for monitoring key metrics, analyzing trends, and making data-driven decisions. With intuitive visualizations and real-time updates, you can track performance across all business dimensions."
          metrics={[
            {
              value: "99.9%",              title: "Uptime Reliability"
            },
            {
              value: "500+",              title: "Integrated Data Sources"
            }
          ]}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29391.jpg"
          imageAlt="Dashboard platform overview"
        />
      </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 Pro"
          copyrightText="© 2025 Dashboard Analytics. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#security" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Blog", href: "#blog" },
                { label: "Careers", href: "#careers" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Documentation", href: "#docs" },
                { label: "Contact", href: "#contact" },
                { label: "Status", href: "#status" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}