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

const keyFeatures = [
    'Secure Document Handling',
    'Same-Day & Next-Day Delivery',
    'Package & Parcel Services',
    'Property-Related Material Transport',
    'Scheduled & On-Demand Pickups',
    'Real-Time Tracking',
];

const DeliveryServicesPage: 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-1590820249413-f4211a7395e8?q=80&w=2074&auto=format&fit=crop"
            alt="Delivery 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">Delivery & Courier Services</h1>
                <p className="mt-4 text-xl text-gray-200">Prompt, reliable, and secure delivery solutions.</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">Connecting Your Property Operations</h2>
                        <p className="text-gray-600 mb-4">
                           As part of our commitment to providing fully integrated property solutions, Next Horizon Realty offers specialized delivery and courier services. We understand that efficient property management relies on the timely and secure transport of important documents, keys, small packages, and essential supplies.
                        </p>
                        <p className="text-gray-600">
                           Our professional courier service is designed to support the operational needs of our clients and our management teams. Whether it's delivering lease agreements for signing, transporting materials for a maintenance job, or any other property-related logistics, we ensure your items reach their destination safely and on schedule, enhancing overall operational efficiency.
                        </p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1621992923531-4a37a858544a?q=80&w=1974&auto=format&fit=crop" alt="Courier handling a package" 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 We Deliver</h2>
                    <p className="mt-4 max-w-2xl mx-auto text-lg text-gray-600">Our services are tailored for the unique demands of the real estate sector.</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">Streamline Your Operations</h2>
                <p className="mt-4 text-lg">
                   Need to move documents or supplies quickly? Contact us to learn more about our dependable courier services.
                </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">
                        Arrange a Delivery
                    </Link>
                </div>
            </FadeIn>
        </div>
      </section>
    </div>
  );
};

export default DeliveryServicesPage;