"use client"

import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider'
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline'
import HeroBillboard from '@/components/sections/hero/HeroBillboard'
import SplitAbout from '@/components/sections/about/SplitAbout'
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne'
import TeamCardFive from '@/components/sections/team/TeamCardFive'
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive'
import BlogCardOne from '@/components/sections/blog/BlogCardOne'
import ContactCenter from '@/components/sections/contact/ContactCenter'
import FooterBase from '@/components/sections/footer/FooterBase'
import { Code, Users, Shield, Zap, Database, Settings, Mail, GitBranch } from 'lucide-react'

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLarge"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: 'Features', id: 'features' },
            { name: 'About', id: 'about' },
            { name: 'Team', id: 'team' },
            { name: 'Blog', id: 'blog' }
          ]}
          brandName="NestJS"
          button={{ text: 'Get Started', href: 'contact' }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="A Progressive Node.js Framework"
          description="Build efficient, reliable and scalable server-side applications with TypeScript. Trusted by enterprise companies worldwide."
          tag="Enterprise Ready"
          tagIcon={Shield}
          buttons={[
            { text: 'Get Started', href: 'contact' },
            { text: 'View Documentation', href: 'https://docs.nestjs.com' }
          ]}
          imageSrc="/images/header-2.50296714-1768999178821.jpg"
          imageAlt="NestJS Enterprise Framework"
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Built for Enterprise Scale"
          description="NestJS provides a level of abstraction above common Node.js frameworks while still exposing their APIs to the developer."
          tag="Why Choose NestJS"
          tagIcon={Code}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          bulletPoints={[
            { 
              title: 'TypeScript First', 
              description: 'Built with TypeScript and fully supports modern JavaScript', 
              icon: Code 
            },
            { 
              title: 'Scalable Architecture', 
              description: 'Modular structure that grows with your application', 
              icon: Database 
            },
            { 
              title: 'Enterprise Ready', 
              description: 'Production-ready with enterprise-grade security features', 
              icon: Shield 
            }
          ]}
          buttons={[
            { text: 'Learn More', href: 'features' }
          ]}
          imageSrc="/images/support.cbdb04e7-1768999179091.png"
          imageAlt="NestJS Support"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Powerful Features"
          description="Everything you need to build modern server-side applications with confidence and efficiency."
          tag="Core Features"
          tagIcon={Settings}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: 'Modular Architecture',
              description: 'Organize your code into reusable modules for better maintainability and scalability.',
              imageSrc: '/images/puzzle.a43aa4b7-1768999178753.svg',
              imageAlt: 'Modular architecture'
            },
            {
              title: 'Dependency Injection',
              description: 'Built-in IoC container makes testing and dependency management effortless.',
              imageSrc: '/images/conversation.2689303c-1768999178730.svg',
              imageAlt: 'Dependency injection'
            },
            {
              title: 'GraphQL & REST',
              description: 'First-class support for both GraphQL and RESTful API development.',
              imageSrc: '/images/big-data.88454030-1768999178754.svg',
              imageAlt: 'API development'
            },
            {
              title: 'Security Built-in',
              description: 'Enterprise-grade security features including authentication, authorization, and validation.',
              imageSrc: '/images/protect.5939735a-1768999178761.svg',
              imageAlt: 'Security features'
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive
          title="Trusted by Industry Leaders"
          description="Companies worldwide rely on NestJS to power their mission-critical applications."
          tag="Our Community"
          tagIcon={Users}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          team={[
            { id: '1', name: 'GitLab', role: 'DevOps Platform', imageSrc: '/images/gitlab.4f9d2995-1768999178636.png' },
            { id: '2', name: 'Adidas', role: 'Global Brand', imageSrc: '/images/adidas.718f26f2-1768999178637.svg' },
            { id: '3', name: 'Autodesk', role: 'Design Software', imageSrc: '/images/autodesk.a7f2b58e-1768999178653.png' },
            { id: '4', name: 'Red Hat', role: 'Enterprise Software', imageSrc: '/images/red-hat.c5e6e64a-1768999178659.svg' },
            { id: '5', name: 'BMW', role: 'Automotive', imageSrc: '/images/bmw.0ce4c05c-1768999178660.svg' },
            { id: '6', name: 'IBM', role: 'Technology Services', imageSrc: '/images/ibm.b8c76e06-1768999178677.svg' }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Developers Say"
          description="Hear from the community that builds with NestJS every day."
          tag="Community Feedback"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: '1',
              name: 'Sarah Chen, Senior Developer at Autodesk',
              date: 'Date: 15 January 2025',
              title: 'Perfect for Enterprise Applications',
              quote: 'NestJS has transformed how we build scalable Node.js applications. The TypeScript support and modular architecture make it perfect for our enterprise needs.',
              tag: 'Enterprise',
              avatarSrc: '/images/autodesk.a7f2b58e-1768999178653.png',
              imageSrc: '/images/conversation.2689303c-1768999178730.svg'
            },
            {
              id: '2', 
              name: 'Michael Rodriguez, Lead Engineer at GitLab',
              date: 'Date: 10 January 2025',
              title: 'Outstanding Developer Experience',
              quote: 'The decorator-based approach and built-in features like validation and serialization save us countless hours. Highly recommend for any serious Node.js project.',
              tag: 'DevOps',
              avatarSrc: '/images/gitlab.4f9d2995-1768999178636.png',
              imageSrc: '/images/protect.5939735a-1768999178761.svg'
            },
            {
              id: '3',
              name: 'Lisa Wang, Tech Lead at Red Hat',
              date: 'Date: 8 January 2025', 
              title: 'Production Ready from Day One',
              quote: 'We migrated our microservices to NestJS and saw immediate improvements in code maintainability and team productivity. The framework just works.',
              tag: 'Microservices',
              avatarSrc: '/images/red-hat.c5e6e64a-1768999178659.svg',
              imageSrc: '/images/big-data.88454030-1768999178754.svg'
            }
          ]}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardOne
          title="Latest Updates"
          description="Stay up to date with the latest NestJS features, best practices, and community insights."
          tag="Blog"
          tagIcon={GitBranch}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          blogs={[
            {
              id: '1',
              category: 'Release',
              title: 'NestJS 10 Now Available',
              excerpt: 'Major performance improvements and new features for building scalable applications.',
              imageSrc: '/images/startup.b4dbf43d-1768999178727.svg',
              imageAlt: 'NestJS 10 release',
              authorName: 'Kamil Mysliwiec',
              authorAvatar: '/images/logo-small-gradient.76616405-1768999178543.svg',
              date: '15 Jan 2025'
            },
            {
              id: '2',
              category: 'Tutorial',
              title: 'Building Microservices with NestJS',
              excerpt: 'Learn how to architect and deploy microservices using NestJS and modern cloud technologies.',
              imageSrc: '/images/puzzle.a43aa4b7-1768999178753.svg',
              imageAlt: 'Microservices tutorial',
              authorName: 'Mark Pieszak',
              authorAvatar: '/images/conversation.2689303c-1768999178730.svg', 
              date: '12 Jan 2025'
            },
            {
              id: '3',
              category: 'Best Practices',
              title: 'Enterprise Security with NestJS',
              excerpt: 'Comprehensive guide to implementing security best practices in production applications.',
              imageSrc: '/images/protect.5939735a-1768999178761.svg',
              imageAlt: 'Security best practices',
              authorName: 'Jay Bell',
              authorAvatar: '/images/big-data.88454030-1768999178754.svg',
              date: '10 Jan 2025'
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Mail}
          title="Ready to build something amazing?"
          description="Join thousands of developers building scalable applications with NestJS. Get started today and experience the power of modern Node.js development."
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Get Started"
          termsText="By signing up, you agree to receive updates about NestJS and can unsubscribe at any time."
          onSubmit={(email) => console.log('Email submitted:', email)}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          columns={[
            {
              title: 'Framework',
              items: [
                { label: 'Features', href: 'features' },
                { label: 'Documentation', href: 'https://docs.nestjs.com' },
                { label: 'Examples', href: 'https://github.com/nestjs/nest/tree/master/sample' },
                { label: 'Community', href: 'https://discord.gg/G7Qnnhy' }
              ]
            },
            {
              title: 'Enterprise',
              items: [
                { label: 'Support', href: 'https://enterprise.nestjs.com/support' },
                { label: 'Training', href: 'https://enterprise.nestjs.com/training' },
                { label: 'Consulting', href: 'https://enterprise.nestjs.com/consulting' },
                { label: 'Custom Development', href: 'contact' }
              ]
            },
            {
              title: 'Resources',
              items: [
                { label: 'Blog', href: 'blog' },
                { label: 'GitHub', href: 'https://github.com/nestjs/nest' },
                { label: 'Twitter', href: 'https://twitter.com/nestframework' },
                { label: 'LinkedIn', href: 'https://www.linkedin.com/company/nestjs' }
              ]
            }
          ]}
          logoText="NestJS"
          copyrightText="© 2025 NestJS. Built with ❤️ by the community."
        />
      </div>
    </ThemeProvider>
  )
}