"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import TextAbout from '@/components/sections/about/TextAbout';
import AboutMetric from '@/components/sections/about/AboutMetric';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactCTA from '@/components/sections/contact/ContactCTA';

import { Award, Clock, Gauge, Sparkles, Star, Users, Phone, ShoppingCart, CalendarDays } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="primary-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: "Reviews",                id: "/#reviews"},
              {
                name: "Order Online",                id: "/order-online"},
              {
                name: "Reservations",                id: "/reservations"},
              {
                name: "Contact",                id: "/#contact"},
            ]}
            logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-evil-eye-icon_23-2150148629.jpg"
            logoAlt="Omega Plumbing & Drain logo"
            brandName="Omega Plumbing & Drain"
            button={{
              text: "Call Now",              href: "tel:210-618-2887"}}
          />
        </div>

        <div id="about-us" data-section="about-us">
          <TextAbout
            useInvertedBackground={false}
            title="About Omega Plumbing & Drain: Your Community's Trusted Plumbers"
            buttons={[
              {
                text: "Call Now: 210-618-2887",                href: "tel:210-618-2887"},
              {
                text: "Request Service",                href: "/#contact"},
              {
                text: "Order Online",                href: "/order-online"},
              {
                text: "Make a Reservation",                href: "/reservations"},
            ]}
          />
        </div>

        <div id="about-metrics" data-section="about-metrics">
          <AboutMetric
            useInvertedBackground={true}
            title="Our Commitment to Excellence"
            metrics={[
              {
                icon: Gauge,
                label: "Years in Service",                value: "15+"},
              {
                icon: Users,
                label: "Licensed Plumbers",                value: "20+"},
              {
                icon: Star,
                label: "Customer Rating",                value: "4.9/5"},
            ]}
            metricsAnimation="slide-up"
          />
        </div>

        <div id="trust-elements" data-section="trust-elements">
          <MetricCardThree
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              {
                id: "licensed",                icon: Award,
                title: "Licensed & Insured",                value: "Fully Compliant"},
              {
                id: "emergency",                icon: Clock,
                title: "24/7 Emergency Service",                value: "Rapid Response"},
              {
                id: "experienced",                icon: Sparkles,
                title: "Experienced Professionals",                value: "Skilled & Certified"},
            ]}
            title="Why Omega is Your Best Choice"
            description="Our commitment to excellence ensures peace of mind for every customer in San Antonio."
          />
        </div>

        <div id="contact-cta" data-section="contact-cta">
          <ContactCTA
            useInvertedBackground={true}
            background={{
              variant: "radial-gradient"}}
            tag="Ready for Service?"
            title="Get in Touch with Omega Plumbing & Drain"
            description="Whether it's an emergency or a routine check-up, our team is ready to provide top-notch service."
            buttons={[
              {
                text: "Call Now: 210-618-2887",                href: "tel:210-618-2887"},
              {
                text: "Request Service",                href: "mailto:info@omegaplumbingdrain.com"},
              {
                text: "Order Online",                href: "/order-online"},
              {
                text: "Make a Reservation",                href: "/reservations"},
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/close-up-surface-with-white-circles_1203-511.jpg?_wi=2"
            imageAlt="Omega Plumbing & Drain service van at night"
            logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-evil-eye-icon_23-2150148629.jpg"
            logoAlt="Omega Plumbing & Drain logo"
            logoText="Omega Plumbing & Drain"
            columns={[
              {
                title: "Services",                items: [
                  {
                    label: "Emergency Plumbing",                    href: "/#services"},
                  {
                    label: "Leak Detection",                    href: "/#services"},
                  {
                    label: "Drain Cleaning",                    href: "/#services"},
                  {
                    label: "Water Main Repair",                    href: "/#services"},
                  {
                    label: "Hydro Jetting",                    href: "/#services"},
                ],
              },
              {
                title: "Company",                items: [
                  {
                    label: "About Us",                    href: "/about"},
                  {
                    label: "Testimonials",                    href: "/#reviews"},
                  {
                    label: "Contact",                    href: "/#contact"},
                ],
              },
              {
                title: "Legal",                items: [
                  {
                    label: "Privacy Policy",                    href: "#"},
                  {
                    label: "Terms of Service",                    href: "#"},
                ],
              },
            ]}
            copyrightText="© 2024 Omega Plumbing & Drain. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
