"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import MediaAbout from "@/components/sections/about/MediaAbout";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Sparkles, Crown, Brain, BarChart3, Zap, Globe, Shield, Lock, KeyRound, Plug, Code, Database, Cloud, Server, Play, Cpu, CheckCircle, TrendingUp, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="large"
      background="circleGradient"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Nexus AI"
          navItems={[
            { name: "Features", id: "features" },
            { name: "About", id: "about" },
            { name: "Metrics", id: "metrics" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="AI Intelligence at Enterprise Scale"
          description="Unlock predictive analytics, intelligent automation, and real-time insights. Transform your business with our advanced AI platform designed for premium performance."
          tag="Advanced AI Platform"
          tagIcon={Sparkles}
          buttons={[
            { text: "Start Free Trial", href: "#contact" },
            { text: "View Documentation", href: "#" }
          ]}
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Enterprise Analytics Hub",            logoIcon: Brain,
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBJFWldSeNNopDVPyjMitUF1w/a-sleek-premium-ai-dashboard-interface-f-1772484498452-4dbaf6a7.png",            searchPlaceholder: "Search analytics...",            buttons: [
              { text: "Dashboard", href: "#" },
              { text: "Export Report", href: "#" }
            ],
            sidebarItems: [
              { icon: BarChart3 },
              { icon: Zap, active: true },
              { icon: Code }
            ],
            stats: [
              { title: "Processing Speed", values: [2400, 3500, 4800], valueSuffix: "ms", description: "Average latency reduced" },
              { title: "Accuracy Rate", values: [94.2, 96.5, 98.7], valueSuffix: "%", description: "Model precision improvement" },
              { title: "Active Deployments", values: [248, 512, 1024], description: "Enterprise clients active" }
            ],
            chartTitle: "Performance Metrics",            chartData: [
              { value: 65 },
              { value: 78 },
              { value: 85 },
              { value: 92 },
              { value: 88 }
            ],
            listTitle: "Recent Operations",            listItems: [
              { icon: Brain, title: "Model Training: $2.5M", status: "Completed" },
              { icon: Zap, title: "API Call: 1.2B requests", status: "Processing" },
              { icon: TrendingUp, title: "Inference: 98.7% uptime", status: "Optimal" }
            ]
          }}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Intelligent Solutions Built for Scale"
          description="Experience cutting-edge AI capabilities designed for enterprise excellence and premium performance."
          tag="Premium Features"
          tagIcon={Crown}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              title: "Real-Time Analytics",              description: "Process massive datasets instantly with our distributed computing infrastructure.",              bentoComponent: "icon-info-cards",              items: [
                { icon: BarChart3, label: "Data Processing", value: "1.2PB/day" },
                { icon: Zap, label: "Query Speed", value: "<100ms" },
                { icon: Globe, label: "Global Reach", value: "150+ regions" }
              ]
            },
            {
              title: "Advanced Model Training",              description: "Deploy sophisticated neural networks with automated optimization and scaling.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Enterprise Security",              description: "Military-grade encryption and compliance with global security standards.",              bentoComponent: "orbiting-icons",              centerIcon: Shield,
              items: [
                { icon: Lock, ring: 1 },
                { icon: KeyRound, ring: 2 },
                { icon: Zap, ring: 3 }
              ]
            },
            {
              title: "Predictive Intelligence",              description: "Forecast trends and patterns with machine learning algorithms optimized for accuracy.",              bentoComponent: "line-chart"
            },
            {
              title: "Seamless Integration",              description: "Connect with your existing infrastructure through our comprehensive API ecosystem.",              bentoComponent: "marquee",              centerIcon: Plug,
              variant: "icon",              icons: [Code, Database, Cloud, Zap, Server]
            },
            {
              title: "Workflow Pipeline",              description: "Streamline operations with intelligent automation and decision trees.",              bentoComponent: "3d-task-list",              items: [
                { icon: Play, label: "Initialize", time: "2ms" },
                { icon: Cpu, label: "Process", time: "45ms" },
                { icon: CheckCircle, label: "Deploy", time: "12ms" }
              ]
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Engineered for Excellence"
          description="We combine deep machine learning expertise with enterprise-grade infrastructure to deliver AI solutions that drive measurable business value. Our platform powers critical decisions across industries."
          tag="About Nexus AI"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBJFWldSeNNopDVPyjMitUF1w/premium-corporate-image-showcasing-advan-1772484498046-4584600b.png"
          useInvertedBackground={false}
          buttons={[
            { text: "Learn Our Story", href: "#" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Industry-Leading Performance"
          description="Our platform delivers exceptional results across key performance indicators."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          metrics={[
            { id: "1", icon: TrendingUp, title: "Accuracy", value: "99.2%" },
            { id: "2", icon: Zap, title: "Speed", value: "<50ms" },
            { id: "3", icon: Users, title: "Enterprise Clients", value: "5,000+" },
            { id: "4", icon: Globe, title: "Global Coverage", value: "180+ Countries" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Trusted by Industry Leaders"
          description="See how top enterprises leverage our AI platform to transform their operations."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "Chief Data Officer",              company: "Fortune 500 Tech",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBJFWldSeNNopDVPyjMitUF1w/professional-portrait-of-a-confident-suc-1772484497905-e1a047e9.png"
            },
            {
              id: "2",              name: "Michael Rodriguez",              role: "VP Engineering",              company: "Global Financial Corp",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBJFWldSeNNopDVPyjMitUF1w/professional-corporate-portrait-of-an-en-1772484498126-f5e588f1.png"
            },
            {
              id: "3",              name: "Emily Thompson",              role: "Innovation Director",              company: "Enterprise Solutions Inc",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBJFWldSeNNopDVPyjMitUF1w/premium-professional-headshot-of-an-inno-1772484498246-66f58a61.png"
            },
            {
              id: "4",              name: "David Liu",              role: "Product Lead",              company: "Cloud Innovation Labs",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBJFWldSeNNopDVPyjMitUF1w/corporate-portrait-of-a-tech-leader-or-p-1772484497743-f829ee9b.png"
            }
          ]}
          kpiItems={[
            { value: "89%", label: "Revenue Growth" },
            { value: "156ms", label: "Faster Processing" },
            { value: "94%", label: "Client Satisfaction" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your business with premium AI intelligence? Start your journey today."
          animationType="entrance-slide"
          buttons={[
            { text: "Get Started", href: "#" },
            { text: "Schedule Demo", href: "#" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBJFWldSeNNopDVPyjMitUF1w/luxury-abstract-background-with-premium--1772484498287-7c408bc6.png"
          logoText="Nexus AI"
          copyrightText="© 2025 Nexus AI. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#" },
                { label: "API Docs", href: "#" },
                { label: "Enterprise", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Security", href: "#" },
                { label: "Compliance", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
