"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Car, Clock, Gauge, Smile } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSmall"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Why Us",          id: "#why-us"},
        {
          name: "Areas",          id: "#service-areas"},
        {
          name: "How It Works",          id: "#how-it-works"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/car-instrument-cluster-speedometer-night-vehicle-dashboard-displays-speed-fuel-levels_169016-72756.jpg"
      logoAlt="Rapid Rescue Towing Logo"
      brandName="Rapid Rescue Towing"
      button={{
        text: "Call Now",        href: "tel:+27115551234"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "gradient-bars"}}
      title="24/7 Towing & Roadside Assistance in Johannesburg"
      description="Fast Response Times. Professional Service. Available Day & Night. \n\n✅ 24/7 Available\n✅ Fully Insured\n✅ Fast Response\n✅ Professional Operators"
      buttons={[
        {
          text: "Call Now",          href: "tel:+27115551234"},
        {
          text: "Request Assistance",          href: "#contact"},
      ]}
      buttonAnimation="slide-up"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001296.jpg",          imageAlt: "Tow truck at night with Johannesburg city skyline"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/truck-logistics-operations-dusk_23-2151468801.jpg",          imageAlt: "Heavy duty tow truck on highway at sunset"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-people-with-car_23-2149437557.jpg",          imageAlt: "Roadside assistance van helping a stranded car"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-person-using-sustainable-mobility_23-2149290910.jpg",          imageAlt: "Modern flatbed tow truck on a city street"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-ambulance-car_23-2149478489.jpg",          imageAlt: "Tow truck driving on a Johannesburg highway"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/remote-control-driving-industrial-warehouse_268835-4098.jpg",          imageAlt: "Close up of tow truck hook ready for action"},
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          id: "emergency-towing",          title: "Emergency Towing",          subtitle: "24/7 rapid response for breakdowns and accidents.",          category: "Towing",          value: "Always Available",          buttons: [
            {
              text: "Learn More",              href: "#contact"},
          ],
        },
        {
          id: "accident-recovery",          title: "Accident Recovery",          subtitle: "Safe and efficient vehicle recovery from accident scenes.",          category: "Recovery",          value: "Expert Handling",          buttons: [
            {
              text: "Learn More",              href: "#contact"},
          ],
        },
        {
          id: "battery-jump",          title: "Battery Jump Starts",          subtitle: "Quick boost for dead batteries to get you moving fast.",          category: "Assistance",          value: "Instant Start",          buttons: [
            {
              text: "Learn More",              href: "#contact"},
          ],
        },
        {
          id: "flat-tyre",          title: "Flat Tyre Assistance",          subtitle: "Professional tyre changes and inflation on the spot.",          category: "Tyre Service",          value: "Rapid Fix",          buttons: [
            {
              text: "Learn More",              href: "#contact"},
          ],
        },
        {
          id: "fuel-delivery",          title: "Fuel Delivery",          subtitle: "Run out of fuel? We'll bring it to your location.",          category: "Fuel Service",          value: "On-Site Refuel",          buttons: [
            {
              text: "Learn More",              href: "#contact"},
          ],
        },
        {
          id: "vehicle-lockout",          title: "Vehicle Lockout Assistance",          subtitle: "Safely regain access to your vehicle when keys are locked inside.",          category: "Lockout",          value: "Secure Entry",          buttons: [
            {
              text: "Learn More",              href: "#contact"},
          ],
        },
        {
          id: "long-distance",          title: "Long Distance Towing",          subtitle: "Reliable transport for vehicles across greater distances.",          category: "Transport",          value: "Nationwide",          buttons: [
            {
              text: "Learn More",              href: "#contact"},
          ],
        },
        {
          id: "motorcycle-towing",          title: "Motorcycle Towing",          subtitle: "Specialized towing for motorcycles with care and security.",          category: "Motorcycle",          value: "Bike Transport",          buttons: [
            {
              text: "Learn More",              href: "#contact"},
          ],
        },
      ]}
      title="Our Rapid Rescue Services"
      description="Reliable assistance for every roadside emergency, delivered with speed and professionalism. Available day and night across Johannesburg."
    />
  </div>

  <div id="why-us" data-section="why-us">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Why Rapid Rescue Towing is Your Best Choice"
      description={[
        "At Rapid Rescue Towing, we pride ourselves on being Johannesburg’s most trusted partner for roadside emergencies. Our commitment to prompt, professional, and reliable service ensures you’re never stranded for long. We understand the stress of vehicle breakdowns, which is why we prioritize speed and safety in every call.",        "Our advantages include:\n✓ Available 24/7\n✓ Fast Johannesburg Response Times\n✓ Experienced Operators\n✓ Modern Tow Trucks\n✓ Affordable Pricing\n✓ Safe Vehicle Handling\n✓ Fully Licensed & Insured"]}
      buttons={[
        {
          text: "Contact for Service",          href: "#contact"},
      ]}
    />
  </div>

  <div id="statistics" data-section="statistics">
      <MetricCardThree
      textboxLayout="default"
      useInvertedBackground={true}
      animationType="slide-up"
      metrics={[
        {
          id: "years-experience",          icon: Gauge,
          title: "Years Experience",          value: "10+"},
        {
          id: "vehicles-assisted",          icon: Car,
          title: "Vehicles Assisted",          value: "15,000+"},
        {
          id: "emergency-service",          icon: Clock,
          title: "Emergency Service",          value: "24/7"},
        {
          id: "customer-satisfaction",          icon: Smile,
          title: "Customer Satisfaction",          value: "98%"},
      ]}
      title="Our Track Record of Excellence"
      description="Years of dedicated service, countless successful rescues, and unwavering customer satisfaction have built our reputation."
    />
  </div>

  <div id="service-areas" data-section="service-areas">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Sandton",        "Midrand",        "Randburg",        "Roodepoort",        "Fourways",        "Kempton Park",        "Edenvale",        "Bedfordview",        "Johannesburg CBD",        "Soweto",        "Alberton",        "Boksburg",        "Benoni",        "Pretoria"]}
      title="Serving All Major Johannesburg Areas"
      description="Our fleet is strategically positioned for rapid response across the entire region, ensuring quick assistance wherever you are."
      speed={30}
      showCard={true}
    />
  </div>

  <div id="how-it-works" data-section="how-it-works">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "step-1",          title: "Step 1: Call Us",          content: "Contact our 24/7 emergency line at +27 11 555 1234. Our friendly dispatchers are always ready to take your call and understand your situation."},
        {
          id: "step-2",          title: "Step 2: Share Your Location",          content: "Provide your current location and details about your vehicle and the assistance you need. We use advanced GPS to pinpoint your exact position."},
        {
          id: "step-3",          title: "Step 3: Tow Truck Dispatched",          content: "The nearest available tow truck or roadside assistance vehicle is immediately dispatched to your location. We'll give you an estimated time of arrival."},
        {
          id: "step-4",          title: "Step 4: Problem Solved",          content: "Our professional team arrives, assesses the situation, and provides the necessary service to get you safely back on the road or transport your vehicle."},
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ymbl9g"
      imageAlt="Illustration of the Rapid Rescue Towing service process"
      mediaAnimation="slide-up"
      mediaPosition="left"
      title="How Rapid Rescue Works: Your Roadside Solution in 4 Simple Steps"
      description="We've streamlined our process to ensure fast, efficient, and stress-free assistance when you need it most."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      carouselMode="auto"
      testimonials={[
        {
          id: "1",          name: "Sarah Johnson",          role: "CEO",          company: "Tech Innovations",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-showing-thumbs-up_176474-95524.jpg",          imageAlt: "Sarah Johnson, satisfied customer"},
        {
          id: "2",          name: "Thabo Mokoena",          role: "Marketing Manager",          company: "Growth Dynamics",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-african-american-man-rest_23-2148137894.jpg",          imageAlt: "Thabo Mokoena, satisfied customer"},
        {
          id: "3",          name: "Lebo Ngwenya",          role: "Financial Analyst",          company: "Joburg Investments",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-old-man-portrait_23-2151056576.jpg",          imageAlt: "Lebo Ngwenya, satisfied customer"},
        {
          id: "4",          name: "Kgomotso Dlamini",          role: "Small Business Owner",          company: "Dlamini Logistics",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/businessman-talking-smartphone-city_23-2147689213.jpg",          imageAlt: "Kgomotso Dlamini, satisfied customer"},
        {
          id: "5",          name: "Naledi Radebe",          role: "Student",          company: "University of Witwatersrand",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-car_1303-3854.jpg",          imageAlt: "Naledi Radebe, satisfied customer"},
      ]}
      title="Hear From Our Satisfied Customers"
      description="Real stories from Johannesburg residents who experienced our fast, reliable, and professional service first-hand."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Request Immediate Assistance"
      description="Fill out the form below, and our dispatch team will contact you shortly to confirm your details and send help. For urgent emergencies or to speak with someone directly, please call us at +27 11 555 1234, WhatsApp us at +27 60 555 1234, or email info@rapidrescuetowing.co.za. We operate 24/7."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
        },
        {
          name: "phone",          type: "tel",          placeholder: "Phone Number",          required: true,
        },
        {
          name: "vehicleType",          type: "text",          placeholder: "Vehicle Type (e.g., Sedan, SUV, Motorcycle)",          required: true,
        },
        {
          name: "location",          type: "text",          placeholder: "Current Location (e.g., street name, landmark)",          required: true,
        },
      ]}
      multiSelect={{
        name: "assistanceType",        label: "Type of Assistance Needed",        options: [
          "Emergency Towing",          "Accident Recovery",          "Battery Jump Start",          "Flat Tyre Assistance",          "Fuel Delivery",          "Vehicle Lockout",          "Long Distance Towing",          "Motorcycle Towing",          "Other"],
      }}
      textarea={{
        name: "additionalNotes",        placeholder: "Any additional notes or specific instructions?",        rows: 4,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/natural-disaster_23-2151886452.jpg"
      imageAlt="Tow truck on a road at night with professional lighting"
      mediaAnimation="opacity"
      mediaPosition="right"
      buttonText="REQUEST ASSISTANCE NOW"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoSrc="http://img.b2bpic.net/free-photo/car-instrument-cluster-speedometer-night-vehicle-dashboard-displays-speed-fuel-levels_169016-72756.jpg"
      logoAlt="Rapid Rescue Towing Logo"
      columns={[
        {
          items: [
            {
              label: "Home",              href: "#hero"},
            {
              label: "Services",              href: "#services"},
            {
              label: "Why Choose Us",              href: "#why-us"},
            {
              label: "Testimonials",              href: "#testimonials"},
          ],
        },
        {
          items: [
            {
              label: "Emergency Towing",              href: "#services"},
            {
              label: "Accident Recovery",              href: "#services"},
            {
              label: "Battery Jump Start",              href: "#services"},
            {
              label: "Flat Tyre Assistance",              href: "#services"},
            {
              label: "Fuel Delivery",              href: "#services"},
            {
              label: "Vehicle Lockout",              href: "#services"},
          ],
        },
        {
          items: [
            {
              label: "Call Us: +27 11 555 1234",              href: "tel:+27115551234"},
            {
              label: "WhatsApp: +27 60 555 1234",              href: "https://wa.me/27605551234"},
            {
              label: "Email: info@rapidrescuetowing.co.za",              href: "mailto:info@rapidrescuetowing.co.za"},
            {
              label: "Service Areas",              href: "#service-areas"},
            {
              label: "Privacy Policy",              href: "#"},
          ],
        },
      ]}
      logoText="Rapid Rescue Towing"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
