"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Mail, Phone, Clock } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "services" },
    { name: "Our Process", id: "process" },
    { name: "Projects", id: "projects" },
    { name: "Reviews", id: "reviews" },
    { name: "About", id: "about" },
  ];

  const footerColumns = [
    {
      title: "Services",      items: [
        { label: "Residential Roofing", href: "#services" },
        { label: "Roof Repairs", href: "#services" },
        { label: "Storm Damage", href: "#services" },
        { label: "Commercial Roofing", href: "#services" },
        { label: "Property Manager Program", href: "#property-manager" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Our Process", href: "#process" },
        { label: "Projects", href: "#projects" },
        { label: "Reviews", href: "#reviews" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Warranty Information", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="floatingGradient"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="Five Star Roofing"
          button={{
            text: "Get Free Inspection",            href: "#contact-form"}}
          buttonClassName="px-4 py-2 rounded-full font-semibold hover:shadow-lg transition-all"
          buttonTextClassName="font-bold"
        />
      </div>

      <div id="contact-intro" data-section="contact-intro">
        <TextSplitAbout
          title="Get Your Free Roof Inspection"
          description={[
            "We're ready to help. Whether you need a routine inspection, emergency repair, or want to discuss a full replacement, reach out today.",            "Fill out the form below and we'll contact you within one business day to schedule your free inspection. Or call us directly if you prefer to speak with someone right away.",            "No obligation. No pressure. Just straightforward, honest roofing advice from professionals who genuinely care about your home."]}
          buttons={[
            { text: "Call Now", href: "tel:+1234567890" },
          ]}
          showBorder={true}
          useInvertedBackground={false}
          titleClassName="text-3xl md:text-4xl"
          descriptionClassName="text-base md:text-lg leading-relaxed"
        />
      </div>

      <div id="contact-options" data-section="contact-options">
        <BlogCardThree
          title="Ways to Reach Us"
          description="Choose the contact method that works best for you"
          tag="Contact Information"
          tagIcon={Mail}
          tagAnimation="slide-up"
          blogs={[
            {
              id: "1",              category: "Phone",              title: "Call Us Directly",              excerpt: "Speak with a team member right now. Available for urgent emergencies 24/7. For general inquiries, we respond during business hours.",              imageSrc: "http://img.b2bpic.net/free-photo/young-support-customer-woman-talking-into-headset-microphone-with-call-center-customer-while-working-startup-company-office-caucasian-female-consultant-providing-telemarketing-service_482257-28282.jpg?_wi=2",              imageAlt: "Phone support contact method",              authorName: "(555) 123-4567",              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              date: "24/7 Emergency"},
            {
              id: "2",              category: "Email",              title: "Email Your Inquiry",              excerpt: "Send us details about your roofing needs, photos, or questions. We'll respond within one business day with recommendations and next steps.",              imageSrc: "http://img.b2bpic.net/free-photo/young-support-customer-woman-talking-into-headset-microphone-with-call-center-customer-while-working-startup-company-office-caucasian-female-consultant-providing-telemarketing-service_482257-28282.jpg?_wi=3",              imageAlt: "Email contact method",              authorName: "info@fivestartroofing.com",              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              date: "1 Business Day"},
            {
              id: "3",              category: "Form",              title: "Request Free Inspection",              excerpt: "Fill out our quick online form with your name, address, and roofing concerns. We'll schedule your inspection and send confirmation details via email.",              imageSrc: "http://img.b2bpic.net/free-photo/young-support-customer-woman-talking-into-headset-microphone-with-call-center-customer-while-working-startup-company-office-caucasian-female-consultant-providing-telemarketing-service_482257-28282.jpg?_wi=4",              imageAlt: "Online form submission",              authorName: "Five Star Team",              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              date: "Quick & Easy"},
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          textBoxTitleClassName="text-4xl md:text-5xl"
          textBoxDescriptionClassName="text-lg text-gray-600"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 Five Star Roofing. All rights reserved. Licensed | Insured | Bonded."
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}