"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 { Sparkles, Smartphone, Wifi, Bluetooth, Radio, Shield, AlertCircle, Eye, Zap, Award, DollarSign, CheckCircle, Users, 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="AutoLux"
          navItems={[
            { name: "Inventory", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Browse Cars",            href: "features"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Premium Vehicles Await You"
          description="Discover an exclusive collection of luxury and performance automobiles curated for discerning buyers. Experience seamless browsing, transparent pricing, and expert guidance through your automotive journey."
          background={{ variant: "sparkles-gradient" }}
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Customer 1" },
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Customer 2" },
            { src: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", alt: "Customer 3" }
          ]}
          avatarText="Trusted by 500+ satisfied customers"
          buttons={[
            { text: "Explore Inventory", href: "features" },
            { text: "Schedule Test Drive", href: "contact" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Featured Vehicles & Technology"
          description="Experience our curated selection of premium automobiles with cutting-edge technology and performance features that define excellence in automotive engineering."
          tag="Inventory Highlights"
          tagIcon={Sparkles}
          features={[
            {
              title: "Performance Engineering",              description: "State-of-the-art engines delivering exceptional power and acceleration",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Advanced Navigation",              description: "Real-time GPS mapping and integrated vehicle diagnostics",              bentoComponent: "map"
            },
            {
              title: "Smart Connectivity",              description: "Seamless integration with mobile devices and smart home systems",              bentoComponent: "orbiting-icons",              centerIcon: Smartphone,
              items: [
                { icon: Wifi, ring: 1 },
                { icon: Bluetooth, ring: 2 },
                { icon: Radio, ring: 3 }
              ]
            },
            {
              title: "Safety Suite",              description: "Comprehensive collision avoidance and emergency response systems",              bentoComponent: "3d-stack-cards",              items: [
                {
                  icon: Shield,
                  title: "Collision Detection",                  subtitle: "Advanced Sensors",                  detail: "360° awareness system"
                },
                {
                  icon: AlertCircle,
                  title: "Emergency Braking",                  subtitle: "Auto Response",                  detail: "Instant emergency halt"
                },
                {
                  icon: Eye,
                  title: "Driver Monitoring",                  subtitle: "Fatigue Detection",                  detail: "Real-time alerts"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features-premium" data-section="features-premium">
        <FeatureBorderGlow
          title="Why Choose AutoLux"
          description="Hover over each advantage to explore why we're the premier destination for luxury automobiles and exceptional service."
          tag="Our Advantages"
          features={[
            {
              icon: Zap,
              title: "Lightning Fast Delivery",              description: "Get your dream car delivered within 48 hours of purchase with our expedited logistics network."
            },
            {
              icon: Award,
              title: "Award-Winning Service",              description: "Recognized industry leader in customer satisfaction and automotive excellence for over 15 years."
            },
            {
              icon: DollarSign,
              title: "Flexible Financing",              description: "Competitive rates and customizable payment plans designed to fit your budget and lifestyle."
            },
            {
              icon: CheckCircle,
              title: "Certified Quality",              description: "All vehicles undergo rigorous multi-point inspections and come with comprehensive warranties."
            },
            {
              icon: Users,
              title: "Expert Consultants",              description: "Dedicated automotive specialists available 24/7 to guide you through every step of your purchase."
            },
            {
              icon: Shield,
              title: "Guaranteed Protection",              description: "Extended coverage plans and roadside assistance included with every vehicle purchase."
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="AutoLux transformed my car buying experience. The entire process was seamless, transparent, and enjoyable. The staff's expertise and professionalism made finding my perfect vehicle effortless. I've recommended them to all my friends without hesitation."
          rating={5}
          author="Michael Chen, Entrepreneur"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Michael" },
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Sarah" },
            { src: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", alt: "James" },
            { src: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", alt: "Emily" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Flexible Financing Options"
          description="Choose the payment plan that works best for you. All options include comprehensive coverage and premium support."
          tag="Pricing Plans"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "standard",              badge: "Popular Choice",              badgeIcon: Star,
              price: "36-72 Months",              subtitle: "Flexible payment terms",              buttons: [
                { text: "Get Started", href: "contact" }
              ],
              features: [
                "Competitive interest rates",                "No prepayment penalties",                "Comprehensive insurance included",                "24/7 roadside assistance",                "Annual maintenance covered",                "Free vehicle inspections"
              ]
            },
            {
              id: "premium",              badge: "Best Value",              badgeIcon: Sparkles,
              price: "Lease Options",              subtitle: "Drive the latest models",              buttons: [
                { text: "Explore Leasing", href: "contact" }
              ],
              features: [
                "Latest vehicle models quarterly",                "All maintenance included",                "Gap insurance protection",                "24/7 concierge service",                "Priority service appointments",                "Unlimited roadside assistance"
              ]
            },
            {
              id: "luxury",              badge: "Exclusive",              badgeIcon: Crown,
              price: "Custom Terms",              subtitle: "Bespoke automotive solutions",              buttons: [
                { text: "Contact Specialist", href: "contact" }
              ],
              features: [
                "Personalized financing packages",                "Executive delivery service",                "Dedicated relationship manager",                "Premium detailing included",                "Exclusive VIP events access",                "Lifetime vehicle support"
              ]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get in Touch"
          tagIcon={Mail}
          title="Ready to Find Your Dream Car?"
          description="Join our mailing list for exclusive vehicle launches, special promotions, and insider tips on automotive trends. Subscribe today and get priority access to our latest inventory."
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe Now"
          termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to our Terms of Service and Privacy Policy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Our Team", href: "about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Browse Inventory", href: "features" },
                { label: "Schedule Test Drive", href: "contact" },
                { label: "Financing Info", href: "pricing" },
                { label: "Trade-In Appraisal", href: "contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Contact Support", href: "contact" }
              ]
            }
          ]}
          copyrightText="© 2025 AutoLux. All rights reserved. Premium Automotive Solutions."
        />
      </div>
    </ThemeProvider>
  );
}