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

const keyFeatures = [
    'Comprehensive Property Marketing',
    'Thorough Tenant Screening',
    'Expert Lease Negotiation',
    'Efficient Rent Collection',
    'Regular Property Inspections',
    'Legal Compliance & Eviction Handling',
];

const RentalServicePage: 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-1582407947304-fd86f028f716?q=80&w=1992&auto=format&fit=crop"
            alt="Rental properties"
            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">Rental Service & Agency</h1>
                <p className="mt-4 text-xl text-gray-200">Maximizing your returns, minimizing your hassle.</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">Expert Rental and Leasing Solutions</h2>
                        <p className="text-gray-600 mb-4">
                            At Next Horizon Realty, our Rental Service & Agency division is dedicated to providing landlords with a comprehensive, stress-free leasing experience. We understand that finding the right tenant is crucial for the success of your investment. Our team leverages extensive market knowledge and a robust marketing strategy to attract high-quality tenants for your residential and commercial properties.
                        </p>
                        <p className="text-gray-600">
                            From initial property listing to the final lease signing, we handle every detail with professionalism and care. We manage viewings, conduct rigorous background and credit checks, and negotiate lease terms that protect your interests. Our goal is to secure reliable tenants quickly, ensuring consistent rental income and peace of mind.
                        </p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1484154218962-a197022b5858?q=80&w=2074&auto=format&fit=crop" alt="Happy tenant in a new home" 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 Approach Includes</h2>
                    <p className="mt-4 max-w-2xl mx-auto text-lg text-gray-600">We offer a complete suite of services to manage your rental property effectively.</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">Find Your Ideal Tenant Today</h2>
                <p className="mt-4 text-lg">
                    Let us handle the complexities of the rental market for you. Contact our team to learn more about how we can help you achieve your property investment goals.
                </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">
                        Enquire Now
                    </Link>
                </div>
            </FadeIn>
        </div>
      </section>
    </div>
  );
};

export default RentalServicePage;