"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { CheckCircle, DollarSign, Mail, Sparkles, Star, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmall"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Bubble Auto"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardTestimonial
          background={{ variant: "plain" }}
          title="Professional Car Cleaning That Shines"
          description="Experience premium auto detailing with eco-friendly solutions. We transform your vehicle's appearance with meticulous care and attention to detail."
          tag="Premium Service"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg"
          imageAlt="Professional car cleaning service"
          mediaAnimation="slide-up"
          testimonials={[
            {
              name: "Sarah Johnson",              handle: "Regular Customer",              testimonial: "My car looks brand new after their service. Absolutely worth it!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=1",              imageAlt: "happy customer satisfied person smiling face portrait"
            },
            {
              name: "Michael Chen",              handle: "Business Owner",              testimonial: "Professional, punctual, and they really care about quality. Highly recommended!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=1",              imageAlt: "professional headshot business person customer portrait smiling"
            }
          ]}
          testimonialRotationInterval={5000}
          buttons={[
            { text: "Book Appointment", href: "#contact" },
            { text: "View Services", href: "#services" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Us"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          title="Expert car care with attention to every detail. We believe your vehicle deserves the finest treatment."
          buttons={[
            { text: "Learn More", href: "#services" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwelve
          features={[
            {
              id: "exterior",              label: "Exterior",              title: "Full Exterior Detailing",              items: [
                "Professional hand wash",                "Clay bar treatment",                "Protective wax coating",                "Tire & wheel cleaning"
              ],
              buttons: [
                { text: "Book Now", href: "#contact" }
              ]
            },
            {
              id: "interior",              label: "Interior",              title: "Deep Interior Cleaning",              items: [
                "Vacuum & steam clean",                "Upholstery treatment",                "Dashboard polish",                "Air freshening"
              ],
              buttons: [
                { text: "Book Now", href: "#contact" }
              ]
            },
            {
              id: "premium",              label: "Premium",              title: "Elite Full Package",              items: [
                "Complete exterior detail",                "Deep interior cleaning",                "Engine bay cleaning",                "Ceramic coating option"
              ],
              buttons: [
                { text: "Book Now", href: "#contact" }
              ]
            }
          ]}
          animationType="slide-up"
          title="Our Premium Services"
          description="Comprehensive car cleaning solutions tailored to your vehicle's needs"
          textboxLayout="default"
          tag="Services"
          tagIcon={Zap}
          tagAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Car Owner",              company: "Regular Customer",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=2",              imageAlt: "happy customer satisfied person smiling face portrait"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Business Owner",              company: "Fleet Maintenance",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=2",              imageAlt: "professional headshot business person customer portrait smiling"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Marketing Director",              company: "Corporate Accounts",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg",              imageAlt: "female customer happy face client portrait testimonial photo"
            }
          ]}
          kpiItems={[
            { value: "500+", label: "Satisfied Customers" },
            { value: "10+", label: "Years Experience" },
            { value: "98%", label: "Satisfaction Rate" }
          ]}
          animationType="slide-up"
          title="What Our Clients Say"
          description="Join hundreds of satisfied customers who trust us with their vehicles"
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          plans={[
            {
              id: "basic",              price: "$49",              name: "Basic Wash",              buttons: [
                { text: "Get Started", href: "#contact" },
                { text: "Learn More", href: "#services" }
              ],
              features: [
                "Hand wash exterior",                "Tire cleaning",                "Window wash",                "Quick dry"
              ]
            },
            {
              id: "standard",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$89",              name: "Premium Detail",              buttons: [
                { text: "Get Started", href: "#contact" },
                { text: "Learn More", href: "#services" }
              ],
              features: [
                "Full exterior detail",                "Clay bar treatment",                "Interior vacuum",                "Protective wax",                "Dashboard polish"
              ]
            },
            {
              id: "elite",              price: "$149",              name: "Elite Package",              buttons: [
                { text: "Get Started", href: "#contact" },
                { text: "Learn More", href: "#services" }
              ],
              features: [
                "Complete exterior detail",                "Deep interior cleaning",                "Engine bay service",                "Ceramic coating",                "Air freshening",                "Premium protection"
              ]
            }
          ]}
          animationType="slide-up"
          title="Simple, Transparent Pricing"
          description="Choose the perfect package for your vehicle care needs"
          tag="Pricing"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Ready for a Shine?"
          description="Book your appointment today and experience the difference professional car care makes. We're here to keep your vehicle looking pristine."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Book Appointment"
          termsText="We respect your privacy. We'll only use your email to confirm your appointment."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Services",              items: [
                { label: "Exterior Wash", href: "#services" },
                { label: "Interior Clean", href: "#services" },
                { label: "Full Detail", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Pricing", href: "#pricing" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Email", href: "mailto:info@bubbleauto.com" },
                { label: "Phone", href: "tel:+1234567890" },
                { label: "Location", href: "#contact" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Bubble Auto. All rights reserved."
          bottomRightText="Professional Car Care Services"
        />
      </div>
    </ThemeProvider>
  );
}
