"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Settings, Users, Database, Shield, Cloud, Lock, Zap, TrendingUp, Cpu, FileCheck, Rocket, Star, Crown, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="TechVision"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Transform Your Business with Cutting-Edge IT Solutions"
          description="Empower your organization with innovative technology solutions designed for scalability, security, and performance. Our expert team delivers comprehensive IT services tailored to your unique business needs."
          background={{ variant: "radial-gradient" }}
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-arms-crossed-holding-white-headphone-around-his-neck_23-2148096439.jpg",              alt: "Team member 1"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-young-businessman-with-arms-crossed-looking-camera-isolated-against-white-background_23-2148073336.jpg",              alt: "Team member 2"
            },
            {
              src: "https://img.b2bpic.net/free-photo/closeup-portrait-caucasian-happy-teacher-glasses_74855-9736.jpg",              alt: "Team member 3"
            }
          ]}
          avatarText="Trusted by 500+ enterprises worldwide"
          buttons={[
            { text: "Explore Solutions", href: "#features" },
            { text: "Schedule Demo", href: "#contact" }
          ]}
        />
      </div>

      <div id="features-bento" data-section="features-bento">
        <FeatureBento
          title="Powerful Platform Capabilities"
          description="Discover the advanced features that power digital transformation for leading enterprises"
          tag="Technology"
          tagIcon={Zap}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          carouselMode="buttons"
          features={[
            {
              title: "Global Infrastructure",              description: "Deploy applications and data across worldwide data centers with sub-millisecond latency",              bentoComponent: "globe"
            },
            {
              title: "Real-Time Analytics",              description: "Monitor performance metrics and gain actionable insights with animated dashboards",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Enterprise Integrations",              description: "Seamlessly connect your existing tools and systems with our extensible API ecosystem",              bentoComponent: "orbiting-icons",              centerIcon: Settings,
              items: [
                { icon: Users, ring: 1 },
                { icon: Database, ring: 2 },
                { icon: Shield, ring: 2 },
                { icon: Cloud, ring: 3 }
              ]
            },
            {
              title: "World Coverage",              description: "Access services and support in every major market with localized infrastructure",              bentoComponent: "map"
            }
          ]}
        />
      </div>

      <div id="features-highlight" data-section="features-highlight">
        <FeatureBorderGlow
          title="Why Choose Our Platform"
          description="Experience the difference with features built for modern enterprises"
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          features={[
            {
              icon: Lock,
              title: "Enterprise Security",              description: "Military-grade encryption and compliance with HIPAA, SOC 2, and ISO 27001 standards"
            },
            {
              icon: Zap,
              title: "Lightning Performance",              description: "99.99% uptime SLA with automatic scaling and intelligent load balancing"
            },
            {
              icon: Users,
              title: "24/7 Expert Support",              description: "Dedicated support team with average response time under 15 minutes"
            },
            {
              icon: TrendingUp,
              title: "Scalable Growth",              description: "Grow from startup to enterprise without changing your infrastructure"
            },
            {
              icon: Cpu,
              title: "AI-Powered Automation",              description: "Intelligent automation reduces operational overhead by up to 60%"
            },
            {
              icon: FileCheck,
              title: "Compliance Ready",              description: "Pre-configured compliance frameworks for regulated industries"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="TechVision transformed our entire IT infrastructure. Their solutions reduced our operational costs by 40% while dramatically improving system reliability. The team's expertise and support made the transition seamless."
          rating={5}
          author="Sarah Chen, CTO at CloudFirst Systems"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/portrait-young-handsome-business-man_1303-19609.jpg",              alt: "Sarah Chen"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-hacker_23-2148165939.jpg",              alt: "Team member 2"
            },
            {
              src: "https://img.b2bpic.net/free-photo/successful-professional-enjoying-work-break_1262-16980.jpg",              alt: "Team member 3"
            },
            {
              src: "https://img.b2bpic.net/free-photo/front-view-businessman-with-crossed-arms_23-2148242733.jpg",              alt: "Team member 4"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your organization. All plans include 24/7 support and security features."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "starter",              badge: "For Startups",              badgeIcon: Rocket,
              price: "$499/month",              subtitle: "Perfect for growing teams",              buttons: [{ text: "Get Started", href: "#contact" }],
              features: [
                "Up to 50 users",                "10GB cloud storage",                "Basic analytics",                "Email support",                "Standard integrations"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Star,
              price: "$1,299/month",              subtitle: "Ideal for mid-size enterprises",              buttons: [{ text: "Start Free Trial", href: "#contact" }],
              features: [
                "Up to 500 users",                "500GB cloud storage",                "Advanced analytics",                "Priority 24/7 support",                "Custom integrations",                "API access",                "Advanced security"
              ]
            },
            {
              id: "enterprise",              badge: "For Scale",              badgeIcon: Crown,
              price: "Custom",              subtitle: "Unlimited everything",              buttons: [{ text: "Contact Sales", href: "#contact" }],
              features: [
                "Unlimited users",                "Unlimited storage",                "Real-time analytics",                "Dedicated support team",                "Full API access",                "Custom development",                "SLA guarantee",                "On-premise options"
              ]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          tagIcon={Mail}
          title="Ready to Transform Your IT Operations?"
          description="Join hundreds of enterprises leveraging our platform for digital innovation. Schedule a personalized demo with our solutions team."
          background={{ variant: "downward-rays-animated" }}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email"
          buttonText="Schedule Demo"
          termsText="We respect your privacy. You'll receive information about our services and can unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#features" },
                { label: "Enterprise", href: "#contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "https://blog.techvision.io" },
                { label: "Careers", href: "https://careers.techvision.io" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "https://techvision.io/privacy" },
                { label: "Terms of Service", href: "https://techvision.io/terms" },
                { label: "Cookie Policy", href: "https://techvision.io/cookies" },
                { label: "Security", href: "https://techvision.io/security" }
              ]
            }
          ]}
          copyrightText="© 2025 TechVision. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}