"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="none"
      cardStyle="soft-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <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: "Get Started",            href: "#"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="Dashboard"
          description="Monitor your business metrics in real-time with our comprehensive dashboard. Track performance, analyze trends, and make data-driven decisions with ease."
          background={{ variant: "plain" }}
          buttons={[
            { text: "View Dashboard", href: "#overview" },
            { text: "Learn More", href: "#" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg"
          imageAlt="Dashboard interface with analytics"
          frameStyle="browser"
        />
      </div>
      
      <div id="stats" data-section="stats">
        <MetricCardTen
          title="Key Performance Indicators"
          description="Monitor your most important metrics at a glance"
          tag="Analytics"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              title: "Total Revenue",              subtitle: "Last 30 days",              category: "Revenue",              value: "$124,540",              buttons: [{ text: "View Details", href: "#" }]
            },
            {
              id: "2",              title: "Active Users",              subtitle: "Currently online",              category: "Users",              value: "2,847",              buttons: [{ text: "View Report", href: "#" }]
            },
            {
              id: "3",              title: "Conversion Rate",              subtitle: "Month-over-month",              category: "Performance",              value: "3.24%",              buttons: [{ text: "Analyze", href: "#" }]
            },
            {
              id: "4",              title: "Average Order Value",              subtitle: "Last 30 days",              category: "Sales",              value: "$285.50",              buttons: [{ text: "View Trends", href: "#" }]
            }
          ]}
        />
      </div>
      
      <div id="charts" data-section="charts">
        <FeatureCardSix
          title="Data Visualization"
          description="Explore your data through interactive charts and graphs"
          tag="Charts"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Revenue Trend Analysis",              description: "Track your revenue progression over time with detailed line charts showing daily, weekly, and monthly trends",              imageSrc: "https://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg"
            },
            {
              id: 2,
              title: "Category Performance",              description: "Compare performance across different product categories using interactive bar charts and comparisons",              imageSrc: "https://img.b2bpic.net/free-photo/laptop-computer-with-company-profit-progress-screen_482257-77678.jpg"
            },
            {
              id: 3,
              title: "Customer Distribution",              description: "Visualize your customer base by demographics, location, and purchase behavior with pie and donut charts",              imageSrc: "https://img.b2bpic.net/free-photo/person-talking-colleagues-video-call-communication-using-smartphone-business-meeting-businessman-holding-mobile-phone-online-conference-with-workmates-corporate-office_482257-28475.jpg"
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to optimize your dashboard? Connect with our team to customize your analytics setup and maximize your insights."
          animationType="entrance-slide"
          buttons={[
            { text: "Schedule Demo", href: "#" },
            { text: "Contact Support", href: "#" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/business-graphs-figures-laptop-left-open-desk-empty-office_482257-84546.jpg"
          imageAlt="Dashboard footer visualization"
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#" },
                { label: "Pricing", href: "#" },
                { label: "Security", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "#" },
                { label: "Contact Us", href: "#" },
                { label: "Status", href: "#" }
              ]
            }
          ]}
          logoText="Dashboard"
          copyrightText="© 2025 Dashboard Analytics. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}