{{-- Example: How to add Camera Navigation to Venue Show Page --}}

{{-- Option 1: Use the pre-built component --}}
<x-navigation-choice 
    :city="$venue->city->slug" 
    :district="$venue->district->slug" 
    :venue="$venue->slug" 
/>

{{-- Option 2: Custom implementation --}}
<div class="mt-8">
    <h2 class="text-2xl font-bold mb-4">Choose Navigation Method</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {{-- Manual Navigation --}}
        <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition">
            <div class="text-blue-600 mb-4">
                <svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                </svg>
            </div>
            <h3 class="text-xl font-semibold mb-2 text-center">Manual Navigation</h3>
            <p class="text-gray-600 mb-4 text-center">Browse exhibits by section and choose what to explore</p>
            <a href="{{ route('app.venues.sections', ['city' => $venue->city->slug, 'district' => $venue->district->slug, 'venue' => $venue->slug]) }}" 
               class="block w-full bg-blue-600 hover:bg-blue-700 text-white text-center font-semibold py-3 rounded-lg transition">
                Start Manual Tour
            </a>
        </div>

        {{-- Camera Navigation --}}
        <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition">
            <div class="text-green-600 mb-4">
                <svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
            </div>
            <h3 class="text-xl font-semibold mb-2 text-center">Camera Navigation</h3>
            <p class="text-gray-600 mb-4 text-center">Point your camera at exhibits for instant information</p>
            <a href="{{ route('app.venues.camera', ['city' => $venue->city->slug, 'district' => $venue->district->slug, 'venue' => $venue->slug]) }}" 
               class="block w-full bg-green-600 hover:bg-green-700 text-white text-center font-semibold py-3 rounded-lg transition">
                Start Camera Tour
            </a>
        </div>
    </div>
</div>

{{-- Option 3: Direct link in existing navigation --}}
<a href="{{ route('app.venues.camera', ['city' => $city, 'district' => $district, 'venue' => $venue]) }}" 
   class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
    </svg>
    Camera Navigation
</a>