"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 TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Rocket, Shield, Zap, Code, Package, Users } from 'lucide-react';

export default function NestJSLanding() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      background="default"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
    >
      <NavbarStyleApple
        brandName="NestJS"
        navItems={[
          { name: "Overview", id: "overview" },
          { name: "Documentation", id: "https://docs.nestjs.com" },
          { name: "Support", id: "support" },
          { name: "Enterprise", id: "enterprise" },
          { name: "Jobs", id: "https://jobs.nestjs.com" }
        ]}
      />
      
      <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/header.e5c9eff6-1768911830955.webp"
          imageAlt="NestJS framework overview"
          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 perfect choice for building scalable Node.js applications"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Extensible",              description: "Truly flexible architecture that allows you to use other libraries and create a highly testable, scalable, and loosely coupled application.",              imageSrc: "/images/puzzle.c9dfc495-1768911830122.svg",              imageAlt: "Extensible architecture"
            },
            {
              title: "Versatile",              description: "An adaptable ecosystem that serves as the backbone for all kinds of server-side applications, from REST APIs to GraphQL and microservices.",              imageSrc: "/images/magic-wand.ff01fe1d-1768911830122.svg",              imageAlt: "Versatile framework"
            },
            {
              title: "Progressive",              description: "Takes advantage of latest JavaScript features, bringing design patterns and mature solutions to Node.js world.",              imageSrc: "/images/rocket.518dadfa-1768911830227.svg",              imageAlt: "Progressive development"
            },
            {
              title: "Powerful CLI",              description: "Boost productivity and ease development with the powerful command-line interface that helps generate boilerplate code.",              imageSrc: "/images/chip.3b61cda8-1768911830229.svg",              imageAlt: "Powerful CLI tools"
            }
          ]}
        />
      </div>

      <div id="enterprise" data-section="enterprise">
        <TestimonialCardSix
          title="Trusted by enterprises worldwide"
          description="See what developers and companies are saying about NestJS"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Microsoft",              handle: "@microsoft",              testimonial: "NestJS provides an excellent foundation for building enterprise-grade applications with TypeScript.",              imageSrc: "/images/microsoft-logo.77c662a4-1768911830258.png",              imageAlt: "Microsoft"
            },
            {
              id: "2",              name: "Red Hat",              handle: "@redhat",              testimonial: "The architecture and design patterns in NestJS make it perfect for large-scale enterprise applications.",              imageSrc: "/images/red-hat-logo.17d10010-1768911830255.svg",              imageAlt: "Red Hat"
            },
            {
              id: "3",              name: "JetBrains",              handle: "@jetbrains",              testimonial: "NestJS combines the best of TypeScript with powerful development tools and excellent developer experience.",              imageSrc: "/images/jetbrains-logo.d24f46f1-1768911830255.svg",              imageAlt: "JetBrains"
            },
            {
              id: "4",              name: "Netlify",              handle: "@netlify",              testimonial: "Building scalable APIs has never been easier with NestJS's decorator-based approach.",              imageSrc: "/images/netlify-logo.9322c2d1-1768911830261.svg",              imageAlt: "Netlify"
            },
            {
              id: "5",              name: "Trilon",              handle: "@trilon_io",              testimonial: "NestJS enables us to build maintainable and testable applications with ease.",              imageSrc: "/images/trilon.22c96544-1768911830263.svg",              imageAlt: "Trilon"
            },
            {
              id: "6",              name: "Valor Software",              handle: "@valorsoft",              testimonial: "The modular architecture of NestJS makes code organization and team collaboration seamless.",              imageSrc: "/images/valor-software.b334df62-1768911830467.png",              imageAlt: "Valor Software"
            }
          ]}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardOne
          title="Latest from the NestJS Blog"
          description="Stay updated with the latest news, tutorials, and insights from the NestJS community"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          blogs={[
            {
              id: "1",              category: "Framework",              title: "Building Scalable APIs with NestJS",              excerpt: "Learn how to create robust and scalable APIs using NestJS's powerful features and best practices.",              imageSrc: "/images/api.67807f71-1768911830237.svg",              imageAlt: "API development",              authorName: "NestJS Team",              authorAvatar: "/images/logo-small-gradient.0ed287ce-1768911830013.svg",              date: "Jan 15, 2025"
            },
            {
              id: "2",              category: "Microservices",              title: "Microservices Architecture with NestJS",              excerpt: "Explore how to build distributed systems using NestJS microservices capabilities.",              imageSrc: "/images/microservices.e0074903-1768911830244.svg",              imageAlt: "Microservices",              authorName: "NestJS Team",              authorAvatar: "/images/logo-small-gradient.0ed287ce-1768911830013.svg",              date: "Jan 12, 2025"
            },
            {
              id: "3",              category: "Education",              title: "Advanced NestJS Course Available",              excerpt: "Take your NestJS skills to the next level with our comprehensive advanced course.",              imageSrc: "/images/courses.aee168f4-1768911830287.png",              imageAlt: "NestJS courses",              authorName: "NestJS Team",              authorAvatar: "/images/logo-small-gradient.0ed287ce-1768911830013.svg",              date: "Jan 10, 2025"
            }
          ]}
        />
      </div>

      <FooterBase
        logoText="NestJS"
        columns={[
          {
            title: "Framework",            items: [
              { label: "Documentation", 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: "Discord", href: "https://discord.gg/G7Qnnhy" },
              { label: "GitHub", href: "https://github.com/nestjs/nest" },
              { label: "Twitter", href: "https://twitter.com/nestframework" },
              { label: "Reddit", href: "https://www.reddit.com/r/Nestjs_framework/" }
            ]
          },
          {
            title: "Support",            items: [
              { label: "Enterprise", href: "https://enterprise.nestjs.com" },
              { label: "Courses", href: "https://courses.nestjs.com" },
              { label: "Consulting", href: "https://nestjs.com/#support" },
              { label: "Jobs Board", href: "https://jobs.nestjs.com" }
            ]
          }
        ]}
        copyrightText="© 2025 NestJS. MIT Licensed."
      />
    </ThemeProvider>
  );
}