"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Code, Layers, Zap, Shield, Rocket, Package } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          navItems={[
            { name: 'Documentation', id: 'https://docs.nestjs.com' },
            { name: 'Courses', id: 'https://courses.nestjs.com' },
            { name: 'Community', id: 'community' },
            { name: 'Support', id: 'support' },
            { name: 'Enterprise', id: 'enterprise' }
          ]}
          brandName="NestJS"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="A progressive Node.js framework"
          description="Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript."
          tag="Progressive Framework"
          tagIcon={Code}
          imagePosition="right"
          imageSrc="/images/header.e5c9eff6-1768997118766.webp"
          imageAlt="NestJS framework visualization"
          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="Discover the powerful features that make NestJS the perfect choice for building enterprise-grade applications"
          tag="Core Features"
          tagIcon={Layers}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          useInvertedBackground="invertDefault"
          features={[
            {
              title: "TypeScript Support",              description: "Built with TypeScript and provides strong typing out of the box for better development experience",              imageSrc: "/images/type-safety.34453790-1768997118477.svg",              imageAlt: "TypeScript type safety"
            },
            {
              title: "Modular Architecture",              description: "Create scalable applications with a modular architecture that promotes code reusability and maintainability",              imageSrc: "/images/puzzle.c9dfc495-1768997118595.svg",              imageAlt: "Modular architecture"
            },
            {
              title: "Powerful CLI",              description: "Generate boilerplate code quickly with the powerful CLI tool that accelerates development",              imageSrc: "/images/api.67807f71-1768997118568.svg",              imageAlt: "NestJS CLI"
            },
            {
              title: "Enterprise Ready",              description: "Production-ready framework with features like dependency injection, guards, and interceptors",              imageSrc: "/images/quality.d1d04ce8-1768997118602.svg",              imageAlt: "Enterprise features"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Trusted by Developers Worldwide"
          description="Join thousands of developers and companies who trust NestJS for their applications"
          tag="Community"
          tagIcon={Package}
          textboxLayout="default"
          animationType="opacity"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              icon: Code,
              title: "GitHub Stars",              value: "65K+"
            },
            {
              id: "2",              icon: Package,
              title: "NPM Downloads",              value: "2.5M+"
            },
            {
              id: "3",              icon: Shield,
              title: "Enterprise Clients",              value: "500+"
            },
            {
              id: "4",              icon: Rocket,
              title: "Active Contributors",              value: "400+"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Over 10,000 developers worldwide trust NestJS to build production-ready applications"
          cardTag="Developer Community"
          cardTagIcon={Code}
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "/images/microsoft-logo.77c662a4-1768997118566.png",              imageAlt: "Microsoft developer"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "/images/red-hat-logo.17d10010-1768997118600.svg",              imageAlt: "Red Hat developer"
            },
            {
              id: "3",              name: "Emma Davis",              imageSrc: "/images/valor-software.b334df62-1768997118696.png",              imageAlt: "Valor Software developer"
            },
            {
              id: "4",              name: "James Wilson",              imageSrc: "/images/sanofi.d67c6a70-1768997118627.png",              imageAlt: "Sanofi developer"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          tagIcon={Rocket}
          title="Ready to build amazing applications?"
          description="Join thousands of developers who are already using NestJS to create scalable and maintainable server-side applications."
          useInvertedBackground="noInvert"
          imageSrc="/images/courses.aee168f4-1768997118572.png"
          imageAlt="NestJS development"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Get Updates"
          termsText="By subscribing, you agree to receive updates about NestJS. Unsubscribe at any time."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="NestJS"
          copyrightText="© 2025 | NestJS"
          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/hot-reload" }
              ]
            },
            {
              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" },
                { label: "Stack Overflow", href: "https://stackoverflow.com/questions/tagged/nestjs" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Enterprise", href: "https://enterprise.nestjs.com" },
                { label: "Courses", href: "https://courses.nestjs.com" },
                { label: "Consulting", href: "https://nestjs.com/support" },
                { label: "Sponsors", href: "https://opencollective.com/nest" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}