"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 MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Code, Zap, Shield, Layers, Users, TrendingUp, Star, Package } from 'lucide-react';

export default function NestJSLandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      background="solid"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
    >
      <NavbarStyleApple
        brandName="NestJS"
        navItems={[
          { name: "Documentation", id: "docs" },
          { name: "Examples", id: "examples" },
          { name: "Support", id: "support" },
          { name: "Enterprise", id: "enterprise" },
          { name: "Community", id: "community" }
        ]}
      />

      <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."
          buttons={[
            { text: "Get Started", href: "https://docs.nestjs.com" },
            { text: "View Examples", href: "examples" }
          ]}
          imageSrc="/images/header.e5c9eff6-1768913655395.webp"
          imageAlt="NestJS framework illustration"
        />
      </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"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "TypeScript First",              description: "Built with TypeScript for better development experience and code reliability",              imageSrc: "/images/type-safety.34453790-1768913654649.svg",              imageAlt: "TypeScript support"
            },
            {
              title: "Dependency Injection",              description: "Powerful dependency injection system for better testability and modularity",              imageSrc: "/images/di.a0b12f44-1768913654636.svg",              imageAlt: "Dependency injection"
            },
            {
              title: "Microservices Ready",              description: "Built-in support for microservices architecture and communication patterns",              imageSrc: "/images/microservices.e0074903-1768913654642.svg",              imageAlt: "Microservices"
            },
            {
              title: "Extensible Ecosystem",              description: "Rich ecosystem of modules and integrations for rapid development",              imageSrc: "/images/ecosystem.eaa69289-1768913654645.svg",              imageAlt: "Ecosystem"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Trusted by developers worldwide"
          description="Join thousands of developers and companies building scalable applications with NestJS"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "50K+",              title: "GitHub Stars",              description: "Developers love and contribute to NestJS",              icon: Star
            },
            {
              id: "2",              value: "1M+",              title: "Weekly Downloads",              description: "NPM package downloads per week",              icon: TrendingUp
            },
            {
              id: "3",              value: "500+",              title: "Enterprise Clients",              description: "Companies using NestJS in production",              icon: Users
            },
            {
              id: "4",              value: "100+",              title: "Ecosystem Packages",              description: "Official and community packages",              icon: Package
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What developers are saying"
          description="Join the community of developers who love building with NestJS"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Alex Chen",              handle: "@alexdev",              testimonial: "NestJS has completely transformed how we build scalable Node.js applications. The TypeScript support is exceptional!",              icon: Code
            },
            {
              id: "2",              name: "Sarah Martinez",              handle: "@sarahcodes",              testimonial: "The dependency injection system makes testing so much easier. Best Node.js framework I've used.",              icon: Shield
            },
            {
              id: "3",              name: "David Kim",              handle: "@davidbuilds",              testimonial: "Moving our microservices to NestJS was the best decision. Clean architecture and great performance.",              icon: Layers
            },
            {
              id: "4",              name: "Lisa Johnson",              handle: "@lisatech",              testimonial: "The learning curve was smooth thanks to excellent documentation. Now we're more productive than ever.",              icon: Zap
            },
            {
              id: "5",              name: "Michael Brown",              handle: "@mikecodes",              testimonial: "NestJS brings structure and scalability to Node.js. Perfect for enterprise applications.",              icon: Users
            },
            {
              id: "6",              name: "Emma Wilson",              handle: "@emmawrites",              testimonial: "The decorator syntax and modular architecture make code so clean and maintainable.",              icon: Package
            },
            {
              id: "7",              name: "James Davis",              handle: "@jamesbuilds",              testimonial: "From REST APIs to GraphQL, NestJS handles everything we throw at it. Incredible framework!",              icon: Code
            },
            {
              id: "8",              name: "Anna Garcia",              handle: "@annadev",              testimonial: "The CLI tools and scaffolding features save us hours of development time every week.",              icon: Zap
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="NestJS"
          copyrightText="© 2025 NestJS"
          columns={[
            {
              title: "Framework",              items: [
                { label: "Getting Started", href: "https://docs.nestjs.com" },
                { label: "CLI", href: "https://docs.nestjs.com/cli/overview" },
                { label: "Examples", href: "https://github.com/nestjs/nest/tree/master/sample" },
                { label: "Migration Guide", href: "https://docs.nestjs.com/migration-guide" }
              ]
            },
            {
              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: "Stack Overflow", href: "https://stackoverflow.com/questions/tagged/nestjs" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "https://docs.nestjs.com" },
                { label: "Courses", href: "https://courses.nestjs.com" },
                { label: "Blog", href: "https://nestjs.com/blog" },
                { label: "Enterprise", href: "https://enterprise.nestjs.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}