"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { TrendingUp, Users, Code, Zap, Shield, Layers, Cpu, Mail } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="medium"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          navItems={[
            { name: "Features", id: "features" },
            { name: "Metrics", id: "metrics" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" },
            { name: "Docs", id: "https://docs.nestjs.com" }
          ]}
          brandName="NestJS"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboard 
          title="A progressive Node.js framework"
          description="NestJS is a framework for building efficient, reliable and scalable server-side applications using TypeScript and modern JavaScript"
          tag="Framework"
          tagIcon={Code}
          imageSrc="/images/logo-small-gradient.0ed287ce-1768996294667.svg"
          imageAlt="NestJS logo"
          buttons={[
            { text: "Get Started", href: "https://docs.nestjs.com" },
            { text: "Learn More", href: "features" }
          ]}
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardOne
          features={[
            {
              title: "TypeScript Support",              description: "Built with TypeScript and fully compatible with pure JavaScript",              imageSrc: "/images/type-safety.34453790-1768996294761.svg",              imageAlt: "TypeScript support"
            },
            {
              title: "Modular Architecture",              description: "Highly testable, scalable, loosely coupled, and easily maintainable applications",              imageSrc: "/images/puzzle.c9dfc495-1768996294760.svg",              imageAlt: "Modular architecture"
            },
            {
              title: "Microservices Ready",              description: "Perfect for building microservices and distributed systems",              imageSrc: "/images/microservices.e0074903-1768996294762.svg",              imageAlt: "Microservices"
            },
            {
              title: "Dependency Injection",              description: "Powerful dependency injection container for better code organization",              imageSrc: "/images/di.a0b12f44-1768996294767.svg",              imageAlt: "Dependency injection"
            }
          ]}
          title="Why Choose NestJS?"
          description="Discover the features that make NestJS the perfect choice for modern Node.js applications"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "1",              value: "60K+",              title: "GitHub Stars",              description: "Trusted by developers worldwide",              icon: TrendingUp
            },
            {
              id: "2",              value: "500K+",              title: "Weekly Downloads",              description: "NPM package downloads per week",              icon: Users
            },
            {
              id: "3",              value: "15K+",              title: "Contributors",              description: "Active community members",              icon: Code
            },
            {
              id: "4",              value: "99%",              title: "Uptime",              description: "Production reliability",              icon: Shield
            }
          ]}
          title="Trusted by Thousands"
          description="Join the growing community of developers building with NestJS"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "/images/microsoft-logo.77c662a4-1768996294812.png"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "/images/jetbrains-logo.d24f46f1-1768996294813.svg"
            },
            {
              id: "3",              name: "Emma Davis",              imageSrc: "/images/red-hat-logo.17d10010-1768996294815.svg"
            },
            {
              id: "4",              name: "James Wilson",              imageSrc: "/images/netlify-logo.9322c2d1-1768996294816.svg"
            }
          ]}
          cardTitle="Trusted by industry leaders and developers worldwide"
          cardTag="Testimonials"
          useInvertedBackground="invertDefault"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Mail}
          title="Ready to build something amazing?"
          description="Join thousands of developers already using NestJS to build scalable server-side applications"
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Get Updates"
          termsText="By signing up, you agree to receive updates about NestJS releases and community news."
          onSubmit={(email) => console.log('Email submitted:', email)}
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBase
          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" }
              ]
            },
            {
              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: "https://enterprise.nestjs.com" },
                { label: "Consulting", href: "https://trilon.io" },
                { label: "Training", href: "https://courses.nestjs.com" }
              ]
            }
          ]}
          logoText="NestJS"
          copyrightText="© 2025 NestJS. MIT Licensed."
          onPrivacyClick={() => console.log('Privacy policy clicked')}
        />
      </div>
    </ThemeProvider>
  )
}
