@props([
    'question' => 'ما هي مدة تطوير المشروع؟',
    'answer' => 'يعتمد الجدول الزمني على حجم المشروع وتعقيده. موقع بسيط يستغرق 2-3 أسابيع، وتطبيق متكامل 6-12 أسبوعاً.',
    'open' => false,
])

<div
    x-data="{ open: {{ $open ? 'true' : 'false' }} }"
    {{ $attributes->merge(['class' => 'border border-gray-light/20 rounded-xl overflow-hidden transition-colors duration-300']) }}
    :class="{ 'border-primary/40': open, 'bg-dark/60': open, 'bg-dark/40': !open }"
>
    <button
        @click="open = !open"
        class="w-full flex justify-between items-center p-5 text-right font-bold text-white hover:bg-white/5 transition-colors"
    >
        <span>{{ $question }}</span>
        <span class="text-primary text-xl transition-transform duration-300" :class="{ 'rotate-45': open }">+</span>
    </button>

    <div
        x-show="open"
        x-collapse
        x-cloak
    >
        <div class="px-5 pb-5 text-gray-light text-sm leading-relaxed">
            {{ $answer }}
        </div>
    </div>
</div>