"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import SplitAbout from '@/components/sections/about/SplitAbout';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
        <div id="nav" data-section="nav" className="w-full">
          <NavbarStyleFullscreen
            navItems={[
              { name: "Services", id: "#services" },
              { name: "Why Us", id: "#why-us" },
              { name: "Promise", id: "#promise" },
              { name: "Blog", id: "/blog" },
              { name: "Shop", id: "/shop" },
              { name: "Contact", id: "#contact" },
            ]}
            brandName="Johns Plumbing"
          />
        </div>

        <div id="hero" data-section="hero" className="w-full">
          <HeroSplitKpi
            title="Johns Plumbing"
            description="We show up on time, diagnose the issue immediately, and fix it fast. Clean, professional, and 5-star rated."
            background={{ variant: "plain" }}
            kpis={[
              { value: "5-Star", label: "Service Rating" },
              { value: "On-Time", label: "Arrival" },
              { value: "Done Right", label: "First Time" },
            ]}
            enableKpiAnimation={false}
            buttons={[
              { text: "Book Service", href: "#contact" },
              { text: "Call Now", href: "tel:(Your Phone Number)" },
            ]}
            imageSrc="https://img.b2bpic.net/free-photo/man-kneeling-down-touching-sink-inspecting-pipes_259150-58251.jpg"
            imageAlt="Professional plumber at work"
            mediaAnimation="opacity"
            ariaLabel="Johns Plumbing Hero Section"
            imagePosition="right"
            tag="Luxury-Level Service. Fast. Professional. Done Right the First Time."
            buttonAnimation="expand-hover"
          />
        </div>

        <div id="testimonials" data-section="testimonials" className="w-full">
          <TestimonialCardSixteen
            title="5-Star Service Every Time"
            description="“Eisa and Almond were awesome! They arrived promptly on time and diagnosed the issue immediately. So nice and professional! Will definitely use them again. Bravo John’s Plumbing for delivering such great service!”"
            testimonials={[
              {
                id: "1",                name: "Eisa and Almond (Customer)",                role: "Happy Homeowner",                company: "Satisfied Customer",                rating: 5,
                imageSrc: "https://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-standing-with-arms-crossed-with-confident-smile-isolated-orange-wall_141793-14478.jpg",                imageAlt: "Eisa and Almond, happy customers"
              },
            ]}
            kpiItems={[
              { value: "5", label: "Star Rating" },
              { value: "Professional", label: "Technicians" },
              { value: "Fast", label: "Service" },
            ]}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            ariaLabel="Customer Testimonials"
          />
        </div>

        <div id="services" data-section="services" className="w-full">
          <FeatureCardThree
            title="Premium Plumbing Services"
            description="Precision. Professionalism. Speed."
            features={[
              {
                id: "01",                title: "Repairs",                description: "Fast diagnosis and expert repairs for leaks, clogs, broken pipes, and fixtures. We fix it right the first time.",                imageSrc: "https://img.b2bpic.net/free-photo/female-plumber-working-fix-problems-client-s-house_23-2150990725.jpg",                imageAlt: "Plumbing repair tools"
              },
              {
                id: "02",                title: "Installations",                description: "High-end fixture installs done cleanly and professionally. Faucets, water heaters, toilets, and more.",                imageSrc: "https://img.b2bpic.net/free-photo/man-white-terry-bathrobe-filling-bathtub-with-water_259150-59739.jpg",                imageAlt: "New faucet installation"
              },
              {
                id: "03",                title: "Emergency Service",                description: "When something goes wrong, we move fast. Quick response. Immediate solutions.",                imageSrc: "https://img.b2bpic.net/free-photo/male-worker-operating-machinery-factory_107420-96043.jpg",                imageAlt: "Emergency plumbing service"
              },
            ]}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            gridVariant="three-columns-all-equal-width"
            ariaLabel="Our Services"
          />
        </div>

        <div id="why-us" data-section="why-us" className="w-full">
          <SplitAbout
            title="Why Homeowners Choose Johns"
            description="We pride ourselves on an exceptional customer experience. From the moment you call to the completion of service, expect nothing but the best."
            bulletPoints={[
              { title: "On-time arrival", description: "Your time is valuable, so we guarantee punctual service." },
              { title: "Immediate diagnosis", description: "Our experts quickly identify issues to provide rapid solutions." },
              { title: "Friendly, professional technicians", description: "Our team treats your home with respect and courtesy." },
              { title: "Transparent pricing", description: "No hidden fees, just clear and upfront costs before any work begins." },
              { title: "Clean uniforms and shoe covers", description: "We ensure a tidy workspace and protect your home." },
              { title: "5-star customer satisfaction", description: "Our commitment to excellence ensures you're always happy with our service." },
            ]}
            mediaAnimation="opacity"
            textboxLayout="default"
            useInvertedBackground={false}
            imageSrc="https://img.b2bpic.net/free-photo/happy-mechanic-greeting-with-his-african-american-coworker-auto-repair-shop_637285-11601.jpg"
            imageAlt="Friendly plumber smiling"
            imagePosition="left"
            ariaLabel="Why Choose Johns Plumbing"
          />
        </div>

        <div id="promise" data-section="promise" className="w-full">
          <SplitAbout
            title="Our Service Promise"
            description="We treat your home with respect. Clean uniforms. Clear communication. Protective shoe covers. And when we leave, the only thing that’s different is your problem is solved. No mess. No stress. No surprises."
            bulletPoints={[
              { title: "Clean uniforms", description: "Our technicians always arrive in clean, professional attire." },
              { title: "Clear communication", description: "We keep you informed every step of the way." },
              { title: "Protective shoe covers", description: "We protect your floors from dirt and damage." },
              { title: "No mess", description: "We leave your home as clean as we found it." },
              { title: "No stress", description: "Enjoy peace of mind with our reliable service." },
              { title: "No surprises", description: "Transparent pricing means no unexpected costs." },
            ]}
            mediaAnimation="opacity"
            textboxLayout="default"
            useInvertedBackground={false}
            imageSrc="https://img.b2bpic.net/free-photo/cheerful-asian-plumber-sitting-floor-repairing-kitchen-sink_1098-17780.jpg"
            imageAlt="Plumbing tools with shoe covers"
            imagePosition="right"
            ariaLabel="Our Service Promise"
          />
        </div>

        <div id="contact" data-section="contact" className="w-full">
          <ContactCTA
            tag="Book Today"
            title="Experience 5-Star Plumbing"
            description="Book today and see why customers say, “Bravo Johns.”"
            buttons={[{ text: "Schedule Your Service Now", href: "#contact" }]}
            background={{ variant: "plain" }}
            useInvertedBackground={false}
            buttonAnimation="expand-hover"
            ariaLabel="Call to Action for Booking Service"
            className="bg-background-accent"
          />
        </div>

        <div id="faq" data-section="faq" className="w-full">
          <FaqSplitMedia
            title="Frequently Asked Questions"
            description="Find answers to common questions about our services."
            faqs={[
              { id: "1", title: "Do you offer emergency service?", content: "Yes. We respond quickly when urgent plumbing issues happen." },
              { id: "2", title: "Do you provide upfront pricing?", content: "Yes. We believe in clear, transparent pricing before work begins." },
              { id: "3", title: "Are your technicians professional?", content: "Absolutely. Clean uniforms, respectful communication, and top-tier service." },
            ]}
            imageSrc="https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990690.jpg"
            imageAlt="Plumber assisting a customer"
            mediaAnimation="opacity"
            faqsAnimation="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            ariaLabel="Frequently Asked Questions Section"
          />
        </div>

        <div id="footer" data-section="footer" className="w-full">
          <FooterLogoEmphasis
            logoText="Johns Plumbing"
            columns={[
              {
                items: [
                  { label: "Services", href: "#services" },
                  { label: "Why Johns", href: "#why-us" },
                  { label: "Our Promise", href: "#promise" },
                ],
              },
              {
                items: [
                  { label: "FAQ", href: "#faq" },
                  { label: "Book Service", href: "#contact" },
                  { label: "Call Now", href: "tel:(Your Phone Number)" },
                ],
              },
              {
                items: [
                  { label: "Email Us", href: "mailto:(Your Email)" },
                  { label: "Licensed & Insured", href: "#" },
                ],
              },
            ]}
            ariaLabel="Site Footer - Johns Plumbing"
            className="mt-auto"
          />
        </div>
    </ThemeProvider>
  );
}
