"use client";

import { ThemeProvider } from '@/components/ThemeProvider';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Code, Zap, Package, Shield, Users, Lightbulb } from 'lucide-react';

export default function LandingPage() {
  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: "https://docs.nestjs.com" },
            { name: "Courses", id: "courses" },
            { name: "Support", id: "support" },
            { name: "Enterprise", id: "enterprise" },
            { name: "Community", id: "https://discord.gg/nestjs" }
          ]}
        />
      </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-1768909831520.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="Powerful features that make building scalable applications easier"
          tag="Features"
          tagIcon={Zap}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "TypeScript Support",              description: "Built with TypeScript for better development experience and type safety",              imageSrc: "/images/type-safety.34453790-1768909830889.svg",              imageAlt: "TypeScript support"
            },
            {
              title: "Dependency Injection",              description: "Powerful dependency injection system for modular and testable code",              imageSrc: "/images/di.a0b12f44-1768909830891.svg",              imageAlt: "Dependency injection"
            },
            {
              title: "Microservices",              description: "Built-in support for microservices architecture and communication",              imageSrc: "/images/microservices.e0074903-1768909830894.svg",              imageAlt: "Microservices support"
            },
            {
              title: "Ecosystem",              description: "Rich ecosystem of modules and integrations for rapid development",              imageSrc: "/images/ecosystem.eaa69289-1768909830883.svg",              imageAlt: "Rich ecosystem"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Trusted by Developers"
          description="See what developers are saying about NestJS"
          tag="Community"
          tagIcon={Users}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Microsoft Team",              role: "Enterprise Development",              testimonial: "NestJS provides the perfect foundation for building scalable enterprise applications with TypeScript.",              icon: Package
            },
            {
              id: "2",              name: "Development Team",              role: "Backend Engineers",              testimonial: "The decorator-based architecture and dependency injection make our code more maintainable and testable.",              icon: Shield
            },
            {
              id: "3",              name: "Open Source Community",              role: "Contributors",              testimonial: "NestJS combines the best of Express and modern JavaScript patterns into a powerful framework.",              icon: Lightbulb
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="NestJS"
          copyrightText="© 2025 | NestJS"
          columns={[
            {
              title: "Learn",              items: [
                { label: "Documentation", href: "https://docs.nestjs.com" },
                { label: "Examples", href: "https://github.com/nestjs/nest/tree/master/examples" },
                { label: "Courses", href: "courses" }
              ]
            },
            {
              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" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Enterprise", href: "enterprise" },
                { label: "Commercial Support", href: "support" },
                { label: "Consulting", href: "consulting" }
              ]
            }
          ]}
          onPrivacyClick={() => console.log('Privacy policy clicked')}
        />
      </div>
    </ThemeProvider>
  );
}