"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="aurora"
        cardStyle="gradient-mesh"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Services",
          id: "features",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "FAQ",
          id: "faq",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Mobile Mechanic Pro"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
      background={{
        variant: "plain",
      }}
      title="Expert Mobile Mechanic Services"
      description="We bring professional automotive repair directly to your home or office. Save time and get back on the road with our expert on-site technicians."
      leftCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-builder-man-construction-uniform-holding-smartphone-clenching-fist-happy-exited_141793-28671.jpg?_wi=1",
          imageAlt: "Mechanic at work",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/wrenches-pocket-repairmen_23-2147897984.jpg?_wi=1",
          imageAlt: "Mobile service van",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-view-master-uses-pincher-tool-remove-sim-card-slot-from-smart-phone-while-disassembling-it_346278-1186.jpg",
          imageAlt: "Close view of tools",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/happy-car-mechanic-using-digital-tablet-while-working-auto-repair-shop_637285-7606.jpg",
          imageAlt: "Mechanic using tablet",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-male-technician-using-compressed-air-clean-inside-dirty-smartphone-repair-shop-latin-man-with-gloves-cleaning-cellphone_662251-280.jpg",
          imageAlt: "Technician cleaning equipment",
        },
      ]}
      rightCarouselItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/car-mechanic-repairs-car-garage-with-tools_1157-46539.jpg",
          imageAlt: "Mechanic van",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-explaining-quotation-customer_1170-1482.jpg",
          imageAlt: "Diagnostic check",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/picture-joyful-electronic-engineer-holding-smartphone-plug-having-cords-electronic-equipment-tools-neck-smiling-sincerely_176532-10164.jpg",
          imageAlt: "Engineer smiling",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-examining-car_1170-1452.jpg",
          imageAlt: "Female mechanic examining car",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-service_23-2150171258.jpg",
          imageAlt: "Man working in service",
        },
      ]}
      buttons={[
        {
          text: "Book Now",
          href: "#contact",
        },
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/front-view-man-wearing-protection-equipment_23-2149714353.jpg",
          alt: "Mechanic headshot 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/side-view-woman-repairing-car_23-2150171268.jpg",
          alt: "Mechanic headshot 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881763.jpg",
          alt: "Mechanic headshot 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/tools-bike-creation-workshop_23-2148866651.jpg",
          alt: "Mechanic headshot 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/mechanic-using-laptop_1170-1318.jpg",
          alt: "Mechanic headshot 5",
        },
      ]}
      avatarText="Our expert team is ready to help."
      marqueeItems={[
        {
          type: "text",
          text: "Trusted Service",
        },
        {
          type: "text",
          text: "ASE Certified",
        },
        {
          type: "text",
          text: "Fully Insured",
        },
        {
          type: "text",
          text: "24/7 Availability",
        },
        {
          type: "text",
          text: "Local Experts",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardMedia
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          id: "f1",
          title: "On-Site Diagnostics",
          description: "We diagnose your vehicle problems exactly where they are parked.",
          tag: "Convenience",
          imageSrc: "http://img.b2bpic.net/free-photo/focused-manly-woman-is-doing-car-diagnostic-with-computer-help-auto-service_613910-17108.jpg",
        },
        {
          id: "f2",
          title: "Rapid Tire Services",
          description: "Mobile tire replacement and balancing at your convenience.",
          tag: "Expertise",
          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-fixing-car-tyre_1170-1664.jpg",
        },
        {
          id: "f3",
          title: "Preventative Maintenance",
          description: "Full oil changes, filter swaps, and fluid checks on the spot.",
          tag: "Reliability",
          imageSrc: "http://img.b2bpic.net/free-photo/mechanics-repairing-car-workshop_329181-11793.jpg",
        },
        {
          id: "f4",
          title: "Engine Diagnostics",
          description: "Advanced scanning technology for all modern engine issues.",
          tag: "Precision",
          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-working-laptop_1170-1631.jpg",
        },
        {
          id: "f5",
          title: "Brake System Repair",
          description: "Complete brake pad and rotor replacements delivered to you.",
          tag: "Safety",
          imageSrc: "http://img.b2bpic.net/free-photo/male-mechanic-holding-repairing-equipment_23-2150376982.jpg",
        },
      ]}
      title="Why Choose Mobile Mechanic Pro"
      description="Premium automotive service that travels to you."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "1500+",
          description: "Successful On-Site Repairs",
        },
        {
          id: "m2",
          value: "4.9/5",
          description: "Customer Satisfaction",
        },
        {
          id: "m3",
          value: "100%",
          description: "Quality Guaranteed",
        },
      ]}
      title="Our Track Record"
      description="Serving the local community with transparency and skill."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Sarah Miller",
          role: "Office Manager",
          testimonial: "Extremely convenient and professional. They fixed my engine at my home during my workday.",
          imageSrc: "http://img.b2bpic.net/free-photo/black-mechanic-his-manager-working-touchpad-auto-repair-shop_637285-8672.jpg",
        },
        {
          id: "2",
          name: "John Doe",
          role: "Architect",
          testimonial: "Best mobile service in the area. Very fast response time and fair pricing.",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171292.jpg",
        },
        {
          id: "3",
          name: "Emily Chen",
          role: "Developer",
          testimonial: "Saved me so much time. Will definitely book again.",
          imageSrc: "http://img.b2bpic.net/free-photo/serviceman-showing-customer-car-changes_482257-76110.jpg",
        },
        {
          id: "4",
          name: "Mark Wilson",
          role: "Consultant",
          testimonial: "Excellent service and very knowledgeable technician. Highly recommended.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-using-laptop_1170-1319.jpg",
        },
        {
          id: "5",
          name: "Alex Baker",
          role: "Designer",
          testimonial: "They made my car maintenance so much easier. Professional and efficient.",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-customer-car-mechanic-shaking-hands-while-greeting-auto-repair-shop_637285-7698.jpg",
        },
      ]}
      title="What Our Customers Say"
      description="Trusted by hundreds for professional auto repair."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Do I need to be home for the service?",
          content: "No, as long as our technician has access to the vehicle, we can perform the service while you are away.",
        },
        {
          id: "q2",
          title: "Do you carry spare parts?",
          content: "We carry common parts and diagnostic tools. If a specialized part is needed, we will order it and schedule a follow-up visit.",
        },
        {
          id: "q3",
          title: "Is your service guaranteed?",
          content: "Yes, all our services come with a 12-month or 12,000-mile parts and labor warranty.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Everything you need to know about our mobile service."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      plans={[
        {
          id: "p1",
          title: "Basic Checkup",
          price: "$99",
          period: "/ visit",
          features: [
            "Diagnostic Report",
            "Fluid Check",
            "Battery Test",
          ],
          button: {
            text: "Book Now",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-repairman-man-putting-gloves-work-with-car-service-station_496169-984.jpg",
          imageAlt: "Side view of repairman man putting on gloves for a work with a car in service station",
        },
        {
          id: "p2",
          title: "Full Oil Change",
          price: "$149",
          period: "/ service",
          features: [
            "Synthetic Oil",
            "Filter Change",
            "Safety Inspection",
          ],
          button: {
            text: "Book Now",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/young-builder-man-construction-uniform-holding-smartphone-clenching-fist-happy-exited_141793-28671.jpg?_wi=2",
          imageAlt: "Side view of repairman man putting on gloves for a work with a car in service station",
        },
        {
          id: "p3",
          title: "Premium Maintenance",
          price: "$299",
          period: "/ service",
          features: [
            "Full Maintenance",
            "Tire Rotation",
            "Comprehensive Scan",
          ],
          button: {
            text: "Book Now",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/wrenches-pocket-repairmen_23-2147897984.jpg?_wi=2",
          imageAlt: "Side view of repairman man putting on gloves for a work with a car in service station",
        },
      ]}
      title="Transparent Pricing"
      description="Fair prices for professional mobile service."
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Driven by Quality"
      description="Mobile Mechanic Pro was founded to provide car owners with professional, hassle-free repair solutions. We prioritize quality workmanship and transparent communication in everything we do."
      imageSrc="http://img.b2bpic.net/free-photo/mid-adult-mechanic-running-car-diagnostic-laptop-auto-repair-shop_637285-8642.jpg"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "plain",
      }}
      text="Ready to book your service? Get in touch with our team today and schedule your mobile visit."
      buttons={[
        {
          text: "Book Appointment",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Mobile Mechanic Pro"
      leftLink={{
        text: "Privacy Policy",
        href: "#",
      }}
      rightLink={{
        text: "Terms of Service",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
