"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import { Camera, Droplets, Image, Star, ZoomIn } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeLargeTitles"
        background="none"
        cardStyle="glass-elevated"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "About",
          id: "/about",
        },
        {
          name: "Services",
          id: "/services",
        },
        {
          name: "Gallery",
          id: "/gallery",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      brandName="SKG Auto Detailing"
      button={{
        text: "Get Free Quote",
        href: "/contact",
      }}
    />
  </div>

  <div id="gallery-hero" data-section="gallery-hero">
      <HeroSplit
      background={{
        variant: "radial-gradient",
      }}
      imagePosition="right"
      title="Our Portfolio of Vehicle Transformations"
      description="Witness the SKG Auto Detailing difference. Our before-and-after results speak for themselves, showcasing our commitment to excellence."
      buttons={[
        {
          text: "Get a Free Quote",
          href: "/contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/woman-choosing-car-car-showroom_1303-15211.jpg"
      imageAlt="Mosaic of before and after car detailing images"
      mediaAnimation="slide-up"
      fixedMediaHeight={true}
      avatars={[
        {
          src: "asset://gallery-hero-avatar-1",
          alt: "smiling customer auto gallery",
        },
        {
          src: "asset://gallery-hero-avatar-2",
          alt: "client happy with car transformation",
        },
        {
          src: "asset://gallery-hero-avatar-3",
          alt: "person reviewing car photos",
        },
        {
          src: "asset://gallery-hero-avatar-4",
          alt: "satisfied car enthusiast portrait",
        },
        {
          src: "asset://gallery-hero-avatar-5",
          alt: "happy client car detailing portfolio",
        },
      ]}
      avatarText="See 100+ Transformations"
      marqueeItems={[
        {
          type: "text-icon",
          text: "Stunning Transformations",
          icon: Camera,
        },
        {
          type: "text-icon",
          text: "Visual Proof",
          icon: Image,
        },
        {
          type: "text-icon",
          text: "Detailing Showcase",
          icon: Droplets,
        },
        {
          type: "text-icon",
          text: "Extensive Portfolio",
          icon: Star,
        },
        {
          type: "text-icon",
          text: "See the Details",
          icon: ZoomIn,
        },
      ]}
    />
  </div>

  <div id="gallery-categories" data-section="gallery-categories">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "cat-beforeafter",
          brand: "See The Difference",
          name: "Before & After",
          price: "View",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193170.jpg",
          imageAlt: "Before and After comparison image",
        },
        {
          id: "cat-cars",
          brand: "Luxury & Sports",
          name: "Cars",
          price: "View",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193566.jpg",
          imageAlt: "Detailed luxury car",
        },
        {
          id: "cat-trucks",
          brand: "Rugged & Powerful",
          name: "Trucks",
          price: "View",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-changing-tires-car-service_1303-26897.jpg",
          imageAlt: "Detailed pickup truck",
        },
        {
          id: "cat-suvs",
          brand: "Family & Adventure",
          name: "SUVs",
          price: "View",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-rear-light-new-dark-auto_23-2147963019.jpg",
          imageAlt: "Detailed luxury SUV",
        },
        {
          id: "cat-interior",
          brand: "Cabin Refresh",
          name: "Interior Restorations",
          price: "View",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-cleaning-tools_23-2150552297.jpg",
          imageAlt: "Detailed car interior",
        },
        {
          id: "cat-exterior",
          brand: "Paint Perfection",
          name: "Exterior Corrections",
          price: "View",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3084.jpg",
          imageAlt: "Detailed car exterior paint",
        },
      ]}
      title="Explore By Category"
      description="Filter our extensive gallery by vehicle type or detailing service to find exactly what you're looking for."
    />
  </div>

  <div id="full-gallery-showcase" data-section="full-gallery-showcase">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "gl-1",
          brand: "Sports Car",
          name: "Exterior Polish",
          price: "",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-headlights-modern-red-car_181624-22677.jpg",
          imageAlt: "Red sports car exterior after detailing",
        },
        {
          id: "gl-2",
          brand: "SUV Interior",
          name: "Deep Clean",
          price: "",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/cushion-modern-car_1339-5502.jpg",
          imageAlt: "White SUV interior after deep cleaning",
        },
        {
          id: "gl-3",
          brand: "Pickup Truck",
          name: "Full Exterior Detail",
          price: "",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-cool-old-woman-with-motorbike_23-2150647783.jpg",
          imageAlt: "Black pickup truck exterior after detailing",
        },
        {
          id: "gl-4",
          brand: "Engine Bay",
          name: "Meticulous Detail",
          price: "",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/motorbike-motor_1417-1535.jpg",
          imageAlt: "Clean car engine bay",
        },
        {
          id: "gl-5",
          brand: "Sedan Paint",
          name: "Correction & Ceramic",
          price: "",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212216.jpg",
          imageAlt: "Silver sedan paint correction close-up",
        },
        {
          id: "gl-6",
          brand: "Wheels & Tires",
          name: "Restoration",
          price: "",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-with-new-tires-close-up_1303-31684.jpg",
          imageAlt: "Detailed car wheel and tire",
        },
        {
          id: "gl-7",
          brand: "Luxury Interior",
          name: "Dashboard & Console",
          price: "",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/black-interior-car-center-control-space_53876-96704.jpg",
          imageAlt: "Luxury car dashboard and console detailing",
        },
        {
          id: "gl-8",
          brand: "Sports Car",
          name: "Deep Gloss Finish",
          price: "",
          rating: 5,
          reviewCount: "",
          imageSrc: "http://img.b2bpic.net/free-photo/elegant-uber-driver-giving-taxi-ride_23-2149241770.jpg",
          imageAlt: "Dark blue sports car with deep gloss finish",
        },
      ]}
      title="Full Detailing Gallery"
      description="A comprehensive collection of our finest work, showcasing every detail and angle of our professional auto transformations."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Full Detailing",
              href: "/services#full-detailing",
            },
            {
              label: "Interior Detailing",
              href: "/services#interior-detailing",
            },
            {
              label: "Exterior Detailing",
              href: "/services#exterior-detailing",
            },
            {
              label: "Paint Protection",
              href: "/services#paint-protection",
            },
            {
              label: "Engine Detailing",
              href: "/services#engine-detailing",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "/about",
            },
            {
              label: "Our Work",
              href: "/gallery",
            },
            {
              label: "Contact Us",
              href: "/contact",
            },
            {
              label: "Request a Quote",
              href: "/contact",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "Facebook",
              href: "#",
            },
            {
              label: "Instagram",
              href: "#",
            },
            {
              label: "Google Reviews",
              href: "https://www.google.com/search?q=SKG+Auto+Detailing+Inc+Fredericksburg+reviews",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 SKG Auto Detailing Inc. All rights reserved."
      bottomRightText="Built with Webild"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
