"use client";

import { ArrowRight, Award, Car, Clock, MapPin, Sparkles, ThumbsUp } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="DetailPro"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Why Us", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Professional Mobile Car Detailing"
          description="We bring premium car care to your doorstep. Trusted by hundreds of satisfied customers for expert detailing services that transform your vehicle."
          tag="Mobile Service Available"
          tagIcon={MapPin}
          background={{ variant: "plain" }}
          kpis={[
            { value: "500+", label: "Cars Detailed" },
            { value: "4.9★", label: "Customer Rating" },
            { value: "24hr", label: "Booking Available" }
          ]}
          enableKpiAnimation={true}
          imageSrc="https://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2004.jpg"
          imageAlt="Professional car detailing service in action"
          imagePosition="right"
          mediaAnimation="fade-in"
          buttons={[
            { text: "Book Service", href: "contact" },
            { text: "Learn More", href: "services" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentySix
          features={[
            {
              title: "Exterior Wash & Protection",              description: "Professional pressure washing, foam application, and protective coating",              imageSrc: "https://img.b2bpic.net/free-photo/man-car-clean-using-brush-clean-up-all-details-inside-vehicle_1303-30586.jpg",              imageAlt: "Exterior car wash service",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            },
            {
              title: "Interior Deep Clean",              description: "Complete interior detailing including vacuum, upholstery cleaning, and odor removal",              imageSrc: "https://img.b2bpic.net/free-photo/man-polishing-car-with-orbital-applicator_1303-30576.jpg",              imageAlt: "Interior car cleaning service",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            },
            {
              title: "Polish & Wax",              description: "Expert paint correction and protective wax for a brilliant, long-lasting shine",              imageSrc: "https://img.b2bpic.net/free-photo/selective-focus-shot-man-cleaning-car-s-back-headlight-with-microfiber-cloth_181624-46344.jpg",              imageAlt: "Car polish and wax service",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            },
            {
              title: "Wheel & Tire Care",              description: "Professional wheel cleaning and tire dressing for pristine appearance",              imageSrc: "https://img.b2bpic.net/free-photo/man-hoovering-car-cabin-garage_1157-36597.jpg",              imageAlt: "Wheel and tire detailing service",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            }
          ]}
          title="Our Premium Services"
          description="We offer a complete range of professional detailing services tailored to keep your vehicle looking showroom-ready"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Why Choose DetailPro?"
          description={[
            "We're a team of certified detailing professionals with over 15 years of combined experience in the auto care industry. Our mission is simple: deliver exceptional results that exceed expectations.",            "We use only premium, eco-friendly products and state-of-the-art equipment. Every detail matters, which is why we treat your vehicle with the care it deserves. From luxury cars to everyday vehicles, we're committed to perfection.",            "Our mobile service saves you time by coming directly to your home or office. Flexible scheduling, professional results, and competitive pricing make DetailPro the smart choice for car owners who demand quality."
          ]}
          showBorder={false}
          useInvertedBackground={false}
          buttons={[
            { text: "View All Services", href: "services" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "1",              value: "500+",              title: "vehicles",              description: "Detailed and transformed",              icon: Car
            },
            {
              id: "2",              value: "98%",              title: "satisfaction",              description: "Customer approval rate",              icon: ThumbsUp
            },
            {
              id: "3",              value: "24h",              title: "response",              description: "Average booking time",              icon: Clock
            },
            {
              id: "4",              value: "15+",              title: "years",              description: "Industry experience",              icon: Award
            }
          ]}
          title="By The Numbers"
          description="Our track record speaks for itself - trusted by hundreds of customers across the region"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          testimonials={[
            {
              id: "1",              name: "Michael Thompson",              role: "Car Enthusiast",              company: "Local Business Owner",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Michael Thompson"
            },
            {
              id: "2",              name: "Sarah Martinez",              role: "Professional",              company: "Executive Manager",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/confident-entrepreneur-satisfied-with-own-success_1163-5474.jpg",              imageAlt: "Sarah Martinez"
            },
            {
              id: "3",              name: "James Wilson",              role: "Luxury Car Owner",              company: "Entrepreneur",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",              imageAlt: "James Wilson"
            },
            {
              id: "4",              name: "Amanda Chen",              role: "Marketing Director",              company: "Tech Company",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              imageAlt: "Amanda Chen"
            },
            {
              id: "5",              name: "Robert Davis",              role: "Fleet Manager",              company: "Transportation",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Robert Davis"
            },
            {
              id: "6",              name: "Jessica Anderson",              role: "Home Owner",              company: "Community Leader",              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: "Jessica Anderson"
            }
          ]}
          title="What Our Customers Say"
          description="Real reviews from satisfied customers who trust DetailPro with their vehicles"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          faqs={[
            {
              id: "1",              title: "How long does a full detail take?",              content: "Our standard full detail service typically takes 3-4 hours depending on your vehicle's condition and size. Larger vehicles or heavily soiled interiors may require additional time. We'll provide a time estimate when you book."
            },
            {
              id: "2",              title: "What products do you use?",              content: "We exclusively use premium, eco-friendly detailing products that are safe for your vehicle's paint, interior, and the environment. All our products are professional-grade and biodegradable."
            },
            {
              id: "3",              title: "Do you offer mobile service?",              content: "Yes! We come to your home, office, or preferred location. Our mobile service is available 24 hours a day to accommodate your busy schedule. Just let us know where and when you need us."
            },
            {
              id: "4",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, debit cards, mobile payment apps (Apple Pay, Google Pay), and bank transfers. Payment can be made on-site after service completion or in advance."
            },
            {
              id: "5",              title: "Can you detail luxury or exotic cars?",              content: "Absolutely! Our team is trained to handle all vehicle types, including luxury and exotic cars. We use specialized techniques and products appropriate for high-end finishes."
            },
            {
              id: "6",              title: "What's your cancellation policy?",              content: "We require 24 hours notice for cancellations. Cancellations made within 24 hours of your appointment may incur a 50% booking fee. Rescheduling is always free."
            }
          ]}
          title="Frequently Asked Questions"
          description="Everything you need to know about our services, pricing, and booking process"
          animationType="smooth"
          faqsAnimation="smooth"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Transform Your Vehicle?"
          tagIcon={Sparkles}
          title="Book Your Detailing Service Today"
          description="Experience the DetailPro difference. Our team is ready to make your car shine like never before. Get in touch to schedule your appointment and receive a free quote."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Book Now", href: "#" },
            { text: "Call Us: (555) 123-4567", href: "tel:+15551234567" }
          ]}
        />
      </div>


      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Mobile One Detailing"
          description="Experience the ultimate in mobile detailing services. Our expert team ensures your vehicle shines like never before."
          background={{ variant: "gradient-bars" }}
          buttons={[
            { label: "Get Started", href: "#services", dataWebildId: "cta_btn_1" },
            { label: "Learn More", href: "#about", dataWebildId: "cta_btn_2" }
          ]}
          imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
          imageAlt="Mobile detailing service"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Services",              items: [
                { label: "Exterior Detailing", href: "#services" },
                { label: "Interior Cleaning", href: "#services" },
                { label: "Polish & Wax", href: "#services" },
                { label: "Wheel Care", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Why DetailPro", href: "#about" },
                { label: "Reviews", href: "#testimonials" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Booking Info", href: "#contact" },
                { label: "Cancellation Policy", href: "#faq" },
                { label: "Privacy Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 DetailPro Mobile Detailing. All rights reserved."
          bottomRightText="Serving your area with professional car care."
        />
      </div>
    </ThemeProvider>
  );
}