"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import { Phone, MapPin, Clock, CheckCircle } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "About", id: "/about" },
    { name: "Why Us", id: "why-us" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Services",
      items: [
        { label: "Interior Renovations", href: "/services" },
        { label: "Exterior Construction", href: "/services" },
        { label: "Repairs & Maintenance", href: "/services" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { label: "Our Process", href: "/about" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Get Help",
      items: [
        { label: "Call (917) 498-2545", href: "tel:(917) 498-2545" },
        { label: "Email Inquiry", href: "mailto:info@skyhighcontracting.com" },
        { label: "Free Estimate", href: "/contact" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Sky High Contracting"
          navItems={navItems}
          button={{ text: "Call Now", href: "tel:(917) 498-2545" }}
        />
      </div>

      <div id="contact-form" data-section="contact-form">
        <ContactCenter
          tag="Get In Touch"
          title="Contact Sky High Contracting"
          description="Reach out to us directly. Call anytime—we're open 24/7 to discuss your construction needs and provide a free estimate. Our team responds quickly to all inquiries."
          tagIcon={Phone}
          tagAnimation="slide-up"
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={false}
          inputPlaceholder="Your email address"
          buttonText="Request Estimate"
          termsText="Call: (917) 498-2545 | Open 24/7 | Licensed & Insured"
        />
      </div>

      <div id="contact-info" data-section="contact-info">
        <SplitAbout
          title="Multiple Ways to Reach Us"
          description="Whether you prefer phone, email, or in-person consultation, our team is ready to assist you. We pride ourselves on fast response times and personalized attention to every inquiry. Your project deserves professional care from start to finish."
          tag="Available Now"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          mediaAnimation="opacity"
          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-working-construction_23-2150772878.jpg?_wi=3"
          imageAlt="Team ready to help"
          imagePosition="left"
          buttons={[{ text: "Schedule Consultation", href: "tel:(917) 498-2545" }]}
          bulletPoints={[
            {
              title: "Call Anytime",
              description: "Phone: (917) 498-2545 | Available 24/7 for your convenience and emergencies",
              icon: Phone,
            },
            {
              title: "Email Us",
              description: "info@skyhighcontracting.com | Detailed inquiries answered within 24 hours",
              icon: CheckCircle,
            },
            {
              title: "Service Areas",
              description: "Serving all of New York | Local expertise with professional quality standards",
              icon: MapPin,
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/full-shot-people-working-out-together_23-2150405456.jpg?_wi=4"
          imageAlt="Construction team at work"
          logoText="Sky High Contracting"
          copyrightText="© 2025 Sky High Contracting. All rights reserved. Licensed & Insured."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}