{{-- Enhanced SEO-Friendly Property Card with Schema.org Markup --}}
<article class="property-card-v2 group" itemscope itemtype="https://schema.org/RealEstateListing" role="article"
    aria-label="{{ $property->title }}">
    {{-- Structured Data for SEO --}}
    <meta itemprop="name" content="{{ $property->title }}">
    <meta itemprop="description"
        content="{{ $property->bedrooms ? $property->bedrooms . ' BHK ' : '' }}{{ ucfirst($property->property_type) }} {{ $property->listing_type === 'sale' ? 'for Sale' : 'for Rent' }} in {{ $property->full_location }}">
    <meta itemprop="url" content="{{ url('/property/' . $property->slug) }}">

    <a href="{{ url('/property/' . $property->slug) }}" class="property-card-link"
        title="{{ $property->title }} - {{ $property->formatted_price }}{{ $property->listing_type === 'rent' ? '/month' : '' }}"
        aria-label="View details for {{ $property->title }}">
        {{-- Image Container --}}
        <div class="property-card-image" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
            @if ($property->primary_image_url)
                <img src="{{ $property->primary_image_url }}"
                    alt="{{ $property->title }} - {{ $property->bedrooms ? $property->bedrooms . ' BHK ' : '' }}{{ ucfirst($property->property_type) }} in {{ $property->area->name ?? 'Varanasi' }}"
                    loading="lazy" decoding="async" class="property-card-img" itemprop="contentUrl">
            @else
                <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=600&h=400&fit=crop&auto=format"
                    alt="{{ $property->title }}" loading="lazy" decoding="async" class="property-card-img">
            @endif

            {{-- Image Overlay Gradient --}}
            <div class="property-card-overlay"></div>

            {{-- Badges Container --}}
            <div class="property-badges">
                {{-- Listing Type Badge --}}
                <span
                    class="property-badge-v2 {{ $property->listing_type === 'sale' ? 'badge-sale-v2' : 'badge-rent-v2' }}">
                    <span class="badge-dot"></span>
                    {{ $property->listing_type === 'sale' ? 'For Sale' : 'For Rent' }}
                </span>

                {{-- Verified Badge --}}
                @if ($property->is_verified)
                    <span class="property-badge-v2 badge-verified-v2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="badge-icon" viewBox="0 0 20 20"
                            fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 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>
                        Verified
                    </span>
                @endif
            </div>

            {{-- Featured Badge --}}
            @if ($property->is_featured)
                <span class="property-badge-featured">
                    <svg xmlns="http://www.w3.org/2000/svg" class="badge-icon" viewBox="0 0 20 20" fill="currentColor">
                        <path
                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    Featured
                </span>
            @endif

            {{-- Quick Actions (visible on hover) --}}
            <div class="property-quick-actions">
                <button type="button" class="quick-action-btn" title="Save to Wishlist"
                    aria-label="Save {{ $property->title }} to wishlist"
                    onclick="event.preventDefault(); event.stopPropagation();">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                        stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                    </svg>
                </button>
                <button type="button" class="quick-action-btn" title="Share Property"
                    aria-label="Share {{ $property->title }}"
                    onclick="event.preventDefault(); event.stopPropagation(); if(navigator.share) navigator.share({title: '{{ $property->title }}', url: '{{ url('/property/' . $property->slug) }}'});">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                        stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                    </svg>
                </button>
            </div>

            {{-- Property Type Tag --}}
            <div class="property-type-tag">
                {{ ucfirst($property->property_type ?? 'Property') }}
            </div>
        </div>

        {{-- Content Container --}}
        <div class="property-card-content">
            {{-- Price Section --}}
            <div class="property-price-section" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
                <meta itemprop="priceCurrency" content="INR">
                <span class="property-price-v2" itemprop="price" content="{{ $property->price }}">
                    {{ $property->formatted_price }}
                </span>
                @if ($property->listing_type === 'rent')
                    <span class="price-period">/month</span>
                @endif
                @if ($property->price_per_sqft)
                    <span class="price-per-sqft">₹{{ number_format($property->price_per_sqft) }}/sqft</span>
                @endif
            </div>

            {{-- Title --}}
            <h3 class="property-title-v2" itemprop="name">
                {{ $property->title }}
            </h3>

            {{-- Location with microdata --}}
            <address class="property-location-v2" itemprop="address" itemscope
                itemtype="https://schema.org/PostalAddress">
                <svg xmlns="http://www.w3.org/2000/svg" class="location-icon" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                <span itemprop="addressLocality">{{ $property->full_location }}</span>
            </address>

            {{-- Features Grid --}}
            <div class="property-features-v2">
                @if ($property->area_size)
                    <div class="feature-item" title="Area Size">
                        <div class="feature-icon-wrap">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
                            </svg>
                        </div>
                        <div class="feature-text">
                            <span class="feature-value">{{ number_format($property->area_size) }}</span>
                            <span class="feature-label">{{ $property->area_unit ?? 'sqft' }}</span>
                        </div>
                    </div>
                @endif

                @if ($property->bedrooms)
                    <div class="feature-item" title="Bedrooms">
                        <div class="feature-icon-wrap">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                            </svg>
                        </div>
                        <div class="feature-text">
                            <span class="feature-value">{{ $property->bedrooms }}</span>
                            <span class="feature-label">BHK</span>
                        </div>
                    </div>
                @endif

                @if ($property->bathrooms)
                    <div class="feature-item" title="Bathrooms">
                        <div class="feature-icon-wrap">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
                            </svg>
                        </div>
                        <div class="feature-text">
                            <span class="feature-value">{{ $property->bathrooms }}</span>
                            <span class="feature-label">Bath</span>
                        </div>
                    </div>
                @endif

                @if ($property->furnishing && $property->listing_type === 'rent')
                    <div class="feature-item feature-furnishing" title="Furnishing Status">
                        <div class="feature-icon-wrap">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                            </svg>
                        </div>
                        <div class="feature-text">
                            <span
                                class="feature-value furnishing-text">{{ ucfirst(str_replace('-', ' ', $property->furnishing)) }}</span>
                        </div>
                    </div>
                @endif
            </div>

            {{-- Card Footer with CTA --}}
            <div class="property-card-footer">
                <span class="view-details-btn">
                    View Details
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                        stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                </span>
                @if ($property->created_at && $property->created_at->diffInDays(now()) <= 7)
                    <span class="new-listing-tag">New</span>
                @endif
            </div>
        </div>
    </a>
</article>