"use client";

import { ThemeProvider } from '@/components/ui/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 FooterBase from '@/components/sections/footer/FooterBase';
import { Code, Zap, Shield, Puzzle, Rocket, Database, TrendingUp, Users, Globe, Package } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
    >
      <NavbarStyleApple
        brandName="NestJS"
        navItems={[
          { name: 'Overview', id: 'overview' },
          { name: 'Documentation', id: 'https://docs.nestjs.com' },
          { name: 'Support', id: 'support' },
          { name: 'Enterprise', id: 'enterprise' },
          { name: 'Courses', id: 'https://courses.nestjs.com' }
        ]}
      />

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="A progressive Node.js framework"
          description="NestJS is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript and combines elements of OOP, FP, and FRP."
          tag="Framework"
          tagIcon={Code}
          imageSrc="/images/header.e5c9eff6-1768918268645.webp"
          imageAlt="NestJS Framework Overview"
          buttons={[
            { text: 'Get Started', href: 'https://docs.nestjs.com' },
            { text: 'Learn More', href: 'overview' }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Why choose NestJS?"
          description="Discover the powerful features that make NestJS the framework of choice for enterprise Node.js applications"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Extensible",              description: "Gives you true flexibility by allowing use of any other libraries thanks to modular architecture.",              imageSrc: "/images/puzzle.c9dfc495-1768918267919.svg",              imageAlt: "Extensible architecture"
            },
            {
              title: "Versatile",              description: "An adaptable ecosystem that is a fully-fledged backbone for all kinds of server-side applications.",              imageSrc: "/images/3d.cfabe065-1768918267920.svg",              imageAlt: "Versatile framework"
            },
            {
              title: "Progressive",              description: "Introduces design patterns and mature solutions to Node.js world by taking advantage of latest JavaScript features.",              imageSrc: "/images/rocket.518dadfa-1768918267938.svg",              imageAlt: "Progressive technology"
            },
            {
              title: "Dependency Injection",              description: "Built-in support for dependency injection makes your applications more testable, modular, and maintainable.",              imageSrc: "/images/di.a0b12f44-1768918267913.svg",              imageAlt: "Dependency injection"
            },
            {
              title: "First-class TypeScript Support",              description: "Built with TypeScript and provides strong typing throughout the framework for better developer experience.",              imageSrc: "/images/type-safety.34453790-1768918267947.svg",              imageAlt: "TypeScript support"
            },
            {
              title: "Microservices Ready",              description: "Create microservices with ease using built-in transport layer support including TCP, Redis, NATS and more.",              imageSrc: "/images/microservices.e0074903-1768918267940.svg",              imageAlt: "Microservices architecture"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Trusted by developers worldwide"
          description="Join thousands of developers who have chosen NestJS for their production applications"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "65k+",              title: "GitHub Stars",              description: "Active community support and contributions",              icon: TrendingUp
            },
            {
              id: "2",              value: "1M+",              title: "Weekly Downloads",              description: "NPM package downloads per week",              icon: Package
            },
            {
              id: "3",              value: "200+",              title: "Contributors",              description: "Active contributors to the framework",              icon: Users
            }
          ]}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardTwelve
          cardTitle="Trusted by thousands of developers and companies worldwide"
          cardTag="Community"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Microsoft Developer",              imageSrc: "/images/microsoft-logo.77c662a4-1768918267947.png"
            },
            {
              id: "2",              name: "Red Hat Developer",              imageSrc: "/images/red-hat-logo.17d10010-1768918267987.svg"
            },
            {
              id: "3",              name: "Netlify Developer",              imageSrc: "/images/netlify-logo.9322c2d1-1768918267987.svg"
            },
            {
              id: "4",              name: "JetBrains Developer",              imageSrc: "/images/jetbrains-logo.d24f46f1-1768918267961.svg"
            }
          ]}
        />
      </div>

      <FooterBase
        logoText="NestJS"
        copyrightText="© 2025 | NestJS"
        columns={[
          {
            title: "Docs",            items: [
              { label: "Getting Started", href: "https://docs.nestjs.com" },
              { label: "Overview", href: "overview" },
              { label: "First Steps", href: "https://docs.nestjs.com/first-steps" },
              { label: "Controllers", href: "https://docs.nestjs.com/controllers" }
            ]
          },
          {
            title: "Community",            items: [
              { label: "GitHub", href: "https://github.com/nestjs/nest" },
              { label: "Discord", href: "https://discord.com/invite/nestjs" },
              { label: "Twitter", href: "https://twitter.com/nestframework" },
              { label: "Support", href: "support" }
            ]
          },
          {
            title: "Enterprise",            items: [
              { label: "Enterprise Support", href: "enterprise" },
              { label: "Official Courses", href: "https://courses.nestjs.com" },
              { label: "Consulting", href: "https://trilon.io" },
              { label: "Workshops", href: "https://courses.nestjs.com" }
            ]
          }
        ]}
        onPrivacyClick={() => console.log('Privacy policy clicked')}
      />
    </ThemeProvider>
  );
}