"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="noise"
        cardStyle="gradient-radial"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "/"},
        {
          name: "About Us",          id: "/about"},
        {
          name: "Services",          id: "/services"},
        {
          name: "Gallery",          id: "/gallery"},
        {
          name: "Reviews",          id: "/reviews"},
        {
          name: "FAQ",          id: "/faq"},
        {
          name: "Contact",          id: "/contact"}
      ]}
      brandName="TILES CONNECT"
      button={{
        text: "Get Free Estimate",        href: "/contact"}}
    />
  </div>

  <div id="contact-main" data-section="contact-main">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      text="Let's Discuss Your Project. Whether you're planning a luxury bathroom renovation, custom shower, kitchen backsplash, or complete tile installation, we'd love to hear about your vision. Request A Free Estimate.\n\nContact Information\nPhone: (Add Number)\nEmail: (Add Email)\nInstagram: @tilesconnect"
      buttons={[
        {
          text: "Request A Free Estimate",          href: "/contact"}
      ]}
    />
  </div>

  <div id="contact-service-areas" data-section="contact-service-areas">
      <TextAbout
      useInvertedBackground={false}
      title="Serving The Greater Toronto Area"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/stacked-bundle-amaranth-leaves-marble-surface_114579-54865.jpg"
      imageAlt="Luxury tile pattern background"
      logoText="TILES CONNECT"
      columns={[
        {
          title: "Company",          items: [
            {
              label: "Home",              href: "/"},
            {
              label: "About Us",              href: "/about"},
            {
              label: "Services",              href: "/services"},
            {
              label: "Gallery",              href: "/gallery"}
          ]
        },
        {
          title: "Resources",          items: [
            {
              label: "Reviews",              href: "/reviews"},
            {
              label: "FAQ",              href: "/faq"},
            {
              label: "Contact",              href: "/contact"}
          ]
        },
        {
          title: "Service Areas",          items: [
            {
              label: "Mississauga",              href: "#"},
            {
              label: "Oakville",              href: "#"},
            {
              label: "Brampton",              href: "#"},
            {
              label: "Toronto",              href: "#"}
          ]
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"}
          ]
        }
      ]}
      copyrightText="© 2024 Tiles Connect. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
