"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 AboutMetric from '@/components/sections/about/AboutMetric';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import { TrendingUp, Users, Globe, Code, Zap, Shield, Layers, Rocket, Award, Star } from 'lucide-react';

export default function NestJSWebsite() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      background="solid"
      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: 'Community', id: 'community' },
            { name: 'Blog', id: 'blog' }
          ]}
        />
      </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."
          imageSrc="/images/header.e5c9eff6-1768910920218.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="NestJS provides an out-of-the-box application architecture which allows developers and teams to create highly testable, scalable, loosely coupled, and easily maintainable applications."
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Dependency Injection",              description: "Built-in dependency injection container makes your code more modular and testable",              imageSrc: "/images/di.a0b12f44-1768910919582.svg",              imageAlt: "Dependency injection icon"
            },
            {
              title: "Performance",              description: "High performance thanks to modern JavaScript runtime and efficient architecture",              imageSrc: "/images/rocket.518dadfa-1768910919583.svg",              imageAlt: "Performance rocket icon"
            },
            {
              title: "Decorators",              description: "Extensive use of decorators and metadata for clean, declarative code",              imageSrc: "/images/magic-wand.ff01fe1d-1768910919588.svg",              imageAlt: "Magic wand decorator icon"
            },
            {
              title: "Modular Architecture",              description: "Organize your application into modules for better maintainability",              imageSrc: "/images/puzzle.c9dfc495-1768910919589.svg",              imageAlt: "Puzzle module icon"
            },
            {
              title: "GraphQL Support",              description: "First-class GraphQL support with code-first and schema-first approaches",              imageSrc: "/images/3d.cfabe065-1768910919590.svg",              imageAlt: "3D GraphQL icon"
            },
            {
              title: "Testing",              description: "Built-in testing utilities and comprehensive testing support",              imageSrc: "/images/quality.d1d04ce8-1768910919592.svg",              imageAlt: "Quality testing icon"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <AboutMetric
          title="Join thousands of developers building with NestJS across the globe"
          useInvertedBackground="noInvert"
          metrics={[
            { icon: TrendingUp, label: 'GitHub Stars', value: '67k+' },
            { icon: Users, label: 'Weekly Downloads', value: '4M+' },
            { icon: Globe, label: 'Countries', value: '150+' },
            { icon: Award, label: 'Enterprise Clients', value: '500+' }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive
          title="Trusted by industry leaders"
          description="Leading companies worldwide rely on NestJS for their mission-critical applications"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          team={[
            {
              id: '1',
              name: 'Microsoft',
              role: 'Technology Partner',
              imageSrc: '/images/microsoft-logo.77c662a4-1768910919613.png'
            },
            {
              id: '2', 
              name: 'JetBrains',
              role: 'Development Tools',
              imageSrc: '/images/jetbrains-logo.d24f46f1-1768910919626.svg'
            },
            {
              id: '3',
              name: 'Red Hat',
              role: 'Enterprise Solutions',
              imageSrc: '/images/red-hat-logo.17d10010-1768910919660.svg'
            },
            {
              id: '4',
              name: 'Sanofi',
              role: 'Healthcare Innovation',
              imageSrc: '/images/sanofi.d67c6a70-1768910919673.png'
            }
          ]}
        />
      </div>

      <div id="courses" data-section="courses">
        <BlogCardOne
          title="Learn NestJS"
          description="Master NestJS with our comprehensive courses and tutorials"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          blogs={[
            {
              id: '1',
              category: 'Course',
              title: 'NestJS Fundamentals',
              excerpt: 'Learn the fundamentals of building scalable server-side applications with NestJS',
              imageSrc: '/images/courses-box-1.e8498908-1768910919606.png',
              imageAlt: 'NestJS Fundamentals course',
              authorName: 'NestJS Team',
              authorAvatar: '/images/logo-small-gradient.0ed287ce-1768910919495.svg',
              date: '2024'
            },
            {
              id: '2',
              category: 'Advanced',
              title: 'Enterprise NestJS',
              excerpt: 'Advanced patterns and practices for building enterprise-grade applications',
              imageSrc: '/images/courses-box-2.2e36a41b-1768910919601.png',
              imageAlt: 'Enterprise NestJS course',
              authorName: 'NestJS Team',
              authorAvatar: '/images/logo-small-gradient.0ed287ce-1768910919495.svg',
              date: '2024'
            },
            {
              id: '3',
              category: 'DevTools',
              title: 'NestJS DevTools',
              excerpt: 'Enhance your development experience with powerful debugging and monitoring tools',
              imageSrc: '/images/devtools.7a9f095a-1768910919764.png',
              imageAlt: 'NestJS DevTools',
              authorName: 'NestJS Team',
              authorAvatar: '/images/logo-small-gradient.0ed287ce-1768910919495.svg',
              date: '2024'
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="NestJS"
          copyrightText="© 2024 NestJS. MIT Licensed."
          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' },
                { label: 'Migration Guide', href: 'https://docs.nestjs.com/migration-guide' }
              ]
            },
            {
              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: 'Reddit', href: 'https://reddit.com/r/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: 'Sponsorship', href: 'https://opencollective.com/nest' }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}