"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Award, Check, CheckCircle, Clock, Search, ShieldCheck, Truck, Wrench, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSmallSizeLargeTitles"
        background="aurora"
        cardStyle="glass-elevated"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Services",
          id: "features",
        },
        {
          name: "Testimonials",
          id: "testimonials",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Divine Diesel Repair"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "animated-grid",
      }}
      title="Expert Truck & Trailer Repair You Can Trust"
      description="Divine Diesel Truck & Trailer Repair Ltd provides top-tier maintenance and emergency repairs for your commercial fleet, ensuring your assets stay on the road longer."
      kpis={[
        {
          value: "24/7",
          label: "Roadside Support",
        },
        {
          value: "100+",
          label: "Fleets Maintained",
        },
        {
          value: "Expert",
          label: "Diesel Technicians",
        },
      ]}
      enableKpiAnimation={true}
      imageSrc="http://img.b2bpic.net/free-photo/young-worker-checks-wheel-truck-malfunction-service-work_1157-46513.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-two-smiling-specialists-working-laptop-computer-looking-front-modern-service-center_496169-972.jpg",
          alt: "Portrait of two smiling specialists",
        },
        {
          src: "http://img.b2bpic.net/free-photo/full-shot-mechanic-checking-truck_23-2149426541.jpg",
          alt: "Full shot mechanic checking truck",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-worker-checks-wheel-truck-malfunction-service-work_1157-46510.jpg",
          alt: "A young worker checks the wheel",
        },
        {
          src: "http://img.b2bpic.net/free-photo/man-with-tools-truck-worker-uniform-faulty-truck_1157-46522.jpg",
          alt: "Man with tools for truck",
        },
        {
          src: "http://img.b2bpic.net/free-photo/mechanics-repairing-car-workshop_329181-11799.jpg",
          alt: "Mechanics repairing a car",
        },
      ]}
      avatarText="Join 500+ satisfied drivers"
      marqueeItems={[
        {
          type: "text-icon",
          text: "Certified Technicians",
          icon: ShieldCheck,
        },
        {
          type: "text-icon",
          text: "Emergency Response",
          icon: Truck,
        },
        {
          type: "text-icon",
          text: "High Performance",
          icon: Zap,
        },
        {
          type: "text-icon",
          text: "Reliable Results",
          icon: Wrench,
        },
        {
          type: "text-icon",
          text: "Full Diagnostics",
          icon: Search,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Quality Repairs, Minimal Downtime"
      description="At Divine Diesel, we understand that time is money in the transport industry. Our skilled technicians deliver high-quality engine, transmission, and structural trailer repairs with efficiency that keeps your operations moving forward."
      imageSrc="http://img.b2bpic.net/free-photo/young-cobbler-glasses-is-working-shoe-sole-his-dark-workplace_613910-12936.jpg"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          title: "Engine Diagnostics",
          description: "Advanced diagnostics for all major heavy-duty engine brands.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/young-worker-checks-wheel-truck-malfunction-service-work_1157-46514.jpg",
          },
          items: [
            {
              icon: Wrench,
              text: "Computerized scanning",
            },
            {
              icon: Zap,
              text: "Emission system repair",
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/young-worker-checks-wheel-truck-malfunction-service-work_1157-46513.jpg",
          imageAlt: "semi truck wheel repair",
        },
        {
          title: "Emergency Roadside",
          description: "Fast response to breakdowns, whenever you need it.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/red-steel-tool-box-garage_613910-13485.jpg",
          },
          items: [
            {
              icon: Truck,
              text: "Mobile repair unit",
            },
            {
              icon: Clock,
              text: "24/7 availability",
            },
          ],
          reverse: true,
          imageSrc: "http://img.b2bpic.net/free-photo/young-cobbler-glasses-is-working-shoe-sole-his-dark-workplace_613910-12936.jpg",
          imageAlt: "semi truck wheel repair",
        },
        {
          title: "Fleet Maintenance",
          description: "Customized preventative maintenance programs for fleets.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/close-up-fuel-level-gauge-vehicle_23-2150163705.jpg",
          },
          items: [
            {
              icon: ShieldCheck,
              text: "Scheduled inspections",
            },
            {
              icon: CheckCircle,
              text: "Oil and filter service",
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/man-working-as-truck-driver-posing_23-2151489636.jpg",
          imageAlt: "semi truck wheel repair",
        },
      ]}
      title="Comprehensive Repair Services"
      description="We offer a wide range of specialized diesel services for heavy-duty vehicles and trailers."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "99%",
          title: "First-time fix",
          description: "High accuracy repair rate",
          icon: Check,
        },
        {
          id: "m2",
          value: "24h",
          title: "Turnaround",
          description: "Average service speed",
          icon: Clock,
        },
        {
          id: "m3",
          value: "15+",
          title: "Years",
          description: "Industry experience",
          icon: Award,
        },
      ]}
      title="Our Track Record"
      description="Proven results helping local and regional logistics operations."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "John D.",
          handle: "@logisticspro",
          testimonial: "Divine Diesel got us back on the road in record time. Excellent service.",
          imageSrc: "http://img.b2bpic.net/free-photo/man-working-as-truck-driver-posing_23-2151489636.jpg",
        },
        {
          id: "t2",
          name: "Sarah M.",
          handle: "@freightmaster",
          testimonial: "Professional, clean, and knowledgeable team. Highly recommended.",
          imageSrc: "http://img.b2bpic.net/free-photo/diverse-stockroom-team-checking-online-orders-tablet_482257-84291.jpg",
        },
        {
          id: "t3",
          name: "Mike R.",
          handle: "@drivermike",
          testimonial: "The best emergency repair service I've used in years.",
          imageSrc: "http://img.b2bpic.net/free-photo/man-learning-how-drive-truck-driving-schools_342744-1310.jpg",
        },
        {
          id: "t4",
          name: "Alex K.",
          handle: "@transportation",
          testimonial: "Detailed diagnostics and fair pricing every time.",
          imageSrc: "http://img.b2bpic.net/free-photo/truck-driver-leaning-against-truck_23-2152009007.jpg",
        },
        {
          id: "t5",
          name: "Brian W.",
          handle: "@fleetops",
          testimonial: "They treat our fleet like it's their own. Outstanding work.",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing_23-2150171294.jpg",
        },
      ]}
      title="Trusted by Drivers"
      description="Hear what our professional clients say about their service experience."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Do you offer emergency roadside service?",
          content: "Yes, our mobile units operate 24/7 to assist with roadside breakdowns.",
        },
        {
          id: "q2",
          title: "What brands do you service?",
          content: "We handle all major heavy-duty truck and trailer manufacturers.",
        },
        {
          id: "q3",
          title: "How do I schedule fleet maintenance?",
          content: "Contact our office to arrange a consultation for custom fleet programs.",
        },
      ]}
      title="Common Questions"
      description="Need to know more about our repair process?"
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "gradient-bars",
      }}
      tag="Get in Touch"
      title="Need Repair Help?"
      description="Contact Divine Diesel today to speak with a technician or schedule service."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Divine Diesel"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#",
            },
            {
              label: "Services",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Emergency Repair",
              href: "#",
            },
            {
              label: "Contact",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Divine Diesel Truck & Trailer Repair Ltd."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
