"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, Code, Shield, Zap, Users, MessageSquare, BookOpen, Phone, ExternalLink, ArrowRight } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: "Features", id: "features" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="NestJS Enterprise"
          button={{ text: "Get Started", href: "https://enterprise.nestjs.com" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Enterprise-grade NestJS solutions for modern applications"
          description="Build scalable, maintainable Node.js applications with professional NestJS consulting, support, and development services trusted by leading companies worldwide."
          tag="Enterprise Support"
          tagIcon={Sparkles}
          imageSrc="/images/header-2.50296714-1768995252365.jpg"
          imageAlt="NestJS Enterprise Development"
          imagePosition="right"
          buttons={[
            { text: "Start Your Project", href: "https://enterprise.nestjs.com" },
            { text: "View Services", href: "about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Why choose NestJS Enterprise?"
          description="We provide comprehensive NestJS solutions that help enterprises build robust, scalable applications with confidence and speed."
          tag="Our Expertise"
          tagIcon={Shield}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          bulletPoints={[
            {
              title: "Expert Consulting",              description: "Get guidance from NestJS core contributors and industry experts",              icon: Users
            },
            {
              title: "Priority Support",              description: "24/7 enterprise support with guaranteed response times",              icon: MessageSquare
            },
            {
              title: "Custom Development",              description: "Tailored solutions built specifically for your business needs",              icon: Code
            }
          ]}
          imageSrc="/images/support.cbdb04e7-1768995253081.png"
          imageAlt="NestJS Enterprise Support"
          imagePosition="right"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Comprehensive NestJS Services"
          description="From architecture design to deployment, we cover every aspect of your NestJS journey with enterprise-grade solutions."
          tag="Services"
          tagIcon={Zap}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Architecture Design",              description: "Scalable application architecture patterns and best practices for enterprise systems",              imageSrc: "/images/big-data.88454030-1768995251151.svg",              imageAlt: "NestJS Architecture"
            },
            {
              title: "Security Implementation",              description: "Enterprise-grade security features including authentication, authorization, and data protection",              imageSrc: "/images/protect.5939735a-1768995251847.svg",              imageAlt: "NestJS Security"
            },
            {
              title: "Performance Optimization",              description: "Advanced caching strategies, database optimization, and monitoring solutions",              imageSrc: "/images/startup.b4dbf43d-1768995250935.svg",              imageAlt: "NestJS Performance"
            },
            {
              title: "Integration Solutions",              description: "Seamless integration with databases, microservices, and third-party APIs",              imageSrc: "/images/puzzle.a43aa4b7-1768995251847.svg",              imageAlt: "NestJS Integration"
            }
          ]
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by 500+ enterprise teams worldwide including Fortune 500 companies"
          cardTag="Trusted Globally"
          useInvertedBackground="invertDefault"
          testimonials={[
            { id: "1", name: "Sanofi", imageSrc: "/images/sanofi.b18c1526-1768995250449.png" },
            { id: "2", name: "Adidas", imageSrc: "/images/adidas.718f26f2-1768995250458.svg" },
            { id: "3", name: "Mercedes", imageSrc: "/images/mercedes.ee8047a9-1768995250815.png" },
            { id: "4", name: "GitLab", imageSrc: "/images/gitlab.4f9d2995-1768995250825.png" },
            { id: "5", name: "IBM", imageSrc: "/images/ibm.b8c76e06-1768995250854.svg" },
            { id: "6", name: "BMW", imageSrc: "/images/bmw.0ce4c05c-1768995250854.svg" }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Choose Your Enterprise Plan"
          description="Flexible pricing options designed to scale with your organization's needs and growth."
          tag="Pricing"
          tagIcon={ArrowRight}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "starter",              price: "$2,500/month",              name: "Starter Support",              buttons: [
                { text: "Get Started", href: "https://enterprise.nestjs.com" },
                { text: "Learn More", href: "contact" }
              ],
              features: [
                "Email support (24h response)",                "Architecture review",                "Best practices guide",                "Community access"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$7,500/month",              name: "Professional Support",              buttons: [
                { text: "Get Started", href: "https://enterprise.nestjs.com" },
                { text: "Contact Sales", href: "contact" }
              ],
              features: [
                "Priority support (4h response)",                "Code reviews",                "Performance audits",                "Training sessions",                "Custom integrations"
              ]
            },
            {
              id: "enterprise",              price: "Custom",              name: "Enterprise Support",              buttons: [
                { text: "Contact Sales", href: "contact" },
                { text: "Schedule Demo", href: "https://enterprise.nestjs.com" }
              ],
              features: [
                "24/7 dedicated support",                "Custom development",                "On-site consulting",                "SLA guarantees",                "Unlimited training"
              ]
            }
          ]
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Phone}
          title="Ready to accelerate your NestJS development?"
          description="Join hundreds of enterprises that trust our NestJS expertise to build mission-critical applications. Contact us today to discuss your project requirements."
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your business email"
          buttonText="Contact Sales"
          termsText="By submitting, you agree to our Terms of Service and Privacy Policy. We'll contact you within 24 hours."
          onSubmit={(email) => console.log('Contact form submitted:', email)}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="NestJS Enterprise"
          copyrightText="© 2025 NestJS Enterprise. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Consulting", href: "https://enterprise.nestjs.com/consulting" },
                { label: "Support", href: "https://enterprise.nestjs.com/support" },
                { label: "Training", href: "https://enterprise.nestjs.com/training" },
                { label: "Development", href: "https://enterprise.nestjs.com/development" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "https://docs.nestjs.com" },
                { label: "Examples", href: "https://github.com/nestjs/nest" },
                { label: "Blog", href: "https://nestjs.com/blog" },
                { label: "Community", href: "https://discord.gg/G7Qnnhy" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "about" },
                { label: "Contact", href: "contact" },
                { label: "Careers", href: "https://enterprise.nestjs.com/careers" }
              ]
            }
          ]}
          onPrivacyClick={() => window.open('https://enterprise.nestjs.com/privacy', '_blank')}
        />
      </div>
    </ThemeProvider>
  );
}
