{{-- 
    Publishing Block: Tab Section
    Tabbed content sections
    
    Block Data Structure:
    {
        "type": "tabs",
        "title": "Section Title",
        "style": "default", // default, pills, underline, cards
        "default_tab": 0,
        "tabs": [
            {
                "label": "Tab Name",
                "icon": "home",
                "content": "Tab content..."
            }
        ]
    }
--}}
@php
    $style = $block['style'] ?? 'default';
    $defaultTab = $block['default_tab'] ?? 0;
    $tabs = $block['tabs'] ?? [];
@endphp

<section class="py-12 lg:py-16 bg-white">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {{-- Section Header --}}
        @if(!empty($block['title']))
            <div class="text-center mb-10">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-3">
                    {{ $block['title'] }}
                </h2>
                @if(!empty($block['subtitle']))
                    <p class="text-lg text-gray-600">
                        {{ $block['subtitle'] }}
                    </p>
                @endif
            </div>
        @endif
        
        {{-- Tabs Container --}}
        <div x-data="{ active: {{ $defaultTab }} }">
            
            @if($style === 'pills')
                {{-- Pills Style --}}
                <div class="flex flex-wrap justify-center gap-2 mb-8">
                    @foreach($tabs as $index => $tab)
                        <button @click="active = {{ $index }}"
                                class="px-6 py-3 rounded-full font-medium transition-all duration-200"
                                :class="active === {{ $index }} ? 'bg-green-600 text-white shadow-lg' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'">
                            @if(!empty($tab['icon']))
                                <i class="fas fa-{{ $tab['icon'] }} mr-2"></i>
                            @endif
                            {{ $tab['label'] ?? 'Tab ' . ($index + 1) }}
                        </button>
                    @endforeach
                </div>
                
            @elseif($style === 'underline')
                {{-- Underline Style --}}
                <div class="border-b border-gray-200 mb-8">
                    <div class="flex flex-wrap -mb-px gap-x-8 gap-y-2">
                        @foreach($tabs as $index => $tab)
                            <button @click="active = {{ $index }}"
                                    class="pb-4 font-medium transition-all duration-200 relative"
                                    :class="active === {{ $index }} ? 'text-green-600' : 'text-gray-500 hover:text-gray-700'">
                                @if(!empty($tab['icon']))
                                    <i class="fas fa-{{ $tab['icon'] }} mr-2"></i>
                                @endif
                                {{ $tab['label'] ?? 'Tab ' . ($index + 1) }}
                                <span class="absolute bottom-0 left-0 right-0 h-0.5 bg-green-600 transition-all duration-200"
                                      :class="active === {{ $index }} ? 'opacity-100' : 'opacity-0'"></span>
                            </button>
                        @endforeach
                    </div>
                </div>
                
            @elseif($style === 'cards')
                {{-- Cards Style --}}
                <div class="grid grid-cols-1 md:grid-cols-{{ min(count($tabs), 4) }} gap-4 mb-8">
                    @foreach($tabs as $index => $tab)
                        <button @click="active = {{ $index }}"
                                class="p-4 rounded-xl text-left transition-all duration-200 border-2"
                                :class="active === {{ $index }} ? 'bg-green-50 border-green-500' : 'bg-white border-gray-200 hover:border-gray-300'">
                            @if(!empty($tab['icon']))
                                <div class="w-10 h-10 rounded-lg flex items-center justify-center mb-3"
                                     :class="active === {{ $index }} ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-500'">
                                    <i class="fas fa-{{ $tab['icon'] }}"></i>
                                </div>
                            @endif
                            <span class="font-semibold"
                                  :class="active === {{ $index }} ? 'text-green-700' : 'text-gray-700'">
                                {{ $tab['label'] ?? 'Tab ' . ($index + 1) }}
                            </span>
                        </button>
                    @endforeach
                </div>
                
            @else
                {{-- Default Style --}}
                <div class="bg-gray-50 rounded-xl p-1.5 mb-8 flex flex-wrap gap-1">
                    @foreach($tabs as $index => $tab)
                        <button @click="active = {{ $index }}"
                                class="flex-1 min-w-[120px] px-4 py-3 rounded-lg font-medium transition-all duration-200"
                                :class="active === {{ $index }} ? 'bg-white text-green-600 shadow-md' : 'text-gray-600 hover:text-gray-800'">
                            @if(!empty($tab['icon']))
                                <i class="fas fa-{{ $tab['icon'] }} mr-2"></i>
                            @endif
                            {{ $tab['label'] ?? 'Tab ' . ($index + 1) }}
                        </button>
                    @endforeach
                </div>
            @endif
            
            {{-- Tab Content --}}
            <div class="relative">
                @foreach($tabs as $index => $tab)
                    <div x-show="active === {{ $index }}"
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0"
                         x-transition:enter-end="opacity-100"
                         x-transition:leave="transition ease-in duration-150"
                         x-transition:leave-start="opacity-100"
                         x-transition:leave-end="opacity-0"
                         class="prose prose-lg max-w-none">
                        
                        @if(!empty($tab['title']))
                            <h3 class="text-2xl font-bold text-gray-800 mb-4">{{ $tab['title'] }}</h3>
                        @endif
                        
                        {!! $tab['content'] ?? '' !!}
                        
                        @if(!empty($tab['button']))
                            <div class="mt-6">
                                <a href="{{ $tab['button']['url'] ?? '#' }}" 
                                   class="inline-flex items-center px-6 py-3 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition">
                                    @if(!empty($tab['button']['icon']))
                                        <i class="fas fa-{{ $tab['button']['icon'] }} mr-2"></i>
                                    @endif
                                    {{ $tab['button']['label'] ?? 'Learn More' }}
                                </a>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
