"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Award, Calendar, Cpu, Shield, Star, TrendingUp, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="large"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="TechVision"
          navItems={[
            { name: "Solutions", id: "solutions" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="3D Tech Solutions for Modern Enterprise"
          description="Experience the future of IT infrastructure with immersive 3D visualization and interactive depth. Our cutting-edge platform transforms complex technology into intuitive, engaging digital experiences."
          background="aurora"
          tag="Next Generation Technology"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: "Explore Solutions", href: "#solutions" },
            { text: "Schedule Demo", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/a-stunning-3d-tech-dashboard-with-floati-1773943800676-72d093c5.png"
          imageAlt="3D Tech Dashboard Interface"
          ariaLabel="Hero section - 3D Tech Solutions"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Pioneering IT Innovation Since 2015"
          description="We transform enterprise technology through immersive 3D solutions and interactive digital experiences. Our team combines deep technical expertise with creative vision to deliver solutions that engage, inspire, and drive measurable results."
          metrics={[
            { value: "500+", title: "Enterprise Clients" },
            { value: "99.9%", title: "System Uptime" },
            { value: "180M+", title: "Users Worldwide" }
          ]}
          useInvertedBackground={false}
          tag="About Us"
          tagIcon={Award}
          tagAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/modern-tech-team-collaboration-scene-wit-1773943801309-cb0da8d6.png"
          imageAlt="Tech team collaboration with 3D interfaces"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          ariaLabel="About section - Company metrics and mission"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="Advanced Technology Features"
          description="Discover the core technologies powering next-generation IT solutions with interactive 3D visualization and immersive depth perception."
          tag="Technology Stack"
          tagIcon={Cpu}
          tagAnimation="slide-up"
          buttons={[
            { text: "Learn More", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          accordionItems={[
            {
              id: "ai-ml",              title: "AI & Machine Learning",              content: "Harness the power of artificial intelligence with advanced machine learning algorithms. Our 3D visualization engine brings complex neural networks to life, enabling real-time insights and predictive analytics with unparalleled depth and interactivity."
            },
            {
              id: "cloud",              title: "Cloud Infrastructure",              content: "Enterprise-grade cloud computing with global redundancy and 99.9% uptime guarantee. Experience seamless scalability with our interactive 3D cloud management interface, providing complete visibility into your entire infrastructure architecture."
            },
            {
              id: "security",              title: "Advanced Security",              content: "Multi-layered cybersecurity framework with real-time threat detection. Visualize your security posture in stunning 3D, with interactive threat mapping and immediate response capabilities keeping your enterprise protected."
            },
            {
              id: "automation",              title: "Process Automation",              content: "Intelligent automation workflows that reduce operational overhead by up to 70%. Our 3D workflow visualization engine provides complete transparency into every automated process with interactive monitoring and control."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/3d-artificial-intelligence-and-machine-l-1773943801114-bbdaca02.png?_wi=1"
          imageAlt="3D AI and Machine Learning visualization"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          mediaPosition="right"
          ariaLabel="Features section - Advanced technology capabilities"
        />
      </div>

      <div id="services" data-section="services">
        <ProductCardTwo
          title="Enterprise IT Solutions"
          description="Comprehensive suite of IT services designed for modern enterprises seeking innovative 3D-enabled platforms and interactive technology solutions."
          tag="Services"
          tagIcon={Shield}
          tagAnimation="slide-up"
          buttons={[
            { text: "View All Services", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "service-1",              brand: "Enterprise",              name: "Cloud Solutions",              price: "Starting at $5K/mo",              rating: 5,
              reviewCount: "340",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/3d-cloud-computing-infrastructure-visual-1773943802249-e89275e5.png",              imageAlt: "3D Cloud Infrastructure"
            },
            {
              id: "service-2",              brand: "Enterprise",              name: "Security Suite",              price: "Starting at $3K/mo",              rating: 5,
              reviewCount: "298",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/3d-cybersecurity-visualization-with-shie-1773943800805-1b40f171.png",              imageAlt: "Advanced Cybersecurity Platform"
            },
            {
              id: "service-3",              brand: "Enterprise",              name: "AI Platform",              price: "Starting at $7K/mo",              rating: 5,
              reviewCount: "412",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/3d-artificial-intelligence-and-machine-l-1773943801114-bbdaca02.png?_wi=2",              imageAlt: "3D AI Visualization Engine"
            }
          ]}
          ariaLabel="Services section - Enterprise IT solutions"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Performance Metrics"
          description="Real-time analytics and performance indicators showcasing the impact of our 3D technology solutions across global enterprises."
          tag="Results"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            {
              id: "metric-1",              value: "45%",              title: "Performance Boost",              description: "Average improvement in system performance and user engagement"
            },
            {
              id: "metric-2",              value: "60%",              title: "Cost Reduction",              description: "Operational expenses decreased through automation and optimization"
            },
            {
              id: "metric-3",              value: "98%",              title: "Satisfaction Rate",              description: "Client satisfaction with our interactive 3D platform and support"
            },
            {
              id: "metric-4",              value: "24/7",              title: "Support Available",              description: "Round-the-clock technical support and monitoring services"
            }
          ]}
          ariaLabel="Metrics section - Performance indicators"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="What Enterprise Leaders Say"
          description="Hear from industry leaders how our 3D tech solutions transformed their IT infrastructure and digital experiences."
          tag="Client Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "testimonial-1",              name: "Michael Chen",              role: "CEO",              testimonial: "The 3D visualization platform completely transformed how we manage our IT infrastructure. The interactive depth and real-time analytics have made complex systems intuitive and engaging for our entire team.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/professional-headshot-of-a-satisfied-tec-1773943801281-31197051.png",              imageAlt: "Michael Chen - CEO"
            },
            {
              id: "testimonial-2",              name: "Sarah Johnson",              role: "CTO",              testimonial: "Implementing their solution reduced our operational overhead by 60%. The 3D interface makes it easier for our team to identify issues and respond faster than ever before.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/professional-headshot-of-a-female-tech-d-1773943800585-954dc21e.png",              imageAlt: "Sarah Johnson - CTO"
            },
            {
              id: "testimonial-3",              name: "David Rodriguez",              role: "VP Technology",              testimonial: "Best IT investment we've made. The immersive 3D experience has improved team productivity and client engagement significantly. Highly recommended for any enterprise.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/professional-headshot-of-a-male-cto-or-t-1773943800901-51804103.png",              imageAlt: "David Rodriguez - VP Technology"
            },
            {
              id: "testimonial-4",              name: "Emma Williams",              role: "Operations Director",              testimonial: "The interactive depth perception in their platform gives us unprecedented visibility into our systems. Our downtime has decreased by 70% since implementation.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/professional-headshot-of-a-business-deve-1773943800202-17a5a31e.png",              imageAlt: "Emma Williams - Operations Director"
            }
          ]}
          ariaLabel="Testimonials section - Client success stories"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Transform Your IT Infrastructure?"
          ctaDescription="Schedule a personalized demo of our 3D tech solutions platform. Our specialists will show you how to deliver interactive experiences that engage and inspire."
          ctaButton={{
            text: "Schedule Your Demo",            href: "mailto:demo@techvision.com"
          }}
          ctaIcon={Calendar}
          useInvertedBackground={false}
          animationType="scale-rotate"
          faqs={[
            {
              id: "faq-1",              title: "How quickly can we implement your solution?",              content: "Our implementation process typically takes 4-8 weeks depending on your infrastructure complexity. We provide dedicated support and training throughout the entire deployment phase."
            },
            {
              id: "faq-2",              title: "What kind of support do you offer?",              content: "We provide 24/7 technical support, regular maintenance, security updates, and quarterly optimization reviews to ensure peak performance of your 3D platform."
            },
            {
              id: "faq-3",              title: "Can the solution integrate with our existing systems?",              content: "Yes, our platform is designed for seamless integration with existing enterprise systems. We support all major technologies and provide custom integration solutions as needed."
            },
            {
              id: "faq-4",              title: "What about data security and compliance?",              content: "We maintain SOC 2 Type II, ISO 27001, and GDPR compliance. All data is encrypted, with multi-region redundancy and comprehensive audit trails for complete transparency."
            },
            {
              id: "faq-5",              title: "How do we measure ROI?",              content: "We provide detailed analytics and reporting showing performance improvements, cost savings, and productivity gains. Average clients see 40%+ reduction in operational costs within the first year."
            },
            {
              id: "faq-6",              title: "Is training included?",              content: "Comprehensive training is included for all staff members. We offer live workshops, on-demand video tutorials, and ongoing support documentation."
            }
          ]}
          ariaLabel="Contact and FAQ section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="TechVision"
          copyrightText="© 2025 TechVision Labs. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Services", href: "#services" },
                { label: "Pricing", href: "#contact" },
                { label: "Security", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Tutorials", href: "#" },
                { label: "Support", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "GDPR", href: "#" }
              ]
            }
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}