"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterSimple from '@/components/sections/footer/FooterSimple';

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <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="hero" data-section="hero">
        <HeroBillboardCarousel 
          title="Dashboard Analytics"
          description="Monitor your performance metrics and key insights in real-time with our comprehensive dashboard interface."
          background={{ variant: "plain" }}
          tag="Dashboard"
          buttons={[{ text: "View Full Report", href: "#charts" }]}
          mediaItems={[
            { imageSrc: "https://img.b2bpic.net/free-vector/infographic-element-collectio_23-2148130915.jpg", imageAlt: "Dashboard analytics view" },
            { imageSrc: "https://img.b2bpic.net/free-vector/user-panel-dashboard-template_23-2148376374.jpg", imageAlt: "Performance metrics chart" },
            { imageSrc: "https://img.b2bpic.net/free-vector/infographic-element-collectio_23-2148130915.jpg", imageAlt: "Revenue analytics" },
            { imageSrc: "https://img.b2bpic.net/free-vector/user-panel-dashboard-template_23-2148376374.jpg", imageAlt: "User engagement metrics" },
            { imageSrc: "https://img.b2bpic.net/free-vector/infographic-element-collectio_23-2148130915.jpg", imageAlt: "Conversion analytics" }
          ]}
        />
      </div>
      
      <div id="stats" data-section="stats">
        <MetricCardTen 
          title="Key Performance Indicators"
          description="Real-time metrics tracking your dashboard performance and business growth."
          metrics={[
            {
              id: "1",              title: "Total Revenue",              subtitle: "Last 30 days",              category: "Revenue",              value: "$125,430",              buttons: [{ text: "View Details", href: "#" }]
            },
            {
              id: "2",              title: "Active Users",              subtitle: "Currently online",              category: "Users",              value: "2,847",              buttons: [{ text: "Manage", href: "#" }]
            },
            {
              id: "3",              title: "Conversion Rate",              subtitle: "Month-over-month",              category: "Performance",              value: "8.2%",              buttons: [{ text: "Analyze", href: "#" }]
            },
            {
              id: "4",              title: "Customer Retention",              subtitle: "Annual rate",              category: "Retention",              value: "94.3%",              buttons: [{ text: "Review", href: "#" }]
            },
            {
              id: "5",              title: "Support Tickets",              subtitle: "Open & pending",              category: "Support",              value: "23",              buttons: [{ text: "Address", href: "#" }]
            },
            {
              id: "6",              title: "System Uptime",              subtitle: "Current month",              category: "Infrastructure",              value: "99.9%",              buttons: [{ text: "Monitor", href: "#" }]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="charts" data-section="charts">
        <FeatureCardNine 
          title="Data Visualization"
          description="Advanced charting and analytics tools for comprehensive data insights."
          tag="Charts"
          features={[
            {
              id: 1,
              title: "Revenue Trends",              description: "Track revenue patterns and identify growth opportunities with interactive line charts and historical data comparison.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-vector/infographic-element-collectio_23-2148130915.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-vector/user-panel-dashboard-template_23-2148376374.jpg" }
            },
            {
              id: 2,
              title: "User Analytics",              description: "Monitor user behavior, engagement metrics, and demographic information with real-time dashboard updates.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-vector/user-panel-dashboard-template_23-2148376374.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-vector/infographic-element-collectio_23-2148130915.jpg" }
            },
            {
              id: 3,
              title: "Performance Metrics",              description: "Analyze system performance, load times, and resource utilization across your infrastructure.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-vector/infographic-element-collectio_23-2148130915.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-vector/user-panel-dashboard-template_23-2148376374.jpg" }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          buttons={[{ text: "Export Report", href: "#" }]}
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterSimple 
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#" },
                { label: "Pricing", href: "#" },
                { label: "Documentation", href: "#" },
                { label: "API", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "#" },
                { label: "Contact Us", href: "#" },
                { label: "Status Page", href: "#" },
                { label: "Community", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Security", href: "#" },
                { label: "Compliance", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Dashboard Analytics. All rights reserved."
          bottomRightText="Made with Webild"
        />
      </div>
    </ThemeProvider>
  );
}