"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import AboutMetric from '@/components/sections/about/AboutMetric';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ArrowRight, Code, Database, GitBranch, Globe, Play, Quote, Rocket, Server, Sparkles, TrendingUp, Users, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="large"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={[
            { name: 'Docs', id: 'docs' },
            { name: 'Enterprise', id: 'enterprise' },
            { name: 'Resources', id: 'resources' },
            { name: 'Community', id: 'community' },
            { name: 'Support', id: 'support' }
          ]}
          brandName="NestJS"
          button={{
            text: 'Get Started',
            href: 'https://docs.nestjs.com'
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          background={{ variant: 'sparkles-gradient' }}
          title="A progressive Node.js framework"
          description="Build efficient, reliable and scalable server-side applications with NestJS. The progressive framework that provides unparalleled flexibility through its modular architecture."
          tag="Hello, nest!"
          tagIcon={Sparkles}
          buttons={[
            { text: 'Documentation', href: 'https://docs.nestjs.com' },
            { text: 'Source code', href: 'https://github.com/nestjs/nest' }
          ]}
          imageSrc="https://nestjs.com/logo-small-gradient.0ed287ce.svg"
          imageAlt="NestJS Logo"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          features={[
            {
              title: 'Extensible',
              description: 'Provides unparalleled flexibility through its meticulously crafted modular architecture.',
              imageSrc: 'https://nestjs.com/3d.cfabe065.svg',
              imageAlt: 'Extensible architecture illustration'
            },
            {
              title: 'Versatile',
              description: 'Serves as a robust, elegant, and well-structured foundation for all kinds of server-side applications.',
              imageSrc: 'https://nestjs.com/magic-wand.ff01fe1d.svg',
              imageAlt: 'Versatile solutions illustration'
            },
            {
              title: 'Progressive',
              description: 'Introduces design patterns and well-established solutions to the Node.js landscape.',
              imageSrc: 'https://nestjs.com/quality.d1d04ce8.svg',
              imageAlt: 'Progressive development illustration'
            },
            {
              title: 'Modularity',
              description: 'Streamline upkeep by organizing applications into self-contained modules.',
              imageSrc: 'https://nestjs.com/puzzle.c9dfc495.svg',
              imageAlt: 'Modular architecture illustration'
            },
            {
              title: 'Scalability',
              description: 'Scale seamlessly with efficient, battle-tested components.',
              imageSrc: 'https://nestjs.com/rocket.518dadfa.svg',
              imageAlt: 'Scalability features illustration'
            },
            {
              title: 'Type Safety',
              description: 'Mitigate errors through the robust type safety features of TypeScript.',
              imageSrc: 'https://nestjs.com/type-safety.34453790.svg',
              imageAlt: 'TypeScript safety illustration'
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          title="Everything you need"
          description="Build robust, powerful, and scalable server-side applications and stop reinventing the wheel."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <AboutMetric
          title="At NestJS we redefine server-side development by empowering developers to build enterprise-grade applications with confidence"
          useInvertedBackground="noInvert"
          metrics={[
            { icon: TrendingUp, label: 'GitHub Stars', value: '67,000+' },
            { icon: Users, label: 'Active Users', value: '1M+' },
            { icon: Globe, label: 'Enterprise Clients', value: '500+' },
            { icon: Rocket, label: 'Years in Production', value: '7+' }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          testimonials={[
            {
              id: '1',
              name: 'Sarah Johnson',
              handle: '@sarahjdev',
              testimonial: 'NestJS has completely transformed our backend development. The TypeScript integration and modular architecture make scaling our applications effortless.',
              imageSrc: '/placeholders/placeholder1.webp',
              imageAlt: 'Sarah Johnson'
            },
            {
              id: '2',
              name: 'Michael Chen',
              handle: '@mchen_dev',
              testimonial: 'The dependency injection system in NestJS is game-changing. It makes our code so much more testable and maintainable.',
              icon: Quote
            },
            {
              id: '3',
              name: 'Emma Davis',
              handle: '@emmad_tech',
              testimonial: 'Building microservices with NestJS is a breeze. The framework handles all the complexity while keeping our code clean.',
              imageSrc: '/placeholders/placeholder2.webp',
              imageAlt: 'Emma Davis'
            },
            {
              id: '4',
              name: 'James Wilson',
              handle: '@jwilson_code',
              testimonial: 'From REST APIs to GraphQL, NestJS provides everything we need. The ecosystem is rich and the community is amazing.',
              icon: Quote
            },
            {
              id: '5',
              name: 'Lisa Rodriguez',
              handle: '@lisa_builds',
              testimonial: 'The enterprise features and support have been crucial for our large-scale applications. NestJS delivers on its promises.',
              imageSrc: '/placeholders/placeholder3.webp',
              imageAlt: 'Lisa Rodriguez'
            },
            {
              id: '6',
              name: 'David Kim',
              handle: '@dkim_dev',
              testimonial: 'NestJS makes Node.js development feel like enterprise Java development, but with all the flexibility of JavaScript.',
              icon: Quote
            },
            {
              id: '7',
              name: 'Anna Thompson',
              handle: '@anna_codes',
              testimonial: 'The documentation is excellent and the learning curve is smooth. We got our team up to speed with NestJS in no time.',
              imageSrc: '/placeholders/placeholder4.webp',
              imageAlt: 'Anna Thompson'
            },
            {
              id: '8',
              name: 'Carlos Martinez',
              handle: '@carlos_dev',
              testimonial: 'Switching to NestJS was the best decision for our startup. The productivity gains have been incredible.',
              icon: Quote
            }
          ]}
          animationType="slide-up"
          title="Trusted by developers worldwide"
          description="See what developers are saying about NestJS"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardOne
          blogs={[
            {
              id: '1',
              category: 'Framework',
              title: 'Getting Started with NestJS Microservices',
              excerpt: 'Learn how to build scalable microservices architecture using NestJS and modern design patterns.',
              imageSrc: 'https://nestjs.com/microservices.e0074903.svg',
              imageAlt: 'Microservices architecture',
              authorName: 'Kamil Mysliwiec',
              authorAvatar: '/placeholders/placeholder5.webp',
              date: '15 Jan 2025'
            },
            {
              id: '2',
              category: 'TypeScript',
              title: 'Advanced TypeScript Patterns in NestJS',
              excerpt: 'Discover advanced TypeScript techniques that will make your NestJS applications more robust and maintainable.',
              imageSrc: 'https://nestjs.com/type-safety.34453790.svg',
              imageAlt: 'TypeScript patterns',
              authorName: 'Mark Pieszak',
              authorAvatar: '/placeholders/placeholder6.webp',
              date: '12 Jan 2025'
            },
            {
              id: '3',
              category: 'Enterprise',
              title: 'Building Enterprise Applications with NestJS',
              excerpt: 'Best practices and architectural decisions for large-scale enterprise applications using NestJS.',
              imageSrc: 'https://nestjs.com/chip.3b61cda8.svg',
              imageAlt: 'Enterprise applications',
              authorName: 'Trilon Team',
              authorAvatar: '/placeholders/placeholder7.webp',
              date: '10 Jan 2025'
            }
          ]}
          title="Latest from our blog"
          description="Stay updated with the latest NestJS insights, tutorials, and best practices"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Zap}
          title="Join our Newsletter"
          description="Subscribe to stay up to date with the latest Nest updates, features, and videos!"
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="By subscribing you agree to receive updates from the NestJS team."
          onSubmit={(email) => console.log('Newsletter signup:', email)}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          columns={[
            {
              title: 'Documentation',
              items: [
                { label: 'Overview', href: 'https://docs.nestjs.com' },
                { label: 'First Steps', href: 'https://docs.nestjs.com/first-steps' },
                { label: 'Controllers', href: 'https://docs.nestjs.com/controllers' },
                { label: 'Providers', href: 'https://docs.nestjs.com/providers' }
              ]
            },
            {
              title: 'Community',
              items: [
                { label: 'Discord', href: 'https://discord.gg/G7Qnnhy' },
                { label: 'Twitter', href: 'https://twitter.com/nestframework' },
                { label: 'GitHub', href: 'https://github.com/nestjs/nest' },
                { label: 'Stack Overflow', href: 'https://stackoverflow.com/questions/tagged/nestjs' }
              ]
            },
            {
              title: 'Resources',
              items: [
                { label: 'Courses', href: 'https://courses.nestjs.com' },
                { label: 'Enterprise', href: 'https://enterprise.nestjs.com' },
                { label: 'Consulting', href: 'https://trilon.io' },
                { label: 'Devtools', href: 'https://devtools.nestjs.com' }
              ]
            }
          ]}
          logoText="NestJS"
          copyrightText="© 2017-2025 Kamil Mysliwiec"
        />
      </div>
    </ThemeProvider>
  );
}
