"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterBase from '@/components/sections/footer/FooterBase';
import LegalSection from '@/components/legal/LegalSection';

export default function ServiceAreasPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="largeSizeMediumTitles"
        background="noise"
        cardStyle="glass-depth"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Home", id: "/" },
              { name: "Services", id: "/services" },
              { name: "Service Areas", id: "/service-areas" },
              { name: "Gallery", id: "/gallery" },
              { name: "Contact", id: "/contact" }
            ]}
            button={{
              text: "Get a Free Quote",href: "/contact"
            }}
            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EsInlEOoSiMI8mFEzeygc6zaoo/uploaded-1780963238289-ovhlz3j6.png"
            logoAlt="FloorCraft Logo"
            brandName="FloorCraft"
          />
        </div>

        <div id="service-areas-content" data-section="service-areas-content">
          <LegalSection
            layout="section"
            title="Our Service Areas"
            subtitle="We proudly serve the following states with our expert flooring services."
            sections={[
              {
                heading: "States We Serve",content: [
                  { type: "list", items: ["Georgia", "Florida", "South Carolina", "Alabama", "North Carolina", "Mississippi"] }
                ]
              }
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            columns={[
              {
                title: "Navigation",items: [
                  { label: "Home", href: "/" },
                  { label: "Services", href: "/services" },
                  { label: "Gallery", href: "/gallery" },
                  { label: "Contact", href: "/contact" }
                ]
              },
              {
                title: "Services",items: [
                  { label: "Hardwood Installation", href: "/services#hardwood-installation" },
                  { label: "Floor Sanding", href: "/services#floor-sanding" },
                  { label: "Free Estimates", href: "/services#free-estimates" },
                  { label: "Custom Designs", href: "/services#custom-designs" }
                ]
              },
              {
                title: "About Us",items: [
                  { label: "Our Story", href: "/#about" },
                  { label: "Testimonials", href: "/#home-testimonials" },
                  { label: "Service Areas", href: "/service-areas" },
                  { label: "FAQs", href: "/contact#faq" }
                ]
              }
            ]}
            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EsInlEOoSiMI8mFEzeygc6zaoo/uploaded-1780963238289-ovhlz3j6.png"
            logoAlt="FloorCraft Logo"
            logoText="FloorCraft"
            copyrightText="© 2024 FloorCraft. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}