"use client"

import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import AboutMetric from '@/components/sections/about/AboutMetric';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Code, Server, Shield, Zap, Users, Globe, TrendingUp, ShoppingCart, Quote, Star } from 'lucide-react';

export default function Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: 'Features', id: 'features' },
            { name: 'About', id: 'about' },
            { name: 'Testimonials', id: 'testimonials' },
            { name: 'Contact', id: 'contact' }
          ]}
          brandName="NestJS"
          button={{ text: 'Get Started', href: 'https://docs.nestjs.com' }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="NestJS"
          description="A progressive Node.js framework for building efficient, reliable and scalable server-side applications"
          buttons={[
            { text: 'Get Started', href: 'https://docs.nestjs.com' },
            { text: 'Learn More', href: 'about' }
          ]}
          imageSrc="/images/header.e5c9eff6-1768997609338.webp"
          imageAlt="NestJS framework architecture"
          showDimOverlay={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          features={[
            {
              title: 'Dependency Injection", 
              description: 'Built-in dependency injection container makes your code more testable and maintainable',
              imageSrc: '/images/di.a0b12f44-1768997608322.svg',
              imageAlt: 'Dependency Injection architecture'
            },
            {
              title: 'Microservices',
              description: 'Create microservices with ease using NestJS built-in transport layer abstraction',
              imageSrc: '/images/microservices.e0074903-1768997608338.svg',
              imageAlt: 'Microservices architecture'
            },
            {
              title: 'Ecosystem',
              description: 'Rich ecosystem of modules and integrations for rapid development',
              imageSrc: '/images/ecosystem.eaa69289-1768997608340.svg',
              imageAlt: 'NestJS ecosystem'
            },
            {
              title: 'Type Safety',
              description: 'Built with TypeScript from the ground up for better development experience',
              imageSrc: '/images/type-safety.34453790-1768997608341.svg',
              imageAlt: 'TypeScript type safety'
            },
            {
              title: 'Modular Architecture',
              description: 'Organize your application into modules for better maintainability',
              imageSrc: '/images/puzzle.c9dfc495-1768997608342.svg',
              imageAlt: 'Modular architecture'
            },
            {
              title: 'Developer Experience',
              description: 'Exceptional developer experience with CLI tools and hot reloading',
              imageSrc: '/images/magic-wand.ff01fe1d-1768997608344.svg',
              imageAlt: 'Developer experience'
            }
          ]}
          title="Powerful Features"
          description="Everything you need to build modern, scalable Node.js applications"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="At NestJS, we provide a robust platform that empowers developers to build enterprise-grade applications with ease"
          metrics={[
            { icon: TrendingUp, label: 'GitHub Stars', value: '67K+' },
            { icon: Users, label: 'Weekly Downloads', value: '3.5M+' },
            { icon: Globe, label: 'Companies Using', value: '1000+' },
            { icon: ShoppingCart, label: 'Years Active', value: '7+' }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          testimonials={[
            {
              id: '1',
              name: 'Sarah Johnson',
              handle: '@sarahdev',
              testimonial: 'NestJS has transformed our backend development. The modular architecture and TypeScript support make building scalable applications a breeze.',
              icon: Quote
            },
            {
              id: '2',
              name: 'Michael Chen',
              handle: '@mchen_dev',
              testimonial: 'The dependency injection system in NestJS is game-changing. Our code is now more testable and maintainable than ever before.',
              icon: Star
            },
            {
              id: '3',
              name: 'Emily Rodriguez',
              handle: '@emily_codes',
              testimonial: 'Building microservices with NestJS is incredibly straightforward. The documentation and community support are outstanding.',
              icon: Quote
            },
            {
              id: '4',
              name: 'David Wilson',
              handle: '@davidw_tech',
              testimonial: 'The developer experience with NestJS is unmatched. Hot reloading, CLI tools, and excellent TypeScript integration make development fast.',
              icon: Star
            },
            {
              id: '5',
              name: 'Lisa Parker',
              handle: '@lisa_backend',
              testimonial: 'NestJS ecosystem is rich and mature. Finding solutions for common problems is easy with their extensive module library.',
              icon: Quote
            },
            {
              id: '6',
              name: 'James Taylor',
              handle: '@jamest_dev',
              testimonial: 'The learning curve was minimal coming from Express. NestJS provides structure without sacrificing flexibility.',
              icon: Star
            },
            {
              id: '7',
              name: 'Anna Schmidt',
              handle: '@anna_codes',
              testimonial: 'Production-ready applications with NestJS are robust and maintainable. Our team productivity has increased significantly.',
              icon: Quote
            },
            {
              id: '8',
              name: 'Robert Kim',
              handle: '@robert_backend',
              testimonial: 'The decorators and metadata approach makes the code very clean and expressive. Love the Angular-inspired architecture.',
              icon: Star
            }
          ]}
          title="What Developers Say"
          description="Hear from the community of developers who trust NestJS for their applications"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          title="Ready to build amazing applications?"
          description="Join thousands of developers who are already using NestJS to build scalable, maintainable applications"
          imageSrc="/images/devtools.7a9f095a-1768997608850.png"
          imageAlt="NestJS development tools"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Get Updates"
          termsText="Stay updated with the latest NestJS news and releases. Unsubscribe at any time."
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterBase
        columns={[
          {
            title: 'Framework',
            items: [
              { label: 'Documentation', href: 'https://docs.nestjs.com' },
              { label: 'Getting Started', href: 'https://docs.nestjs.com/first-steps' },
              { label: 'CLI', href: 'https://docs.nestjs.com/cli/overview' },
              { label: 'Recipes', href: 'https://docs.nestjs.com/recipes/repl' }
            ]
          },
          {
            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: 'Support',
            items: [
              { label: 'Professional Support', href: 'https://enterprise.nestjs.com' },
              { label: 'Courses', href: 'https://courses.nestjs.com' },
              { label: 'OpenCollective', href: 'https://opencollective.com/nest' },
              { label: 'Enterprise', href: 'https://enterprise.nestjs.com' }
            ]
          }
        ]}
        logoText="NestJS"
        copyrightText="© 2025 | NestJS. MIT License."
      />
    </ThemeProvider>
  );
}