@extends('layouts.app')

@section('title', 'Land Market Price - Khmer Foundation Appraisals')

@section('content')
    <x-page-header title="Land Market Price" />

    <section class="py-24 bg-white overflow-hidden">
        <div class="container-custom">
            <div class="text-center mb-16 reveal reveal-fade">
                <span class="text-secondary font-bold uppercase tracking-widest text-xs mb-3 block">Market
                    Intelligence</span>
                <h2 class="section-title">Comprehensive Land Market Prices</h2>
                <p class="text-gray-500 max-w-3xl mx-auto mt-4 text-lg">Detailed and up-to-date land value data across all
                    major provinces and districts in Cambodia, compiled by our expert research team.</p>
            </div>

            <!-- <div class="bg-white rounded-3xl shadow-2xl overflow-hidden border border-gray-100 reveal reveal-fade">
                <table class="w-full text-left border-collapse">
                    <thead class="bg-primary text-white">
                        <tr>
                            <th class="px-6 py-4 font-bold uppercase tracking-wider text-sm">Region / Province</th>
                            <th class="px-6 py-4 font-bold uppercase tracking-wider text-sm">Min Price (USD/m²)</th>
                            <th class="px-6 py-4 font-bold uppercase tracking-wider text-sm">Max Price (USD/m²)</th>
                            <th class="px-6 py-4 font-bold uppercase tracking-wider text-sm">Trend</th>
                        </tr>
                    </thead>
                    <tbody id="land-market-price-body" class="divide-y divide-gray-100">
                        <tr class="animate-pulse">
                            <td colspan="4" class="px-6 py-8 text-center text-gray-400">Loading market data...</td>
                        </tr>
                    </tbody>
                </table>
            </div> -->

            <div class="mt-12 p-8 bg-gray-50 rounded-2xl border border-gray-200 reveal reveal-fade">
                <h4 class="text-xl font-black text-primary mb-4">Market Methodology</h4>
                <p class="text-gray-600 leading-relaxed mb-6">Our market prices are gathered through a combination of
                    on-site surveys, transaction data analysis, and expert appraisals. We update these figures monthly to
                    reflect the most accurate market sentiment.</p>
                <div class="flex flex-wrap gap-4">
                    <button class="btn-primary !py-2 !px-6 text-sm">Download Full Q4 Report (PDF)</button>
                    <button
                        class="bg-white text-primary border border-primary/20 px-6 py-2 rounded-lg font-bold text-sm hover:bg-gray-100 transition-all">Request
                        Historical Data</button>
                </div>
            </div>

            <div class="mt-8 text-center text-xs text-gray-400 italic">
                * Prices are provided for informational purposes only and do not constitute a formal appraisal report.
            </div>
        </div>
    </section>
@endsection