<div class="operators-listing-container">
    {{-- Mobile Layout (320px - 767px) --}}
    <div class="block md:hidden">
        {{-- Mobile Header with Search --}}
        <div class="sticky top-0 bg-white dark:bg-gray-900 z-20 p-4 border-b border-gray-200 dark:border-gray-700">
            <div class="space-y-3">
                {{-- Search Input --}}
                <div class="relative">
                    <input 
                        type="text" 
                        wire:model.live.debounce.300ms="search"
                        placeholder="Search operators, manufacturers, designers..."
                        class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    >
                    <svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>

                {{-- Role Filter Buttons --}}
                <div class="flex flex-wrap gap-2">
                    <button 
                        wire:click="toggleRoleFilter('park_operator')"
                        class="px-3 py-1.5 text-sm rounded-full border transition-colors {{ in_array('park_operator', $roleFilter) ? 'bg-blue-500 text-white border-blue-500' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600' }}"
                    >
                        Operators
                        @if(isset($industryStats['park_operators']))
                            <span class="ml-1 text-xs opacity-75">({{ $industryStats['park_operators'] }})</span>
                        @endif
                    </button>
                    <button 
                        wire:click="toggleRoleFilter('ride_manufacturer')"
                        class="px-3 py-1.5 text-sm rounded-full border transition-colors {{ in_array('ride_manufacturer', $roleFilter) ? 'bg-green-500 text-white border-green-500' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600' }}"
                    >
                        Manufacturers
                        @if(isset($industryStats['manufacturers']))
                            <span class="ml-1 text-xs opacity-75">({{ $industryStats['manufacturers'] }})</span>
                        @endif
                    </button>
                    <button 
                        wire:click="toggleRoleFilter('ride_designer')"
                        class="px-3 py-1.5 text-sm rounded-full border transition-colors {{ in_array('ride_designer', $roleFilter) ? 'bg-purple-500 text-white border-purple-500' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600' }}"
                    >
                        Designers
                        @if(isset($industryStats['designers']))
                            <span class="ml-1 text-xs opacity-75">({{ $industryStats['designers'] }})</span>
                        @endif
                    </button>
                </div>
            </div>
        </div>

        {{-- Industry Statistics Banner --}}
        <div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 m-4 rounded-lg">
            <div class="text-center">
                <h3 class="text-lg font-semibold mb-2">Industry Overview</h3>
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <div class="text-2xl font-bold">{{ $industryStats['total_operators'] ?? 0 }}</div>
                        <div class="opacity-90">Total Operators</div>
                    </div>
                    <div>
                        <div class="text-2xl font-bold">{{ $industryStats['mixed_role'] ?? 0 }}</div>
                        <div class="opacity-90">Multi-Role</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Operator Cards --}}
        <div class="space-y-4 p-4">
            @forelse($operators as $operator)
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-gray-200 dark:border-gray-700">
                    {{-- Operator Header --}}
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex-1">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                {{ $operator->name }}
                            </h3>
                            @if($operator->location)
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    {{ $operator->location->city }}, {{ $operator->location->country }}
                                </p>
                            @endif
                        </div>
                        <div class="text-right">
                            @if($operator->market_influence_score)
                                <div class="text-sm font-medium text-blue-600 dark:text-blue-400">
                                    {{ number_format($operator->market_influence_score, 1) }}/100
                                </div>
                                <div class="text-xs text-gray-500">Influence</div>
                            @endif
                        </div>
                    </div>

                    {{-- Role Badges --}}
                    <div class="flex flex-wrap gap-2 mb-3">
                        @if($operator->parks_count > 0)
                            <span class="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">
                                Operator ({{ $operator->parks_count }} parks)
                            </span>
                        @endif
                        @if($operator->manufactured_rides_count > 0)
                            <span class="px-2 py-1 text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">
                                Manufacturer ({{ $operator->manufactured_rides_count }} rides)
                            </span>
                        @endif
                        @if($operator->designed_rides_count > 0)
                            <span class="px-2 py-1 text-xs bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full">
                                Designer ({{ $operator->designed_rides_count }} rides)
                            </span>
                        @endif
                    </div>

                    {{-- Key Metrics --}}
                    <div class="grid grid-cols-3 gap-4 text-center text-sm">
                        @if($operator->founded_year)
                            <div>
                                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ $operator->founded_year }}</div>
                                <div class="text-gray-600 dark:text-gray-400">Founded</div>
                            </div>
                        @endif
                        @if($operator->industry_sector)
                            <div>
                                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ ucfirst($operator->industry_sector) }}</div>
                                <div class="text-gray-600 dark:text-gray-400">Sector</div>
                            </div>
                        @endif
                        @if($operator->company_size_category)
                            <div>
                                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ ucfirst($operator->company_size_category) }}</div>
                                <div class="text-gray-600 dark:text-gray-400">Size</div>
                            </div>
                        @endif
                    </div>
                </div>
            @empty
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">No operators found</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Try adjusting your search or filters.</p>
                </div>
            @endforelse
        </div>

        {{-- Mobile Pagination --}}
        @if($operators->hasPages())
            <div class="sticky bottom-0 bg-white dark:bg-gray-900 p-4 border-t border-gray-200 dark:border-gray-700">
                {{ $operators->links('pagination.mobile') }}
            </div>
        @endif
    </div>

    {{-- Tablet Layout (768px - 1023px) --}}
    <div class="hidden md:block lg:hidden">
        <div class="flex h-screen">
            {{-- Filter Sidebar --}}
            <div class="w-80 bg-gray-50 dark:bg-gray-800 overflow-y-auto border-r border-gray-200 dark:border-gray-700">
                <div class="p-6">
                    {{-- Search --}}
                    <div class="relative mb-6">
                        <input 
                            type="text" 
                            wire:model.live.debounce.300ms="search"
                            placeholder="Search operators..."
                            class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                        >
                        <svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>

                    {{-- Role Filters --}}
                    <div class="mb-6">
                        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">Operator Roles</h3>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input 
                                    type="checkbox" 
                                    wire:model.live="roleFilter" 
                                    value="park_operator"
                                    class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                                >
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                                    Park Operators ({{ $industryStats['park_operators'] ?? 0 }})
                                </span>
                            </label>
                            <label class="flex items-center">
                                <input 
                                    type="checkbox" 
                                    wire:model.live="roleFilter" 
                                    value="ride_manufacturer"
                                    class="rounded border-gray-300 text-green-600 focus:ring-green-500"
                                >
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                                    Manufacturers ({{ $industryStats['manufacturers'] ?? 0 }})
                                </span>
                            </label>
                            <label class="flex items-center">
                                <input 
                                    type="checkbox" 
                                    wire:model.live="roleFilter" 
                                    value="ride_designer"
                                    class="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                                >
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">
                                    Designers ({{ $industryStats['designers'] ?? 0 }})
                                </span>
                            </label>
                        </div>
                    </div>

                    {{-- Industry Filters --}}
                    <div class="mb-6">
                        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">Industry Filters</h3>
                        <div class="space-y-4">
                            {{-- Company Size --}}
                            <div>
                                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Company Size</label>
                                <select wire:model.live="companySize" class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                    <option value="">All Sizes</option>
                                    <option value="small">Small (1-100)</option>
                                    <option value="medium">Medium (101-1000)</option>
                                    <option value="large">Large (1001-10000)</option>
                                    <option value="enterprise">Enterprise (10000+)</option>
                                </select>
                            </div>

                            {{-- Industry Sector --}}
                            <div>
                                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Industry Sector</label>
                                <select wire:model.live="industrySector" class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                    <option value="">All Sectors</option>
                                    @if(isset($industryStats['sectors']))
                                        @foreach($industryStats['sectors'] as $sector => $count)
                                            <option value="{{ $sector }}">{{ ucfirst($sector) }} ({{ $count }})</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>

                            {{-- Founded Year Range --}}
                            <div class="grid grid-cols-2 gap-2">
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">From Year</label>
                                    <input 
                                        type="number" 
                                        wire:model.live="foundedYearFrom"
                                        placeholder="1900"
                                        class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                    >
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">To Year</label>
                                    <input 
                                        type="number" 
                                        wire:model.live="foundedYearTo"
                                        placeholder="{{ date('Y') }}"
                                        class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                    >
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Industry Statistics --}}
                    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
                        <h3 class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-3">Industry Stats</h3>
                        <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span class="text-blue-700 dark:text-blue-300">Total Operators</span>
                                <span class="font-medium text-blue-900 dark:text-blue-100">{{ $industryStats['total_operators'] ?? 0 }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-blue-700 dark:text-blue-300">Multi-Role</span>
                                <span class="font-medium text-blue-900 dark:text-blue-100">{{ $industryStats['mixed_role'] ?? 0 }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Main Content --}}
            <div class="flex-1 flex flex-col">
                {{-- Header --}}
                <div class="bg-white dark:bg-gray-900 p-6 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <div>
                            <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
                                {{ $operators->total() }} Industry Operators
                            </h1>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                Discover theme park operators, ride manufacturers, and designers
                            </p>
                        </div>
                        <div class="flex items-center space-x-4">
                            {{-- Sort Selector --}}
                            <select wire:model.live="sortBy" class="text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                                <option value="name">Name</option>
                                <option value="founded_year">Founded Year</option>
                                <option value="parks_count">Parks Count</option>
                                <option value="rides_count">Rides Count</option>
                                <option value="market_influence">Market Influence</option>
                            </select>
                            
                            {{-- View Toggle --}}
                            <div class="flex rounded-md border border-gray-300 dark:border-gray-600">
                                <button 
                                    wire:click="setViewMode('grid')"
                                    class="px-3 py-1 text-sm {{ $viewMode === 'grid' ? 'bg-blue-500 text-white' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300' }} rounded-l-md"
                                >
                                    Grid
                                </button>
                                <button 
                                    wire:click="setViewMode('portfolio')"
                                    class="px-3 py-1 text-sm {{ $viewMode === 'portfolio' ? 'bg-blue-500 text-white' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300' }} rounded-r-md"
                                >
                                    Portfolio
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Content Grid --}}
                <div class="flex-1 overflow-y-auto p-6">
                    @if($viewMode === 'grid')
                        <div class="grid grid-cols-2 gap-6">
                            @foreach($operators as $operator)
                                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
                                    {{-- Operator Header --}}
                                    <div class="flex items-start justify-between mb-4">
                                        <div class="flex-1">
                                            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                                {{ $operator->name }}
                                            </h3>
                                            @if($operator->location)
                                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                                    {{ $operator->location->city }}, {{ $operator->location->country }}
                                                </p>
                                            @endif
                                        </div>
                                        @if($operator->market_influence_score)
                                            <div class="text-right">
                                                <div class="text-lg font-bold text-blue-600 dark:text-blue-400">
                                                    {{ number_format($operator->market_influence_score, 1) }}
                                                </div>
                                                <div class="text-xs text-gray-500">Influence Score</div>
                                            </div>
                                        @endif
                                    </div>

                                    {{-- Role Badges --}}
                                    <div class="flex flex-wrap gap-2 mb-4">
                                        @if($operator->parks_count > 0)
                                            <span class="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">
                                                {{ $operator->parks_count }} Parks
                                            </span>
                                        @endif
                                        @if($operator->manufactured_rides_count > 0)
                                            <span class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">
                                                {{ $operator->manufactured_rides_count }} Manufactured
                                            </span>
                                        @endif
                                        @if($operator->designed_rides_count > 0)
                                            <span class="px-3 py-1 text-sm bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full">
                                                {{ $operator->designed_rides_count }} Designed
                                            </span>
                                        @endif
                                    </div>

                                    {{-- Key Metrics --}}
                                    <div class="grid grid-cols-2 gap-4 text-sm">
                                        @if($operator->founded_year)
                                            <div>
                                                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ $operator->founded_year }}</div>
                                                <div class="text-gray-600 dark:text-gray-400">Founded</div>
                                            </div>
                                        @endif
                                        @if($operator->industry_sector)
                                            <div>
                                                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ ucfirst($operator->industry_sector) }}</div>
                                                <div class="text-gray-600 dark:text-gray-400">Sector</div>
                                            </div>
                                        @endif
                                        @if($operator->employee_count)
                                            <div>
                                                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ number_format($operator->employee_count) }}</div>
                                                <div class="text-gray-600 dark:text-gray-400">Employees</div>
                                            </div>
                                        @endif
                                        @if($operator->geographic_presence_level)
                                            <div>
                                                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ ucfirst($operator->geographic_presence_level) }}</div>
                                                <div class="text-gray-600 dark:text-gray-400">Presence</div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        {{-- Portfolio View --}}
                        <div class="space-y-6">
                            @foreach($operators as $operator)
                                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
                                    <div class="flex items-start justify-between mb-4">
                                        <div class="flex-1">
                                            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                                {{ $operator->name }}
                                            </h3>
                                            @if($operator->description)
                                                <p class="text-gray-600 dark:text-gray-400 mb-3">{{ $operator->description }}</p>
                                            @endif
                                            <div class="flex flex-wrap gap-2">
                                                @if($operator->parks_count > 0)
                                                    <span class="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">
                                                        Park Operator: {{ $operator->parks_count }} parks
                                                    </span>
                                                @endif
                                                @if($operator->manufactured_rides_count > 0)
                                                    <span class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">
                                                        Manufacturer: {{ $operator->manufactured_rides_count }} rides
                                                    </span>
                                                @endif
                                                @if($operator->designed_rides_count > 0)
                                                    <span class="px-3 py-1 text-sm bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full">
                                                        Designer: {{ $operator->designed_rides_count }} rides
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                        @if($operator->market_influence_score)
                                            <div class="text-right ml-6">
                                                <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
                                                    {{ number_format($operator->market_influence_score, 1) }}
                                                </div>
                                                <div class="text-sm text-gray-500">Market Influence</div>
                                            </div>
                                        @endif
                                    </div>
                                    
                                    <div class="grid grid-cols-4 gap-6 text-sm">
                                        @if($operator->founded_year)
                                            <div>
                                                <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $operator->founded_year }}</div>
                                                <div class="text-gray-600 dark:text-gray-400">Founded</div>
                                            </div>
                                        @endif
                                        @if($operator->industry_sector)
                                            <div>
                                                <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ ucfirst($operator->industry_sector) }}</div>
                                                <div class="text-gray-600 dark:text-gray-400">Industry</div>
                                            </div>
                                        @endif
                                        @if($operator->employee_count)
                                            <div>
                                                <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ number_format($operator->employee_count) }}</div>
                                                <div class="text-gray-600 dark:text-gray-400">Employees</div>
                                            </div>
                                        @endif
                                        @if($operator->location)
                                            <div>
                                                <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $operator->location->country }}</div>
                                                <div class="text-gray-600 dark:text-gray-400">Headquarters</div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    {{-- Pagination --}}
                    @if($operators->hasPages())
                        <div class="mt-8">
                            {{ $operators->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Desktop Layout (1024px+) --}}
    <div class="hidden lg:block">
        <div class="flex h-screen">
            {{-- Advanced Filter Sidebar --}}
            <div class="w-80 bg-gray-50 dark:bg-gray-800 overflow-y-auto border-r border-gray-200 dark:border-gray-700">
                <div class="p-6">
                    {{-- Search --}}
                    <div class="relative mb-6">
                        <input 
                            type="text" 
                            wire:model.live.debounce.300ms="search"
                            placeholder="Search operators, manufacturers, designers..."
                            class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                        >
                        <svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>