"use client";

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';

export default function LandingPage() {
  const handleSubmitContactForm = (data) => {
    console.log('Contact form submitted:', data);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="noise"
      cardStyle="glass-depth"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Plumber's Crack"
          navItems={[
            { name: 'Services', id: 'services' },
            { name: 'About Us', id: 'about' },
            { name: 'Testimonials', id: 'testimonials' },
            { name: 'FAQ', id: 'faq' },
            { name: 'Contact', id: 'contact' }
          ]}
          bottomLeftText="Your Local Plumbing Experts"
          bottomRightText="Call Now: (123) 456-7890"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Plumber's Crack: Your Trusted Local Plumbers"
          description="Expert plumbing solutions for every leak, clog, and installation. We're here to help you keep things flowing smoothly."
          background={{ variant: 'downward-rays-static' }}
          avatars={[
            { src: 'https://pixabay.com/get/g5950dcb219c8b4a2b6b589b14fef158cb2e552a8658a4991497b7a7d34de7ad7ce76cc0d9b2d51e3eb676d43d238af7370290a1174a61eb001e104c78720a8be_1280.jpg', alt: 'professional man portrait smiling' },
            { src: 'https://pixabay.com/get/g10f8df2d0e080d20c3f4af21c8cb3386983e2726083ecffa858fe7440b0cb7abf54d5415f30826ad6f30080de7bc858651196482518d75991fcebdfae00b5e9a_1280.jpg', alt: 'professional woman portrait smiling' },
            { src: 'https://pixabay.com/get/g933fe94dbaac8a54a8ead31b90e1437b6c475f1558463818f7177b584fa2401b8ec10cdf6c43784acad9612d25ca8145e999a97c4e3c20f0004c8654daa226b5_1280.jpg', alt: 'diverse person portrait smiling' },
            { src: 'https://pixabay.com/get/gc71bdfae90dc916f3cf914464dec4f35523f0d6054bc7a4e9d51b74be644242185024056b76110b991de423ef75ab27c25760bfba377b1459bf9ec0ad45300a3_1280.jpg', alt: 'experienced worker portrait' }
          ]}
          avatarText="Trusted by 1000+ happy homes"
          buttons={[
            { text: 'Get a Free Quote', href: '#contact' },
            { text: 'Our Services', href: '#services' }
          ]}
          buttonAnimation="opacity"
          mediaAnimation="none"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="About Plumber's Crack"
          description="With years of experience serving the community, Plumber's Crack is dedicated to providing reliable, high-quality plumbing services. We pride ourselves on transparent pricing, timely service, and a friendly, professional approach to every job, big or small."
          bulletPoints={[
            { title: 'Experienced Professionals', description: 'Our team consists of licensed and highly skilled plumbers.' },
            { title: '24/7 Emergency Service', description: 'We\'re available around the clock for urgent plumbing issues.' },
            { title: 'Customer Satisfaction', description: 'Your peace of mind is our top priority.' }
          ]}
          imageSrc="https://pixabay.com/get/g1b190c8c3c245a1c9d053cdb11efdf7dbba3717c1218f5eea816929b41fea71c556b7138f2059963f190234e360368179bf872434ef9d340f5a341c511196b93_1280.jpg"
          imageAlt="plumbing pipes installation"
          mediaAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyFour
          title="Our Expert Plumbing Services"
          description="From leaky faucets to full system installations, our certified plumbers handle it all with precision and care."
          features={[
            { id: '1', title: 'Drain Cleaning & Unclogging', author: 'Expert Service', description: 'Fast and effective solutions for stubborn clogs and slow drains to restore proper flow.', tags: ['Emergency', 'Residential'], imageSrc: 'https://pixabay.com/get/g9f080145f171b60bd2227ab7f3cd5e9021ca6635b66408f0b4496995dcc5a1792adaccf0e7eb83bfc8d2a984eaac368af47d27b23e0b6f6ecc9cc879cd212a84_1280.jpg', imageAlt: 'clogged drain cleaning service' },
            { id: '2', title: 'Leak Detection & Repair', author: 'Precision Work', description: 'Advanced techniques to pinpoint and fix leaks, preventing costly water damage and waste.', tags: ['Water Conservation', 'Residential'], imageSrc: 'https://pixabay.com/get/g601432658ac8a8e1107ace7cf9b02a51f2c631c4243fb2072d36d3b48246a835d19e11cd16603b5b8e913cb0550d3223537f57b593745f8e2842572321c18dad_1280.jpg', imageAlt: 'water leak repair faucet' },
            { id: '3', title: 'Water Heater Services', author: 'Reliable Hot Water', description: 'Installation, repair, and maintenance for all types of water heaters, ensuring comfort.', tags: ['Installation', 'Maintenance'], imageSrc: 'https://pixabay.com/get/g7624591c2712eb1fb8b36b8f3f5cd1741c28ac65b4ec9e62586a60df8e217694ee70a28913d3bf8219f958258447ca1775a09619686877bb145fcbd25eb5a32d_1280.jpg', imageAlt: 'hot water heater installation' }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Why Choose Plumber's Crack"
          description="Our commitment to excellence and customer satisfaction drives everything we do. See the numbers that speak for themselves."
          metrics={[
            { id: '1', value: '98%', title: 'Customer Satisfaction', description: 'Our clients consistently give us top ratings.', imageSrc: 'https://pixabay.com/get/ga7bf1efd5f1c9331e01ecc6853857d5d1e7f064c1ead38053762f15f081ba84ae5c66a6cd0a0109794ef53e9b6a7e784_1280.jpg', imageAlt: 'happy customer feedback' },
            { id: '2', value: '20+', title: 'Years of Experience', description: 'Decades of expertise in all plumbing services.', imageSrc: 'https://pixabay.com/get/gf967631c4b9d447a46a9605728172e86a968a24a6f57919835b860bd89889c621651517c45e5cc6d96381586e29259b41420946243decca18692b7213b399520_1280.jpg', imageAlt: 'experienced plumber at work' },
            { id: '3', value: '24/7', title: 'Emergency Service', description: 'Ready to assist you anytime, day or night.', imageSrc: 'https://pixabay.com/get/g9d41e7db453c0c09c1548b7023340da2693d5405627fb670bb67d6a2cfcee585cf2b7d7002196095604410c75d8b83d5b81583e5d3ff31b86845e328d8f7bcbf_1280.jpg', imageAlt: 'fast plumbing service' }
          ]}
          title="Why Choose Plumber's Crack"
          description="Our commitment to excellence and customer satisfaction drives everything we do. See the numbers that speak for themselves."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Customers Say"
          description="Hear directly from homeowners and businesses who trust Plumber's Crack for their plumbing needs."
          testimonials={[
            { id: '1', name: 'Sarah J.', role: 'Homeowner', company: 'Local Resident', rating: 5, imageSrc: 'https://pixabay.com/get/gb0161d70687d9cab7b87395b809cff3460ad3ceadf38aa38d698434a6945f662980cc95012c03e06ff023f51feae562cd7fe82b2cebd9205226dd0433b21bfef_1280.jpg', imageAlt: 'happy customer woman smiling' },
            { id: '2', name: 'Michael L.', role: 'Restaurant Owner', company: 'Downtown Eatery', rating: 5, imageSrc: 'https://pixabay.com/get/g793e7479f9a3823805dc000ac3be8f9c83fe32d126cd1f522af3438de789ebd96b56e6c55f5f7f716d6c09f4b979a61a1dee881ffc0070c65b2c3bf335faf874_1280.jpg', imageAlt: 'man with thumbs up smiling' },
            { id: '3', name: 'Emily R.', role: 'Property Manager', company: 'Apartment Complex', rating: 5, imageSrc: 'https://pixabay.com/get/g2bd48600139784ee5382ea1247f6270a9d398827b12774e7e32f84ae4038f8c2032c8a018a13c202869bb42b0563cb3aae09fd3307e48c729f2c1d8534c5f173_1280.jpg', imageAlt: 'young woman satisfied customer' },
            { id: '4', name: 'David K.', role: 'Small Business Owner', company: 'Retail Store', rating: 5, imageSrc: 'https://pixabay.com/get/gbf3be5849851ac71892e70e67d0ef97d47f0c0aa5e36895a367c5fab39392a5f44f98e4b5d403d04f30a424aa2f11854b46524c6ff9b8cea211b0bd286b895a2_1280.jpg', imageAlt: 'senior man smiling confidently' }
          ]}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Find answers to common questions about our plumbing services, pricing, and scheduling."
          faqs={[
            { id: '1', title: 'What are your operating hours?', content: 'We offer 24/7 emergency services. For non-emergency appointments, our regular business hours are Monday-Friday, 8 AM - 5 PM.' },
            { id: '2', title: 'Do you offer free estimates?', content: 'Yes, we provide free, no-obligation estimates for all plumbing jobs. Contact us today to schedule yours!' },
            { id: '3', title: 'Are your plumbers licensed and insured?', content: 'Absolutely. All our plumbers are fully licensed, certified, and insured, ensuring professional and reliable service.' },
            { id: '4', title: 'What payment methods do you accept?', content: 'We accept all major credit cards, debit cards, bank transfers, and cash payments for your convenience.' }
          ]}
          faqsAnimation="slide-up"
          textPosition="left"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get In Touch Today"
          description="Ready to solve your plumbing problems? Fill out the form below or give us a call to schedule service or get a free quote."
          inputs={[
            { name: 'name', type: 'text', placeholder: 'Your Name', required: true },
            { name: 'email', type: 'email', placeholder: 'Your Email', required: true },
            { name: 'phone', type: 'tel', placeholder: 'Phone Number', required: false }
          ]}
          textarea={{ name: 'message', placeholder: 'Tell us about your plumbing needs...', rows: 5, required: true }}
          buttonText="Send Message"
          useInvertedBackground={false}
          imageSrc="https://pixabay.com/get/geb175d227c468ea003e78055c106803ebca65c93c4e19cb1c7823d6983f1f5af6243784c2e7298f039941cc859ce2d88155a9a6bb2ecc151afe1217293d5af99_1280.jpg"
          imageAlt="plumber tools background"
          mediaAnimation="slide-up"
          mediaPosition="right"
          onSubmit={handleSubmitContactForm}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            { title: 'Services', items: [{ label: 'Drain Cleaning', href: '#services' }, { label: 'Leak Repair', href: '#services' }, { label: 'Water Heaters', href: '#services' }, { label: 'Emergency Plumbing', href: '#contact' }] },
            { title: 'Company', items: [{ label: 'About Us', href: '#about' }, { label: 'Testimonials', href: '#testimonials' }, { label: 'FAQ', href: '#faq' }, { label: 'Contact', href: '#contact' }] },
            { title: 'Connect', items: [{ label: 'Facebook', href: 'https://facebook.com' }, { label: 'Twitter', href: 'https://twitter.com' }, { label: 'LinkedIn', href: 'https://linkedin.com' }] }
          ]}
          copyrightText="© 2024 Plumber's Crack. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
