"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { BarChart3, Calendar, Star } from "lucide-react";

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="large"
      background="floatingGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <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: "Get Started",            href: "#"
          }}
        />
      </div>

      <div id="overview" data-section="overview">
        <HeroBillboardRotatedCarousel
          title="Dashboard Analytics"
          description="Monitor your business metrics in real-time with comprehensive data visualization and interactive reports."
          tag="Real-time Insights"
          tagIcon={BarChart3}
          background={{ variant: "plain" }}
          buttons={[
            { text: "View Reports" },
            { text: "Export Data" }
          ]}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "dashboard analytics data visualization admin panel"
            },
            {
              id: "2",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "business chart analytics graph data analysis metrics"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-photo/business-report-graphs-charts-business-reports-pile-documents-business-concept_1150-2254.jpg",              imageAlt: "statistics performance growth metrics"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "dashboard analytics data visualization admin panel"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "business chart analytics graph data analysis metrics"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-photo/business-report-graphs-charts-business-reports-pile-documents-business-concept_1150-2254.jpg",              imageAlt: "statistics performance growth metrics"
            }
          ]}
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardFourteen
          title="Key Performance Indicators at a Glance"
          tag="Q4 2024"
          metrics={[
            {
              id: "1",              value: "24.5%",              description: "Total revenue growth compared to previous quarter"
            },
            {
              id: "2",              value: "8,542",              description: "Active users currently using the platform"
            },
            {
              id: "3",              value: "94.2%",              description: "System uptime and availability this month"
            },
            {
              id: "4",              value: "2.3s",              description: "Average page load time across all endpoints"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEight
          title="Dashboard Features"
          description="Explore the core features that make our dashboard the industry standard for data analysis"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: 1,
              title: "Real-time Data Sync",              description: "Live updates from all your data sources with zero latency. Monitor changes as they happen across your entire infrastructure.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "dashboard analytics data visualization admin panel"
            },
            {
              id: 2,
              title: "Advanced Analytics",              description: "Comprehensive analysis tools with machine learning insights. Identify trends, patterns, and anomalies automatically.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "business chart analytics graph data analysis metrics"
            },
            {
              id: 3,
              title: "Custom Visualizations",              description: "Create tailored charts and graphs that match your specific business needs. Drag-and-drop interface for easy customization.",              imageSrc: "https://img.b2bpic.net/free-photo/business-report-graphs-charts-business-reports-pile-documents-business-concept_1150-2254.jpg",              imageAlt: "statistics performance growth metrics"
            },
            {
              id: 4,
              title: "Automated Reports",              description: "Schedule reports to be generated and delivered automatically. Set custom intervals and recipient lists with one click.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "dashboard analytics data visualization admin panel"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "/placeholders/placeholder1.webp"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "/placeholders/placeholder1.webp"
            },
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "/placeholders/placeholder1.webp"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "/placeholders/placeholder1.webp"
            },
            {
              id: "5",              name: "Jessica Martinez",              imageSrc: "/placeholders/placeholder1.webp"
            },
            {
              id: "6",              name: "Robert Wilson",              imageSrc: "/placeholders/placeholder1.webp"
            }
          ]}
          cardTitle="Over 50,000+ teams rely on our dashboard platform for their analytics needs"
          cardTag="Customer Testimonials"
          cardTagIcon={Star}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Transform Your Analytics?"
          ctaDescription="Get started with a personalized demo and discover how our dashboard can streamline your data analysis workflow."
          ctaButton={{
            text: "Schedule Demo",            href: "#contact"
          }}
          ctaIcon={Calendar}
          faqs={[
            {
              id: "1",              title: "What data sources can the dashboard connect to?",              content: "Our dashboard integrates with 200+ data sources including PostgreSQL, MySQL, MongoDB, Salesforce, Google Analytics, AWS CloudWatch, and more. Custom API connections are also supported."
            },
            {
              id: "2",              title: "How often is data refreshed?",              content: "Data refresh rates can be configured from real-time (1-second intervals) to hourly updates, depending on your plan. Enterprise customers can set custom refresh schedules."
            },
            {
              id: "3",              title: "Is there a mobile app available?",              content: "Yes, our native mobile apps for iOS and Android provide full dashboard access with offline capability. Sync occurs automatically when connectivity is restored."
            },
            {
              id: "4",              title: "What security measures are in place?",              content: "We implement end-to-end encryption, role-based access control, two-factor authentication, and comply with SOC 2, GDPR, and HIPAA standards."
            }
          ]}
          useInvertedBackground="invertDefault"
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Analytics Dashboard"
          columns={[
            {
              items: [
                { label: "Overview", href: "overview" },
                { label: "Analytics", href: "analytics" },
                { label: "Reports", href: "reports" }
              ]
            },
            {
              items: [
                { label: "Documentation", href: "https://docs.example.com" },
                { label: "API Reference", href: "https://api.example.com" },
                { label: "Status Page", href: "https://status.example.com" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "#" },
                { label: "Pricing", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}