@extends('layouts.app')

@section('title', 'Properties - Khmer Foundation Appraisals')

@section('content')
    <!-- Header Hero Section -->
    <section class="relative py-24 bg-primary overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1200&q=80"
                class="w-full h-full object-cover" alt="Background">
            <div class="absolute inset-0 bg-gradient-to-b from-primary/80 to-primary"></div>
        </div>
        <div class="container-custom relative z-10 text-center">
            <h1 class="text-4xl md:text-6xl font-black text-white mb-6">Explore Our Properties</h1>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto">Discover a vast database of residential, commercial, and
                industrial listings across Cambodia.</p>
        </div>
    </section>

    <!-- Properties Section (Moved from Home) -->
    <section id="properties" class="py-24 bg-gray-50 overflow-hidden">
        <div class="container-custom">
            <div class="relative rounded-[3rem] overflow-hidden bg-primary p-12 md:p-20 shadow-2xl reveal reveal-fade">
                <div class="absolute inset-0 opacity-20">
                    <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1200&q=80"
                        class="w-full h-full object-cover" alt="Background">
                    <div class="absolute inset-0 bg-gradient-to-r from-primary via-primary/80 to-transparent"></div>
                </div>

                <div class="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div>
                        <span class="text-secondary font-black text-xs uppercase tracking-[0.3em] mb-6 block">KFA Property
                            Network</span>
                        <h3 class="text-4xl md:text-5xl font-black text-white mb-8 leading-tight">Explore 5,000+ Premium
                            Properties Across Cambodia</h3>
                        <p class="text-gray-300 text-lg mb-10 leading-relaxed">Our dedicated property portal offers the most
                            comprehensive database of residential, commercial, and industrial listings. Visit our
                            specialized platform for real-time availability and 360° virtual tours.</p>
                        <a href="https://properties.kfa.com.kh" target="_blank"
                            class="btn-primary !bg-secondary !text-primary shadow-xl shadow-secondary/20 inline-flex items-center group">
                            Visit Properties Website
                            <span class="ml-3 group-hover:translate-x-2 transition-transform">&rarr;</span>
                        </a>
                    </div>
                    <div class="hidden lg:flex justify-end">
                        <div class="bg-white/10 backdrop-blur-xl p-8 rounded-[2rem] border border-white/10 w-full max-w-md">
                            <div class="space-y-6">
                                <div class="flex items-center space-x-4">
                                    <div
                                        class="w-12 h-12 bg-secondary/20 rounded-xl flex items-center justify-center text-secondary text-xl">
                                        🏢</div>
                                    <div>
                                        <h5 class="text-white font-bold">Verified Listings</h5>
                                        <p class="text-gray-400 text-xs text-nowrap">100% legal & document verified</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <div
                                        class="w-12 h-12 bg-secondary/20 rounded-xl flex items-center justify-center text-secondary text-xl">
                                        🔍</div>
                                    <div>
                                        <h5 class="text-white font-bold">Advanced Search</h5>
                                        <p class="text-gray-400 text-xs text-nowrap">Find by location, type, or price</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <div
                                        class="w-12 h-12 bg-secondary/20 rounded-xl flex items-center justify-center text-secondary text-xl">
                                        🤝</div>
                                    <div>
                                        <h5 class="text-white font-bold">Expert Agency</h5>
                                        <p class="text-gray-400 text-xs text-nowrap">Direct support from KFA agents</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="py-24 bg-white overflow-hidden">
        <div class="container-custom text-center">
            <h2 class="section-title">Can't find what you're looking for?</h2>
            <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Contact our professional agents for personalized property search
                and consultancy services.</p>
            <a href="{{ route('contact') }}" class="btn-primary">Contact An Agent Now</a>
        </div>
    </section>
@endsection