"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { BarChart3, Layout, Mail, Sparkles } from "lucide-react";

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="large"
      background="circleGradient"
      cardStyle="elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Dashboard"
          navItems={[
            { name: "Overview", id: "overview" },
            { name: "Analytics", id: "analytics" },
            { name: "Settings", id: "settings" }
          ]}
          button={{
            text: "Export Data"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Dashboard Overview"
          description="Monitor your key metrics and performance indicators in real-time with interactive charts and detailed analytics"
          background={{ variant: "sparkles-gradient" }}
          tag="Analytics"
          tagIcon={BarChart3}
          buttons={[
            { text: "View Full Report" },
            { text: "Download Data" }
          ]}
          mediaItems={[
            {
              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 metrics overview"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg",              imageAlt: "Revenue and growth analytics"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "User engagement metrics"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg",              imageAlt: "Performance indicators"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg",              imageAlt: "Trend chart visualization"
            }
          ]}
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardFourteen
          title="Key Performance Metrics tracking your dashboard activity and user engagement across all channels"
          tag="Current Period"
          metrics={[
            {
              id: "1",              value: "24.5K",              description: "Total users active across all platforms this month with sustained growth"
            },
            {
              id: "2",              value: "+18%",              description: "Month-over-month increase in user engagement and session duration"
            },
            {
              id: "3",              value: "3.2M",              description: "Data points collected and processed by the analytics engine"
            },
            {
              id: "4",              value: "99.8%",              description: "System uptime and reliability maintaining consistent service availability"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEight
          title="Dashboard Features"
          description="Explore the powerful tools and capabilities that make data analysis seamless and intuitive"
          tag="How It Works"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Sidebar Navigation",              description: "Intuitive collapsible sidebar with quick access to all dashboard sections and navigation menus",              imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg"
            },
            {
              id: 2,
              title: "Real-Time Stats Cards",              description: "Interactive stat cards displaying key metrics with visual indicators and trend information",              imageSrc: "https://img.b2bpic.net/free-vector/social-media-analysis-design-graphs_53876-114315.jpg"
            },
            {
              id: 3,
              title: "Chart Visualizations",              description: "Flexible chart placeholders supporting multiple data visualization types and custom layouts",              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-infographic-element-set_23-2148375529.jpg"
            },
            {
              id: 4,
              title: "Data Export",              description: "Export dashboard data in multiple formats for further analysis and reporting capabilities",              imageSrc: "https://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg"
            }
          ]}
          buttons={[
            { text: "Get Started" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Dashboard Design"
          tagIcon={Layout}
          title="Comprehensive Dashboard for Data-Driven Insights"
          description="Our dashboard provides a unified view of all your important metrics and analytics. With a responsive sidebar navigation, clean stat cards, and flexible chart areas, you can monitor performance, track trends, and make data-driven decisions with confidence."
          metrics={[
            {
              value: "50+",              title: "Customizable Widgets"
            },
            {
              value: "15+",              title: "Chart Types Available"
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg"
          imageAlt="Dashboard user engagement example"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Updates"
          title="Stay Updated with Dashboard Alerts"
          description="Subscribe to receive weekly dashboard summaries, performance alerts, and feature updates directly in your inbox"
          tagIcon={Mail}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg"
          imageAlt="Dashboard alerts and notifications"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe Now"
          termsText="We'll send you weekly summaries and alerts. You can unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#security" },
                { label: "Updates", href: "#updates" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Blog", href: "#blog" },
                { label: "Careers", href: "#careers" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#docs" },
                { label: "API Reference", href: "#api" },
                { label: "Support", href: "#support" },
                { label: "Status Page", href: "#status" }
              ]
            }
          ]}
          copyrightText="© 2025 Dashboard Analytics | All rights reserved"
        />
      </div>
    </ThemeProvider>
  );
}