"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { CheckCircle, Compass, Eye, Mail, Shield, Sparkles, Star, TrendingUp, Users, Wrench, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Imperio"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Process", id: "process" },
            { name: "Gallery", id: "gallery" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Your Detail", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Imperio Car Detailing"
          description="Automotive perfection, engineered. High-end detailing, paint correction, and ceramic protection for vehicles that demand absolute precision."
          background={{ variant: "glowing-orb" }}
          kpis={[
            { value: "15+", label: "Years Expertise" },
            { value: "500+", label: "Vehicles Transformed" },
            { value: "99.8%", label: "Client Satisfaction" }
          ]}
          enableKpiAnimation={true}
          imageSrc="https://img.b2bpic.net/free-photo/closeup-shot-exterior-details-modern-black-car_181624-25346.jpg"
          imageAlt="Luxury car detailing showcase"
          imagePosition="right"
          buttons={[
            { text: "Book Your Detail", href: "#contact" },
            { text: "View Services", href: "#services" }
          ]}
          tag="Elite Detailing Service"
          tagIcon={Sparkles}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Built for Those Who Refuse Average"
          description="Imperio Car Detailing was created with one mission: to deliver uncompromising results for drivers who demand excellence."
          tabs={[
            {
              id: "mission",              label: "Our Mission",              description: "Every vehicle is treated as a statement—meticulously corrected, protected, and refined using professional-grade techniques and premium products. This isn't volume detailing. This is precision work."
            },
            {
              id: "expertise",              label: "Our Expertise",              description: "Specialized in luxury, exotic, and performance vehicles. We combine decades of craftsmanship with cutting-edge correction technology to restore your vehicle to showroom perfection."
            },
            {
              id: "commitment",              label: "Our Commitment",              description: "Zero shortcuts. Every detail matters. We treat your vehicle with the same obsessive care that went into building it, ensuring protection that lasts."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/black-car-garage_417767-26.jpg"
          imageAlt="Professional detailing workspace"
          imagePosition="right"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBento
          title="Signature Services"
          description="Hand-selected detailing solutions engineered for automotive perfection"
          features={[
            {
              title: "Paint Correction",              description: "Eliminate swirl marks, scratches, and imperfections to restore true depth and gloss. Multi-stage polishing for flawless results.",              bentoComponent: "reveal-icon",              icon: Sparkles
            },
            {
              title: "Ceramic Coating",              description: "Long-lasting protection with insane hydrophobic performance and mirror-like shine. Professional-grade application for durability.",              bentoComponent: "reveal-icon",              icon: Shield
            },
            {
              title: "Interior Restoration",              description: "Deep cleaning, leather conditioning, and odor elimination for a factory-fresh cabin. Every surface perfected.",              bentoComponent: "reveal-icon",              icon: Zap
            },
            {
              title: "Exterior Detail",              description: "Wheels, tires, trim, and paint—perfected edge to edge. Complete exterior enhancement for commanding presence.",              bentoComponent: "reveal-icon",              icon: Compass
            }
          ]}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          tag="Services"
          tagIcon={CheckCircle}
          buttons={[{ text: "Explore Full Menu", href: "#services" }]}
        />
      </div>

      <div id="process" data-section="process">
        <MetricCardThree
          title="Our Proven Process"
          description="Four precision steps to automotive perfection, executed with zero shortcuts"
          metrics={[
            { id: "1", icon: Eye, title: "Inspection", value: "Complete Assessment" },
            { id: "2", icon: Wrench, title: "Correction", value: "Precision Polishing" },
            { id: "3", icon: Shield, title: "Protection", value: "Coating Applied" },
            { id: "4", icon: CheckCircle, title: "Final Reveal", value: "Results Delivered" }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="gallery" data-section="gallery">
        <TestimonialCardOne
          title="Results That Speak Louder Than Words"
          description="Before and after transformations showcase the precision and impact of Imperio detailing"
          testimonials={[
            {
              id: "1",              name: "Flawless Reflection",              role: "Paint Correction",              company: "Before & After",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-black-new-car-with-doors-opened_23-2148332902.jpg"
            },
            {
              id: "2",              name: "Hydrophobic Perfection",              role: "Ceramic Coating",              company: "Water Beading",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212228.jpg"
            },
            {
              id: "3",              name: "Leather Excellence",              role: "Interior Detail",              company: "Conditioned & Sealed",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/details-car-standing-car-showroom_1303-29460.jpg"
            },
            {
              id: "4",              name: "Factory Fresh",              role: "Full Detail",              company: "Complete Transformation",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/photo-infiniti-g37-coupe-parking_158538-24745.jpg"
            },
            {
              id: "5",              name: "Exterior Mastery",              role: "Wheel & Trim",              company: "Precision Detailing",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/car-seats-inside-car-close-up-photo_1303-31996.jpg"
            },
            {
              id: "6",              name: "Ceramic Shield",              role: "Protection Applied",              company: "Long-Lasting Guard",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-exterior-details-modern-black-car_181624-23579.jpg"
            }
          ]}
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground="noInvert"
          gridVariant="asymmetric-60-wide-40-narrow"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <MetricCardThree
          title="Trusted by Elite Drivers Worldwide"
          description="Premium service delivered consistently to luxury and exotic vehicle owners who demand perfection"
          metrics={[
            { id: "1", icon: Users, title: "Premium Clients", value: "500+" },
            { id: "2", icon: TrendingUp, title: "Industry Recognition", value: "Certified" },
            { id: "3", icon: Star, title: "Client Rating", value: "4.9★" },
            { id: "4", icon: TrendingUp, title: "Repeat Business", value: "95%" }
          ]}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Clients Say"
          description="Real feedback from distinguished vehicle owners who trust Imperio with their most prized possessions"
          testimonials={[
            {
              id: "1",              name: "Marcus Sterling",              role: "Ferrari Owner",              company: "Investment Group",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg"
            },
            {
              id: "2",              name: "Elena Rodriguez",              role: "Luxury Collector",              company: "Automotive Enthusiast",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5370.jpg"
            },
            {
              id: "3",              name: "James Whitmore",              role: "CEO, Tech Firm",              company: "Executive Driver",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3630.jpg"
            },
            {
              id: "4",              name: "Victoria Chen",              role: "Physician",              company: "Luxury Enthusiast",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1588.jpg"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          carouselMode="buttons"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Transform Your Vehicle?"
          tagIcon={Zap}
          title="Your Vehicle Deserves Imperio Treatment"
          description="Book your appointment now or request a custom quote tailored to your specific vehicle and detailing needs. Limited slots available for elite service."
          background={{ variant: "sparkles-gradient" }}
          buttons={[
            { text: "Book Appointment", href: "https://calendly.com/imperio" },
            { text: "Request Quote", href: "mailto:book@imperio-detailing.com" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "#" },
                { label: "Services", href: "#services" },
                { label: "About", href: "#about" },
                { label: "Gallery", href: "#gallery" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Paint Correction", href: "#services" },
                { label: "Ceramic Coating", href: "#services" },
                { label: "Interior Detail", href: "#services" },
                { label: "Full Detail Package", href: "#services" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com/imperio-detailing" },
                { label: "Contact", href: "#contact" },
                { label: "Book Now", href: "#contact" },
                { label: "FAQ", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Imperio Car Detailing. All rights reserved."
          bottomRightText="Command the Road."
        />
      </div>
    </ThemeProvider>
  );
}