"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 FeatureBento from '@/components/sections/feature/FeatureBento';
import AboutMetric from '@/components/sections/about/AboutMetric';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Code, Rocket, Shield, Zap, Users, TrendingUp, Building, Globe, Package, CheckCircle, Database, Lock, Layers, Activity, Sparkles } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: "Documentation", id: "features" },
            { name: "Enterprise", id: "about" },
            { name: "Resources", id: "testimonials" },
            { name: "Courses", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="NestJS"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          background={{ variant: "sparkles-gradient" }}
          title="A Progressive Node.js Framework"
          description="Build efficient, reliable and scalable server-side applications with the power of TypeScript and modern design patterns"
          tag="Hello, nest!"
          tagIcon={Sparkles}
          buttons={[
            { text: "Documentation", href: "https://docs.nestjs.com" },
            { text: "Source code", href: "https://github.com/nestjs/nest" }
          ]}
          imageSrc="https://nestjs.com/3d.cfabe065.svg"
          imageAlt="NestJS 3D illustration"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          features={[
            {
              title: "Extensible",              description: "Provides unparalleled flexibility through its meticulously crafted modular architecture",              imageSrc: "https://nestjs.com/magic-wand.ff01fe1d.svg",              imageAlt: "Extensible architecture icon"
            },
            {
              title: "Versatile", 
              description: "Serves as a robust, elegant, and well-structured foundation for all kinds of server-side applications",              imageSrc: "https://nestjs.com/quality.d1d04ce8.svg",              imageAlt: "Versatile applications icon"
            },
            {
              title: "Progressive",              description: "Introduces design patterns and well-established solutions to the Node.js landscape",              imageSrc: "https://nestjs.com/puzzle.c9dfc495.svg",              imageAlt: "Progressive patterns icon"
            }
          ]}
          title="Everything you need"
          description="Build robust, powerful, and scalable server-side applications and stop reinventing the wheel"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="capabilities" data-section="capabilities">
        <FeatureBento
          features={[
            {
              title: "Modularity",              description: "Streamline upkeep by organizing applications into self-contained modules",              bentoComponent: "3d-stack-cards",              items: [
                { icon: Package, title: "Modules", subtitle: "Self-contained", detail: "Organized structure" },
                { icon: Layers, title: "Services", subtitle: "Injectable", detail: "Business logic" },
                { icon: Code, title: "Controllers", subtitle: "Route handlers", detail: "API endpoints" }
              ]
            },
            {
              title: "Scalability",              description: "Scale seamlessly with efficient, battle-tested components",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Type Safety",              description: "Mitigate errors through the robust type safety features of TypeScript",              bentoComponent: "line-chart"
            },
            {
              title: "Rich Ecosystem",              description: "Explore a rich ecosystem offering versatile tools to craft solutions tailored to your needs",              bentoComponent: "orbiting-icons",              centerIcon: Database,
              items: [
                { icon: Shield, ring: 1 },
                { icon: Zap, ring: 1 },
                { icon: Lock, ring: 2 },
                { icon: Activity, ring: 2 }
              ]
            }
          ]}
          title="Core Features"
          description="Discover the powerful capabilities that make NestJS the framework of choice for enterprise applications"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="At NestJS, we redefine server-side development by empowering developers to build the future of scalable applications"
          metrics={[
            { icon: TrendingUp, label: "Enterprise-Ready", value: "1000+" },
            { icon: Users, label: "Active Developers", value: "50K+" },
            { icon: Building, label: "Production Apps", value: "10K+" },
            { icon: Globe, label: "Global Community", value: "180+" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "1",              value: "100M+",              title: "Downloads",              description: "Monthly npm downloads worldwide",              icon: TrendingUp
            },
            {
              id: "2",              value: "50K+", 
              title: "Stars",              description: "GitHub stars from developers",              icon: Sparkles
            },
            {
              id: "3",              value: "1000+",              title: "Companies", 
              description: "Trusted by leading organizations",              icon: Building
            }
          ]}
          title="Trusted by Thousands"
          description="Join the global community of developers and companies building with NestJS"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "@sarahdev",              testimonial: "NestJS transformed our development workflow. The modular architecture and TypeScript support make building scalable APIs incredibly efficient."
            },
            {
              id: "2", 
              name: "Michael Rodriguez",              handle: "@mrodriguez",              testimonial: "The dependency injection system in NestJS is fantastic. It makes testing and maintaining large applications so much easier."
            },
            {
              id: "3",              name: "Emily Johnson", 
              handle: "@emilyjdev",              testimonial: "Moving from Express to NestJS was the best decision for our team. The structure and conventions help us ship features faster."
            },
            {
              id: "4",              name: "David Park",              handle: "@davidpark", 
              testimonial: "NestJS brings the best of Angular's architecture to the backend. Perfect for teams already using Angular on the frontend."
            },
            {
              id: "5",              name: "Lisa Thompson",              handle: "@lisatech",              testimonial: "The documentation and community support for NestJS is outstanding. Getting started was smooth and productive."
            },
            {
              id: "6",              name: "Alex Kumar",              handle: "@alexkumar",              testimonial: "NestJS microservices capabilities are excellent. We've built a distributed system that scales beautifully."
            },
            {
              id: "7",              name: "Maria Garcia",              handle: "@mariagarcia",              testimonial: "The GraphQL integration in NestJS is seamless. Building APIs has never been this straightforward and type-safe."
            },
            {
              id: "8",              name: "James Wilson",              handle: "@jameswilson", 
              testimonial: "NestJS guards and interceptors provide powerful ways to handle authentication and request processing across our entire application."
            }
          ]}
          animationType="slide-up"
          title="What Developers Are Saying"
          description="Hear from the community of developers building amazing applications with NestJS"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Sparkles}
          title="Stay up to date with NestJS"
          description="Subscribe to stay up to date with the latest Nest updates, features, and videos from our community"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="By subscribing, you agree to receive updates about NestJS releases and community news"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="NestJS"
          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" },
                { label: "Enterprise", href: "https://enterprise.nestjs.com" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "GitHub", href: "https://github.com/nestjs/nest" },
                { label: "Discord", href: "https://discord.gg/nestjs" },
                { label: "Twitter", href: "https://twitter.com/nestframework" },
                { label: "Courses", href: "https://courses.nestjs.com" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog", href: "https://trilon.io/blog" },
                { label: "Newsletter", href: "#contact" },
                { label: "Support", href: "https://enterprise.nestjs.com" },
                { label: "Consulting", href: "https://trilon.io" }
              ]
            }
          ]}
          copyrightText="© 2017-2025 Kamil Mysliwiec. Released under the MIT License"
        />
      </div>
    </ThemeProvider>
  );
}