"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import { Sparkles, Zap, Shield, Award, Calendar } from "lucide-react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="largeSmallSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        { name: "About", id: "#about" },
        { name: "Services", id: "#services" },
        { name: "Pricing", id: "#pricing" },
        { name: "Testimonials", id: "#testimonials" },
        { name: "FAQ", id: "#faq" },
        { name: "Contact", id: "#contact" },
      ]}
      brandName="ZaharaEliteDetailing"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      background={{ variant: "gradient-bars" }}
      logoText="Zahara Elite Detailing"
      description="Where perfection meets passion. Premium, mobile, and professional car care designed to restore your vehicle to its original showroom state."
      buttons={[
        { text: "Book Your Detail", href: "#contact" },
        { text: "View Our Services", href: "#services" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/male-painter-hazmat-suit-inside-car-shop_23-2149750030.jpg"
      imageAlt="Mirror-finish luxury car hood"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="Our Story: Crafting Perfection on Wheels"
      description="Founded on the belief that a car is more than just transportation, Zahara Elite Detailing was born to protect the joy of driving. Our journey began with a simple passion for automotive aesthetics and has grown into a premier mobile service dedicated to high-end vehicle restoration. We combine traditional craftsmanship with modern eco-friendly technology to ensure your vehicle looks as good as the day it rolled off the assembly line, all from the comfort of your own driveway."
      bulletPoints={[
        { title: "Master Craftsmen", description: "Certified detailers trained in the latest paint correction and protection techniques.", icon: Award },
        { title: "Eco-Conscious Care", description: "High-performance, biodegradable products that are safe for your car and the environment.", icon: Shield },
        { title: "Ultimate Convenience", description: "Our fully self-contained mobile units bring the entire showroom experience to you.", icon: Calendar },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193584.jpg"
      imageAlt="Professional car detailing team"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySix
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Interior Deep Clean",          description: "Comprehensive vacuum, steam clean, and leather conditioning for a refreshed cabin.",          imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22315.jpg",          buttonIcon: Sparkles,
        },
        {
          title: "Foam Bath & Wash",          description: "Safe, contact-free wash removing grime while protecting your paintwork.",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2787.jpg",          buttonIcon: Zap,
        },
        {
          title: "Ceramic Coating",          description: "Long-lasting paint protection with a stunning glass-like finish.",          imageSrc: "http://img.b2bpic.net/free-photo/procedure-painting-car-service-center_146671-14886.jpg",          buttonIcon: Shield,
        },
        {
          title: "Wheel & Rim Care",          description: "Deep cleaning and gloss restoration for alloy and chrome wheels.",          imageSrc: "http://img.b2bpic.net/free-photo/man-fixing-wheel-bolts_23-2148321924.jpg",          buttonIcon: Award,
        },
      ]}
      title="Comprehensive Car Care"
      description="Tailored solutions for every automotive need."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      products={[
        { id: "p1", name: "Elite Detail Kit", price: "$129", imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342609.jpg" },
        { id: "p2", name: "Leather Conditioner", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-black-mask-sitting-inside-car_1157-34262.jpg" },
        { id: "p3", name: "Ceramic Sealant", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193622.jpg" },
      ]}
      title="Premium Car Care Supplies"
      description="Maintain that elite look between services with our recommended tools."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardOne
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic",          badge: "Entry",          price: "$150",          subtitle: "Essential maintenance.",          features: ["Exterior Foam Bath", "Window Cleaning", "Interior Vacuum"],
        },
        {
          id: "standard",          badge: "Popular",          price: "$250",          subtitle: "Complete renewal.",          features: ["All Basic Services", "Leather Conditioning", "Paint Sealant", "Tire Shine"],
        },
        {
          id: "elite",          badge: "Elite",          price: "$450",          subtitle: "Ultimate preservation.",          features: ["All Standard Services", "Ceramic Coating", "Full Clay Bar", "Headlight Restoration"],
        },
      ]}
      title="Transparent Detailing Packages"
      description="Choose the level of service your vehicle deserves."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "500+", description: "Vehicles Detailed" },
        { id: "m2", value: "100%", description: "Satisfaction Guarantee" },
        { id: "m3", value: "5/5", description: "Average Rating" },
      ]}
      title="Results You Can Trust"
      description="We are proud of our commitment to quality."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      testimonial="Zahara Elite Detailing transformed my car completely. The ceramic coating is incredible—water just beads off, and it looks better than the day I bought it!"
      rating={5}
      author="James Anderson"
      avatars={[{ src: "http://img.b2bpic.net/free-photo/businesswoman-using-hand-sanitizer_23-2148725208.jpg", alt: "Customer" }]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
      useInvertedBackground={true}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      faqs={[
        { id: "q1", title: "How long does a detailing take?", content: "Typically between 2 to 6 hours depending on the package selected." },
        { id: "q2", title: "Do you provide your own water and power?", content: "Yes, our vans are fully equipped with water tanks and power generators so we don't need your home's utilities." },
        { id: "q3", title: "Can you detail cars in an apartment complex?", content: "As long as we have sufficient space to work, we are happy to service vehicles at apartment parking facilities." },
        { id: "q4", title: "What if it rains?", content: "We have portable pop-up tents that allow us to detail vehicles safely in light rain. In severe weather, we will proactively reschedule your appointment." },
      ]}
      title="Frequently Asked Questions"
      description="Everything you need to know about our premium mobile detailing."
      faqsAnimation="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      imageSrc="http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22315.jpg"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      title="Let's Connect"
      description="Ready to experience the Zahara difference? Fill out the form, and we will get back to you shortly to confirm your booking."
      inputs={[
        { name: "name", type: "text", placeholder: "Your Name", required: true },
        { name: "email", type: "email", placeholder: "Your Email", required: true },
        { name: "phone", type: "tel", placeholder: "Your Phone Number" },
      ]}
      textarea={{ name: "message", placeholder: "Tell us about your vehicle and preferred service", rows: 4 }}
      useInvertedBackground={true}
      imageSrc="http://img.b2bpic.net/free-photo/car-detailing-concept-man-face-mask-with-orbital-polisher-repair-shop-polishing-orange-suv-car_627829-12604.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoText="ZaharaElite"
      columns={[
        { items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "#services" }] },
        { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
        { items: [{ label: "Contact Support", href: "#contact" }] }
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}