"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { CheckCircle, Sparkles, Star, Zap } from "lucide-react";

export default function MobileOneDetailingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Mobile One"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Why Us", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Book Now",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Gleaming Cars, Delivered to Your Door"
          description="Mobile One Detailing brings premium car care to you—no appointments, no hassle, just shine. Professional detailing service that comes to your home or office."
          tag="Premium Mobile Detailing"
          tagIcon={Sparkles}
          buttons={[
            { text: "Book Your Detailing Now", href: "#contact" },
            { text: "Learn More", href: "#services" }
          ]}
          background={{ variant: "animated-grid" }}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193557.jpg",              imageAlt: "Detailed luxury sedan"
            },
            {
              id: "2",              imageSrc: "https://img.b2bpic.net/free-photo/man-polishing-car-with-orbital-applicator_1303-30576.jpg",              imageAlt: "Shiny SUV after detailing"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-photo/manager-car-center-customer-expensive-car_651396-1145.jpg",              imageAlt: "Professional car wash service"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-photo/photo-infiniti-g37-coupe-parking_158538-24745.jpg",              imageAlt: "Mobile detailing in progress"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-photo/worker-car-detailing-cleaning-car-with-microfiber_1303-30578.jpg",              imageAlt: "Clean car exterior detail"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-photo/woman-washing-her-car-outside_23-2148958781.jpg",              imageAlt: "Professional interior cleaning"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardThree
          title="Our Detailing Services"
          description="Comprehensive car care solutions tailored to your vehicle's needs"
          tag="Services"
          textboxLayout="default"
          animationType="slide-up"
          features={[
            {
              id: "01",              title: "Exterior Detailing",              description: "Professional washing, waxing, and paint protection to keep your vehicle looking showroom-ready",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212227.jpg",              imageAlt: "car exterior wash vehicle polishing professional cleaning car shine"
            },
            {
              id: "02",              title: "Interior Cleaning",              description: "Deep vacuum, upholstery cleaning, and leather conditioning for a pristine cabin experience",              imageSrc: "https://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30596.jpg",              imageAlt: "car interior cleaning upholstery clean vehicle interior professional detail"
            },
            {
              id: "03",              title: "Ceramic Coating",              description: "Long-lasting protective coating that shields paint from UV rays, contaminants, and water spots",              imageSrc: "https://img.b2bpic.net/free-photo/senior-man-car-showroom-choosing-car_1303-18964.jpg",              imageAlt: "ceramic coating paint protection car care vehicle coating"
            },
            {
              id: "04",              title: "Express Service",              description: "Quick 1-2 hour detailing for busy professionals who need results without the wait",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-car-interior-clean-up-service_23-2149212262.jpg",              imageAlt: "quick car wash express service mobile detailing fast cleaning"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Why Choose Us"
          title="Local Expertise, Premium Results"
          description="Sarah Mitchell"
          subdescription="Busy Professional, Suburban Area"
          icon={CheckCircle}
          imageSrc="https://img.b2bpic.net/free-photo/young-beautiful-female-support-phone-operator-speaking-consulting-office_176420-957.jpg"
          imageAlt="professional service trustworthy business customer care quality service"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Customers Say"
          description="Real feedback from satisfied vehicle owners"
          tag="Testimonials"
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          testimonials={[
            {
              id: "1",              name: "Michael Torres",              role: "Business Owner",              company: "Downtown District",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "professional portrait business man executive headshot confident professional"
            },
            {
              id: "2",              name: "Jennifer Chen",              role: "Marketing Executive",              company: "Tech Solutions Inc",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",              imageAlt: "professional woman business portrait executive woman confident portrait"
            },
            {
              id: "3",              name: "David Patterson",              role: "Investment Consultant",              company: "Wealth Management Group",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/confident-entrepreneur-satisfied-with-own-success_1163-5474.jpg",              imageAlt: "professional headshot business man confident smile professional portrait"
            },
            {
              id: "4",              name: "Amanda Rodriguez",              role: "Healthcare Professional",              company: "Regional Medical Center",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              imageAlt: "professional woman business portrait healthcare professional confident woman"
            }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Transparent Pricing"
          description="Quality car detailing without surprises. Competitive rates for local professionals."
          tag="Pricing"
          textboxLayout="default"
          animationType="slide-up"
          plans={[
            {
              id: "1",              price: "$79",              name: "Express Wash",              buttons: [
                { text: "Book Now", href: "#contact" },
                { text: "Details", href: "#" }
              ],
              features: [
                "Exterior wash and dry",                "Tire shine",                "30-45 minute service",                "Mobile service included"
              ]
            },
            {
              id: "2",              badge: "Most Popular",              badgeIcon: Star,
              price: "$149",              name: "Premium Detail",              buttons: [
                { text: "Book Now", href: "#contact" },
                { text: "Details", href: "#" }
              ],
              features: [
                "Complete exterior detail with wax",                "Interior vacuum and carpet cleaning",                "Glass and trim polishing",                "Leather conditioning",                "2-hour service",                "Mobile service included"
              ]
            },
            {
              id: "3",              price: "$249",              name: "Luxury Restoration",              buttons: [
                { text: "Book Now", href: "#contact" },
                { text: "Details", href: "#" }
              ],
              features: [
                "Full paint correction and ceramic coating",                "Deep interior detailing",                "Engine bay cleaning",                "Undercarriage wash",                "3-4 hour service",                "Mobile service included",                "Premium protection guarantee"
              ]
            }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our mobile detailing service"
          tag="Help & Support"
          textboxLayout="default"
          imageSrc="https://img.b2bpic.net/free-photo/people-working-call-center_23-2149288189.jpg"
          imageAlt="customer service support team professional help customer support"
          mediaPosition="left"
          faqs={[
            {
              id: "1",              title: "Do you provide your own water supply?",              content: "Yes, we arrive fully equipped with fresh water tanks and professional-grade equipment. We just need access to a power outlet and a safe parking space for our vehicle."
            },
            {
              id: "2",              title: "How long does a detailing service take?",              content: "Express services take 30-45 minutes, Premium Details take about 2 hours, and Luxury Restoration services take 3-4 hours. We work around your schedule and can often complete service in a single visit."
            },
            {
              id: "3",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, digital payments (Apple Pay, Google Pay), and bank transfers. Payment is collected on-site after service completion or can be arranged in advance."
            },
            {
              id: "4",              title: "Are your products eco-friendly?",              content: "We use pH-balanced, biodegradable cleaning products that are safe for your vehicle, your family, and the environment. All water runoff is properly contained and disposed of."
            },
            {
              id: "5",              title: "Can you work in rainy weather?",              content: "We can perform interior detailing in any weather. For exterior services, we prefer dry conditions for best results, but we can reschedule your appointment at no charge if weather doesn't cooperate."
            },
            {
              id: "6",              title: "Do you offer package deals?",              content: "Yes! We offer monthly membership packages with 10-15% savings, multi-vehicle discounts, and seasonal promotions. Contact us to discuss a custom package for your needs."
            }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Shine?"
          tagIcon={Zap}
          title="Schedule Your Mobile Detailing Today"
          description="Book your appointment in minutes. We'll bring premium car care directly to your location. No hassle, just professional results."
          buttons={[
            { text: "Book an Appointment", href: "https://calendly.com/example" },
            { text: "Call Us: (555) 123-4567", href: "tel:+15551234567" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Mobile One Detailing"
          columns={[
            {
              items: [
                { label: "Services", href: "services" },
                { label: "Pricing", href: "pricing" },
                { label: "About", href: "about" }
              ]
            },
            {
              items: [
                { label: "Testimonials", href: "testimonials" },
                { label: "FAQ", href: "faq" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Service Area", href: "#" },
                { label: "Book Now", href: "#contact" },
                { label: "Mobile App", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}