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

const keyFeatures = [
    'Strategic Sourcing & Procurement',
    'Vendor Negotiation & Management',
    'Supply Chain Optimization',
    'Inventory Control',
    'Cost & Budget Management',
    'Timely Material Delivery',
];

const LogisticsPage: 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-1586528116311-06924151a758?q=80&w=2070&auto=format&fit=crop"
            alt="Logistics and Procurement"
            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">Logistics & Procurement</h1>
                <p className="mt-4 text-xl text-gray-200">Efficiently sourcing and managing resources for your property.</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">Optimizing Your Supply Chain</h2>
                        <p className="text-gray-600 mb-4">
                           Effective property management and development depend on a robust and efficient supply chain. Our logistics and procurement division specializes in sourcing and managing the materials, services, and contractors needed to maintain and enhance your properties. We leverage our extensive network of trusted suppliers to secure high-quality resources at competitive prices.
                        </p>
                        <p className="text-gray-600">
                           Our team handles the entire procurement lifecycle, from identifying needs and negotiating contracts to managing inventory and ensuring timely delivery. This strategic approach minimizes project delays, controls costs, and ensures that all work is performed to our exacting quality standards, ultimately protecting and enhancing the value of your investment.
                        </p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1579532537598-459ecdaf39cc?q=80&w=2070&auto=format&fit=crop" alt="Warehouse logistics" 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 Procurement Process</h2>
                    <p className="mt-4 max-w-2xl mx-auto text-lg text-gray-600">We ensure value, quality, and timeliness in all procurement activities.</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">Gain Efficiency in Your Projects</h2>
                <p className="mt-4 text-lg">
                    Learn how our professional procurement services can save you time and money on your property maintenance and development projects.
                </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">
                        Discuss Your Needs
                    </Link>
                </div>
            </FadeIn>
        </div>
      </section>
    </div>
  );
};

export default LogisticsPage;