import React from 'react';
import { Link } from 'react-router-dom';
import FadeIn from '../../components/FadeIn.tsx';

const keyFeatures = [
    'Residential & Commercial Cleaning',
    'Post-Construction Cleaning',
    'Deep Cleaning & Sanitization',
    'Janitorial Services',
    'Eco-Friendly Cleaning Products',
    'Customized Cleaning Schedules',
];

const CleaningServicesPage: React.FC = () => {
  return (
    <div className="bg-white">
      {/* Header */}
      <div className="relative bg-gray-800 py-32 sm:py-40">
        <img
            src="https://images.unsplash.com/photo-1603791440384-56cd371ee9a7?q=80&w=1974&auto=format&fit=crop"
            alt="Professional Cleaning Services"
            className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-secondary bg-opacity-70"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <FadeIn>
                <h1 className="text-4xl font-bold uppercase text-white">Professional Cleaning Services</h1>
                <p className="mt-4 text-xl text-gray-200">Impeccable spaces, professional care.</p>
            </FadeIn>
        </div>
      </div>

      {/* Main Content */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <FadeIn>
                <div className="grid md:grid-cols-2 gap-12 items-center">
                    <div>
                        <h2 className="text-3xl font-bold text-secondary mb-4">A Clean Environment is a Healthy Environment</h2>
                        <p className="text-gray-600 mb-4">
                           Next Horizon Realty provides top-tier professional cleaning services tailored to a wide range of needs. Whether you require regular maintenance for a commercial office, a deep clean for a residential property, or a thorough post-construction cleanup, our dedicated team is equipped to handle the job with precision and efficiency.
                        </p>
                        <p className="text-gray-600">
                           We believe in creating pristine, healthy, and welcoming environments. Our trained professionals use industry-standard equipment and environmentally friendly cleaning products to deliver exceptional results. We offer flexible scheduling and customized cleaning plans to perfectly match the unique requirements of your property, ensuring complete satisfaction.
                        </p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1628177142042-a0dc9076e2c9?q=80&w=1974&auto=format&fit=crop" alt="Cleaner working in an office" className="rounded-lg shadow-lg w-full h-full object-cover" />
                    </div>
                </div>
            </FadeIn>
        </div>
      </section>
      
      {/* Key Features Section */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <FadeIn>
                <div className="text-center">
                    <h2 className="text-3xl font-bold text-secondary">Our Cleaning Solutions</h2>
                    <p className="mt-4 max-w-2xl mx-auto text-lg text-gray-600">We offer a comprehensive range of services for a spotless finish.</p>
                </div>
            </FadeIn>
            <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                {keyFeatures.map((feature, index) => (
                    <FadeIn key={feature} delay={index * 100}>
                        <div className="flex items-start p-4">
                            <svg className="flex-shrink-0 h-6 w-6 text-primary mr-3 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <div>
                                <h4 className="text-lg font-semibold text-secondary">{feature}</h4>
                            </div>
                        </div>
                    </FadeIn>
                ))}
            </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-primary text-white py-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <FadeIn>
                <h2 className="text-3xl font-bold">Experience a New Standard of Clean</h2>
                <p className="mt-4 text-lg">
                    Let us take care of the dirty work. Contact us today for a free estimate and to create a custom cleaning plan for your property.
                </p>
                <div className="mt-8">
                    <Link to="/contact" className="bg-white text-primary px-8 py-3 rounded-md font-semibold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105">
                        Get a Free Quote
                    </Link>
                </div>
            </FadeIn>
        </div>
      </section>
    </div>
  );
};

export default CleaningServicesPage;