"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles, Shield, Zap, TrendingUp, Star, HelpCircle, Users, CheckCircle, Award, Leaf } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Cleaning with Care"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Professional Tech Cleaning Excellence"
          description="Specialized cleaning services for computers, servers, and technology equipment. We keep your tech pristine and running at peak performance with eco-friendly solutions and expert care."
          tag="Precision Tech Care"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background="radial-gradient"
          buttons={[
            { text: "Get Started Today", href: "#contact" },
            { text: "Learn More", href: "#services" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/a-professional-tech-cleaning-specialist--1774076711858-3a32c773.png",              imageAlt: "Professional tech cleaning specialist"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/close-up-of-expert-hands-cleaning-a-lapt-1774076713345-54306fd5.png?_wi=1",              imageAlt: "Expert laptop keyboard cleaning"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/server-room-being-professionally-cleaned-1774076711802-62fd7884.png?_wi=1",              imageAlt: "Server room professional cleaning"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/professional-cleaning-technician-expertl-1774076711750-5ea406ea.png?_wi=1",              imageAlt: "Mobile device cleaning service"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/modern-office-with-clean-organized-desk--1774076712099-c7e5b4ce.png?_wi=1",              imageAlt: "Clean modern office workspace"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/before-and-after-style-image-showing-dra-1774076712158-2e895693.png?_wi=1",              imageAlt: "Cleaning transformation results"
            }
          ]}
          mediaAnimation="slide-up"
          ariaLabel="Hero section showcasing tech cleaning services"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Who We Are"
          tagIcon={Shield}
          tagAnimation="slide-up"
          title="Your Trusted Technology Care Partner"
          useInvertedBackground={true}
          buttons={[
            { text: "View Our Services", href: "#services" }
          ]}
          buttonAnimation="slide-up"
          ariaLabel="About Cleaning with Care section"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardNine
          title="Our Professional Cleaning Services"
          description="From laptops to server rooms, we provide specialized cleaning solutions tailored to keep your technology running flawlessly."
          tag="Expert Services"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Computer & Laptop Cleaning",              description: "Deep cleaning of keyboards, screens, fans, and internal components using eco-friendly solutions. Removes dust, debris, and improves cooling efficiency.",              buttons: [
                { text: "Inquire", href: "#contact" }
              ],
              phoneOne: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/close-up-of-expert-hands-cleaning-a-lapt-1774076713345-54306fd5.png?_wi=2"
              },
              phoneTwo: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/modern-office-with-clean-organized-desk--1774076712099-c7e5b4ce.png?_wi=2"
              }
            },
            {
              id: 2,
              title: "Server & Data Center Cleaning",              description: "Professional maintenance of server rooms and data centers. Ensures optimal airflow, prevents overheating, and maintains equipment longevity.",              buttons: [
                { text: "Inquire", href: "#contact" }
              ],
              phoneOne: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/server-room-being-professionally-cleaned-1774076711802-62fd7884.png?_wi=2"
              },
              phoneTwo: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/professional-cleaning-team-in-action-at--1774076712371-c6d87e1c.png"
              }
            },
            {
              id: 3,
              title: "Mobile Device Sanitization",              description: "Expert cleaning and sanitization of smartphones and tablets. Removes bacteria, grime, and extends device lifespan with gentle care.",              buttons: [
                { text: "Inquire", href: "#contact" }
              ],
              phoneOne: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/professional-cleaning-technician-expertl-1774076711750-5ea406ea.png?_wi=2"
              },
              phoneTwo: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/before-and-after-style-image-showing-dra-1774076712158-2e895693.png?_wi=2"
              }
            }
          ]}
          showStepNumbers={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Professional cleaning services section"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Why Choose Cleaning with Care"
          description="Our track record speaks volumes about our commitment to excellence and customer satisfaction."
          tag="By The Numbers"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            { id: "1", icon: Users, title: "Satisfied Clients", value: "500+" },
            { id: "2", icon: CheckCircle, title: "Projects Completed", value: "2,000+" },
            { id: "3", icon: Award, title: "Years Experience", value: "8" },
            { id: "4", icon: Leaf, title: "Eco-Friendly Solutions", value: "100%" }
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={true}
          ariaLabel="Metrics and achievements section"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="What Our Clients Say"
          description="Trusted by businesses of all sizes to maintain their technology infrastructure with precision and care."
          tag="Client Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              title: "Outstanding Professional Service",              quote: "Cleaning with Care transformed our office environment. Our computers run faster, and everything looks immaculate. Highly recommended!",              name: "Sarah Johnson",              role: "Office Manager",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/professional-headshot-of-satisfied-busin-1774076711581-1e2a8e58.png"
            },
            {
              id: "2",              title: "Expert IT Infrastructure Care",              quote: "Their server room cleaning service is exceptional. Our system temperatures have decreased significantly, and equipment lifespan improved dramatically.",              name: "Michael Chen",              role: "IT Director",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/professional-headshot-of-it-manager-or-t-1774076713285-54e5e235.png"
            },
            {
              id: "3",              title: "Reliable and Professional",              quote: "We've been using Cleaning with Care for over two years. Their attention to detail and eco-friendly approach align perfectly with our values.",              name: "Emily Rodriguez",              role: "Facilities Manager",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/professional-headshot-of-facilities-mana-1774076711115-9b05e2b8.png"
            },
            {
              id: "4",              title: "Exceptional Corporate Partner",              quote: "From mobile devices to desktop computers, their cleaning expertise keeps our entire technology ecosystem in pristine condition. Outstanding service!",              name: "David Kim",              role: "CEO, Tech Solutions Inc",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/professional-headshot-of-corporate-execu-1774076711717-a5864c1c.png"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
          ariaLabel="Client testimonials section"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our tech cleaning services, pricing, and process."
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "Is your cleaning safe for delicate electronics?",              content: "Absolutely! We use specialized, non-damaging cleaning solutions and techniques specifically designed for sensitive technology. All our technicians are trained in electronics care and use anti-static protection."
            },
            {
              id: "2",              title: "How often should I have my equipment cleaned?",              content: "For optimal performance, we recommend quarterly cleaning for desktop systems and monthly for laptops in dusty environments. Server rooms benefit from specialized maintenance every 3-6 months. We can customize a schedule based on your needs."
            },
            {
              id: "3",              title: "Are your cleaning products eco-friendly?",              content: "Yes! We're committed to sustainability and use 100% eco-friendly, biodegradable cleaning solutions that are safe for both your equipment and the environment."
            },
            {
              id: "4",              title: "Can you service enterprise-level infrastructure?",              content: "Yes, we specialize in large-scale corporate cleaning including data centers, server rooms, and complex IT infrastructure. We can schedule maintenance during off-hours to minimize downtime."
            },
            {
              id: "5",              title: "What's your service coverage area?",              content: "We serve the greater metropolitan area and surrounding regions. For specific location inquiries, please contact us directly and we'll confirm availability for your area."
            },
            {
              id: "6",              title: "Do you offer maintenance contracts?",              content: "Yes! We offer flexible maintenance contracts tailored to your organization's needs, with regular scheduled cleanings and priority emergency support available."
            }
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          ariaLabel="Frequently asked questions section"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Ready to experience professional tech cleaning? Contact us today for a free consultation and custom service quote."
          inputs={[
            { name: "fullName", type: "text", placeholder: "Your Full Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email Address", required: true },
            { name: "company", type: "text", placeholder: "Company Name", required: false },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your cleaning needs and preferred service time",            rows: 5,
            required: true
          }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BFEMLpcw683eBlDscv2KJB9MPQ/eco-friendly-cleaning-products-and-susta-1774076712264-8374f9b7.png"
          imageAlt="Eco-friendly cleaning products"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Send Request"
          ariaLabel="Contact form section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Services",              items: [
                { label: "Computer Cleaning", href: "#services" },
                { label: "Server Maintenance", href: "#services" },
                { label: "Mobile Device Care", href: "#services" },
                { label: "Custom Solutions", href: "#contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Mission", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2024 Cleaning with Care. All rights reserved."
          bottomRightText="Eco-friendly tech cleaning solutions for businesses"
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}