"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SplitAbout from '@/components/sections/about/SplitAbout';

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="contact-hero" data-section="contact-hero">
      <HeroSplit
      background={{
        variant: "radial-gradient"}}
      imagePosition="right"
      title="Get in Touch with SKG Auto Detailing"
      description="Located in Fredericksburg, VA, we're ready to make your vehicle shine. Contact us today for a free quote or to schedule an appointment."
      buttons={[
        {
          text: "Call Us Now",          href: "tel:5407068888"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/car-wash-station-morning-france_268835-3545.jpg"
      imageAlt="Modern auto detailing office exterior or clean bay"
      mediaAnimation="slide-up"
      fixedMediaHeight={true}
      avatars={[
        {
          src: "asset://contact-hero-avatar-1",          alt: "customer ready to contact detailer"},
        {
          src: "asset://contact-hero-avatar-2",          alt: "client looking for car detailing quote"},
        {
          src: "asset://contact-hero-avatar-3",          alt: "person calling car detailing service"},
        {
          src: "asset://contact-hero-avatar-4",          alt: "customer at auto detailing office"},
        {
          src: "asset://contact-hero-avatar-5",          alt: "contact hero avatar"
        },
      ]}
    />
  </div>

  <div id="contact-details" data-section="contact-details">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="Our Location & Hours"
      description="Visit us at our Fredericksburg studio or reach out by phone or email. We're here to answer your questions and get your vehicle looking its best."
      bulletPoints={[
        {
          title: "Phone",          description: "(540) 706-8888"},
        {
          title: "Address",          description: "1919 Princess Anne St Suite 303, Fredericksburg, VA 22401"},
        {
          title: "Business Hours",          description: "Monday - Friday: 9:00 AM - 5:00 PM (Weekends by Appointment)"},
        {
          title: "Service Area",          description: "Serving Fredericksburg, Spotsylvania, Stafford, King George, Locust Grove, and surrounding Virginia communities."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/bold-metro-station-chatelet-paris_23-2148232435.jpg"
      imageAlt="Google Map showing SKG Auto Detailing Inc. location in Fredericksburg, VA"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="final-contact-cta" data-section="final-contact-cta">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient"}}
      text="Ready for a professional detailing experience? Call us now to schedule your appointment or get a free quote!"
      buttons={[
        {
          text: "Call (540) 706-8888",          href: "tel:5407068888"},
        {
          text: "Request a Quote",          href: "/contact"},
      ]}
    />
  </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>
  );
}
