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

const keyFeatures = [
    'Strategic Portfolio Analysis',
    'Financial Performance Monitoring',
    'Market Trend Research',
    'Risk Assessment & Mitigation',
    'Capital Improvement Planning',
    'Acquisition & Disposition Strategy',
];

const AssetManagementPage: 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-1600880292210-859b9109315a?q=80&w=2070&auto=format&fit=crop"
            alt="Asset Management"
            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">Asset Management</h1>
                <p className="mt-4 text-xl text-gray-200">Maximizing the value and return of your real estate investments.</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">Strategic Oversight for Your Portfolio</h2>
                        <p className="text-gray-600 mb-4">
                            Next Horizon Realty's asset management services provide a high-level, strategic approach to your real estate portfolio. We go beyond day-to-day property management to focus on the long-term financial performance and appreciation of your assets. Our primary goal is to maximize your return on investment (ROI) through meticulous planning and strategic decision-making.
                        </p>
                        <p className="text-gray-600">
                           Our team of experienced asset managers conducts in-depth market analysis, evaluates property performance against financial goals, and identifies opportunities for value enhancement. Whether it involves repositioning a property, planning capital improvements, or advising on acquisitions and dispositions, we provide the expert guidance necessary to grow your portfolio's value.
                        </p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2070&auto=format&fit=crop" alt="Team discussing strategy" 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 Strategic Approach</h2>
                    <p className="mt-4 max-w-2xl mx-auto text-lg text-gray-600">We focus on key areas to enhance the value of your assets.</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">Enhance Your Portfolio's Performance</h2>
                <p className="mt-4 text-lg">
                    Contact us to discover how our strategic asset management can unlock the full potential of your real estate investments.
                </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">
                        Schedule a Consultation
                    </Link>
                </div>
            </FadeIn>
        </div>
      </section>
    </div>
  );
};

export default AssetManagementPage;