"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
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="faq-section" data-section="faq-section">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "Do you provide free estimates?",          content: "Yes. We provide detailed consultations and written estimates for all projects, ensuring full transparency from the start."},
        {
          id: "q2",          title: "What areas do you serve?",          content: "We proudly serve homeowners in Mississauga, Oakville, Brampton, Toronto, Burlington, Milton, and the entire Greater Toronto Area."},
        {
          id: "q3",          title: "Do you handle complete bathroom renovations?",          content: "Yes. We offer comprehensive bathroom renovation services, including demolition, advanced waterproofing, expert tile installation, and meticulous finishing work."},
        {
          id: "q4",          title: "What types of tile do you install?",          content: "We specialize in installing a wide range of tile types, including Porcelain, Ceramic, Marble, Natural Stone, Mosaic, and Large Format Slabs."},
        {
          id: "q5",          title: "How long does a bathroom renovation take?",          content: "Most bathroom renovation projects typically range from 1 to 3 weeks, depending on the complexity and scope of the work involved."},
        {
          id: "q6",          title: "Do you offer warranties?",          content: "Yes. We stand behind our work. Warranty options are available, varying based on the project scope and the specific installation system utilized."},
        {
          id: "q7",          title: "Why should I choose Tiles Connect?",          content: "Because quality matters. Our clients consistently choose us for our precision, transparent communication, superior craftsmanship, and meticulous attention to detail. We never cut corners or rush our work, ensuring a durable and beautiful finish that homeowners love for decades."}
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Find quick answers to common questions about our tile installation and renovation services."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="faq-why-choose-us" data-section="faq-why-choose-us">
      <TextAbout
      useInvertedBackground={false}
      title="Why Should You Choose Tiles Connect?"
      buttons={[
        {
          text: "Learn More About Us",          href: "/about"}
      ]}
    />
  </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>
  );
}
