"use client"

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { TrendingUp, BarChart3, LineChart, PieChart, Users, Clock, Target, Zap, AlertCircle, Server } from "lucide-react";

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="aurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Dashboard"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" }
          ]}
          button={{
            text: "Get Started",            href: "https://example.com/signup"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Analytics Dashboard"
          description="Monitor your key metrics and performance indicators in one unified dashboard with real-time data visualization and detailed analytics."
          background={{ variant: "canvas-reveal" }}
          avatars={[
            { src: "https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-25999.jpg", alt: "dashboard chart analytics graph data" },
            { src: "https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg", alt: "analytics bar chart business metrics statistics" },
            { src: "https://img.b2bpic.net/free-vector/dashboard-element-collection_23-2148365528.jpg", alt: "line chart trend analysis performance metrics dashboard" }
          ]}
          avatarText="Trusted by 500+ data teams"
          buttons={[
            { text: "View Dashboard", href: "#stats" },
            { text: "Learn More", href: "#charts" }
          ]}
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardSeven
          title="Key Performance Indicators"
          description="Real-time metrics showing your business performance across critical indicators"
          tag="Statistics"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "24.5%",              title: "Revenue Growth",              items: ["↑ 12% from last month", "Strong Q4 performance", "Exceeding targets"]
            },
            {
              id: "2",              value: "8,432",              title: "Active Users",              items: ["↑ 23% week-over-week", "Peak engagement hours: 2-6pm", "Mobile: 65%, Desktop: 35%"]
            },
            {
              id: "3",              value: "94.2%",              title: "System Uptime",              items: ["99.9% SLA compliance", "0 critical incidents", "Average response: 145ms"]
            },
            {
              id: "4",              value: "3.2M",              title: "Total Transactions",              items: ["↑ 18% month-over-month", "Average value: $245", "Success rate: 99.7%"]
            }
          ]}
        />
      </div>

      <div id="charts" data-section="charts">
        <FeatureCardTen
          title="Analytics & Insights"
          description="Comprehensive dashboard with detailed charts, real-time data updates, and actionable insights for informed decision-making."
          tag="Features"
          tagIcon={BarChart3}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",              title: "Revenue Trends",              description: "Track revenue movements across different time periods with detailed breakdown by product, region, and customer segment. Identify growth patterns and forecast future revenue with precision.",              media: {
                imageSrc: "https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-25999.jpg"
              },
              items: [
                { icon: LineChart, text: "Multi-period comparison" },
                { icon: TrendingUp, text: "Trend forecasting" },
                { icon: PieChart, text: "Segment analysis" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "User Engagement",              description: "Monitor user behavior patterns, session duration, and interaction metrics. Understand what drives engagement and optimize your platform for maximum user satisfaction and retention.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg"
              },
              items: [
                { icon: Users, text: "User activity tracking" },
                { icon: Clock, text: "Session analytics" },
                { icon: Target, text: "Conversion metrics" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Performance Metrics",              description: "Monitor system performance, API response times, and infrastructure health. Track uptime, error rates, and optimize your technical stack for reliability and speed.",              media: {
                imageSrc: "https://img.b2bpic.net/free-vector/dashboard-element-collection_23-2148365528.jpg"
              },
              items: [
                { icon: Zap, text: "Real-time monitoring" },
                { icon: AlertCircle, text: "Incident alerts" },
                { icon: Server, text: "Infrastructure health" }
              ],
              reverse: false
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Dashboard"
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Analytics", href: "#analytics" },
                { label: "Pricing", href: "#pricing" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#blog" },
                { label: "Careers", href: "#careers" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#docs" },
                { label: "API Reference", href: "#api" },
                { label: "Support", href: "#support" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" },
                { label: "Contact", href: "#contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Dashboard Analytics. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}