"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FooterSimple from '@/components/sections/footer/FooterSimple';

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Dashboard"
          navItems={[
            { name: "Home", id: "dashboard" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" },
            { name: "Help", id: "help" }
          ]}
          button={{
            text: "Sign In",            href: "https://example.com/signin"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Dashboard"
          description="Manage your data, analytics, and business metrics in one unified view with real-time insights and comprehensive reporting tools."
          buttons={[
            { text: "Get Started", href: "https://example.com/signup" },
            { text: "Learn More", href: "#features" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/office-hardware_1098-14352.jpg"
          imageAlt="office workspace modern business dashboard"
          showDimOverlay={true}
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardTen
          title="Key Performance Indicators"
          description="Real-time metrics and statistics to monitor your dashboard performance and business growth."
          metrics={[
            {
              id: "1",              title: "Total Revenue",              subtitle: "Year-to-date earnings from all sources",              category: "Finance",              value: "$284,500"
            },
            {
              id: "2",              title: "Active Users",              subtitle: "Users engaged in the last 30 days",              category: "Users",              value: "12,847"
            },
            {
              id: "3",              title: "Conversion Rate",              subtitle: "Percentage of completed transactions",              category: "Sales",              value: "3.24%"
            },
            {
              id: "4",              title: "Customer Satisfaction",              subtitle: "Average rating from customer feedback",              category: "Quality",              value: "4.8/5.0"
            },
            {
              id: "5",              title: "System Uptime",              subtitle: "Monthly availability of services",              category: "Infrastructure",              value: "99.97%"
            },
            {
              id: "6",              title: "Average Response Time",              subtitle: "API response time in milliseconds",              category: "Performance",              value: "245ms"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="charts" data-section="charts">
        <FeatureCardNineteen
          title="Analytics & Visualization"
          description="Comprehensive chart sections for data visualization, trend analysis, and business insights across multiple dimensions."
          tag="Charts"
          features={[
            {
              id: 1,
              tag: "Revenue",              title: "Monthly Revenue Trends",              subtitle: "Track revenue growth across months",              description: "Visual representation of monthly revenue patterns, including seasonal trends, growth percentages, and year-over-year comparisons. Customize time ranges and export data for further analysis.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "chart analytics data dashboard graph"
            },
            {
              id: 2,
              tag: "Users",              title: "User Acquisition & Retention",              subtitle: "Monitor user growth metrics",              description: "Track new user sign-ups, active user counts, churn rates, and retention percentages. Analyze demographic data and user behavior patterns to optimize your customer acquisition strategy.",              imageSrc: "https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg",              imageAlt: "bar chart statistics data analytics"
            },
            {
              id: 3,
              tag: "Performance",              title: "System Performance Metrics",              subtitle: "Real-time infrastructure monitoring",              description: "Monitor API response times, server load, database performance, and error rates. Set custom alerts for performance degradation and track historical trends to optimize system resources.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "chart analytics data dashboard graph"
            },
            {
              id: 4,
              tag: "Goals",              title: "Goal Achievement Dashboard",              subtitle: "Track progress towards objectives",              description: "Visualize progress on key business objectives, project milestones, and team targets. Compare actual vs. planned metrics and adjust strategies based on real-time performance data.",              imageSrc: "https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg",              imageAlt: "bar chart statistics data analytics"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="data-table" data-section="data-table">
        <BlogCardThree
          title="Recent Data & Activity"
          description="Latest transactions, user activities, and system events with detailed information and quick actions."
          tag="Data"
          blogs={[
            {
              id: "1",              category: "Transaction",              title: "High-Value Purchase Order #2847",              excerpt: "Enterprise client completed $45,000 annual subscription renewal with priority support tier upgrade.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "chart analytics data dashboard graph",              authorName: "Finance Team",              authorAvatar: "https://img.b2bpic.net/free-photo/office-hardware_1098-14352.jpg",              date: "Dec 14, 2024"
            },
            {
              id: "2",              category: "User Activity",              title: "New Team Member Onboarded Successfully",              excerpt: "Marketing department expanded with 3 new team members. Access permissions configured and training initiated.",              imageSrc: "https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg",              imageAlt: "bar chart statistics data analytics",              authorName: "HR System",              authorAvatar: "https://img.b2bpic.net/free-photo/office-hardware_1098-14352.jpg",              date: "Dec 14, 2024"
            },
            {
              id: "3",              category: "System Event",              title: "Database Backup Completed Successfully",              excerpt: "Automated backup process finished. 250GB of data encrypted and stored across three redundant locations.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "chart analytics data dashboard graph",              authorName: "Infrastructure",              authorAvatar: "https://img.b2bpic.net/free-photo/office-hardware_1098-14352.jpg",              date: "Dec 14, 2024"
            },
            {
              id: "4",              category: "Alert",              title: "API Rate Limit Warning Issued",              excerpt: "External API consumer approaching monthly rate limit. Automatic throttling enabled to prevent service disruption.",              imageSrc: "https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg",              imageAlt: "bar chart statistics data analytics",              authorName: "DevOps",              authorAvatar: "https://img.b2bpic.net/free-photo/office-hardware_1098-14352.jpg",              date: "Dec 14, 2024"
            },
            {
              id: "5",              category: "Report",              title: "Monthly Compliance Audit Report Generated",              excerpt: "Complete security and regulatory compliance audit finalized. All systems passed with zero critical findings.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "chart analytics data dashboard graph",              authorName: "Compliance",              authorAvatar: "https://img.b2bpic.net/free-photo/office-hardware_1098-14352.jpg",              date: "Dec 13, 2024"
            },
            {
              id: "6",              category: "Integration",              title: "Third-Party Service Integration Updated",              excerpt: "Payment gateway API upgraded to v3.2. All transactions now support advanced fraud detection and 3D Secure.",              imageSrc: "https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg",              imageAlt: "bar chart statistics data analytics",              authorName: "Engineering",              authorAvatar: "https://img.b2bpic.net/free-photo/office-hardware_1098-14352.jpg",              date: "Dec 13, 2024"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Product",              items: [
                { label: "Dashboard", href: "#dashboard" },
                { label: "Reports", href: "#reports" },
                { label: "Analytics", href: "#analytics" },
                { label: "Integration", href: "#integration" }
              ]
            },
            {
              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: "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: "Legal",              items: [
                { label: "Privacy", href: "#privacy" },
                { label: "Terms", href: "#terms" },
                { label: "Security", href: "#security" },
                { label: "Compliance", href: "#compliance" }
              ]
            }
          ]}
          bottomLeftText="© 2024 Dashboard Analytics. All rights reserved."
          bottomRightText="Built with modern web technologies"
        />
      </div>
    </ThemeProvider>
  );
}