{{-- 
    Publishing Block: Accordion/FAQ
    Expandable/collapsible content sections
    
    Block Data Structure:
    {
        "type": "accordion",
        "title": "Frequently Asked Questions",
        "subtitle": "Find answers to common questions",
        "allow_multiple": false,
        "default_open": 0,
        "items": [
            {
                "title": "Question/Title",
                "content": "Answer/Content",
                "icon": "question-circle"
            }
        ],
        "style": "default" // default, bordered, minimal, cards
    }
--}}
@php
    $style = $block['style'] ?? 'default';
    $allowMultiple = $block['allow_multiple'] ?? false;
    $defaultOpen = $block['default_open'] ?? -1;
    $items = $block['items'] ?? [];
@endphp

<section class="py-12 lg:py-16 bg-white">
    <div class="max-w-4xl 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
        
        {{-- Accordion Container --}}
        <div x-data="{ 
            openItems: {{ $allowMultiple ? '[]' : ($defaultOpen >= 0 ? $defaultOpen : 'null') }},
            isOpen(index) {
                return {{ $allowMultiple ? 'this.openItems.includes(index)' : 'this.openItems === index' }};
            },
            toggle(index) {
                if ({{ $allowMultiple ? 'true' : 'false' }}) {
                    if (this.openItems.includes(index)) {
                        this.openItems = this.openItems.filter(i => i !== index);
                    } else {
                        this.openItems.push(index);
                    }
                } else {
                    this.openItems = this.openItems === index ? null : index;
                }
            }
        }">
            
            @if($style === 'cards')
                {{-- Cards Style --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @foreach($items as $index => $item)
                        <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"
                             :class="isOpen({{ $index }}) ? 'ring-2 ring-green-500' : ''">
                            <button @click="toggle({{ $index }})" 
                                    class="w-full px-6 py-5 text-left flex items-start gap-4">
                                @if(!empty($item['icon']))
                                    <i class="fas fa-{{ $item['icon'] }} text-green-500 text-xl mt-0.5"></i>
                                @else
                                    <i class="fas fa-question-circle text-green-500 text-xl mt-0.5"></i>
                                @endif
                                <span class="font-semibold text-gray-800 flex-1">{{ $item['title'] ?? '' }}</span>
                                <i class="fas fa-chevron-down text-gray-400 transition-transform duration-200 mt-1"
                                   :class="isOpen({{ $index }}) ? 'rotate-180' : ''"></i>
                            </button>
                            <div x-show="isOpen({{ $index }})" 
                                 x-collapse
                                 class="px-6 pb-5">
                                <div class="text-gray-600 leading-relaxed ml-9">
                                    {!! $item['content'] ?? '' !!}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                
            @elseif($style === 'bordered')
                {{-- Bordered Style --}}
                <div class="border border-gray-200 rounded-xl overflow-hidden divide-y divide-gray-200">
                    @foreach($items as $index => $item)
                        <div>
                            <button @click="toggle({{ $index }})" 
                                    class="w-full px-6 py-5 text-left flex items-center gap-4 hover:bg-gray-50 transition">
                                <span class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                                    <span class="text-green-600 font-bold text-sm">{{ $index + 1 }}</span>
                                </span>
                                <span class="font-semibold text-gray-800 flex-1">{{ $item['title'] ?? '' }}</span>
                                <i class="fas fa-plus text-green-500 transition-transform duration-200"
                                   :class="isOpen({{ $index }}) ? 'rotate-45' : ''"></i>
                            </button>
                            <div x-show="isOpen({{ $index }})" 
                                 x-collapse
                                 class="px-6 pb-5 ml-12">
                                <div class="text-gray-600 leading-relaxed">
                                    {!! $item['content'] ?? '' !!}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                
            @elseif($style === 'minimal')
                {{-- Minimal Style --}}
                <div class="divide-y divide-gray-100">
                    @foreach($items as $index => $item)
                        <div>
                            <button @click="toggle({{ $index }})" 
                                    class="w-full py-5 text-left flex items-center justify-between hover:text-green-600 transition">
                                <span class="font-medium text-gray-800">{{ $item['title'] ?? '' }}</span>
                                <i class="fas fa-chevron-down text-gray-400 transition-transform duration-200"
                                   :class="isOpen({{ $index }}) ? 'rotate-180 text-green-500' : ''"></i>
                            </button>
                            <div x-show="isOpen({{ $index }})" 
                                 x-collapse
                                 class="pb-5">
                                <div class="text-gray-600 leading-relaxed pr-8">
                                    {!! $item['content'] ?? '' !!}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                
            @else
                {{-- Default Style --}}
                <div class="space-y-3">
                    @foreach($items as $index => $item)
                        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden transition-all duration-300"
                             :class="isOpen({{ $index }}) ? 'ring-2 ring-green-500 border-transparent' : ''">
                            <button @click="toggle({{ $index }})" 
                                    class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition">
                                <span class="font-semibold text-gray-800 pr-4">{{ $item['title'] ?? '' }}</span>
                                <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0"
                                     :class="isOpen({{ $index }}) ? 'bg-green-100' : ''">
                                    <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"
                                       :class="isOpen({{ $index }}) ? 'rotate-180 text-green-600' : ''"></i>
                                </div>
                            </button>
                            <div x-show="isOpen({{ $index }})" 
                                 x-collapse
                                 class="px-6 pb-4">
                                <div class="text-gray-600 leading-relaxed border-t border-gray-100 pt-4">
                                    {!! $item['content'] ?? '' !!}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</section>
