import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
import FooterSimpleMedia from '@/components/sections/footer/FooterSimpleMedia';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import NavbarCentered from '@/components/ui/NavbarCentered';
import logoImg from "@/assets/logo.svg";
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
import { Droplets, Flame, Wrench } from "lucide-react";
import { useEffect } from "react";
import { applyRippleEffect } from "@/hooks/useButtonClick";

export default function App() {
  useEffect(() => {
    const buttons = document.querySelectorAll("button");
    buttons.forEach((button) => {
      applyRippleEffect(button);
    });
  }, []);

  return (
    <div className="app-container">
  <div id="nav" data-section="nav">
      <NavbarCentered
      logo={logoImg}
      navItems={[
        {
          name: "Services",
          href: "#services",
        },
        {
          name: "About",
          href: "#about",
        },
        {
          name: "FAQ",
          href: "#faq",
        },
      ]}
      ctaButton={{
        text: "Book Now",
        href: "#contact",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      tag="Trusted Plumbing Services"
      title="Your Local Plumbing Experts"
      description="24/7 emergency plumbing solutions, professional repairs, and expert maintenance for your home or business."
      primaryButton={{
        text: "Schedule Service",
        href: "#contact",
      }}
      secondaryButton={{
        text: "View Our Services",
        href: "#services",
      }}
      items={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721531.jpg",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/couple-fixing-kitchen-sink_53876-146184.jpg",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-car-mechanic-car-repair-shop_23-2150367540.jpg",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/water-tap-prevention-concentrated-man-leaning-water-faucet-touching-spout-pipe_259150-58276.jpg",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/two-builders-work-clothes-thoughtfully-looking-sketch-plan-with-tools-background-workshop_574295-1618.jpg",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990680.jpg",
        },
      ]}
    />
  </div>

  <div id="features-comp" data-section="features-comp">
      <FeaturesComparison
      tag="Why Choose Apex"
      title="The Better Plumbing Choice"
      description="We believe in transparency, quality workmanship, and fair pricing without the hassle."
      negativeItems={[
        "Hidden service fees",
        "Unreliable arrival times",
        "Subpar quality tools",
      ]}
      positiveItems={[
        "Flat-rate transparent pricing",
        "On-time guarantee",
        "Industrial grade equipment",
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <AboutFeaturesSplit
      tag="Our Services"
      title="Professional Plumbing Maintenance"
      description="From emergency leaks to full system renovations, we handle every aspect of home and business plumbing."
      items={[
        {
          icon: Wrench,
          title: "Leak Repair",
          description: "Rapid response to burst pipes and stubborn leaks.",
        },
        {
          icon: Flame,
          title: "Water Heaters",
          description: "Expert installation and service for traditional or tankless heaters.",
        },
        {
          icon: Droplets,
          title: "Drain Cleaning",
          description: "Advanced hydro-jetting to clear the most stubborn blockages.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721542.jpg"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricsSimpleCards
      tag="Proven Results"
      title="Trusted by the Community"
      description="Our numbers speak for themselves when it comes to reliability and satisfaction."
      metrics={[
        {
          value: "15+",
          description: "Years of Excellence",
        },
        {
          value: "5,000+",
          description: "Projects Completed",
        },
        {
          value: "98%",
          description: "Client Satisfaction Rate",
        },
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialRatingCards
      tag="Happy Clients"
      title="Hear From Our Neighbors"
      description="Read what our customers are saying about our professional plumbing services."
      testimonials={[
        {
          name: "John Doe",
          role: "Homeowner",
          quote: "Apex Plumbing arrived on time and fixed my leak fast. Highly recommended!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-waving-hand-outside_23-2149447136.jpg",
        },
        {
          name: "Jane Smith",
          role: "Small Business Owner",
          quote: "Fast service, professional team, and very transparent pricing. Excellent experience.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-with-his-wife-newborn-baby-boy-girl-rocking-chair-kitchen-floor-lovely-young-family-three-morning-playing-spending-time-together-home_176532-15006.jpg",
        },
        {
          name: "Mike Johnson",
          role: "Property Manager",
          quote: "They are our go-to for all residential plumbing issues. Always top tier work.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-blonde-delivery-woman-red-uniform-cap-looking-front-making-fake-smile-isolated-orange-wall-with-copy-space_141793-110347.jpg",
        },
        {
          name: "Sarah Williams",
          role: "Homeowner",
          quote: "The team was polite, efficient, and left the workspace clean. Great job!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151098617.jpg",
        },
        {
          name: "David Brown",
          role: "Restaurant Owner",
          quote: "Reliable and expert advice for our commercial kitchen pipes.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-man-using-tablet-street-cafe_1262-19056.jpg",
        },
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      tag="Need Answers?"
      title="Frequently Asked Questions"
      description="Find quick answers to common plumbing concerns here."
      items={[
        {
          question: "What areas do you serve?",
          answer: "We serve the entire metro area within a 50-mile radius of our downtown office.",
        },
        {
          question: "Do you offer emergency services?",
          answer: "Yes, we are available 24/7 for urgent plumbing emergencies.",
        },
        {
          question: "Are your plumbers insured?",
          answer: "Yes, all our technicians are fully licensed, bonded, and insured.",
        },
        {
          question: "How do I get a quote?",
          answer: "You can contact us via our website form or call our direct service line for a free estimate.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-security-helmet-talking-mobile-phone-with-serious-face-isolated-pink-wall_141793-14180.jpg"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitEmail
      tag="Contact Us"
      title="Need Help? Reach Out Today"
      description="Whether it's a minor repair or a major installation, we're here to help."
      inputPlaceholder="Enter your email address..."
      buttonText="Get a Free Quote"
      termsText="By submitting, you agree to our terms of service."
      imageSrc="http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimpleMedia
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=edzi10"
      brand="Apex Plumbing"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Careers",
              href: "#",
            },
            {
              label: "News",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Help Center",
              href: "#faq",
            },
            {
              label: "Emergency",
              href: "#contact",
            },
            {
              label: "Contact Us",
              href: "#contact",
            },
          ],
        },
      ]}
      copyright="© 2024 Apex Plumbing Services. All rights reserved."
      links={[
        {
          label: "Privacy Policy",
          href: "#",
        },
        {
          label: "Terms of Service",
          href: "#",
        },
      ]}
    />
  </div>
    </div>
  );
}