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

const keyFeatures = [
    'Pre-Acquisition Surveys',
    'Building Condition Reports',
    'Dilapidation Assessments',
    'Defect Analysis & Diagnosis',
    'Maintenance Planning',
    'Regulatory Compliance Checks',
];

const BuildingSurveyingPage: 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-1600585152225-357ea66c7e26?q=80&w=2070&auto=format&fit=crop"
            alt="Building Surveying"
            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">Building Surveying & Advisory</h1>
                <p className="mt-4 text-xl text-gray-200">Informed decisions through expert property assessment.</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">Detailed Insights into Property Condition</h2>
                        <p className="text-gray-600 mb-4">
                           Our building surveying and advisory services are essential for any property owner, investor, or occupier. We provide comprehensive technical assessments of buildings to identify their condition, uncover potential defects, and advise on necessary repairs or maintenance. This empowers our clients to make fully informed decisions, whether they are acquiring, leasing, or managing a property.
                        </p>
                        <p className="text-gray-600">
                           Our chartered surveyors utilize their extensive knowledge of construction, materials, and building pathology to produce detailed and easy-to-understand reports. From pre-purchase surveys that mitigate investment risk to dilapidation reports that clarify lease-end liabilities, we offer a full spectrum of surveying services tailored to your specific needs.
                        </p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=2070&auto=format&fit=crop" alt="Surveyor at a construction site" 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 Surveying Services</h2>
                    <p className="mt-4 max-w-2xl mx-auto text-lg text-gray-600">We provide clarity and confidence in your property transactions.</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">Assess Your Property with Confidence</h2>
                <p className="mt-4 text-lg">
                    Ensure the long-term health of your investment. Contact us to book a building survey or to discuss your advisory needs with one of our experts.
                </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">
                        Request a Survey
                    </Link>
                </div>
            </FadeIn>
        </div>
      </section>
    </div>
  );
};

export default BuildingSurveyingPage;