"use client";

import { ThemeProvider } from '@/components/ThemeProvider';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Code, Zap, Shield, Puzzle, Layers, Package } from 'lucide-react';

export default function NestJSPage() {
  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: "Docs", id: "https://docs.nestjs.com" },
            { name: "Learn", id: "learn" },
            { name: "Enterprise", id: "enterprise" },
            { name: "Support", id: "support" },
            { name: "Community", id: "https://discord.gg/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="Framework"
          tagIcon={Code}
          imageSrc="/images/logo-small-gradient.0ed287ce-1768913667914.svg"
          imageAlt="NestJS Logo"
          buttons={[
            { text: "Get Started", href: "https://docs.nestjs.com" },
            { text: "Learn More", href: "learn" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Why Choose NestJS"
          description="Built for modern development with TypeScript, decorators, and modular architecture"
          tag="Features"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Powerful CLI",              description: "Generate components, modules, and services with a single command",              imageSrc: "/images/rocket.518dadfa-1768913668007.svg",              imageAlt: "CLI Tool"
            },
            {
              title: "Dependency Injection",              description: "Built-in IoC container for managing dependencies and testing",              imageSrc: "/images/di.a0b12f44-1768913668008.svg",              imageAlt: "Dependency Injection"
            },
            {
              title: "Rich Ecosystem",              description: "Extensive library ecosystem with seamless integrations",              imageSrc: "/images/ecosystem.eaa69289-1768913668009.svg",              imageAlt: "Ecosystem"
            },
            {
              title: "Microservices",              description: "Built-in support for microservices architecture",              imageSrc: "/images/microservices.e0074903-1768913668014.svg",              imageAlt: "Microservices"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Trusted by Developers Worldwide"
          description="Join thousands of developers building amazing applications"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          metrics={[
            { id: "1", value: "50K+", description: "GitHub Stars" },
            { id: "2", value: "1M+", description: "Weekly Downloads" },
            { id: "3", value: "500+", description: "Contributors" },
            { id: "4", value: "10K+", description: "Companies Using" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Developers Say"
          description="Hear from the community building with NestJS"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "@sarahdev",              testimonial: "NestJS transformed how we build backend services. The TypeScript support and modular architecture are game changers.",              icon: Code
            },
            {
              id: "2",              name: "Mike Johnson",              handle: "@mikecodes",              testimonial: "Best Node.js framework I've used. The dependency injection and testing capabilities are outstanding.",              icon: Zap
            },
            {
              id: "3",              name: "Alex Rodriguez",              handle: "@alexbuilds",              testimonial: "Scalable, maintainable, and developer-friendly. NestJS is perfect for enterprise applications.",              icon: Shield
            },
            {
              id: "4",              name: "Emily Davis",              handle: "@emilytech",              testimonial: "The CLI tools and decorators make development so much faster. Highly recommend for any Node.js project.",              icon: Puzzle
            },
            {
              id: "5",              name: "David Kim",              handle: "@daviddev",              testimonial: "Excellent documentation and community support. NestJS helps us ship features faster than ever.",              icon: Layers
            },
            {
              id: "6",              name: "Lisa Wang",              handle: "@lisacodes",              testimonial: "The microservices support and GraphQL integration make NestJS our go-to choice for modern APIs.",              icon: Package
            }
          ]}
        />
      </div>

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