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

const keyFeatures = [
    'Sales & Purchase Valuations',
    'Insurance & Mortgage Valuations',
    'Financial Reporting (IFRS)',
    'Rental Assessment',
    'Investment & Development Appraisals',
    'Adherence to RICS & GhIS Standards',
];

const PropertyValuationPage: 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-1582268611958-ebfd161ef921?q=80&w=2070&auto=format&fit=crop"
            alt="Property Valuation"
            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">Property Valuation</h1>
                <p className="mt-4 text-xl text-gray-200">Accurate, reliable, and independent property valuations.</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">Determining the True Value of Your Asset</h2>
                        <p className="text-gray-600 mb-4">
                           An accurate property valuation is the cornerstone of any sound real estate decision. Our team of certified and experienced valuers provides impartial, credible, and professionally prepared valuation reports for all types of properties, including residential, commercial, industrial, and agricultural assets.
                        </p>
                        <p className="text-gray-600">
                           We conduct thorough research and analysis based on current market data, property condition, and relevant legal factors. Our valuations are compliant with both international (RICS) and local (GhIS) standards, ensuring they are accepted and respected by financial institutions, legal bodies, and investors. Whether you're buying, selling, insuring, or analyzing your portfolio, our reports provide the clarity you need.
                        </p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1596722839114-10ff4a37651a?q=80&w=2070&auto=format&fit=crop" alt="Valuer inspecting a property" 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">Valuations for Every Need</h2>
                    <p className="mt-4 max-w-2xl mx-auto text-lg text-gray-600">Our expertise covers a comprehensive range of valuation purposes.</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">Know Your Property's Worth</h2>
                <p className="mt-4 text-lg">
                    Make confident financial decisions with a professional valuation report. Contact us today to get a quote for your property.
                </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 Valuation
                    </Link>
                </div>
            </FadeIn>
        </div>
      </section>
    </div>
  );
};

export default PropertyValuationPage;