"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Phone, MapPin } from "lucide-react";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="ProServices"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
          button={{
            text: "Call (555) 123-4567",
            href: "tel:+15551234567",
          }}
        />
      </div>

      <div id="contact-hero" data-section="contact-hero">
        <HeroLogo
          logoText="Get in Touch"
          description="Ready to get started? Contact us today for a free, no-obligation quote."
          imageSrc="http://img.b2bpic.net/free-photo/low-angle-engineers-hand-shake_23-2148480373.jpg?_wi=3"
          imageAlt="Professional service ready to help"
          buttons={[
            {
              text: "Call Immediately: (555) 123-4567",
              href: "tel:+15551234567",
            },
          ]}
          buttonAnimation="slide-up"
          showDimOverlay={false}
          ariaLabel="Contact page hero section"
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactCTA
          tag="Free Consultation"
          tagIcon={Phone}
          tagAnimation="slide-up"
          title="Contact ProServices Today"
          description="Call us directly for immediate assistance or complete the form below to request a quote. We respond quickly and treat every inquiry with priority."
          buttons={[
            {
              text: "Call Now: (555) 123-4567",
              href: "tel:+15551234567",
            },
            {
              text: "Send us a Message",
              href: "mailto:info@proservices.com",
            },
          ]}
          buttonAnimation="slide-up"
          background={{
            variant: "gradient-bars",
          }}
          useInvertedBackground={true}
          ariaLabel="Contact form call to action"
        />
      </div>

      <div id="contact-info" data-section="contact-info">
        <FeatureCardTwelve
          title="How to Reach Us"
          description="Multiple ways to connect with ProServices. Choose what works best for you."
          features={[
            {
              id: "contact-phone",
              label: "Phone",
              title: "Call Us Anytime",
              items: [
                "Primary: (555) 123-4567",
                "Monday-Saturday 8AM-6PM",
                "Emergency line available 24/7",
                "Fast response guaranteed",
              ],
            },
            {
              id: "contact-email",
              label: "Email",
              title: "Email Your Request",
              items: [
                "info@proservices.com",
                "Detailed service inquiries welcome",
                "Response within 2 hours",
                "We answer all questions thoroughly",
              ],
            },
            {
              id: "contact-location",
              label: "Location",
              title: "Visit Our Office",
              items: [
                "123 Service Street",
                "Your City, ST 12345",
                "Open Monday-Saturday",
                "Free consultations available",
              ],
            },
            {
              id: "contact-service",
              label: "Service Area",
              title: "Coverage Territory",
              items: [
                "Serving Your City and surrounding areas",
                "Residential and commercial properties",
                "Same-week service available",
                "No travel fees for local jobs",
              ],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Contact Information"
          tagIcon={MapPin}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Request a Quote Now",
              href: "mailto:info@proservices.com",
            },
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Contact information and ways to reach us"
        />
      </div>

      <div id="contact-footer" data-section="contact-footer">
        <FooterBaseCard
          logoText="ProServices"
          columns={[
            {
              title: "Site Navigation",
              items: [
                { label: "Home", href: "/" },
                { label: "Services", href: "/services" },
                { label: "About", href: "/about" },
                { label: "Contact", href: "/contact" },
              ],
            },
            {
              title: "Quick Links",
              items: [
                { label: "Get a Free Quote", href: "/contact" },
                { label: "Service Areas", href: "/services" },
                { label: "Customer Reviews", href: "/" },
                { label: "Terms & Privacy", href: "#" },
              ],
            },
            {
              title: "Reach Out",
              items: [
                { label: "Phone: (555) 123-4567", href: "tel:+15551234567" },
                { label: "Email: info@proservices.com", href: "mailto:info@proservices.com" },
                { label: "Address: 123 Service Street", href: "#" },
                { label: "Hours: Mon-Sat 8AM-6PM", href: "#" },
              ],
            },
          ]}
          copyrightText="© 2025 ProServices. Your trusted local service partner."
          ariaLabel="Contact page footer"
        />
      </div>
    </ThemeProvider>
  );
}