@props(['room', 'index' => 0])

<div class="max-w-lg rounded-lg overflow-hidden shadow-lg h-full w-full flex flex-col room-card fade-in border border-gray-100" style="transition-delay: {{ $index * 0.2 }}s;">
    <div class="relative">
        <section class="splide roomsimage" aria-label="Bildergalerie für Zimmer {{$room->name}}" aria-roledescription="Carousel" aria-atomic="false">
            <div class="splide__track">
                <ul class="splide__list">
                    @foreach($room->files as $file)
                    <li class="splide__slide h-64" role="group" aria-roledescription="slide">
                        <img class="w-full h-full object-cover" loading="lazy" src="{{ asset($file) }}" alt="Zimmer {{$room->name}} - Ansicht {{$loop->iteration}} von {{count($room->files)}}" width="400" height="256">
                    </li>
                    @endforeach
                </ul>
            </div>
        </section>
        <span class="absolute top-4 right-4 bg-[#088F8F] text-white px-3 py-1 rounded-full text-sm font-semibold z-10">{{$room->price}}€</span>
    </div>
    
    <div class="px-6 py-6 flex-grow bg-white">
        <h3 class="font-bold text-xl mb-3 text-gray-800 border-b border-gray-200 pb-2">{{$room->name}}</h3>
        <p class="text-gray-600 text-base leading-relaxed">
            {{$room->note}}
        </p>
    </div>
    
    <div class="px-6 pt-2 pb-4 bg-white">
        <div class="flex flex-wrap">
            <span class="flex items-center bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-[#088F8F]" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
                </svg>
                Max. {{$room->guests}}
                @if ($room->guests==1)
                    Person
                @else
                    Personen
                @endif
            </span>
            
            @foreach($room->details as $detail)
                <span class="flex items-center bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-[#088F8F]" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                    </svg>
                    {{$detail->detail}}
                </span>
            @endforeach
            
            <span class="flex items-center bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-[#088F8F]" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm3 2h6v4H7V5zm8 8v2h1v-2h-1zm-2-8h1V5h-1v2zm0 8h1v-2h-1v2zM9 5h1V3H9v2zm0 8h1v-2H9v2zm-2 0h1v-2H7v2z" clip-rule="evenodd" />
                </svg>
                TV
            </span>
            
            <span class="flex items-center bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-[#088F8F]" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd" />
                </svg>
                Dusche / WC
            </span>
            
            <span class="flex items-center bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-[#088F8F]" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.26-4.296-15.556 0A1 1 0 01.808 6.808c5.076-5.077 13.308-5.077 18.384 0a1 1 0 01-1.414 1.414zM14.95 11.05a7 7 0 00-9.9 0 1 1 0 01-1.414-1.414 9 9 0 0112.728 0 1 1 0 01-1.414 1.414zM12.12 13.88a3 3 0 00-4.242 0 1 1 0 01-1.415-1.415 5 5 0 017.072 0 1 1 0 01-1.415 1.415zM9 16a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd" />
                </svg>
                W-LAN
            </span>
        </div>
    </div>
    
    <div class="px-6 pb-6 pt-2 bg-gray-50">
        <a href="{{ route('reservation') }}" class="block w-full bg-[#088F8F] hover:bg-[#097969] text-white font-bold py-3 px-4 rounded-md text-center btn-book shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1" aria-label="Zimmer {{$room->name}} anfragen">
            Jetzt anfragen
        </a>
    </div>
</div>