"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import Link from 'next/link';

export default function ContactPage() {
  const navItems = [
    { name: 'Home', id: '/' },
    { name: 'Services', id: '/services' },
    { name: 'About', id: '/about' },
    { name: 'Reviews', id: '/reviews' },
    { name: 'Contact', id: '/contact' }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Nick and Sons Plumbing"
          navItems={navItems}
          button={{ text: "Call Now", href: "tel:123-456-7890" }}
          className="py-4 lg:py-6"
        />
      </div>

      <div id="contact-intro" data-section="contact-intro">
        <TextSplitAbout
          title="Get In Touch"
          description={["Whether you have a question or need to schedule a service, our team is ready to help. We prioritize clear communication and prompt responses. Reach out today and we'll get back to you as soon as possible."]}
          buttons={[
            { text: "Call: 123-456-7890", href: "tel:123-456-7890" },
            { text: "Email Us", href: "mailto:contact@nickandsons.com" }
          ]}
          buttonAnimation="reveal-blur"
          useInvertedBackground={false}
          className="py-20 lg:py-28"
          titleClassName="text-4xl md:text-5xl lg:text-6xl font-extrabold"
          descriptionClassName="text-lg md:text-xl text-foreground/80 max-w-xl"
        />
      </div>

      <div id="contact-service-areas" data-section="contact-service-areas">
        <FeatureCardOne
          title="Our Service Area"
          description="We proudly serve the following communities and surrounding areas."
          features={[
            { title: "Oak Creek", description: "Main service hub and surrounding neighborhoods.", imageSrc: "https://img.b2bpic.net/free-vector/real-estate-searching-concept_23-2148657476.jpg", imageAlt: "Map of Oak Creek" },
            { title: "Riverwood", description: "Covering all residential and commercial needs.", imageSrc: "https://img.b2bpic.net/free-vector/real-estate-searching-concept_23-2148657476.jpg", imageAlt: "Map of Riverwood" },
            { title: "Maple Valley", description: "Prompt service for all plumbing issues.", imageSrc: "https://img.b2bpic.net/free-vector/real-estate-searching-concept_23-2148657476.jpg", imageAlt: "Map of Maple Valley" }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          cardClassName="p-6 md:p-8 flex flex-col items-center text-center"
          cardTitleClassName="text-xl font-bold mt-4 mb-2"
          cardDescriptionClassName="text-base"
          mediaClassName="h-32 w-32 object-contain"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Answers to common questions about our services and process, designed to reduce anxiety."
          faqs={[
            { id: "1", title: "Do you offer estimates?", content: "Yes—share a few details (and a photo if possible) and we’ll guide you to the right next step." },
            { id: "2", title: "Do you explain what you’re doing?", content: "Always. We walk you through the issue and your options so you can decide confidently." },
            { id: "3", title: "Will you look for other issues while you’re there?", content: "If we spot something related (like a second leak), we’ll point it out and recommend the right fix." }
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Nick and Sons Plumbing"
          copyrightText="© 2024 | Nick and Sons Plumbing. All rights reserved."
          className="py-16"
          cardClassName="max-w-7xl mx-auto px-6 lg:px-8 bg-card rounded-xl shadow-lg"
          logoClassName="text-3xl font-bold text-foreground"
          copyrightTextClassName="text-sm text-foreground/70"
        />
      </div>
    </ThemeProvider>
  );
}