"use client"

import { ThemeProvider } from '@/components/theme/ThemeProvider'
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'
import HeroBillboard from '@/components/sections/hero/HeroBillboard'
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne'
import MetricCardOne from '@/components/sections/metrics/MetricCardOne'
import BlogCardOne from '@/components/sections/blog/BlogCardOne'
import FooterBase from '@/components/sections/footer/FooterBase'
import { Rocket, Zap, Shield, Code, Users, TrendingUp, Star, Award } from 'lucide-react'

export default function NestJSLandingPage() {
  return (
    <ThemeProvider 
      defaultButtonVariant="text-stagger" 
      defaultTextAnimation="entrance-slide" 
      borderRadius="rounded"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
    >
      <div id="navbar" data-section="navbar">
        <NavbarStyleApple 
          navItems={[
            { name: 'Documentation', id: 'https://docs.nestjs.com' },
            { name: 'Courses', id: 'courses' },
            { name: 'Enterprise', id: 'enterprise' },
            { name: 'Support', id: 'support' },
            { name: 'Community', id: 'community' }
          ]}
          brandName="NestJS"
        />
      </div>

      <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."
          tag="Open Source"
          tagIcon={Rocket}
          imageSrc="/images/header.e5c9eff6-1768917245945.webp"
          imageAlt="NestJS Framework Architecture"
          buttons={[
            { text: 'Get Started', href: 'https://docs.nestjs.com' },
            { text: 'Learn More', href: 'features' }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Why choose NestJS?"
          description="Discover the powerful features that make NestJS the framework of choice for enterprise applications"
          tag="Features"
          tagIcon={Zap}
          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 developer experience and type safety",              imageSrc: "/images/type-safety.34453790-1768917245458.svg",              imageAlt: "TypeScript support"
            },
            {
              title: "Modular Architecture",              description: "Create scalable applications with a modular structure that promotes code reusability and maintainability",              imageSrc: "/images/puzzle.c9dfc495-1768917245465.svg",              imageAlt: "Modular architecture"
            },
            {
              title: "Dependency Injection",              description: "Built-in dependency injection container makes your applications testable and maintainable",              imageSrc: "/images/di.a0b12f44-1768917245453.svg",              imageAlt: "Dependency injection"
            },
            {
              title: "Microservices Ready",              description: "First-class support for microservices architecture with various transport layers",              imageSrc: "/images/microservices.e0074903-1768917245464.svg",              imageAlt: "Microservices support"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Trusted by developers worldwide"
          description="Join thousands of developers who have chosen NestJS for their applications"
          tag="Community"
          tagIcon={Users}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "60K+",              title: "GitHub Stars",              description: "Developers trust and contribute to NestJS",              icon: Star
            },
            {
              id: "2",              value: "2M+",              title: "Weekly Downloads",              description: "NPM downloads demonstrate widespread adoption",              icon: TrendingUp
            },
            {
              id: "3",              value: "500+",              title: "Contributors",              description: "Active community members improving the framework",              icon: Users
            },
            {
              id: "4",              value: "Enterprise",              title: "Grade Quality",              description: "Production-ready with enterprise support",              icon: Award
            }
          ]}
        />
      </div>

      <div id="courses" data-section="courses">
        <BlogCardOne
          title="Learn NestJS"
          description="Master NestJS with our comprehensive courses and tutorials"
          tag="Education"
          tagIcon={Code}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          blogs={[
            {
              id: "1",              category: "Course",              title: "NestJS Fundamentals",              excerpt: "Learn the core concepts of NestJS including modules, controllers, services, and dependency injection",              imageSrc: "/images/courses-box-1.e8498908-1768917245465.png",              imageAlt: "NestJS Fundamentals Course",              authorName: "NestJS Team",              authorAvatar: "/images/logo-small-gradient.0ed287ce-1768917245367.svg",              date: "Available Now"
            },
            {
              id: "2",              category: "Course",              title: "Advanced NestJS",              excerpt: "Deep dive into advanced topics like microservices, GraphQL, testing, and performance optimization",              imageSrc: "/images/courses-box-2.2e36a41b-1768917245460.png",              imageAlt: "Advanced NestJS Course",              authorName: "NestJS Team",              authorAvatar: "/images/logo-small-gradient.0ed287ce-1768917245367.svg",              date: "Available Now"
            },
            {
              id: "3",              category: "Resource",              title: "Official Documentation",              excerpt: "Comprehensive documentation covering all aspects of NestJS development",              imageSrc: "/images/courses.aee168f4-1768917245495.png",              imageAlt: "NestJS Documentation",              authorName: "Community",              authorAvatar: "/images/logo-small-gradient.0ed287ce-1768917245367.svg",              date: "Updated Daily"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="NestJS"
          copyrightText="© 2025 NestJS. MIT Licensed."
          columns={[
            {
              title: "Framework",              items: [
                { label: "Documentation", href: "https://docs.nestjs.com" },
                { label: "Getting Started", href: "https://docs.nestjs.com/first-steps" },
                { label: "CLI", href: "https://docs.nestjs.com/cli/overview" },
                { label: "Recipes", href: "https://docs.nestjs.com/recipes/" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "GitHub", href: "https://github.com/nestjs/nest" },
                { label: "Discord", href: "https://discord.gg/G7Qnnhy" },
                { label: "Twitter", href: "https://twitter.com/nestframework" },
                { label: "LinkedIn", href: "https://www.linkedin.com/company/nestjs" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Enterprise", href: "enterprise" },
                { label: "Consulting", href: "https://enterprise.nestjs.com" },
                { label: "Support Us", href: "https://opencollective.com/nest" },
                { label: "Merchandise", href: "https://nestjs.com/" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  )
}