"use client"

import { ThemeProvider } from '@/components/ui/theme-provider'
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 FooterBase from '@/components/sections/footer/FooterBase'
import { Code, Zap, Shield, Puzzle, Layers, Users } from 'lucide-react'

export default function LandingPage() {
  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
          brandName="NestJS"
          navItems={[
            { name: 'Documentation', id: 'https://docs.nestjs.com' },
            { name: 'Courses', id: 'courses' },
            { name: 'Enterprise', id: 'enterprise' },
            { name: 'Support', id: 'support' },
            { name: 'Community', id: 'community' }
          ]}
        />
      </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="Framework"
          tagIcon={Code}
          imageSrc="/images/header.e5c9eff6-1768916046441.webp"
          imageAlt="NestJS framework illustration"
          buttons={[
            { text: 'Get Started', href: 'https://docs.nestjs.com' },
            { text: 'Learn More', href: 'about' }
          ]}
        />
      </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 modern Node.js applications"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          features={[
            {
              title: "TypeScript Support",              description: "Built with TypeScript for better code quality and developer experience",              imageSrc: "/images/type-safety.34453790-1768916045818.svg",              imageAlt: "TypeScript support"
            },
            {
              title: "Dependency Injection",              description: "Powerful dependency injection system for better code organization",              imageSrc: "/images/di.a0b12f44-1768916045817.svg",              imageAlt: "Dependency injection"
            },
            {
              title: "Microservices Ready",              description: "Built-in support for microservices architecture",              imageSrc: "/images/microservices.e0074903-1768916045818.svg",              imageAlt: "Microservices"
            },
            {
              title: "Scalable Architecture",              description: "Enterprise-ready architecture that scales with your needs",              imageSrc: "/images/api.67807f71-1768916045837.svg",              imageAlt: "Scalable architecture"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Trusted by developers worldwide"
          description="Join thousands of developers building amazing applications with NestJS"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "60K+",              title: "GitHub Stars",              description: "Growing community of developers",              icon: Users
            },
            {
              id: "2",              value: "1M+",              title: "Weekly Downloads",              description: "NPM package downloads",              icon: Zap
            },
            {
              id: "3",              value: "500+",              title: "Contributors",              description: "Active open source contributors",              icon: Shield
            },
            {
              id: "4",              value: "100+",              title: "Ecosystem Packages",              description: "Rich ecosystem of modules",              icon: Puzzle
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="NestJS"
          copyrightText="© 2025 | 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: "Community",              items: [
                { label: "GitHub", href: "https://github.com/nestjs/nest" },
                { label: "Discord", href: "https://discord.gg/nestjs" },
                { label: "Twitter", href: "https://twitter.com/nestframework" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Courses", href: "https://courses.nestjs.com" },
                { label: "DevTools", href: "https://devtools.nestjs.com" },
                { label: "Jobs", href: "https://jobs.nestjs.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  )
}