"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Zap, BarChart3, Home, TrendingUp, Settings, Users, Activity } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: "Dashboard", id: "hero" },
            { name: "Analytics", id: "#" },
            { name: "Settings", id: "#" },
            { name: "Support", id: "#" }
          ]}
          brandName="Analytics Hub"
          button={{
            text: "Export Data",            href: "#"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Real-Time Analytics Dashboard"
          description="Monitor your key metrics and performance indicators at a glance with interactive charts and instant data updates."
          tag="Live Analytics"
          tagIcon={Zap}
          buttons={[
            { text: "View Reports", href: "#" },
            { text: "Download CSV", href: "#" }
          ]}
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Dashboard Metrics",            logoIcon: BarChart3,
            imageSrc: "https://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg",            imageAlt: "Dashboard avatar",            buttons: [
              { text: "Dashboard", href: "#" },
              { text: "Export", href: "#" }
            ],
            sidebarItems: [
              { icon: Home, active: true },
              { icon: BarChart3 },
              { icon: TrendingUp },
              { icon: Settings }
            ],
            stats: [
              {
                title: "Total Revenue",                values: [24567, 32890, 45230],
                valuePrefix: "$",                description: "Monthly revenue growth"
              },
              {
                title: "Active Users",                values: [1240, 1856, 2340],
                description: "Platform engagement"
              },
              {
                title: "Conversion Rate",                values: [3.2, 4.5, 5.8],
                valueSuffix: "%",                description: "Sales conversion metrics"
              }
            ],
            chartTitle: "Revenue Trend",            chartData: [
              { value: 45 },
              { value: 62 },
              { value: 38 },
              { value: 75 },
              { value: 58 },
              { value: 82 },
              { value: 70 }
            ],
            listTitle: "Recent Transactions",            listItems: [
              {
                icon: TrendingUp,
                title: "$12,500 Revenue",                status: "Completed"
              },
              {
                icon: Users,
                title: "5 New Users",                status: "Active"
              },
              {
                icon: Activity,
                title: "98% Uptime",                status: "Healthy"
              }
            ],
            searchPlaceholder: "Search metrics..."
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Analytics Hub"
          columns={[
            {
              items: [
                { label: "Dashboard", href: "#" },
                { label: "Reports", href: "#" },
                { label: "Settings", href: "#" }
              ]
            },
            {
              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Support", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}