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

const keyFeatures = [
    'Proactive Maintenance & Repairs',
    'Reliable Rent Collection',
    'Detailed Financial Reporting',
    'Positive Tenant Relations',
    '24/7 Emergency Response',
    'Property Law & Regulation Compliance',
];

const PropertyManagementPage: 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-1600585154340-be6161a56a0c?q=80&w=2070&auto=format&fit=crop"
            alt="Well-managed property"
            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">Property Management</h1>
                <p className="mt-4 text-xl text-gray-200">Protecting your investment, ensuring its performance.</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">Comprehensive Care for Your Property</h2>
                        <p className="text-gray-600 mb-4">
                            Our core property management service is designed to handle all the day-to-day operations of your real estate investment, freeing you from the complexities and time commitments of being a landlord. We act as the primary point of contact for tenants, addressing their needs promptly and professionally to ensure high retention rates.
                        </p>
                        <p className="text-gray-600">
                           We manage everything from proactive maintenance schedules and emergency repairs to diligent rent collection and detailed financial accounting. Our experienced team ensures your property is well-maintained, compliant with all regulations, and profitable. With Next Horizon Realty, you can have confidence that your property is being managed to the highest standard.
                        </p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?q=80&w=2070&auto=format&fit=crop" alt="Property manager inspecting a house" 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">What Our Management Covers</h2>
                    <p className="mt-4 max-w-2xl mx-auto text-lg text-gray-600">We handle every aspect of property oversight with professionalism and care.</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">Enjoy Passive Income, Stress-Free</h2>
                <p className="mt-4 text-lg">
                    Delegate the hard work to us. Contact our property management team today to learn how we can make your investment truly passive.
                </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 Management Quote
                    </Link>
                </div>
            </FadeIn>
        </div>
      </section>
    </div>
  );
};

export default PropertyManagementPage;