@php
    /* Palette index: [0] Main (blue/slate), [1] Packaging (teal), [2] Recycled (forest) — by category name, not _lft */
    $productCategoryPaletteIndex = function (array $category): int {
        $name = trim((string) ($category['name'] ?? ''));
        if ($name === '') {
            return (int) ((($category['_lft'] ?? 0) / 2) % 3);
        }
        $lower = mb_strtolower($name, 'UTF-8');
        $containsAny = static function (string $haystack, array $needles): bool {
            foreach ($needles as $needle) {
                $n = mb_strtolower((string) $needle, 'UTF-8');
                if ($n !== '' && str_contains($haystack, $n)) {
                    return true;
                }
            }

            return false;
        };
        if ($containsAny($lower, ['packaging', 'package', 'บรรจุภัณฑ์', 'บรรจุ'])) {
            return 1;
        }
        if ($containsAny($lower, ['recycled', 'recycle', 'รีไซเคิล', 'รีไซ'])) {
            return 2;
        }
        if ($containsAny($lower, ['main product', 'main', 'ผลิตภัณฑ์หลัก', 'สินค้าหลัก', 'หมวดหลัก'])) {
            return 0;
        }

        return (int) ((($category['_lft'] ?? 0) / 2) % 3);
    };
    /* Original hover overlays */
    $categoryGradients = [
        'from-[var(--primary)]/20 to-[var(--primary)]/5',
        'from-[var(--secondary)]/20 to-[var(--secondary)]/5',
        'from-emerald-500/12 to-emerald-500/3',
    ];
    /* Base cards: original light background set */
    $categoryCardBgs = [
        'bg-gradient-to-br from-tsic-blue/15 via-white to-tsic-blue/5', // Main Product — blue/slate family
        'bg-gradient-to-br from-tsic-green/15 via-white to-tsic-green/5', // [1] Packaging — teal/green family
        'bg-gradient-to-br from-emerald-500/15 via-white to-emerald-500/5', // [2] Recycled — forest/emerald family
    ];
    $useSlider = count($products['list']) > 3;
@endphp

