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

const keyFeatures = [
    'MEP System Design & Analysis',
    'Structural Integrity Assessments',
    'Energy Efficiency Audits',
    'Renovation Project Management',
    'Building Systems Commissioning',
    'Technical Due Diligence',
];

const EngineeringServicesPage: 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-1581093450021-4a7360e9a6b5?q=80&w=2070&auto=format&fit=crop"
            alt="Engineering 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">Engineering Services</h1>
                <p className="mt-4 text-xl text-gray-200">Technical expertise for optimal building 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">Integrating Technical Excellence</h2>
                        <p className="text-gray-600 mb-4">
                           Our in-house engineering services provide a critical technical backbone to our property and facility management solutions. We offer a wide range of engineering expertise to ensure the structural integrity, safety, and operational efficiency of your buildings' core systems.
                        </p>
                        <p className="text-gray-600">
                           This includes the analysis and management of Mechanical, Electrical, and Plumbing (MEP) systems, structural assessments, and energy audits to improve performance and reduce costs. Our engineers also play a key role in managing renovation and construction projects, providing the technical oversight needed to ensure work is completed to the highest standards, on time, and within budget.
                        </p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=2070&auto=format&fit=crop" alt="Engineer reviewing blueprints" 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 Engineering Expertise</h2>
                    <p className="mt-4 max-w-2xl mx-auto text-lg text-gray-600">We ensure your property's technical systems are robust and reliable.</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">Optimize Your Building's Performance</h2>
                <p className="mt-4 text-lg">
                    Have a technical challenge or a project requiring expert oversight? Contact our engineering team for a professional consultation.
                </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">
                        Consult an Engineer
                    </Link>
                </div>
            </FadeIn>
        </div>
      </section>
    </div>
  );
};

export default EngineeringServicesPage;