@php
    $sections = [
        ['topbar', 'Top / Announcement Bar', 'ঘোষণা বার', [
            ['topbar_bg', 'Background', 'ব্যাকগ্রাউন্ড', 'Scrolling offer bar'],
            ['topbar_text', 'Text Color', 'টেক্সট', 'Announcement text'],
        ]],
        ['header', 'Header Area', 'হেডার', [
            ['header_bg', 'Background', 'ব্যাকগ্রাউন্ড', 'Logo & search row'],
            ['header_text', 'Text / Icons', 'টেক্সট', 'Cart, menu icons'],
        ]],
        ['nav', 'Navigation Bar', 'মেনু বার', [
            ['nav_bg', 'Background', 'ব্যাকগ্রাউন্ড', 'Main menu bar'],
            ['nav_text', 'Text Color', 'টেক্সট', 'Menu links'],
        ]],
        ['hero', 'Hero / Banner', 'ব্যানার', [
            ['hero_bg1', 'Gradient Start', 'শুরু রং', 'Banner gradient left'],
            ['hero_bg2', 'Gradient End', 'শেষ রং', 'Banner gradient right'],
        ]],
        ['trust', 'Trust Bar', 'বিশ্বাস বার', [
            ['trust_bg', 'Background', 'ব্যাকগ্রাউন্ড', 'Free delivery row'],
        ]],
        ['catstrip', 'Category Strip', 'ক্যাটাগরি', [
            ['catstrip_bg', 'Background', 'ব্যাকগ্রাউন্ড', 'Round category icons'],
        ]],
        ['sections', 'Section Titles', 'সেকশন শিরোনাম', [
            ['title_color', 'Title Color', 'রং', 'Trending, Featured headings'],
        ]],
        ['typography', 'Typography', 'টেক্সট', [
            ['text_color', 'Body Text', 'মূল টেক্সট', 'Product name, paragraphs'],
            ['muted_text', 'Muted Text', 'হালকা টেক্সট', 'Subtitle, old price'],
        ]],
        ['surfaces', 'Borders & Surfaces', 'বর্ডার ও ব্যাকগ্রাউন্ড', [
            ['border_color', 'Border', 'বর্ডার', 'Cards, inputs'],
            ['alt_section_bg', 'Alt Section BG', 'অল্টারনেট BG', 'Alternate blocks'],
            ['body_bg', 'Page Background', 'পেজ BG', 'Main page background'],
        ]],
        ['products', 'Product Cards', 'প্রোডাক্ট কার্ড', [
            ['card_bg', 'Card Background', 'কার্ড BG', 'Product box'],
            ['btn_text', 'Button Text', 'বাটন টেক্সট', 'Buy Now text'],
        ]],
        ['product_detail', 'Product Detail Buttons', 'প্রোডাক্ট পেজ বাটন', [
            ['pd_buy_cart_bg', 'Buy & Cart BG', 'Buy/Cart BG', 'Buy Now + Cart'],
            ['pd_buy_cart_hover', 'Buy & Cart Hover', 'Hover', 'Hover color'],
            ['pd_buy_cart_text', 'Buy & Cart Text', 'টেক্সট', 'Button text'],
            ['pd_phone_btn_bg', 'Phone Button', 'ফোন', 'Call button'],
            ['pd_phone_btn_text', 'Phone Text', 'ফোন টেক্সট', ''],
            ['pd_whatsapp_btn_bg', 'WhatsApp Button', 'WhatsApp', 'WhatsApp button'],
            ['pd_whatsapp_btn_text', 'WhatsApp Text', 'WA টেক্সট', ''],
        ]],
        ['footer', 'Footer', 'ফুটার', [
            ['footer_bg', 'Background', 'ব্যাকগ্রাউন্ড', 'Full footer'],
            ['footer_text', 'Text', 'টেক্সট', 'Copyright text'],
            ['footer_heading', 'Heading', 'শিরোনাম', 'Column titles'],
            ['footer_link', 'Links', 'লিংক', 'Menu links'],
            ['footer_social_icon', 'Social Icon', 'আইকন', 'Social icons'],
            ['footer_social_bg', 'Social Circle BG', 'সার্কেল BG', 'Icon background'],
            ['footer_social_hover_bg', 'Social Hover BG', 'Hover BG', 'On hover'],
            ['footer_social_hover_icon', 'Social Hover Icon', 'Hover icon', ''],
        ]],
    ];
@endphp

<div class="accordion theme-section-accordion" id="themeColorSections">
    @foreach($sections as $i => [$secKey, $secName, $secNameBn, $fields])
    <div class="accordion-item border-0 mb-2 shadow-sm rounded overflow-hidden">
        <h2 class="accordion-header" id="heading_{{ $secKey }}">
            <button class="accordion-button {{ $i > 2 ? 'collapsed' : '' }}" type="button"
                    data-bs-toggle="collapse" data-bs-target="#collapse_{{ $secKey }}"
                    aria-expanded="{{ $i <= 2 ? 'true' : 'false' }}">
                <i class="fas fa-circle me-2 section-dot" data-dot-key="{{ $fields[0][0] }}"
                   style="color:{{ $colors[$fields[0][0]] ?? ($defaults[$fields[0][0]] ?? '#888') }};font-size:8px"></i>
                {{ $secName }}
                <span class="text-muted fw-normal ms-2 small">{{ $secNameBn }}</span>
            </button>
        </h2>
        <div id="collapse_{{ $secKey }}" class="accordion-collapse collapse {{ $i <= 2 ? 'show' : '' }}"
             data-bs-parent="#themeColorSections">
            <div class="accordion-body">
                <div class="row g-3">
                    @foreach($fields as $field)
                    @php
                        [$key, $label, $labelBn, $fieldDesc] = array_pad($field, 4, null);
                        $fieldDefault = $defaults[$key] ?? '#65971e';
                    @endphp
                    @include('backEnd.settings.partials.theme-color-field', [
                        'colorKey' => $key,
                        'label' => $label,
                        'labelBn' => $labelBn,
                        'default' => $fieldDefault,
                        'colors' => $colors,
                        'colClass' => count($fields) > 2 ? 'col-md-6' : 'col-md-6 col-lg-4',
                        'desc' => $fieldDesc,
                    ])
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>