"use client"

import { CheckCircle, Clock, DollarSign, Droplet, Heart, Home, Shield, Sparkles, Star, TrendingUp, Wrench, Zap } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Mobile One"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Professional Mobile Car Detailing"
          description="We bring premium detailing services directly to your home or office. Transform your vehicle with expert care, convenience, and results that shine."
          tag="Local Mobile Service"
          tagIcon={Sparkles}
          buttons={[
            { text: "Book a Service", href: "contact" },
            { text: "View Services", href: "services" }
          ]}
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Why Choose Mobile One",            logoIcon: Droplet,
            imageSrc: "https://img.b2bpic.net/free-photo/mid-adult-mechanic-examining-vehicle-hood-while-working-auto-repair-shop_637285-7664.jpg",            imageAlt: "Professional car detailing service in progress",            searchPlaceholder: "Search services...",            sidebarItems: [
              { icon: Home, active: true },
              { icon: Clock, active: false },
              { icon: CheckCircle, active: false }
            ],
            buttons: [
              { text: "Schedule", href: "contact" },
              { text: "Learn More", href: "about" }
            ],
            stats: [
              {
                title: "Years of Experience",                values: [5, 7, 10],
                description: "Professional detailing expertise"
              },
              {
                title: "Satisfied Customers",                values: [250, 500, 750],
                valueSuffix: "+",                description: "Happy local clients served"
              },
              {
                title: "Vehicles Detailed",                values: [1200, 2500, 4000],
                valueSuffix: "+",                description: "Transformations completed"
              }
            ],
            chartTitle: "Monthly Bookings",            chartData: [
              { value: 45 },
              { value: 60 },
              { value: 75 },
              { value: 85 },
              { value: 95 }
            ],
            listTitle: "Service Highlights",            listItems: [
              {
                icon: Zap,
                title: "Same-day scheduling available",                status: "Quick Booking"
              },
              {
                icon: Shield,
                title: "Premium eco-friendly products",                status: "Safe & Green"
              },
              {
                icon: Star,
                title: "5-star rated service quality",                status: "Trusted"
              }
            ]
          }}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwelve
          title="Our Detailing Services"
          description="Comprehensive vehicle care solutions tailored to your needs. From basic washing to advanced protection, we handle it all with precision and care."
          tag="Service Menu"
          tagIcon={Wrench}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: "exterior-wash",              label: "Exterior",              title: "Professional Exterior Wash & Wax",              items: [
                "Hand wash with premium soap",                "Wheel and tire cleaning",                "Protective wax coating",                "Glass polishing and treatment"
              ],
              buttons: [{ text: "View Details", href: "pricing" }]
            },
            {
              id: "interior-detail",              label: "Interior",              title: "Complete Interior Detailing",              items: [
                "Professional vacuuming",                "Upholstery and carpet cleaning",                "Dashboard and trim restoration",                "Odor elimination treatment"
              ],
              buttons: [{ text: "View Details", href: "pricing" }]
            },
            {
              id: "protection",              label: "Protection",              title: "Paint Protection & Ceramic Coating",              items: [
                "Ceramic coating application",                "Paint protection film options",                "Long-lasting shine protection",                "Enhanced durability guarantee"
              ],
              buttons: [{ text: "View Details", href: "pricing" }]
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Mobile One Detailing:" },
            {
              type: "image",              src: "https://img.b2bpic.net/free-photo/unrecognizable-repairman-using-wrench-while-working-car-service-workshop_637285-9404.jpg",              alt: "Professional detailer"
            },
            { type: "text", content: "Your Local Detailing Expert" }
          ]}
          useInvertedBackground={true}
          buttons={[
            { text: "Book a Service", href: "contact" },
            { text: "Learn More", href: "pricing" }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Simple, Transparent Pricing"
          description="Choose the service level that fits your vehicle and budget. All packages include our satisfaction guarantee."
          tag="Pricing Plans"
          tagIcon={DollarSign}
          textboxLayout="default"
          animationType="opacity"
          useInvertedBackground={false}
          plans={[
            {
              id: "basic",              price: "$89",              name: "Basic Wash",              buttons: [
                { text: "Book Now", href: "contact" },
                { text: "Details" }
              ],
              features: [
                "Exterior hand wash",                "Wheel and tire cleaning",                "Window cleaning",                "Air freshener included"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Star,
              price: "$149",              name: "Professional Detail",              buttons: [
                { text: "Book Now", href: "contact" },
                { text: "Details" }
              ],
              features: [
                "Complete exterior wash & wax",                "Interior vacuuming and cleaning",                "Dashboard restoration",                "Protective coating applied"
              ]
            },
            {
              id: "premium",              price: "$249",              name: "Premium Protection",              buttons: [
                { text: "Book Now", href: "contact" },
                { text: "Details" }
              ],
              features: [
                "Full professional detailing",                "Ceramic coating application",                "Paint protection treatment",                "12-month protection warranty"
              ]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Mobile One by Numbers"
          description="Real results from a dedicated team committed to excellence in vehicle detailing."
          tag="Our Track Record"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground={true}
          metrics={[
            {
              id: "experience",              value: "10+",              title: "Years Professional Experience",              items: [
                "Certified detailing specialists",                "Continuous training and updates",                "Industry-leading techniques"
              ]
            },
            {
              id: "customers",              value: "800+",              title: "Satisfied Local Customers",              items: [
                "95% repeat customer rate",                "5-star average rating",                "Trusted by local community"
              ]
            },
            {
              id: "vehicles",              value: "5000+",              title: "Vehicles Transformed",              items: [
                "All makes and models",                "Same-day service available",                "Satisfaction guaranteed"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Customers Say"
          description="Real testimonials from satisfied vehicle owners who trust Mobile One Detailing."
          tag="Customer Reviews"
          tagIcon={Heart}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Business Owner",              company: "Local Boutique",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Rodriguez",              role: "Real Estate Agent",              company: "Premier Properties",              rating: 5,
              imageSrc: "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",              imageAlt: "James Rodriguez"
            },
            {
              id: "3",              name: "Lisa Chen",              role: "Marketing Director",              company: "Tech Startup",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              imageAlt: "Lisa Chen"
            },
            {
              id: "4",              name: "Michael Thompson",              role: "Fleet Manager",              company: "Corporate Services",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",              imageAlt: "Michael Thompson"
            },
            {
              id: "5",              name: "Amanda Wilson",              role: "Home Care Professional",              company: "Family Wellness",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              imageAlt: "Amanda Wilson"
            },
            {
              id: "6",              name: "David Park",              role: "Fitness Coach",              company: "Elite Training Center",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",              imageAlt: "David Park"
            }
          ]}
          kpiItems={[
            { value: "98%", label: "Customer Satisfaction Rate" },
            { value: "4.9/5", label: "Average Review Rating" },
            { value: "15 min", label: "Average Booking Response Time" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to experience professional mobile detailing? Schedule your appointment today and see the Mobile One difference in person."
          animationType="entrance-slide"
          buttons={[
            { text: "Schedule Appointment", href: "contact" },
            { text: "Call Us" }
          ]}
          background={{ variant: "downward-rays-animated" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Services",              items: [
                { label: "Exterior Washing", href: "services" },
                { label: "Interior Detailing", href: "services" },
                { label: "Paint Protection", href: "services" },
                { label: "Pricing", href: "pricing" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Contact", href: "contact" },
                { label: "Testimonials", href: "testimonials" },
                { label: "Booking", href: "contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" },
                { label: "Service Agreement", href: "#agreement" }
              ]
            }
          ]}
          copyrightText="© 2025 Mobile One Detailing. All rights reserved. Local mobile car detailing service."
        />
      </div>
    </ThemeProvider>
  );
}