<section class="relative overflow-hidden py-20 md:py-32" id="products">
    @include('frontend::components.tsic-ellipse-decoration', [
        'minEllipses' => 2,
        'maxEllipses' => 2,
    ])
    <div class="container relative z-10 mx-auto px-4 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl md:text-5xl font-bold mb-4 text-balance">{{ __('frontend::lang.page.index.products') }}</h2>
            <p class="text-lg text-[var(--muted-foreground)] max-w-2xl mx-auto text-balance">
                {{ __('frontend::lang.page.index.products_desc') }}
            </p>
        </div>

        @if ($useSlider)
            @push('styles')
                <style>
                    .products-section-swiper .swiper-wrapper {
                        align-items: stretch;
                    }

                    .products-section-swiper .swiper-slide {
                        height: auto;
                        display: flex;
                    }

                    .products-section-swiper .swiper-slide>div {
                        flex: 1;
                        min-height: 0;
                    }

                    .products-section-prev,
                    .products-section-next {
                        top: 44% !important;
                    }

                    @media (min-width: 1024px) {
                        .products-section-prev {
                            left: -3rem !important;
                        }

                        .products-section-next {
                            right: -3rem !important;
                        }
                    }
                </style>
            @endpush
            <div class="relative">
                <div class="products-section-swiper swiper overflow-hidden">
                    <div class="swiper-wrapper">
                        @foreach ($products['list'] as $product)
                            @php
                                $cal_idx = $productCategoryPaletteIndex($product['categories'][0] ?? []);
                            @endphp
                            <div class="swiper-slide px-2 pb-12 h-auto">
                                <div class="group relative flex flex-col h-full {{ $categoryCardBgs[$cal_idx] }} rounded-[2.5rem] p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-[var(--border)] overflow-hidden">
                                    <div class="absolute inset-0 bg-gradient-to-br {{ $categoryGradients[$cal_idx] }} opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                                    <div class="relative z-10 flex flex-col flex-1">
                                        <div class="w-16 h-16 mb-6 group-hover:scale-110 transition-transform duration-300">
                                            <img class="w-full h-full object-contain" src="{{ asset('modules/frontend/images/icon/icon-box.svg') }}" alt="Product icon">
                                        </div>
                                        <p class="text-sm font-semibold text-[var(--muted-foreground)] mb-2">{{ $product['categories'][0]['name'] ?? '' }}</p>
                                        <h3 class="text-2xl font-bold mb-4 text-balance">{{ $product['name'] ?? '' }}</h3>
                                        <p class="text-[var(--muted-foreground)] mb-6 leading-relaxed flex-1">{{ $product['desc'] ?? '' }}</p>
                                        @if (!empty($product['text']))
                                            <ul class="space-y-2 mb-6">
                                                @php
                                                    $explodeText = explode(',', $product['text']);
                                                @endphp
                                                @foreach ($explodeText as $prop)
                                                    <li class="flex items-center gap-2 text-sm">
                                                        <span class="w-1.5 h-1.5 rounded-full bg-[var(--primary)]"></span>
                                                        {{ $prop }}
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                        <a class="inline-flex items-center gap-2 text-[var(--primary)] font-medium hover:gap-3 transition-all mt-auto" href="{{ $product['url'] ?? 'javascript:void(0)' }}">
                                            {{ __('frontend::lang.btn.learn_more') }}
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="swiper-button-next products-section-next !w-10 !h-10 md:!w-12 md:!h-12" aria-label="Next"></div>
                <div class="swiper-button-prev products-section-prev !w-10 !h-10 md:!w-12 md:!h-12" aria-label="Previous"></div>
                <div class="products-section-pagination mt-8 flex justify-center gap-1"></div>
            </div>
        @else
            <div class="grid md:grid-cols-3 gap-8">
                @foreach ($products['list'] as $product)
                    @php
                        $cal_idx = $productCategoryPaletteIndex($product['categories'][0] ?? []);
                    @endphp
                    <div class="group relative flex flex-col h-full {{ $categoryCardBgs[$cal_idx] }} rounded-[2.5rem] p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-[var(--border)] overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br {{ $categoryGradients[$cal_idx] }} opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="relative z-10 flex flex-col flex-1">
                            <div class="w-16 h-16 mb-6 group-hover:scale-110 transition-transform duration-300">
                                <img class="w-full h-full object-contain" src="{{ asset('modules/frontend/images/icon/icon-box.svg') }}" alt="Product icon">
                            </div>
                            <p class="text-sm font-semibold text-[var(--muted-foreground)] mb-2">{{ $product['categories'][0]['name'] ?? '' }}</p>
                            <h3 class="text-2xl font-bold mb-4 text-balance">{{ $product['name'] ?? '' }}</h3>
                            <p class="text-[var(--muted-foreground)] mb-6 leading-relaxed flex-1">{{ $product['desc'] ?? '' }}</p>
                            @if (!empty($product['text']))
                                <ul class="space-y-2 mb-6">
                                    @php
                                        $explodeText = explode(',', $product['text']);
                                    @endphp
                                    @foreach ($explodeText as $prop)
                                        <li class="flex items-center gap-2 text-sm">
                                            <span class="w-1.5 h-1.5 rounded-full bg-[var(--primary)]"></span>
                                            {{ $prop }}
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                            <a class="inline-flex items-center gap-2 text-[var(--primary)] font-medium hover:gap-3 transition-all mt-auto" href="{{ $product['url'] ?? 'javascript:void(0)' }}">
                                {{ __('frontend::lang.btn.learn_more') }}
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                                </svg>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>

@if ($useSlider)
    @push('scripts')
        <script>
            (function() {
                function initProductsSectionSwiper() {
                    var el = document.querySelector('.products-section-swiper');
                    if (!el || typeof Swiper === 'undefined') return;
                    new Swiper('.products-section-swiper', {
                        slidesPerView: 1,
                        spaceBetween: 24,
                        loop: true,
                        breakpoints: {
                            640: {
                                slidesPerView: 2
                            },
                            1024: {
                                slidesPerView: 3
                            }
                        },
                        navigation: {
                            nextEl: '.products-section-next',
                            prevEl: '.products-section-prev'
                        },
                        pagination: {
                            el: '.products-section-pagination',
                            clickable: true
                        }
                    });
                }
                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', initProductsSectionSwiper);
                } else {
                    initProductsSectionSwiper();
                }
            })();
        </script>
    @endpush
@endif