"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Code, Users, Shield, Zap, TrendingUp, Globe, CheckCircle } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: "Features", id: "features" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
            { name: "Docs", id: "https://docs.nestjs.com" }
          ]}
          brandName="NestJS"
          button={{
            text: "Get Started",            href: "https://docs.nestjs.com"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="A progressive Node.js framework for building efficient and scalable server-side applications"
          description="NestJS combines the best of TypeScript and Node.js to create enterprise-grade applications. Trusted by companies like BMW, IBM, GitLab, and Adidas."
          tag="Enterprise Ready"
          tagIcon={Shield}
          imageSrc="/images/header-2.50296714-1768998137010.jpg"
          imageAlt="NestJS enterprise development"
          buttons={[
            { text: "Get Started", href: "https://docs.nestjs.com" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Trusted by Industry Leaders"
          description="Join thousands of companies that rely on NestJS for their mission-critical applications"
          useInvertedBackground="invertDefault"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "50K+",              title: "GitHub Stars",              description: "Active developer community contributing to the ecosystem",              icon: TrendingUp
            },
            {
              id: "2",              value: "100+",              title: "Enterprise Clients",              description: "Fortune 500 companies using NestJS in production",              icon: Users
            },
            {
              id: "3",              value: "99.9%",              title: "Uptime",              description: "Proven reliability for mission-critical applications",              icon: Shield
            },
            {
              id: "4",              value: "10M+",              title: "Downloads",              description: "Monthly npm downloads across all packages",              icon: Globe
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Why Choose NestJS Enterprise?"
          description="Discover the powerful features that make NestJS the preferred choice for enterprise development"
          useInvertedBackground="noInvert"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          features={[
            {
              title: "TypeScript First",              description: "Built with TypeScript from the ground up, providing type safety and excellent developer experience",              imageSrc: "/images/startup.b4dbf43d-1768998136964.svg",              imageAlt: "TypeScript development"
            },
            {
              title: "Modular Architecture",              description: "Scalable architecture with modules, decorators, and dependency injection for maintainable code",              imageSrc: "/images/puzzle.a43aa4b7-1768998136964.svg",              imageAlt: "Modular architecture"
            },
            {
              title: "Enterprise Security",              description: "Built-in security features including guards, interceptors, and authentication strategies",              imageSrc: "/images/protect.5939735a-1768998136970.svg",              imageAlt: "Enterprise security"
            },
            {
              title: "Microservices Ready",              description: "Native support for microservices architecture with multiple transport layers",              imageSrc: "/images/big-data.88454030-1768998136964.svg",              imageAlt: "Microservices architecture"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialCardTwelve
          useInvertedBackground="invertDefault"
          cardTitle="Trusted by over 100+ enterprise companies worldwide for building scalable applications"
          cardTag="Industry Leaders"
          testimonials={[
            {
              id: "1",              name: "BMW Engineering",              imageSrc: "/images/bmw.0ce4c05c-1768998136800.svg",              imageAlt: "BMW"
            },
            {
              id: "2",              name: "IBM Development",              imageSrc: "/images/ibm.b8c76e06-1768998136843.svg",              imageAlt: "IBM"
            },
            {
              id: "3",              name: "GitLab Platform",              imageSrc: "/images/gitlab.4f9d2995-1768998136818.png",              imageAlt: "GitLab"
            },
            {
              id: "4",              name: "Adidas Digital",              imageSrc: "/images/adidas.718f26f2-1768998136836.svg",              imageAlt: "Adidas"
            },
            {
              id: "5",              name: "JetBrains Tools",              imageSrc: "/images/jetbrains.536f2da5-1768998136825.svg",              imageAlt: "JetBrains"
            },
            {
              id: "6",              name: "Red Hat Solutions",              imageSrc: "/images/red-hat.c5e6e64a-1768998136843.svg",              imageAlt: "Red Hat"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Zap}
          title="Ready to build your next enterprise application?"
          description="Join thousands of developers and companies using NestJS to build scalable, maintainable applications. Get started with our comprehensive documentation and enterprise support."
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Get Started"
          termsText="By signing up, you agree to receive updates about NestJS enterprise solutions and community news."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="NestJS"
          columns={[
            {
              title: "Framework",              items: [
                { label: "Documentation", href: "https://docs.nestjs.com" },
                { label: "Getting Started", href: "https://docs.nestjs.com/first-steps" },
                { label: "Examples", href: "https://github.com/nestjs/nest/tree/master/sample" }
              ]
            },
            {
              title: "Enterprise",              items: [
                { label: "Support", href: "https://enterprise.nestjs.com/support" },
                { label: "Training", href: "https://enterprise.nestjs.com/training" },
                { label: "Consulting", href: "https://enterprise.nestjs.com/consulting" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "GitHub", href: "https://github.com/nestjs/nest" },
                { label: "Discord", href: "https://discord.gg/nestjs" },
                { label: "Twitter", href: "https://twitter.com/nestframework" }
              ]
            }
          ]}
          copyrightText="© 2025 NestJS. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}