"use client"

import { CheckCircle, ShieldCheck, Sparkles, Star } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="large"
      background="blurBottom"
      cardStyle="inset"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={[
            { name: "Hero", id: "hero-section" },
            { name: "About", id: "about-section" },
            { name: "Feature", id: "features-section" },
            { name: "Metric", id: "metrics-section" },
            { name: "Testimonial", id: "testimonials-section" },
            { name: "Faq", id: "faq-section" },
            { name: "Contact", id: "contact-section" }
          ]}
          brandName="24/7 Emergency Plumber"
          button={{
            text: "Get Free Quote",            href: "#contact-section"
          }}
        />
      </div>

      <div id="hero-section" data-section="hero-section">
        <HeroOverlay
          title="24/7 Emergency Plumbing Services You Can Trust"
          description="Fast, reliable plumbing solutions for homes and businesses. Our licensed plumbers are ready to respond within 30 minutes of your call."
          tag="Licensed & Insured"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          buttons={[
            { text: "Get Emergency Help Now", href: "#contact-section" },
            { text: "View Our Services", href: "#features-section" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://img.b2bpic.net/free-photo/household-repair-middle-aged-man-inspecting-pipe-touching-hand-sink-stylish-modern-kitchen_259150-58265.jpg"
          imageAlt="Plumber responding to emergency call"
          textPosition="bottom-left"
          showDimOverlay={true}
          showBlur={true}
          ariaLabel="Emergency plumbing services hero section"
        />
      </div>

      <div id="about-section" data-section="about-section">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Reliable 24/7 Emergency Plumbing Services You Can Trust" },
            { type: "image", src: "https://img.b2bpic.net/free-photo/portrait-handsome-male-technician-doing-work-report-broken-fridge-home-kitchen_662251-2719.jpg", alt: "Plumber responding to emergency call" },
            { type: "text", content: "Our team is always ready to help when you need us most. With over 15 years of experience, we provide fast, professional solutions for all your plumbing emergencies." }
          ]}
          buttons={[
            { text: "Call Now for Emergency Service", href: "#contact-section" },
            { text: "View Our Services", href: "#features-section" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="About our emergency plumbing services"
        />
      </div>

      <div id="features-section" data-section="features-section">
        <FeatureCardTwentyOne
          title="Reliable 24/7 Emergency Plumbing Services"
          description="Our expert plumbers are available around the clock to handle all your urgent plumbing needs. From burst pipes to leaking faucets, we provide fast, professional solutions with guaranteed satisfaction."
          tag="Trusted & Reliable"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book Now", href: "#contact-section" }
          ]}
          buttonAnimation="slide-up"
          accordionItems={[
            {
              id: "service-1",              title: "24/7 Emergency Response",              content: "We respond to emergency calls within 30 minutes of your request, ensuring you never face plumbing issues alone."
            },
            {
              id: "service-2",              title: "Expert Plumbers",              content: "All our technicians are certified professionals with years of experience in residential and commercial plumbing."
            },
            {
              id: "service-3",              title: "Guaranteed Satisfaction",              content: "If you're not satisfied with our service, we'll make it right. Your peace of mind is our priority."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/tools-repairing-shop_23-2148138424.jpg"
          imageAlt="Plumber working on a pipe in a residential setting"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          mediaPosition="right"
          ariaLabel="Emergency plumbing services features"
        />
      </div>

      <div id="metrics-section" data-section="metrics-section">
        <MetricCardTwo
          metrics={[
            { id: "metric-1", value: "24/7", description: "Emergency Service Availability" },
            { id: "metric-2", value: "< 30 min", description: "Average Response Time" },
            { id: "metric-3", value: "1000+", description: "Happy Customers Served" },
            { id: "metric-4", value: "10 yrs", description: "Industry Experience" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          title="Why Choose Our Emergency Plumbing Services?"
          description="We're committed to providing fast, reliable, and professional plumbing solutions around the clock."
          textboxLayout="inline-image"
          useInvertedBackground={false}
          buttons={[
            { text: "Book Now", href: "#contact-section" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials-section" data-section="testimonials-section">
        <TestimonialCardSix
          testimonials={[
            {
              id: "testimonial-1",              name: "Sarah Johnson",              handle: "@sarahj",              testimonial: "The plumber arrived within 30 minutes and fixed my leaky faucet instantly. Highly recommend their 24/7 service!",              imageSrc: "https://img.b2bpic.net/free-photo/happy-mechanic-greeting-with-his-african-american-coworker-auto-repair-shop_637285-11601.jpg?_wi=1",              imageAlt: "Sarah Johnson, satisfied customer",              icon: Star
            },
            {
              id: "testimonial-2",              name: "Michael Torres",              handle: "@michaelt",              testimonial: "Emergency toilet clog at 2 AM? No problem! They were here in under an hour and solved it quickly.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-auto-repairman-handshaking-with-customer-workshop_637285-8634.jpg?_wi=1",              imageAlt: "Michael Torres, happy client",              icon: Star
            },
            {
              id: "testimonial-3",              name: "Emily Chen",              handle: "@emilyc",              testimonial: "Professional, reliable, and affordable. My business has been using them for over a year now.",              imageSrc: "https://img.b2bpic.net/free-photo/father-daughter-kitchen-fathers-day_23-2148100496.jpg?_wi=1",              imageAlt: "Emily Chen, business owner",              icon: Star
            },
            {
              id: "testimonial-4",              name: "David Wilson",              handle: "@davidw",              testimonial: "Quick response time and fair pricing. They fixed our burst pipe in no time!",              imageSrc: "https://img.b2bpic.net/free-photo/happy-mechanic-greeting-with-his-african-american-coworker-auto-repair-shop_637285-11601.jpg?_wi=2",              imageAlt: "David Wilson, homeowner",              icon: Star
            },
            {
              id: "testimonial-5",              name: "Lisa Martinez",              handle: "@lisam",              testimonial: "Excellent service! The technician was professional and solved our drainage problem immediately.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-auto-repairman-handshaking-with-customer-workshop_637285-8634.jpg?_wi=2",              imageAlt: "Lisa Martinez, satisfied customer",              icon: Star
            },
            {
              id: "testimonial-6",              name: "Robert Kim",              handle: "@robertk",              testimonial: "Called at midnight with a water heater emergency. They came right over and fixed it perfectly.",              imageSrc: "https://img.b2bpic.net/free-photo/father-daughter-kitchen-fathers-day_23-2148100496.jpg?_wi=2",              imageAlt: "Robert Kim, emergency client",              icon: Star
            }
          ]}
          animationType="slide-up"
          title="What Our Customers Say"
          description="Don't just take our word for it — hear from homeowners and businesses who've experienced our emergency plumbing services firsthand."
          textboxLayout="inline-image"
          useInvertedBackground={false}
          tag="Trusted by Thousands"
          tagIcon={ShieldCheck}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "View All Reviews", href: "#reviews" }
          ]}
          buttonAnimation="opacity"
          speed={40}
          topMarqueeDirection="left"
          ariaLabel="Customer testimonials section"
        />
      </div>

      <div id="faq-section" data-section="faq-section">
        <FaqBase
          title="Everything You Need to Know"
          description="Got questions about our emergency plumbing services? We've got answers. Our 24/7 support team is here to help you with any plumbing concerns."
          faqs={[
            {
              id: "faq-1",              title: "How quickly can you respond to an emergency?",              content: "We guarantee a response within 30 minutes of your call. Our team is available 24/7 to handle all your urgent plumbing needs."
            },
            {
              id: "faq-2",              title: "Do you offer same-day service?",              content: "Yes, we provide same-day service for most emergency plumbing issues. Our experienced plumbers are ready to assist you whenever you need them."
            },
            {
              id: "faq-3",              title: "What areas do you serve?",              content: "We serve the entire metropolitan area including residential neighborhoods, commercial buildings, and industrial facilities. Contact us for specific location details."
            },
            {
              id: "faq-4",              title: "Are your plumbers licensed and insured?",              content: "Absolutely. All our plumbers are fully licensed, insured, and certified. We maintain the highest standards of professionalism and safety."
            },
            {
              id: "faq-5",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, debit cards, cash, and checks. We also offer financing options for larger projects."
            }
          ]}
          faqsAnimation="slide-up"
          textboxLayout="inline-image"
          useInvertedBackground={false}
          tag="Emergency Plumbing Experts"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Contact Us Now", href: "#contact-section" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact-section" data-section="contact-section">
        <ContactText
          text="Need emergency plumbing help? Our team is available 24/7 to resolve your issues quickly and efficiently. Call us now or fill out the form below for immediate assistance."
          animationType="entrance-slide"
          buttons={[
            { text: "Call Now", href: "tel:+1800PLUMBING" },
            { text: "Get Quote", href: "#faq-section" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          ariaLabel="Contact section"
        />
      </div>

      <div id="footer-section" data-section="footer-section">
        <FooterLogoReveal
          logoText="Reliable Plumbers"
          leftLink={{ text: "Home", href: "#hero-section" }}
          rightLink={{ text: "Contact Us", href: "#contact-section" }}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}