"use client";

import { ThemeProvider } from "@/components/providers/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Code, Zap, Shield, Layers, TrendingUp, Users, Star, Rocket } from 'lucide-react';

export default function NestJSLandingPage() {
  return (
    <ThemeProvider 
      defaultButtonVariant="hover-bubble" 
      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: "features" },
            { name: "Examples", id: "examples" },
            { name: "Community", id: "testimonials" },
            { name: "Enterprise", id: "enterprise" },
            { name: "Support", id: "support" }
          ]}
        />
      </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-1768912270402.webp"
          imageAlt="NestJS Framework"
          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="Built with TypeScript, NestJS provides an out-of-the-box application architecture"
          tag="Features"
          tagIcon={Layers}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "TypeScript First",              description: "Built with TypeScript and fully supports it while still enabling developers to code in pure JavaScript",              imageSrc: "/images/type-safety.34453790-1768912269848.svg",              imageAlt: "TypeScript support"
            },
            {
              title: "Modular Architecture",              description: "Create loosely coupled, easily testable and maintainable applications",              imageSrc: "/images/puzzle.c9dfc495-1768912269872.svg",              imageAlt: "Modular architecture"
            },
            {
              title: "Dependency Injection",              description: "Powerful dependency injection system inspired by Angular",              imageSrc: "/images/di.a0b12f44-1768912269727.svg",              imageAlt: "Dependency injection"
            },
            {
              title: "Microservices Ready",              description: "Built-in support for microservices with various transport layers",              imageSrc: "/images/microservices.e0074903-1768912269818.svg",              imageAlt: "Microservices support"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Trusted by Developers Worldwide"
          description="Join thousands of developers building amazing applications"
          tag="Community"
          tagIcon={Users}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              icon: Star,
              title: "GitHub Stars",              value: "67k+"
            },
            {
              id: "2",              icon: Users,
              title: "NPM Downloads",              value: "20M+"
            },
            {
              id: "3",              icon: TrendingUp,
              title: "Companies",              value: "5000+"
            },
            {
              id: "4",              icon: Rocket,
              title: "Contributors",              value: "400+"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Developers Say"
          description="Hear from the community building with NestJS"
          tag="Community"
          tagIcon={Star}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "@sarahdev",              testimonial: "NestJS has transformed how we build Node.js applications. The TypeScript support and modular architecture are game changers.",              imageSrc: "/images/mau.93131478-1768912270016.png",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              handle: "@mchen_dev",              testimonial: "The dependency injection system in NestJS makes our code so much more maintainable and testable. Highly recommended!",              imageSrc: "/images/microsoft-logo.77c662a4-1768912269824.png",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Alex Rodriguez",              handle: "@alexrod",              testimonial: "Moving from Express to NestJS was the best decision for our team. The structure and scalability are incredible.",              imageSrc: "/images/red-hat-logo.17d10010-1768912269871.svg",              imageAlt: "Alex Rodriguez"
            },
            {
              id: "4",              name: "Emily Parker",              handle: "@emilyparker",              testimonial: "NestJS documentation is excellent and the community support is outstanding. Perfect for enterprise applications.",              imageSrc: "/images/sanofi.d67c6a70-1768912269846.png",              imageAlt: "Emily Parker"
            },
            {
              id: "5",              name: "David Kim",              handle: "@davidkim_dev",              testimonial: "The microservices support in NestJS is phenomenal. We scaled our architecture seamlessly with minimal effort.",              imageSrc: "/images/trilon.22c96544-1768912269873.svg",              imageAlt: "David Kim"
            },
            {
              id: "6",              name: "Lisa Wang",              handle: "@lisawang",              testimonial: "NestJS brings the best of Angular's architecture to Node.js. The learning curve is smooth for Angular developers.",              imageSrc: "/images/jetbrains-logo.d24f46f1-1768912269873.svg",              imageAlt: "Lisa Wang"
            }
          ]}
        />
      </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: "Examples", href: "https://github.com/nestjs/nest/tree/master/sample" },
                { label: "CLI", href: "https://docs.nestjs.com/cli/overview" },
                { label: "DevTools", href: "https://devtools.nestjs.com" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Discord", href: "https://discord.gg/nestjs" },
                { label: "GitHub", href: "https://github.com/nestjs/nest" },
                { label: "Twitter", href: "https://twitter.com/nestframework" },
                { label: "Stack Overflow", href: "https://stackoverflow.com/questions/tagged/nestjs" }
              ]
            },
            {
              title: "Enterprise",              items: [
                { label: "Support", href: "https://enterprise.nestjs.com" },
                { label: "Consulting", href: "https://trilon.io" },
                { label: "Training", href: "https://courses.nestjs.com" },
                { label: "Partnership", href: "https://nestjs.com/support" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}