@extends('layouts.app')

@section('title', 'Our Services - Khmer Foundation Appraisals')

@section('content')
    <x-page-header title="Our Services" />

    <section class="py-24 bg-white overflow-hidden">
        <div class="container-custom">
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-16">
                <!-- Service Navigation Sidebar -->
                <div class="lg:col-span-1 reveal reveal-left">
                    <div id="service-sidebar-container">
                        <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100 shadow-sm sticky top-32">
                            <h3 class="text-xs font-black text-secondary mb-6 uppercase tracking-widest">Our Services</h3>
                            <div class="space-y-3">
                                <a href="#asset-appraisal"
                                    class="service-nav-link block pl-4 py-2 transition-all duration-300 border-l-4 border-transparent hover:border-gray-200 hover:text-primary font-bold text-gray-400 text-sm"
                                    data-service="asset-appraisal">
                                    Asset & Property Appraisal
                                </a>
                                <a href="#property-consultancy"
                                    class="service-nav-link block pl-4 py-2 transition-all duration-300 border-l-4 border-transparent hover:border-gray-200 hover:text-primary font-bold text-gray-400 text-sm"
                                    data-service="property-consultancy">
                                    Property Consultancy
                                </a>
                                <a href="#property-development"
                                    class="service-nav-link block pl-4 py-2 transition-all duration-300 border-l-4 border-transparent hover:border-gray-200 hover:text-primary font-bold text-gray-400 text-sm"
                                    data-service="property-development">
                                    Property Development
                                </a>
                                <a href="#engineering-construction"
                                    class="service-nav-link block pl-4 py-2 transition-all duration-300 border-l-4 border-transparent hover:border-gray-200 hover:text-primary font-bold text-gray-400 text-sm"
                                    data-service="engineering-construction">
                                    Engineering & Construction
                                </a>
                                <a href="#property-investment"
                                    class="service-nav-link block pl-4 py-2 transition-all duration-300 border-l-4 border-transparent hover:border-gray-200 hover:text-primary font-bold text-gray-400 text-sm"
                                    data-service="property-investment">
                                    Property Investment
                                </a>
                                <a href="#property-management"
                                    class="service-nav-link block pl-4 py-2 transition-all duration-300 border-l-4 border-transparent hover:border-gray-200 hover:text-primary font-bold text-gray-400 text-sm"
                                    data-service="property-management">
                                    Property Management
                                </a>
                                <a href="#business-partner"
                                    class="service-nav-link block pl-4 py-2 transition-all duration-300 border-l-4 border-transparent hover:border-gray-200 hover:text-primary font-bold text-gray-400 text-sm"
                                    data-service="business-partner">
                                    Managing Business Partner
                                </a>
                            </div>
                        </div>

                        <!-- <div class="mt-8 bg-primary text-white p-10 rounded-3xl shadow-2xl relative overflow-hidden group">
                            <div
                                class="absolute top-0 right-0 w-32 h-32 bg-secondary/10 rounded-full -mr-16 -mt-16 group-hover:scale-150 transition-transform duration-700">
                            </div>
                            <h4 class="text-2xl font-black mb-4 text-secondary uppercase tracking-tighter relative">Free
                                Consultation</h4>
                            <p class="text-sm text-gray-400 mb-8 font-medium relative">Interested in our services? Get in
                                touch for a complimentary consultation session with our experts.</p>
                            <a href="/contact"
                                class="btn-primary !bg-secondary !text-primary !py-4 w-full text-center relative block">Contact
                                Us Now</a>
                        </div> -->
                    </div>
                </div>

                <!-- Main Content -->
                <div class="lg:col-span-3 reveal reveal-fade">
                    <div id="service-content-container">
                        <!-- Asset & Property Appraisal -->
                        <div id="asset-appraisal"
                            class="service-section hidden bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                            <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                                <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Asset &
                                    Property Appraisal</h2>
                            </div>
                            <div class="p-8 md:p-12">
                                <div class="prose prose-lg max-w-none text-gray-600 leading-relaxed">
                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        KFA uses the most Standard Valuation Methods for its appraisal. There are three
                                        different
                                        standard approaches to value real estate, <strong>(1) Comparable Sales
                                            Approach,</strong> a
                                        relative valuation method, <strong>(2) Income Approach,</strong> a time value of
                                        money
                                        based
                                        method, which includes the (i) direct capitalization method and (ii) discounted cash
                                        flow
                                        method,
                                        and <strong>(3) Cost Approach,</strong> which values real estate at its replacement
                                        cost.
                                    </p>

                                    <div class="bg-gray-50 p-6 rounded-xl mb-6">
                                        <ol class="space-y-3 text-gray-800">
                                            <li class="font-bold">1. Comparable Sale Approach or Market Approach</li>
                                            <li class="font-bold">2. Income approach</li>
                                            <li class="font-bold">3. Cost Approach</li>
                                        </ol>
                                    </div>

                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        Real Estate value must correspond to its capacity to generate future cash flows. The
                                        easiest
                                        approach is to value a property is to base it on the value actually assigned to
                                        other
                                        properties
                                        in the market i.e. the Comparable Sales Approach. However, because no two properties
                                        are
                                        the
                                        same
                                        and significant differences exist between properties, this approach is not
                                        appropriate
                                        for
                                        all
                                        properties and must be used with caution. A theoretically more sound approach is one
                                        in
                                        which we
                                        estimate the actual cash flow potential of the property and value the property at
                                        the
                                        present
                                        value of the future cash flows i.e. the Income Approach. When no comparable market
                                        transactions
                                        are available, and it is hard to forecast future cash flows correctly, the Cost
                                        Approach
                                        can
                                        be
                                        used which values a property at its replacement cost.
                                    </p>

                                    <div class="rounded-2xl overflow-hidden shadow-lg">
                                        <img src="/images/services/appraisal-field.jpg"
                                            alt="KFA Appraiser conducting field assessment" class="w-full h-auto"
                                            onerror="this.src='https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1200&q=80'">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Property Consultancy -->
                        <div id="property-consultancy"
                            class="service-section hidden bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                            <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                                <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Property
                                    Consultancy</h2>
                            </div>
                            <div class="p-8 md:p-12">
                                <div class="prose prose-lg max-w-none text-gray-600 leading-relaxed">
                                    <div class="rounded-2xl overflow-hidden shadow-lg mb-8">
                                        <img src="/images/services/consultancy-handshake.jpg"
                                            alt="Property Consultancy Partnership" class="w-full h-auto"
                                            onerror="this.src='https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1200&q=80'">
                                    </div>

                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        To acquire, develop, own and manage a property portfolio requires a significant
                                        investment
                                        of
                                        both time and money and carries a high degree of risk. However, if you employ the
                                        right
                                        strategies
                                        at the right time then the rewards can be impressive. This is where the KFA Property
                                        Consultancy
                                        team can help you.
                                    </p>

                                    <p class="text-gray-700 leading-relaxed mb-8">
                                        Our highly qualified and experienced property consultancy team provides a
                                        comprehensive set
                                        of
                                        asset management and asset intelligence services. Using a combination of condition
                                        surveys,
                                        specialist investigations, validations, reviews and energy, we are able to review
                                        the
                                        effectiveness
                                        of your property management strategies and how well they are being implemented.
                                        Additionally, we
                                        provide accurate data about each asset and create objective asset management
                                        database
                                        systems which
                                        help you to understand your properties more clearly, make more informed decisions,
                                        establish
                                        priorities, and manage your portfolios more efficiently and more cost effectively.
                                        Where
                                        required
                                        we will also support you in reorganizing your business to suit the agreed
                                        strategies.
                                    </p>

                                    <h3 class="text-2xl font-black text-primary mb-4">Strategic Advice:</h3>

                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        Our knowledge of property markets combined with a deep understanding of business
                                        goals,
                                        objectives, drivers and constraints enables us to provide sound strategic advice
                                        within
                                        a
                                        wider context. KFA Company can guide you through the most complex of deals, help to
                                        unlock
                                        the full potential value within your portfolio, maximize return on your investment
                                        and
                                        to
                                        drive organizational change and growth.
                                    </p>

                                    <p class="text-gray-700 leading-relaxed">
                                        KFA Company has extensive experience in providing strategic advice for a wide range
                                        of
                                        property
                                        initiatives. The quality and thoroughness of our work has made a lot of differences
                                        in
                                        the Real
                                        Estate market. In addition, we are also well-known and respected Real Estate
                                        Company.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Property Development -->
                        <div id="property-development"
                            class="service-section hidden bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                            <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                                <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Property
                                    Development</h2>
                            </div>
                            <div class="p-8 md:p-12">
                                <div class="prose prose-lg max-w-none text-gray-600 leading-relaxed">
                                    <div class="rounded-2xl overflow-hidden shadow-lg mb-8">
                                        <img src="/images/services/kien-svay-park.jpg" alt="KFA Kien Svay Park Development"
                                            class="w-full h-auto"
                                            onerror="this.src='https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=1200&q=80'">
                                    </div>

                                    <h3 class="text-2xl font-black text-primary mb-4">Overview</h3>

                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        Cambodia experienced two decades of very strong economic growth, averaging 7.6%
                                        Gross
                                        Domestic
                                        Product (GDP) from 1994 to 2015 and 7.0% from 2017 onward. The Asian Development
                                        Bank (ADB)
                                        reported growth to be 7.1% from 2017 – 2018 and a forecasted 7.0% by 2019. The World
                                        Bank
                                        projected 6.7% by 2020.
                                    </p>

                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        The real estate in Cambodia has boomed up. The housing demands are high - making the
                                        property
                                        developers to expend their housing development projects tremendously. Among those
                                        developers,
                                        KFA has started its property development project called "Kean Svay Park" – building
                                        168 flat
                                        houses with low cost, but high quality.
                                    </p>

                                    <p class="text-gray-700 leading-relaxed mb-8">
                                        KFA is a highly successful and associated companies generating excellent returns
                                        from
                                        investments and land sector with strong link to clients who wants to invest in
                                        property and
                                        land sectors.
                                    </p>

                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                                        <div>
                                            <h4 class="font-black text-primary mb-2">DEVELOPMENT</h4>
                                            <p class="text-sm text-gray-700">Commercial Property development throughout
                                                the
                                                kingdom of Cambodia</p>
                                        </div>
                                        <div>
                                            <h4 class="font-black text-primary mb-2">LAND</h4>
                                            <p class="text-sm text-gray-700">Identifies, secures and promotes land with
                                                the
                                                potential to add value through the planning process</p>
                                        </div>
                                        <div>
                                            <h4 class="font-black text-primary mb-2">HOMES</h4>
                                            <p class="text-sm text-gray-700">Aspirational living, prime locations,
                                                exceptional
                                                design: KFA Homes, taking living to the next level</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Engineering & Construction -->
                        <div id="engineering-construction"
                            class="service-section hidden bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                            <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                                <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Engineering
                                    &
                                    Construction</h2>
                            </div>
                            <div class="p-8 md:p-12">
                                <div class="prose prose-lg max-w-none text-gray-600 leading-relaxed">
                                    <h3 class="text-2xl font-black text-primary mb-4">Whether You Are Investors,</h3>

                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        developers, builders, or contractors, the challenges and opportunities in the
                                        industry have never been greater. The real estate and construction industry
                                        continues to increase in market due to high demand.
                                    </p>

                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        Our clients operate across all sectors of the real estate and construction
                                        industries. Whether they are developing, constructing or investing in office towers,
                                        shopping malls, industrial parks, residential subdivisions, multi-residential
                                        properties, mixed use properties, or infrastructure, they come to us because we have
                                        the experience they need.
                                    </p>

                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        We develop our services to help our clients address the key issues in the real
                                        estate and construction industry, and we have specialized knowledge and experience
                                        in key sectors, including:
                                    </p>

                                    <div class="bg-gray-50 p-6 rounded-xl">
                                        <ul class="space-y-3">
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☞</span>
                                                <span class="text-gray-700">Commercial and industrial real estate
                                                    development</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☞</span>
                                                <span class="text-gray-700">Real estate investment and leasing</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☞</span>
                                                <span class="text-gray-700">Land development and home building</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☞</span>
                                                <span class="text-gray-700">Public-private partnerships</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☞</span>
                                                <span class="text-gray-700">Construction</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☞</span>
                                                <span class="text-gray-700">Engineering</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Property Investment -->
                        <div id="property-investment"
                            class="service-section hidden bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                            <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                                <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">
                                    Property Investment</h2>
                            </div>
                            <div class="p-8 md:p-12">
                                <div class="prose prose-lg max-w-none text-gray-600 leading-relaxed">
                                    <div class="rounded-2xl overflow-hidden shadow-lg mb-8">
                                        <img src="/images/services/investment-team.jpg" alt="Property Investment Team"
                                            class="w-full h-auto"
                                            onerror="this.src='https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1200&q=80'">
                                    </div>

                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        Every payment you make on your property puts you one step closer to acquire
                                        a major possession and every improvement you make to your property not only
                                        enhances your way of life living, but also adds value to your home.
                                    </p>

                                    <h3 class="text-2xl font-black text-primary mb-4">Property Investment Opportunities</h3>

                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        We advise clients on the acquisition and disposal of a wide range of investment
                                        land and property opportunities, throughout the key locations in Cambodia.
                                        The types of property we handle are listed below:
                                    </p>

                                    <div class="bg-gray-50 p-6 rounded-xl mb-8">
                                        <ul class="space-y-3">
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☑</span>
                                                <span class="text-gray-700">Land</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☑</span>
                                                <span class="text-gray-700">Offices</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☑</span>
                                                <span class="text-gray-700">Serviced apartments, apartments and
                                                    condominiums</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☑</span>
                                                <span class="text-gray-700">Warehouses, factories and industrial
                                                    units</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☑</span>
                                                <span class="text-gray-700">Shophouses</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☑</span>
                                                <span class="text-gray-700">Hotels and resorts</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☑</span>
                                                <span class="text-gray-700">Golf courses</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☑</span>
                                                <span class="text-gray-700">Joint venture transactions</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <h3 class="text-2xl font-black text-primary mb-4">Investing In Commercial Property With
                                        KFA
                                        Investors</h3>
                                </div>
                            </div>
                        </div>

                        <!-- Property Management -->
                        <div id="property-management"
                            class="service-section hidden bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                            <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                                <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Property
                                    Management</h2>
                            </div>
                            <div class="p-8 md:p-12">
                                <div class="prose prose-lg max-w-none text-gray-600 leading-relaxed">
                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        Experienced local management providing great service and area knowledge to care for
                                        your
                                        investment properties as if they were our own.
                                    </p>

                                    <p class="text-gray-700 leading-relaxed">
                                        We handle all aspects of property management, from tenant screening and rent
                                        collection
                                        to maintenance and repairs. Our goal is to maximize your rental income while
                                        ensuring your
                                        tenants
                                        are satisfied, and your investment continues to grow in value.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Managing Business Partner -->
                        <div id="business-partner"
                            class="service-section hidden bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                            <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                                <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Managing
                                    Business Partner</h2>
                            </div>
                            <div class="p-8 md:p-12">
                                <div class="prose prose-lg max-w-none text-gray-600 leading-relaxed">
                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        Having strong partnership can make a tremendous impact on your business. If it’s a
                                        good partnership, it can scale your company to new levels. If the partnership is
                                        bad, it can cost you valuable time and money. The main reason for this is that each
                                        company has different types of partners and different requirements for each partner.
                                        Yet, there are many things that are common to successful partner relationships such
                                        as communication, relationship building, trust, transparency & mutual interest. Here
                                        are some tips to help make sure you are on the right track to building a successful
                                        partnership.
                                    </p>

                                    <div class="bg-gray-50 p-6 rounded-xl">
                                        <ul class="space-y-3">
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☞</span>
                                                <span class="text-gray-700">Create a Shared Partnership Vision and
                                                    Roadmap</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☞</span>
                                                <span class="text-gray-700">Be Transparent</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☞</span>
                                                <span class="text-gray-700">Know Your Partner’s Strengths and
                                                    Weaknesses</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☞</span>
                                                <span class="text-gray-700">Communicate Effectively</span>
                                            </li>
                                            <li class="flex items-start">
                                                <span class="text-primary mr-3 text-xl">☞</span>
                                                <span class="text-gray-700">Know When to Say Goodbye</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const serviceLinks = document.querySelectorAll('.service-nav-link');
            const serviceSections = document.querySelectorAll('.service-section');

            function showService(serviceId) {
                // Hide all sections
                serviceSections.forEach(section => {
                    section.classList.add('hidden');
                });

                // Deactivate all links
                serviceLinks.forEach(link => {
                    link.classList.remove('text-primary', 'border-primary');
                    link.classList.add('text-gray-400', 'border-transparent');
                });

                // Show target section
                const targetSection = document.getElementById(serviceId);
                if (targetSection) {
                    targetSection.classList.remove('hidden');

                    // Activate link
                    const activeLink = document.querySelector(`[data-service="${serviceId}"]`);
                    if (activeLink) {
                        activeLink.classList.remove('text-gray-400', 'border-transparent');
                        activeLink.classList.add('text-primary', 'border-primary');
                    }

                    targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            }

            serviceLinks.forEach(link => {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    const serviceId = this.getAttribute('data-service');
                    showService(serviceId);
                    window.location.hash = serviceId;
                });
            });

            // Handle initial load based on hash
            const hash = window.location.hash.substring(1);
            if (hash) {
                showService(hash);
            } else {
                // Default to first service (Asset Appraisal)
                showService('asset-appraisal');
            }

            // Handle hash changes
            window.addEventListener('hashchange', function () {
                const hash = window.location.hash.substring(1);
                if (hash) {
                    showService(hash);
                }
            });
        });
    </script>
@endpush