"use client";

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

export default function ServicesPage() {
  const navItems = [
    { 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="services-intro" data-section="services-intro">
        <TextSplitAbout
          title="Comprehensive Plumbing Solutions"
          description={["We handle everything from minor repairs to major installations with the same level of professionalism and care. Our goal is to provide lasting solutions for your home, ensuring your plumbing systems are reliable and efficient."]}
          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="services-list" data-section="services-list">
        <FeatureCardOne
          title="Our Full Service List"
          description="Explore our full range of services designed to keep your home running smoothly."
          features={[
            { title: "Leak Detection & Repairs", description: "Under-sink, pipe leaks, hidden drips. We find and fix them fast.", imageSrc: "https://img.b2bpic.net/free-photo/male-worker-operating-machinery-factory_107420-96043.jpg?_wi=2", imageAlt: "Illustration of a leaking pipe" },
            { title: "Kitchen Plumbing", description: "Faucets, sinks, garbage disposals, and drain issues handled by experts.", imageSrc: "https://img.b2bpic.net/free-photo/household-repair-middle-aged-man-inspecting-pipe-touching-hand-sink-stylish-modern-kitchen_259150-58265.jpg?_wi=2", imageAlt: "Illustration of a kitchen sink and faucet" },
            { title: "Bathroom Plumbing", description: "Showers, valves, toilets, and full support for bathroom remodels.", imageSrc: "https://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990698.jpg?_wi=2", imageAlt: "Illustration of a showerhead and toilet" },
            { title: "Water Line & Appliance Hookups", description: "Fridge water dispensers, washing machines, and new water lines.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-handsome-male-technician-doing-work-report-broken-fridge-home-kitchen_662251-2719.jpg", imageAlt: "Illustration of a water line connection" },
            { title: "Drain Clearing", description: "Stubborn kitchen drains and clogs are no match for our professional tools.", imageSrc: "https://img.b2bpic.net/free-photo/top-view-plumber-checking-kitchen-fixtures_1098-17864.jpg", imageAlt: "Illustration of a clogged drain" },
            { title: "Water Quality Upgrades", description: "Improve your water with water softeners and filtration system installations.", imageSrc: "https://img.b2bpic.net/free-photo/water-filter-with-blue-cap-blue-background_185193-165389.jpg", imageAlt: "Illustration of a water filtration system" },
            { title: "Recirculating Pumps", description: "Comfort upgrades for faster hot water, saving you time and water.", imageSrc: "https://img.b2bpic.net/free-photo/view-plumber-working-fix-problems_23-2150990693.jpg", imageAlt: "Illustration of a water heater with pump" }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          cardClassName="p-6 md:p-8"
          cardTitleClassName="text-lg font-semibold mt-4 mb-2"
          cardDescriptionClassName="text-sm"
          mediaClassName="h-20 w-20 object-contain mx-auto"
        />
      </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>
  );
}