"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeMediumTitles"
      background="animatedGrid"
      cardStyle="glass-elevated"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        {/* NavbarStyleMinimal - Component registry is empty, using placeholder */}
        <div className="w-full bg-white/95 backdrop-blur-sm border-b border-gray-200">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center py-4">
              <div className="text-2xl font-bold text-gray-900">CleanPro</div>
              <a 
                href="#contact"
                className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
              >
                Book Now
              </a>
            </div>
          </div>
        </div>
      </div>

      <div id="hero" data-section="hero">
        {/* HeroBillboardGallery - Component registry is empty, using placeholder */}
        <div className="relative bg-gradient-to-r from-blue-600 to-purple-700 text-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <div className="text-center">
              <div className="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full mb-6">
                <span className="text-sm font-medium">Quality Cleaning</span>
              </div>
              <h1 className="text-4xl md:text-6xl font-bold mb-6">
                Professional Cleaning Services
              </h1>
              <p className="text-xl md:text-2xl mb-8 opacity-90">
                Keep your home and office spotless. Expert cleaning team ready to serve you with trusted, reliable service.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <a 
                  href="#contact"
                  className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
                >
                  Get Started
                </a>
                <a 
                  href="#services"
                  className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white/10 transition-colors"
                >
                  Learn More
                </a>
              </div>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mt-16">
              <img 
                src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=800&q=80"
                alt="Professional cleaning service in action"
                className="w-full h-32 object-cover rounded-lg"
              />
              <img 
                src="https://images.unsplash.com/photo-1584622181563-430f63602d4b?w=800&q=80"
                alt="Office cleaning and sanitization"
                className="w-full h-32 object-cover rounded-lg"
              />
              <img 
                src="https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=800&q=80"
                alt="Residential home cleaning"
                className="w-full h-32 object-cover rounded-lg"
              />
              <img 
                src="https://images.unsplash.com/photo-1563453392212-d0a3fb1ce05b?w=800&q=80"
                alt="Professional cleaning staff"
                className="w-full h-32 object-cover rounded-lg"
              />
              <img 
                src="https://images.unsplash.com/photo-1599697176038-2dd3e01c6aca?w=800&q=80"
                alt="Deep cleaning service"
                className="w-full h-32 object-cover rounded-lg"
              />
            </div>
          </div>
        </div>
      </div>

      <div id="about" data-section="about">
        {/* TagMediaSplitAbout - Component registry is empty, using placeholder */}
        <div className="bg-gray-50 py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <div>
                <div className="inline-flex items-center px-4 py-2 bg-blue-100 text-blue-600 rounded-full mb-6">
                  <span className="text-sm font-medium">Our Story</span>
                </div>
                <h2 className="text-4xl font-bold text-gray-900 mb-6">
                  About CleanPro
                </h2>
                <p className="text-lg text-gray-600 mb-8">
                  We've been keeping homes and offices clean since 2010. Our commitment is to provide exceptional service with integrity.
                </p>
                <div className="bg-white p-6 rounded-lg shadow-sm">
                  <div className="inline-flex items-center px-3 py-1 bg-green-100 text-green-600 rounded-full mb-4">
                    <span className="text-sm font-medium">WHO WE ARE</span>
                  </div>
                  <h3 className="text-2xl font-semibold text-gray-900 mb-4">
                    Trusted cleaning experts for over a decade
                  </h3>
                  <p className="text-gray-600 mb-6">
                    CleanPro is dedicated to delivering superior cleaning solutions. We combine professional expertise with environmentally friendly practices to ensure your spaces are not just clean, but healthy.
                  </p>
                  <a 
                    href="#contact"
                    className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors inline-block"
                  >
                    Our Values
                  </a>
                </div>
              </div>
              <div>
                <img 
                  src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&q=80"
                  alt="Professional cleaning team"
                  className="w-full h-auto rounded-lg shadow-lg"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="services" data-section="services">
        {/* FeatureCardThirteen - Component registry is empty, using placeholder */}
        <div className="bg-white py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <div className="inline-flex items-center px-4 py-2 bg-blue-100 text-blue-600 rounded-full mb-6">
                <span className="text-sm font-medium">Services</span>
              </div>
              <h2 className="text-4xl font-bold text-gray-900 mb-6">
                Our Cleaning Services
              </h2>
              <p className="text-lg text-gray-600">
                Comprehensive solutions for every cleaning need
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-gray-50 rounded-lg overflow-hidden">
                <img 
                  src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=800&q=80"
                  alt="Residential home cleaning"
                  className="w-full h-48 object-cover"
                />
                <div className="p-6">
                  <div className="text-sm font-medium text-blue-600 mb-2">01</div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-3">
                    Residential Cleaning
                  </h3>
                  <p className="text-gray-600">
                    Regular maintenance cleaning for homes. Weekly, bi-weekly, or monthly schedules tailored to your needs.
                  </p>
                </div>
              </div>
              <div className="bg-gray-50 rounded-lg overflow-hidden">
                <img 
                  src="https://images.unsplash.com/photo-1584622181563-430f63602d4b?w=800&q=80"
                  alt="Commercial office cleaning"
                  className="w-full h-48 object-cover"
                />
                <div className="p-6">
                  <div className="text-sm font-medium text-blue-600 mb-2">02</div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-3">
                    Commercial Cleaning
                  </h3>
                  <p className="text-gray-600">
                    Professional office and workplace cleaning. Scheduled services to keep your business environment pristine.
                  </p>
                </div>
              </div>
              <div className="bg-gray-50 rounded-lg overflow-hidden">
                <img 
                  src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=800&q=80"
                  alt="Carpet and upholstery cleaning"
                  className="w-full h-48 object-cover"
                />
                <div className="p-6">
                  <div className="text-sm font-medium text-blue-600 mb-2">03</div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-3">
                    Carpet Cleaning
                  </h3>
                  <p className="text-gray-600">
                    Intensive cleaning services for carpets, upholstery, and hard-to-reach areas. Complete sanitization included.
                  </p>
                </div>
              </div>
              <div className="bg-gray-50 rounded-lg overflow-hidden">
                <img 
                  src="https://images.unsplash.com/photo-1599697176038-2dd3e01c6aca?w=800&q=80"
                  alt="Move-in move-out cleaning service"
                  className="w-full h-48 object-cover"
                />
                <div className="p-6">
                  <div className="text-sm font-medium text-blue-600 mb-2">04</div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-3">
                    Move-in/Move-out
                  </h3>
                  <p className="text-gray-600">
                    Full cleaning service for new homes or offices. Perfect for transitions with meticulous attention to detail.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="metrics" data-section="metrics">
        {/* MetricCardEight - Component registry is empty, using placeholder */}
        <div className="bg-blue-600 text-white py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-4xl font-bold mb-8">
                  Trusted by homeowners and businesses throughout the region
                </h2>
                <div className="grid grid-cols-2 gap-6">
                  <div className="text-center">
                    <div className="text-4xl font-bold mb-2">14+</div>
                    <div className="text-blue-200">Years in business</div>
                  </div>
                  <div className="text-center">
                    <div className="text-4xl font-bold mb-2">5000+</div>
                    <div className="text-blue-200">Satisfied customers</div>
                  </div>
                  <div className="text-center">
                    <div className="text-4xl font-bold mb-2">100%</div>
                    <div className="text-blue-200">Quality guarantee</div>
                  </div>
                  <div className="text-center">
                    <div className="text-4xl font-bold mb-2">24/7</div>
                    <div className="text-blue-200">Customer support</div>
                  </div>
                </div>
              </div>
              <div>
                <img 
                  src="https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=800&q=80"
                  alt="Professional cleaning results"
                  className="w-full h-auto rounded-lg"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="testimonials" data-section="testimonials">
        {/* TestimonialCardEleven - Component registry is empty, using placeholder */}
        <div className="bg-gray-50 py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <div className="inline-flex items-center px-4 py-2 bg-blue-100 text-blue-600 rounded-full mb-6">
                <span className="text-sm font-medium">Testimonials</span>
              </div>
              <h2 className="text-4xl font-bold text-gray-900 mb-6">
                What Our Clients Say
              </h2>
              <p className="text-lg text-gray-600">
                Real feedback from satisfied customers
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-white p-6 rounded-lg shadow-sm">
                <div className="flex items-center mb-4">
                  <img 
                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&q=80"
                    alt="Sarah Johnson"
                    className="w-12 h-12 rounded-full object-cover mr-4"
                  />
                  <div>
                    <div className="font-semibold text-gray-900">Sarah Johnson, Homeowner</div>
                  </div>
                </div>
                <p className="text-gray-600">
                  "CleanPro transformed our home. The team is professional, punctual, and thorough. We couldn't be happier with the results."
                </p>
              </div>
              <div className="bg-white p-6 rounded-lg shadow-sm">
                <div className="flex items-center mb-4">
                  <img 
                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80"
                    alt="Michael Chen"
                    className="w-12 h-12 rounded-full object-cover mr-4"
                  />
                  <div>
                    <div className="font-semibold text-gray-900">Michael Chen, Office Manager</div>
                  </div>
                </div>
                <p className="text-gray-600">
                  "We switched to CleanPro for our office and have seen a significant improvement. Our employees feel better in a clean workspace."
                </p>
              </div>
              <div className="bg-white p-6 rounded-lg shadow-sm">
                <div className="flex items-center mb-4">
                  <img 
                    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&q=80"
                    alt="Emily Rodriguez"
                    className="w-12 h-12 rounded-full object-cover mr-4"
                  />
                  <div>
                    <div className="font-semibold text-gray-900">Emily Rodriguez, Business Owner</div>
                  </div>
                </div>
                <p className="text-gray-600">
                  "Outstanding service from start to finish. The attention to detail is remarkable. Highly recommend for any cleaning needs."
                </p>
              </div>
              <div className="bg-white p-6 rounded-lg shadow-sm">
                <div className="flex items-center mb-4">
                  <img 
                    src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&q=80"
                    alt="David Kim"
                    className="w-12 h-12 rounded-full object-cover mr-4"
                  />
                  <div>
                    <div className="font-semibold text-gray-900">David Kim, Resident</div>
                  </div>
                </div>
                <p className="text-gray-600">
                  "Best cleaning service in town. They handle everything with care. Our home has never looked better."
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="contact" data-section="contact">
        {/* ContactText - Component registry is empty, using placeholder */}
        <div className="bg-blue-600 text-white py-20">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 className="text-4xl font-bold mb-8">
              Ready to experience professional cleaning? Book your service today and join thousands of satisfied customers.
            </h2>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <a 
                href="mailto:info@cleanpro.com"
                className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
              >
                Book Cleaning Service
              </a>
              <a 
                href="tel:+1234567890"
                className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white/10 transition-colors"
              >
                Call Us
              </a>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        {/* FooterSocial - Component registry is empty, using placeholder */}
        <div className="bg-gray-900 text-white py-16">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div>
                <div className="text-2xl font-bold mb-4">CleanPro</div>
              </div>
              <div>
                <h3 className="font-semibold mb-4">Company</h3>
                <ul className="space-y-2">
                  <li><a href="#about" className="text-gray-400 hover:text-white">About Us</a></li>
                  <li><a href="#services" className="text-gray-400 hover:text-white">Services</a></li>
                  <li><a href="#careers" className="text-gray-400 hover:text-white">Careers</a></li>
                </ul>
              </div>
              <div>
                <h3 className="font-semibold mb-4">Services</h3>
                <ul className="space-y-2">
                  <li><a href="#services" className="text-gray-400 hover:text-white">Residential Cleaning</a></li>
                  <li><a href="#services" className="text-gray-400 hover:text-white">Commercial Cleaning</a></li>
                  <li><a href="#services" className="text-gray-400 hover:text-white">Deep Cleaning</a></li>
                </ul>
              </div>
              <div>
                <h3 className="font-semibold mb-4">Contact</h3>
                <ul className="space-y-2">
                  <li><a href="tel:+1234567890" className="text-gray-400 hover:text-white">Phone</a></li>
                  <li><a href="mailto:info@cleanpro.com" className="text-gray-400 hover:text-white">Email</a></li>
                  <li><a href="#contact" className="text-gray-400 hover:text-white">Get Quote</a></li>
                </ul>
              </div>
            </div>
            <div className="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
              <div className="text-gray-400 mb-4 md:mb-0">
                © CleanPro, 2025. All rights reserved.
              </div>
              <div className="flex space-x-4">
                <a href="https://facebook.com" className="text-gray-400 hover:text-white" aria-label="Facebook">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                  </svg>
                </a>
                <a href="https://instagram.com" className="text-gray-400 hover:text-white" aria-label="Instagram">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987 6.62 0 11.987-5.367 11.987-11.987C24.014 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.251 14.794 3.762 13.643 3.762 12.346c0-1.297.49-2.448 1.297-3.323.875-.807 2.026-1.297 3.323-1.297 1.297 0 2.448.49 3.323 1.297.807.875 1.297 2.026 1.297 3.323 0 1.297-.49 2.448-1.297 3.323-.875.875-2.026 1.365-3.323 1.365zm7.718-9.75c-.368 0-.665-.297-.665-.665s.297-.665.665-.665.665.297.665.665-.297.665-.665.665zm-3.84 9.294c-.48 0-.96-.183-1.325-.549-.365-.365-.549-.845-.549-1.325s.183-.96.549-1.325c.365-.365.845-.549 1.325-.549s.96.183 1.325.549c.365.365.549.845.549 1.325s-.183.96-.549 1.325c-.365.366-.845.549-1.325.549z"/>
                  </svg>
                </a>
                <a href="https://twitter.com" className="text-gray-400 hover:text-white" aria-label="Twitter">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}