"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="compact"
        sizing="largeSmall"
        background="fluid"
        cardStyle="gradient-bordered"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Services",
          id: "/services",
        },
        {
          name: "Gallery",
          id: "/gallery",
        },
        {
          name: "Schedule",
          id: "/schedule",
        },
        {
          name: "Reviews",
          id: "/reviews",
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/motorcycle-badges-retro-style_23-2147563435.jpg"
      logoAlt="Apex Auto Solutions Logo"
      brandName="Apex Auto Solutions"
      bottomLeftText="Your Trusted Auto Partner"
      bottomRightText="info@apexauto.com"
      button={{
        text: "Call Now",
        href: "tel:+18001234567",
      }}
    />
  </div>

  <div id="services-detail" data-section="services-detail">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      products={[
        {
          id: "s1",
          name: "Oil Change & Fluid Service",
          price: "Starting at $49",
          imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-examining-car-oil-auto-repair-shop_637285-4301.jpg",
          imageAlt: "car engine oil change service",
        },
        {
          id: "s2",
          name: "Brake Repair & Replacement",
          price: "Diagnostic from $75",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-orange-hard-disk-components_23-2149413374.jpg",
          imageAlt: "car brake repair service overview",
        },
        {
          id: "s3",
          name: "Engine Diagnostics",
          price: "Scan from $85",
          imageSrc: "http://img.b2bpic.net/free-photo/car-repair-maintenance-theme-electric-mechanic-uniform-working-auto-service-making-car-diagnostics-using-obd-device-with-laptop_627829-3940.jpg",
          imageAlt: "advanced car diagnostics service",
        },
        {
          id: "s4",
          name: "Tire Sales & Rotation",
          price: "Rotation from $25",
          imageSrc: "http://img.b2bpic.net/free-photo/car-mechanic-changing-wheels-car_1303-26653.jpg",
          imageAlt: "car tire rotation service alignment",
        },
        {
          id: "s5",
          name: "Battery Check & Replacement",
          price: "Free Check",
          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-preparing-check-list_1170-1311.jpg",
          imageAlt: "car battery test and replacement",
        },
        {
          id: "s6",
          name: "AC & Heating System",
          price: "Diagnostic from $99",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-hand-turning-car-air-conditioning-system-car-air-conditioner-off-button-close-up-view_657921-553.jpg",
          imageAlt: "car AC repair and recharge",
        },
      ]}
      title="Our Full Range of Expert Automotive Services"
      description="From routine checks to complex repairs, our skilled technicians handle it all with precision and care. Explore our comprehensive service offerings."
    />
  </div>

  <div id="service-metrics" data-section="service-metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "98%",
          description: "Customer Satisfaction",
        },
        {
          id: "m2",
          value: "20+",
          description: "Years of Experience",
        },
        {
          id: "m3",
          value: "10K+",
          description: "Vehicles Serviced",
        },
      ]}
      title="Our Commitment to Excellence"
      description="We measure our success by your satisfaction and the reliability of your vehicle. See how we stand out."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Apex Auto Solutions"
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Engine Diagnostics",
              href: "/services#diagnostics",
            },
            {
              label: "Brake Repair",
              href: "/services#brakes",
            },
            {
              label: "Oil Change",
              href: "/services#oil",
            },
            {
              label: "Tire Services",
              href: "/services#tires",
            },
            {
              label: "AC & Heating",
              href: "/services#ac",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "/about",
            },
            {
              label: "Our Work",
              href: "/gallery",
            },
            {
              label: "Reviews",
              href: "/reviews",
            },
            {
              label: "Contact",
              href: "/contact",
            },
          ],
        },
        {
          title: "Resources",
          items: [
            {
              label: "Blog",
              href: "/blog",
            },
            {
              label: "FAQ",
              href: "/faq",
            },
            {
              label: "Schedule Online",
              href: "/schedule",
            },
            {
              label: "Privacy Policy",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Apex Auto Solutions. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
