"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { MessageCircle, Shield, Database, Puzzle } from 'lucide-react';

function ClonedPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      background="gradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="NestJS"
          navItems={[
            { name: "Enterprise", id: "enterprise" },
            { name: "Support", id: "support" },
            { name: "Features", id: "features" },
            { name: "Companies", id: "companies" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Enterprise | NestJS"
          description="A progressive Node.js framework for building efficient and scalable server-side applications"
          tag="Enterprise Grade"
          imageSrc="/images/header-2.50296714-1768993680455.jpg"
          imageAlt="NestJS Enterprise framework"
          buttons={[
            { text: "Get Started", href: "https://docs.nestjs.com" },
            { text: "Learn More", href: "features" }
          ]}
        />
      </div>

      <div id="companies" data-section="companies">
        <MetricCardEleven
          title="Trusted by Industry Leaders"
          description="Companies worldwide rely on NestJS for their enterprise applications"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "gitlab",              value: "GitLab",              title: "Version Control Platform",              description: "Powers development workflows globally",              imageSrc: "/images/gitlab.4f9d2995-1768993680252.png",              imageAlt: "GitLab logo"
            },
            {
              id: "sanofi",              value: "Sanofi",              title: "Healthcare Innovation",              description: "Leading pharmaceutical company",              imageSrc: "/images/sanofi.b18c1526-1768993680315.png",              imageAlt: "Sanofi logo"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Enterprise-Ready Framework"
          description="NestJS provides a robust foundation for building scalable Node.js applications with TypeScript support and modular architecture"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          bulletPoints={[
            {
              title: "TypeScript First",              description: "Built with TypeScript for better developer experience and type safety",              icon: Shield
            },
            {
              title: "Modular Architecture",              description: "Organize your code with modules, controllers, and services",              icon: Puzzle
            },
            {
              title: "Scalable Solutions",              description: "Handle enterprise-level traffic and complexity with ease",              icon: Database
            }
          ]}
          imageSrc="/images/support.cbdb04e7-1768993680449.png"
          imageAlt="NestJS support and architecture"
          buttons={[
            { text: "View Documentation", href: "https://docs.nestjs.com" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Why Choose NestJS Enterprise"
          description="Discover the features that make NestJS the perfect choice for enterprise applications"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Enterprise Support",              description: "Get professional support and consulting for your enterprise applications",              imageSrc: "/images/conversation.2689303c-1768993680457.svg",              imageAlt: "Enterprise support conversation",              button: {
                text: "Learn More",                href: "support"
              }
            },
            {
              title: "Big Data Processing",              description: "Handle large-scale data processing with optimized performance",              imageSrc: "/images/big-data.88454030-1768993680457.svg",              imageAlt: "Big data processing illustration",              button: {
                text: "Explore",                href: "features"
              }
            },
            {
              title: "Startup Ready",              description: "Perfect for startups looking to scale quickly and efficiently",              imageSrc: "/images/startup.b4dbf43d-1768993680460.svg",              imageAlt: "Startup growth illustration",              button: {
                text: "Get Started",                href: "https://docs.nestjs.com"
              }
            },
            {
              title: "Security First",              description: "Built-in security features to protect your enterprise applications",              imageSrc: "/images/protect.5939735a-1768993680461.svg",              imageAlt: "Security protection illustration",              button: {
                text: "Security Guide",                href: "https://docs.nestjs.com/security"
              }
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by thousands of developers worldwide building enterprise applications"
          cardTag="Developer Community"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Mercedes Developer",              imageSrc: "/images/mercedes.ee8047a9-1768993680346.png",              imageAlt: "Mercedes-Benz"
            },
            {
              id: "2",              name: "Adidas Developer",              imageSrc: "/images/adidas.718f26f2-1768993680367.svg",              imageAlt: "Adidas"
            },
            {
              id: "3",              name: "BMW Developer",              imageSrc: "/images/bmw.0ce4c05c-1768993680433.svg",              imageAlt: "BMW"
            },
            {
              id: "4",              name: "IBM Developer",              imageSrc: "/images/ibm.b8c76e06-1768993680459.svg",              imageAlt: "IBM"
            },
            {
              id: "5",              name: "Red Hat Developer",              imageSrc: "/images/red-hat.c5e6e64a-1768993680461.svg",              imageAlt: "Red Hat"
            },
            {
              id: "6",              name: "JetBrains Developer",              imageSrc: "/images/jetbrains.536f2da5-1768993680460.svg",              imageAlt: "JetBrains"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={MessageCircle}
          title="Ready to build with NestJS Enterprise?"
          description="Join thousands of developers building scalable applications with NestJS framework"
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Get Started"
          termsText="By signing up, you agree to receive updates about NestJS Enterprise features and news."
        />
      </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" }
              ]
            },
            {
              title: "Enterprise",              items: [
                { label: "Support", href: "support" },
                { label: "Consulting", href: "https://enterprise.nestjs.com" },
                { label: "Training", href: "https://courses.nestjs.com" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "GitHub", href: "https://github.com/nestjs/nest" },
                { label: "Discord", href: "https://discord.gg/G7Qnnhy" },
                { label: "Twitter", href: "https://twitter.com/nestframework" }
              ]
            }
          ]}
          copyrightText="© 2025 | NestJS Enterprise"
        />
      </div>
    </ThemeProvider>
  );
}

export default ClonedPage;