"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="medium"
      background="aurora"
      cardStyle="solid"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Dashboard"
          navItems={[
            { name: "Overview", id: "overview" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Dashboard Overview"
          description="Monitor your business metrics and performance indicators in real-time with an intuitive, comprehensive dashboard interface."
          tag="Analytics"
          imageSrc="https://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg"
          imageAlt="Dashboard interface background"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Explore Metrics", href: "#stats" },
            { text: "View Charts", href: "#charts" }
          ]}
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardFourteen
          title="Key Performance Indicators"
          tag="Stats"
          metrics={[
            {
              id: "1",              value: "24.5K",              description: "Total Active Users across all platforms and regions"
            },
            {
              id: "2",              value: "$1.2M",              description: "Revenue generated this quarter with 18% growth"
            },
            {
              id: "3",              value: "94.2%",              description: "Customer satisfaction score with upward trend"
            },
            {
              id: "4",              value: "3.4s",              description: "Average page load time for optimal performance"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="charts" data-section="charts">
        <FeatureCardTwentyThree
          title="Data Visualization Charts"
          description="Interactive charts and graphs displaying real-time analytics, trends, and performance metrics for comprehensive business intelligence."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",              title: "Revenue Trends Chart",              tags: ["Revenue", "Monthly", "Q1 2025"],
              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-infographic-element-set_23-2148375529.jpg",              imageAlt: "Monthly revenue trends visualization"
            },
            {
              id: "2",              title: "User Growth Analytics",              tags: ["Users", "Growth", "Real-time"],
              imageSrc: "https://img.b2bpic.net/free-vector/gradient-infographic-elements-with-dark-background_52683-8247.jpg",              imageAlt: "User growth over time chart"
            },
            {
              id: "3",              title: "Conversion Funnel Analysis",              tags: ["Conversion", "Funnel", "Analytics"],
              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-infographic-element-set_23-2148375529.jpg",              imageAlt: "Conversion funnel breakdown"
            },
            {
              id: "4",              title: "Geographic Distribution Map",              tags: ["Geography", "Distribution", "Regions"],
              imageSrc: "https://img.b2bpic.net/free-vector/gradient-infographic-elements-with-dark-background_52683-8247.jpg",              imageAlt: "User distribution by geographic region"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get Support"
          title="Need Dashboard Assistance?"
          description="Our support team is ready to help you optimize your dashboard experience and answer any questions about analytics and reporting features."
          buttons={[
            { text: "Contact Support", href: "mailto:support@example.com" },
            { text: "View Documentation", href: "#" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Overview", href: "#overview" },
                { label: "Analytics", href: "#analytics" },
                { label: "Reports", href: "#reports" },
                { label: "Pricing", href: "#pricing" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "https://docs.example.com" },
                { label: "API Reference", href: "https://api.example.com" },
                { label: "Support", href: "https://support.example.com" },
                { label: "Community", href: "https://community.example.com" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Blog", href: "https://blog.example.com" },
                { label: "Careers", href: "https://careers.example.com" },
                { label: "Contact", href: "#contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Dashboard Analytics. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}