"use client"

import { ThemeProvider } from '@/components/ui/theme-provider'
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'
import HeroBillboard from '@/components/sections/hero/HeroBillboard'
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne'
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve'
import AboutMetric from '@/components/sections/about/AboutMetric'
import ContactCenter from '@/components/sections/contact/ContactCenter'
import FooterBase from '@/components/sections/footer/FooterBase'
import { Building2, Shield, Users, Zap, MessageCircle, Rocket, TrendingUp, Globe, Award, Phone } from 'lucide-react'

export default function LandingPage() {
  return (
    <ThemeProvider 
      defaultButtonVariant="hover-bubble" 
      defaultTextAnimation="entrance-slide" 
      borderRadius="rounded" 
      background="aurora" 
      cardStyle="glass-elevated" 
      primaryButtonStyle="gradient" 
      secondaryButtonStyle="glass"
    >
      <NavbarStyleApple
        brandName="NestJS Enterprise"
        navItems={[
          { name: 'Features', id: 'features' },
          { name: 'Services', id: 'services' },
          { name: 'Support', id: 'support' },
          { name: 'Contact', id: 'contact' }
        ]}
      />

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Enterprise-Grade Node.js Solutions"
          description="Build scalable, reliable applications with NestJS Enterprise. Get dedicated support, professional services, and enterprise-ready tools."
          tag="Trusted by Industry Leaders"
          tagIcon={Building2}
          imageSrc="/images/header-2.50296714-1768918243907.jpg"
          imageAlt="Enterprise development team"
          buttons={[
            { text: 'Get Started', href: 'contact' },
            { text: 'Learn More', href: 'features' }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Enterprise Features"
          description="Powerful tools and services designed for enterprise development teams"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Professional Support",              description: "Get dedicated technical support with guaranteed response times for mission-critical applications.",              imageSrc: "/images/support.cbdb04e7-1768918243980.png",              imageAlt: "Professional support team"
            },
            {
              title: "Enterprise Security",              description: "Advanced security features and compliance tools to protect your enterprise applications.",              imageSrc: "/images/protect.5939735a-1768918243861.svg",              imageAlt: "Security shield icon"
            },
            {
              title: "Scalable Architecture",              description: "Build applications that scale with your business using enterprise-grade architecture patterns.",              imageSrc: "/images/big-data.88454030-1768918243807.svg",              imageAlt: "Scalable architecture diagram"
            }
          ]}
        />
      </div>

      <div id="trusted-by" data-section="trusted-by">
        <TestimonialCardTwelve
          cardTitle="Trusted by leading companies worldwide to build enterprise applications"
          cardTag="Industry Leaders"
          useInvertedBackground="noInvert"
          testimonials={[
            { id: '1', name: 'Red Hat', imageSrc: '/images/red-hat.c5e6e64a-1768918243777.svg' },
            { id: '2', name: 'BMW', imageSrc: '/images/bmw.0ce4c05c-1768918243777.svg' },
            { id: '3', name: 'GitLab', imageSrc: '/images/gitlab.4f9d2995-1768918243781.png' },
            { id: '4', name: 'Mercedes', imageSrc: '/images/mercedes.ee8047a9-1768918243791.png' },
            { id: '5', name: 'IBM', imageSrc: '/images/ibm.b8c76e06-1768918243793.svg' },
            { id: '6', name: 'Adidas', imageSrc: '/images/adidas.718f26f2-1768918244538.svg' }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <AboutMetric
          title="Powering enterprise applications across industries with proven results and trusted partnerships"
          useInvertedBackground="noInvert"
          metrics={[
            { icon: TrendingUp, label: 'Enterprise Clients', value: '500+' },
            { icon: Globe, label: 'Countries Served', value: '50+' },
            { icon: Award, label: 'Years of Experience', value: '8+' },
            { icon: Users, label: 'Developers Supported', value: '100K+' }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardOne
          title="Professional Services"
          description="Comprehensive services to accelerate your enterprise development"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Consulting & Architecture",              description: "Expert guidance on application architecture, best practices, and technology decisions for your enterprise.",              imageSrc: "/images/conversation.2689303c-1768918244602.svg",              imageAlt: "Consulting conversation"
            },
            {
              title: "Training & Workshops",              description: "Comprehensive training programs to upskill your development team on NestJS and enterprise patterns.",              imageSrc: "/images/puzzle.a43aa4b7-1768918243808.svg",              imageAlt: "Training workshop"
            },
            {
              title: "Custom Development",              description: "Dedicated development services to build and maintain your enterprise applications with expert teams.",              imageSrc: "/images/startup.b4dbf43d-1768918244608.svg",              imageAlt: "Custom development"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Phone}
          title="Ready to scale your enterprise application?"
          description="Contact our team to discuss your enterprise needs and discover how NestJS can accelerate your development."
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your work email"
          buttonText="Contact Sales"
          termsText="By submitting, you agree to our Terms of Service and Privacy Policy."
        />
      </div>

      <FooterBase
        logoText="NestJS Enterprise"
        columns={[
          {
            title: 'Product',
            items: [
              { label: 'Features', href: 'features' },
              { label: 'Enterprise', href: 'https://enterprise.nestjs.com' },
              { label: 'Documentation', href: 'https://docs.nestjs.com' },
              { label: 'Pricing', href: 'contact' }
            ]
          },
          {
            title: 'Services',
            items: [
              { label: 'Consulting', href: 'services' },
              { label: 'Support', href: 'support' },
              { label: 'Training', href: 'services' },
              { label: 'Development', href: 'services' }
            ]
          },
          {
            title: 'Company',
            items: [
              { label: 'About', href: 'https://nestjs.com/about' },
              { label: 'Blog', href: 'https://trilon.io/blog' },
              { label: 'Careers', href: 'https://trilon.io/careers' },
              { label: 'Contact', href: 'contact' }
            ]
          }
        ]}
        copyrightText="© 2025 NestJS. All rights reserved."
      />
    </ThemeProvider>
  )
}