"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { BarChart3, HelpCircle, Quote, Users, Zap } from "lucide-react";

export default function DashboardPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Dashboard"
          navItems={[
            { name: "Overview", id: "overview" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" }
          ]}
          button={{
            text: "Export Data",            href: "#"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Your Data, Visualized"
          description="Monitor key metrics in real-time with an intuitive dashboard interface. Track performance, analyze trends, and make data-driven decisions with interactive charts and comprehensive statistics."
          tag="Analytics Dashboard"
          tagIcon={Zap}
          background={{ variant: "aurora" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-29391.jpg",              imageAlt: "Dashboard analytics interface"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-vector/line-graph-with-line-graph-that-says-number-s_698780-1079.jpg",              imageAlt: "Performance metrics chart"
            }
          ]}
          rating={5}
          ratingText="Trusted by 500+ teams"
          buttons={[
            { text: "View Dashboard", href: "#analytics" },
            { text: "Learn More", href: "#reports" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Track what matters most with real-time metrics and comprehensive analytics dashboards."
          tag="Key Metrics"
          metrics={[
            {
              id: "1",              value: "$2.4M",              description: "Total revenue generated across all campaigns and product lines"
            },
            {
              id: "2",              value: "12.5K",              description: "Active users engaging with the platform daily"
            },
            {
              id: "3",              value: "94%",              description: "Customer satisfaction rate from recent surveys"
            },
            {
              id: "4",              value: "3.2x",              description: "Average growth rate compared to previous quarter"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="Powerful Analytics Tools"
          description="Explore comprehensive reporting features designed to provide deep insights into your business performance and user behavior patterns."
          tag="Features"
          tagIcon={BarChart3}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg"
          imageAlt="Analytics tools interface"
          accordionItems={[
            {
              id: "1",              title: "Real-time Data Processing",              content: "View live data updates with millisecond latency. Stream analytics directly into your dashboard and make instant decisions based on the most current information available."
            },
            {
              id: "2",              title: "Custom Report Builder",              content: "Create tailored reports by selecting specific metrics, dimensions, and date ranges. Export in multiple formats including PDF, CSV, and Excel with scheduled delivery options."
            },
            {
              id: "3",              title: "Advanced Filtering",              content: "Drill down into data with powerful filters based on segments, regions, user types, and custom parameters to uncover hidden patterns and opportunities."
            },
            {
              id: "4",              title: "Predictive Analytics",              content: "Leverage machine learning models to forecast trends, identify anomalies, and receive intelligent alerts about significant changes in your key metrics."
            }
          ]}
          useInvertedBackground="invertDefault"
          mediaPosition="left"
          buttons={[
            { text: "Explore Features", href: "#" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Users Are Saying"
          description="Real feedback from teams using our dashboard to drive business growth"
          tag="Testimonials"
          tagIcon={Users}
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "@sarahchen",              testimonial: "The dashboard transformed how we monitor our metrics. What used to take hours now takes minutes. Absolutely game-changing.",              rating: 5,
              icon: Quote
            },
            {
              id: "2",              name: "Marcus Johnson",              handle: "@mjohnson",              testimonial: "Real-time updates and beautiful visualizations. Our entire team loves how intuitive the interface is.",              rating: 5,
              icon: Quote
            },
            {
              id: "3",              name: "Elena Rodriguez",              handle: "@erodriguez",              testimonial: "We've reduced reporting time by 70% and our decision-making is faster than ever. Highly recommended.",              rating: 5,
              icon: Quote
            },
            {
              id: "4",              name: "David Kim",              handle: "@dkim",              testimonial: "The predictive analytics feature alone is worth the investment. We're catching issues before they become problems.",              rating: 5,
              icon: Quote
            }
          ]}
          showRating={true}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about dashboard features, setup, and data management"
          tag="Help"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "How often is the data updated?",              content: "Our dashboard updates in real-time with latency less than 100ms. You'll see the most current data instantly as events occur."
            },
            {
              id: "2",              title: "Can I export reports automatically?",              content: "Yes, you can set up scheduled exports that automatically generate and deliver reports daily, weekly, or monthly in your preferred format."
            },
            {
              id: "3",              title: "What data sources can I connect?",              content: "We support connections to Google Analytics, Mixpanel, Segment, Salesforce, custom APIs, and direct database connections for maximum flexibility."
            },
            {
              id: "4",              title: "Is my data secure?",              content: "All data is encrypted end-to-end using AES-256 encryption. We maintain SOC 2 Type II compliance and regular security audits."
            },
            {
              id: "5",              title: "How many users can access the dashboard?",              content: "Unlimited users can access your dashboard. You can assign different roles and permissions to control what each user can see and edit."
            },
            {
              id: "6",              title: "What support options are available?",              content: "We offer email support for all plans, live chat for professional plans, and dedicated account managers for enterprise customers."
            }
          ]}
          textboxLayout="default"
          animationType="smooth"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "API Documentation", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Help Center", href: "#" },
                { label: "Community", href: "#" },
                { label: "Integrations", href: "#" },
                { label: "Status Page", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "GDPR", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Dashboard Analytics. All rights reserved."
          bottomRightText="Built with Webild"
        />
      </div>
    </ThemeProvider>
  );
}