"use client"

import { ThemeProvider } from '@/providers/ThemeProvider'
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'
import HeroBillboard from '@/components/sections/hero/HeroBillboard'
import AboutMetric from '@/components/sections/about/AboutMetric'
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne'
import FooterBase from '@/components/sections/footer/FooterBase'
import { Code, Zap, Shield, Puzzle, Layers, Settings } from 'lucide-react'

export default function NestJSClone() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      background="default"
      cardStyle="solid"
      primaryButtonStyle="solid"
      secondaryButtonStyle="outline"
    >
      {/* Navigation */}
      <NavbarStyleApple
        brandName="NestJS"
        navItems={[
          { name: 'Documentation', id: 'https://docs.nestjs.com' },
          { name: 'Courses', id: 'https://courses.nestjs.com' },
          { name: 'Enterprise', id: 'enterprise' },
          { name: 'Support', id: 'support' },
          { name: 'GitHub', id: 'https://github.com/nestjs/nest' }
        ]}
      />

      {/* Hero Section */}
      <div id="hero" data-section="hero">
        <HeroBillboard
          title="A progressive Node.js framework"
          description="NestJS is a framework for building efficient, scalable Node.js web applications. It uses modern JavaScript, is built with TypeScript and combines elements of OOP, FP, and FRP."
          imageSrc="/images/logo-small-gradient.0ed287ce-1768917228014.svg"
          imageAlt="NestJS Logo"
          buttons={[
            { text: 'Get Started', href: 'https://docs.nestjs.com' },
            { text: 'Learn More', href: 'about' }
          ]}
        />
      </div>

      {/* Metrics Section */}
      <div id="metrics" data-section="metrics">
        <AboutMetric
          title="Trusted by developers and enterprises worldwide for building scalable, maintainable applications"
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Code, label: 'GitHub Stars', value: '65K+' },
            { icon: Zap, label: 'NPM Downloads', value: '4M+' },
            { icon: Shield, label: 'Enterprise Users', value: '500+' },
            { icon: Settings, label: 'Contributors', value: '300+' }
          ]}
        />
      </div>

      {/* Features Section */}
      <div id="features" data-section="features">
        <FeatureCardOne
          title="Why NestJS?"
          description="Discover the powerful features that make NestJS the framework of choice for Node.js applications"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "TypeScript First",              description: "Built with TypeScript from the ground up, providing excellent type safety and developer experience",              imageSrc: "/images/type-safety.34453790-1768917228172.svg",              imageAlt: "TypeScript support"
            },
            {
              title: "Modular Architecture",              description: "Organize your code with modules, controllers, and services for better maintainability",              imageSrc: "/images/puzzle.c9dfc495-1768917228158.svg",              imageAlt: "Modular architecture"
            },
            {
              title: "Dependency Injection",              description: "Powerful IoC container that makes testing and code organization effortless",              imageSrc: "/images/di.a0b12f44-1768917228154.svg",              imageAlt: "Dependency injection"
            },
            {
              title: "Microservices Ready",              description: "Built-in support for microservices patterns and communication protocols",              imageSrc: "/images/microservices.e0074903-1768917228181.svg",              imageAlt: "Microservices architecture"
            },
            {
              title: "Rich Ecosystem",              description: "Extensive library ecosystem with official packages for databases, authentication, and more",              imageSrc: "/images/ecosystem.eaa69289-1768917228252.svg",              imageAlt: "Rich ecosystem"
            },
            {
              title: "Developer Tools",              description: "Powerful CLI and dev tools to boost productivity and streamline development workflow",              imageSrc: "/images/devtools.7a9f095a-1768917228138.png",              imageAlt: "Developer tools"
            }
          ]}
        />
      </div>

      {/* Footer */}
      <FooterBase
        logoText="NestJS"
        copyrightText="© 2025 | NestJS"
        columns={[
          {
            title: "Learn",            items: [
              { label: "Documentation", href: "https://docs.nestjs.com" },
              { label: "Courses", href: "https://courses.nestjs.com" },
              { label: "Examples", href: "https://github.com/nestjs/nest/tree/master/sample" },
              { label: "FAQ", href: "https://docs.nestjs.com/faq" }
            ]
          },
          {
            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" },
              { label: "Blog", href: "https://trilon.io/blog" }
            ]
          },
          {
            title: "Support",            items: [
              { label: "Enterprise", href: "enterprise" },
              { label: "Consulting", href: "https://trilon.io" },
              { label: "Sponsors", href: "https://opencollective.com/nest" }
            ]
          }
        ]}
        onPrivacyClick={() => console.log('Privacy policy clicked')}
      />
    </ThemeProvider>
  )
}