"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: "Dashboard", id: "dashboard" },
            { name: "Analytics", id: "analytics" },
            { name: "Reports", id: "reports" },
            { name: "Settings", id: "settings" },
            { name: "Help", id: "help" }
          ]}
          brandName="Dashboard"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Dashboard"
          description="Monitor your key metrics, track performance, and manage your operations from a single unified interface. Real-time insights at your fingertips."
          buttons={[
            { text: "View Analytics", href: "#analytics" },
            { text: "Download Report", href: "#reports" }
          ]}
          background={{ variant: "plain" }}
          imageSrc="https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg"
          imageAlt="dashboard analytics metrics monitoring interface"
          frameStyle="card"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Key Performance Indicators"
          description="Real-time metrics showing your dashboard performance and activity status"
          metrics={[
            {
              id: "1",              value: "12,548",              title: "Total Users",              description: "Active users this month",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-female-executive-with-digital-tablet_1098-694.jpg",              imageAlt: "User metrics"
            },
            {
              id: "2",              value: "$847,291",              title: "Revenue",              description: "Monthly recurring revenue",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-female-executive-with-digital-tablet_1098-694.jpg",              imageAlt: "Revenue metrics"
            },
            {
              id: "3",              value: "94.2%",              title: "Uptime",              description: "System availability status",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-female-executive-with-digital-tablet_1098-694.jpg",              imageAlt: "Uptime metrics"
            },
            {
              id: "4",              value: "3.2s",              title: "Avg Response",              description: "Average server response time",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-female-executive-with-digital-tablet_1098-694.jpg",              imageAlt: "Performance metrics"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="charts" data-section="charts">
        <FeatureCardTwentyFour
          title="Analytics & Insights"
          description="Comprehensive visualization of your dashboard data and trends"
          animationType="slide-up"
          features={[
            {
              id: "1",              title: "Revenue Trends",              author: "Finance Team",              description: "Monthly revenue progression with growth indicators and forecast analysis",              tags: ["Revenue", "Trends"],
              imageSrc: "https://img.b2bpic.net/free-vector/colorful-dashboard-collection-chart-elements_23-2148263144.jpg",              imageAlt: "Revenue chart"
            },
            {
              id: "2",              title: "User Engagement",              author: "Analytics Team",              description: "Real-time user activity, session duration, and engagement metrics",              tags: ["Users", "Engagement"],
              imageSrc: "https://img.b2bpic.net/free-vector/colorful-dashboard-collection-chart-elements_23-2148263144.jpg",              imageAlt: "User engagement chart"
            },
            {
              id: "3",              title: "System Performance",              author: "DevOps Team",              description: "CPU usage, memory allocation, and infrastructure health status",              tags: ["Performance", "System"],
              imageSrc: "https://img.b2bpic.net/free-vector/colorful-dashboard-collection-chart-elements_23-2148263144.jpg",              imageAlt: "Performance metrics"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="activity" data-section="activity">
        <TeamCardEleven
          title="Recent Activity"
          description="Latest updates and notifications from your dashboard systems"
          groups={[
            {
              id: "recent",              groupTitle: "Today",              members: [
                {
                  id: "1",                  title: "System Update Completed",                  subtitle: "Infrastructure",                  detail: "2:45 PM - All systems operational",                  imageSrc: "https://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg",                  imageAlt: "System update"
                },
                {
                  id: "2",                  title: "New User Registration",                  subtitle: "Accounts",                  detail: "1:30 PM - 3 new accounts created",                  imageSrc: "https://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg",                  imageAlt: "New user"
                },
                {
                  id: "3",                  title: "Revenue Milestone",                  subtitle: "Finance",                  detail: "12:15 PM - Monthly target exceeded",                  imageSrc: "https://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg",                  imageAlt: "Revenue update"
                }
              ]
            },
            {
              id: "yesterday",              groupTitle: "Yesterday",              members: [
                {
                  id: "4",                  title: "Backup Completed",                  subtitle: "Data",                  detail: "11:30 PM - All data backed up",                  imageSrc: "https://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg",                  imageAlt: "Backup complete"
                },
                {
                  id: "5",                  title: "Security Audit",                  subtitle: "Security",                  detail: "6:00 PM - Audit passed successfully",                  imageSrc: "https://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg",                  imageAlt: "Security audit"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="actions" data-section="actions">
        <PricingCardOne
          title="Quick Actions"
          description="Common dashboard operations and management tasks"
          animationType="slide-up"
          plans={[
            {
              id: "1",              badge: "Essential",              price: "Reports",              subtitle: "Generate and export analytics reports",              features: ["Weekly reports", "Export to PDF", "Email scheduling", "Custom filters"]
            },
            {
              id: "2",              badge: "Popular",              price: "Settings",              subtitle: "Manage dashboard preferences and integrations",              features: ["User management", "API access", "Webhooks", "Team collaboration"]
            },
            {
              id: "3",              badge: "Advanced",              price: "Integrations",              subtitle: "Connect external tools and data sources",              features: ["Third-party APIs", "Data sync", "Automation rules", "Custom workflows"]
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactCTA
          tag="Get Started"
          title="Ready to Optimize Your Dashboard?"
          description="Take control of your operations with advanced monitoring, real-time analytics, and powerful insights. Upgrade your dashboard experience today."
          buttons={[
            { text: "Start Free Trial", href: "#signup" },
            { text: "Contact Sales", href: "#contact" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Dashboard"
          leftLink={{ text: "Privacy Policy", href: "#privacy" }}
          rightLink={{ text: "Terms of Service", href: "#terms" }}
        />
      </div>
    </ThemeProvider>
  );
}