@php
$settings = $section->settings ?? [];
$title = $settings['title'] ?? 'Browse Categories';
$subtitle = $settings['subtitle'] ?? 'Explore our diverse ecosystem of digital assets.';
$limit = $settings['limit'] ?? 6;
$columns = $settings['columns'] ?? 3;
$layout = $settings['layout'] ?? 'grid';
$cardStyle = $settings['card_style'] ?? 'glass';
$cardSize = $settings['card_size'] ?? 'small';
$autoScroll = $settings['auto_scroll'] ?? false;
$scrollSpeed = $settings['scroll_speed'] ?? '40s';

// Animation Settings
$animType = $settings['anim_type'] ?? 'fade-in-up';
$animDuration = $settings['anim_duration'] ?? '0.6s';
$animDelay = $settings['anim_delay'] ?? '0s';
$stagger = $settings['anim_stagger'] ?? true;
$hoverAnim = $settings['hover_anim'] ?? 'lift';

$paddingTop = $settings['padding_top'] ?? '0px';
$paddingBottom = $settings['padding_bottom'] ?? '0px';
$bgColor = $settings['bg_color'] ?? 'transparent';
$titleAlignment = $settings['title_alignment'] ?? 'center';

// Fetch categories
$categories = \App\Modules\Product\Models\Category::withCount('products')
    ->when(($settings['source'] ?? 'popular') === 'popular', fn($q) => $q->orderBy('products_count', 'desc'))
    ->when(($settings['source'] ?? 'popular') === 'alphabetic', fn($q) => $q->orderBy('name', 'asc'))
    ->limit($limit)
    ->get();

// Grid Column Mapping
$gridCols = [
    '1' => 'grid-cols-1',
    '2' => 'grid-cols-2',
    '3' => 'grid-cols-2 md:grid-cols-3',
    '4' => 'grid-cols-2 lg:grid-cols-4',
    '6' => 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
][$columns] ?? 'grid-cols-2 md:grid-cols-3';

$isSlider = $layout === 'slider';
$isMoving = $autoScroll;

// Size mapping - INCREASED for images
$sizeClasses = match($cardSize) {
    'small' => [
        'container' => 'min-h-[5rem] py-3 px-5', // Pill mode - Flexible height for long text
        'icon_wrap' => 'w-12 h-12 rounded-xl',
        'icon_text' => 'text-xl',
        'name_text' => 'text-sm md:text-base font-800',
        'count_text' => 'text-[9px]',
        'is_pill' => true
    ],
    'compact' => [
        'container' => 'h-36 p-5',
        'icon_wrap' => 'w-11 h-11 rounded-2xl',
        'icon_text' => 'text-2xl',
        'name_text' => 'text-base font-900',
        'count_text' => 'text-[10px]',
        'is_pill' => false
    ],
    default => [ // standard
        'container' => 'h-52 p-6',
        'icon_wrap' => 'w-14 h-14 rounded-2xl',
        'icon_text' => 'text-3xl',
        'name_text' => 'text-xl font-900',
        'count_text' => 'text-[11px]',
        'is_pill' => false
    ]
};

// Style mapping
$cardClasses = match($cardStyle) {
    'minimal' => 'bg-white border border-border-subtle shadow-sm hover:shadow-xl hover:border-brand-500/30 dark:bg-surface-primary',
    'border' => 'bg-transparent border border-border-subtle hover:border-brand-500 shadow-none',
    default => 'bg-surface-secondary/25 backdrop-blur-xl border border-white/5 hover:border-brand-500/40 shadow-xl', // glass
};

$textClasses = $cardStyle === 'minimal' ? 'text-text-base' : 'text-text-base dark:text-white';
$subTextClasses = $cardStyle === 'minimal' ? 'text-text-muted' : 'text-text-dim';
@endphp

@if($isMoving)
<style>
    @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .moving-container { display: flex; width: max-content; animation: marquee-scroll {{ $scrollSpeed }} linear infinite; will-change: transform; }
    .moving-wrapper { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
    .moving-container:hover { animation-play-state: paused; }
</style>
@endif

@php
    $ptStyle = "padding-top: $paddingTop;";
    $pbStyle = "padding-bottom: $paddingBottom;";
    $bgStyle = $bgColor !== 'transparent' ? "background-color: $bgColor;" : '';
@endphp

<section class="relative z-50 overflow-visible mt-8 md:mt-12 pt-8 md:pt-10 pb-0"
    style="{{ $bgStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: false }" x-intersect.once="intersected = true">

    <div class="container relative z-10 px-6 mx-auto">
        <div class="text-{{ $titleAlignment }} {{ $titleAlignment === 'center' ? 'mx-auto' : ($titleAlignment === 'right' ? 'ml-auto' : 'mr-auto') }} max-w-2xl mb-8">
            <h2 class="reveal-item anim-{{ $animType }} text-3xl md:text-5xl font-display font-900 text-text-base dark:text-white uppercase tracking-tight pt-0! pb-0! h-fit"
                :class="{ 'active': intersected }"
                style="--anim-duration: {{ $animDuration }}; --anim-delay: {{ $animDelay }};">
                {{ $title }}
            </h2>
            <p class="reveal-item anim-{{ $animType }} text-text-muted/60 max-w-xl {{ $titleAlignment === 'center' ? 'mx-auto' : ($titleAlignment === 'right' ? 'ml-auto mr-0' : 'mr-auto ml-0') }} font-500 text-sm md:text-base"
                :class="{ 'active': intersected }"
                style="--anim-duration: {{ $animDuration }}; --anim-delay: calc({{ $animDelay }} + 0.1s);">
                {{ $subtitle }}
            </p>
        </div>

        <div class="@if($isMoving) moving-wrapper @elseif($isSlider) overflow-x-auto hide-scrollbar @endif">
            <div class="@if($isMoving) moving-container gap-4 justify-center @elseif($isSlider) flex gap-4 pb-6 justify-center @else grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-6 justify-center @endif">
                @php
                $items = $categories;
                if ($isMoving && $categories->count() > 0) {
                    $repeats = $categories->count() < 12 ? 4 : 2;
                    $items = collect();
                    for ($i = 0; $i < $repeats; $i++) { $items = $items->concat($categories); }
                }
                @endphp

                @foreach ($items as $category)
                @php
                    $itemDelay = $stagger ? (float)$animDelay + ($loop->index * 0.04) : (float)$animDelay;
                    $hoverClass = $hoverAnim !== 'none' ? 'hover-' . $hoverAnim : '';
                    $catColor = $category->color ?? '#6366f1';
                @endphp
                
                <a href="/category/{{ $category->slug }}"
                    class="reveal-item anim-{{ $animType }} group relative overflow-hidden transition-all duration-500 {{ $hoverClass }} {{ $cardClasses }}
                            {{ $sizeClasses['container'] }} {{ $sizeClasses['is_pill'] ? 'rounded-2xl flex items-center gap-4' : 'rounded-2xl' }}
                            @if($isMoving || $isSlider) w-auto min-w-[220px] shrink-0 @endif"
                    :class="{ 'active': intersected }"
                    style="--anim-duration: {{ $animDuration }}; --anim-delay: {{ $itemDelay }}s;">

                    {{-- Background / Image for Non-Pill card styles --}}
                    @if($category->image && !$sizeClasses['is_pill'])
                        <img src="{{ Storage::url($category->image) }}"
                             class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-70 group-hover:opacity-90"
                             alt="{{ $category->name }}">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
                    @elseif(!$sizeClasses['is_pill'])
                        <div class="absolute inset-0 transition-transform duration-700 group-hover:scale-110 opacity-10"
                             style="background: {{ $catColor }};"></div>
                    @endif

                    <div class="{{ $sizeClasses['is_pill'] ? 'relative z-10 flex items-center gap-4 w-full' : 'absolute inset-0 p-5 flex flex-col justify-end' }}">
                        
                        @if($sizeClasses['is_pill'])
                             <div class="{{ $sizeClasses['icon_wrap'] }} overflow-hidden flex items-center justify-center transition-all duration-300 shadow-md border border-border-subtle/50 dark:border-white/5"
                                  style="background: {{ $catColor }}22;">
                                  @if($category->image)
                                     @php
                                         $catImg = $category->image;
                                         $catImgUrl = (Str::startsWith($catImg, ['http://', 'https://'])) ? $catImg : Storage::url($catImg);
                                     @endphp
                                     <img src="{{ $catImgUrl }}" class="w-full h-full object-cover">
                                 @else
                                     <span class="{{ $sizeClasses['icon_text'] }}">{{ $category->icon ?? '📦' }}</span>
                                 @endif
                             </div>
                             <div class="flex-1 min-w-0 pr-2">
                                 <h3 class="{{ $sizeClasses['name_text'] }} {{ $textClasses }} leading-[1.1] transition-colors group-hover:text-brand-500 uppercase tracking-tighter text-[10px] xs:text-[11px] sm:text-sm md:text-base break-words mb-1">
                                     {{ $category->name }}
                                 </h3>
                                 <span class="{{ $sizeClasses['count_text'] }} {{ $subTextClasses }} uppercase tracking-widest font-800 opacity-60 text-[8px] sm:text-[9px]">
                                     {{ $category->products_count }} PRODUCTS
                                 </span>
                             </div>
                             <div class="opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all p-2 bg-brand-500/10 rounded-lg">
                                 <i data-lucide="arrow-right" class="w-3 h-3 text-brand-500"></i>
                             </div>
                        @else
                            <div class="mb-auto flex justify-between items-start">
                               <div class="{{ $sizeClasses['icon_wrap'] }} overflow-hidden flex items-center justify-center transition-all duration-300 shadow-lg border border-border-subtle/50 dark:border-white/10"
                                    style="background: {{ $catColor }}33; backdrop-filter: blur(10px);">
                                   @if($category->image)
                                       <img src="{{ Storage::url($category->image) }}" class="w-full h-full object-cover">
                                   @else
                                       <span class="{{ $sizeClasses['icon_text'] }}">{{ $category->icon ?? '📦' }}</span>
                                   @endif
                               </div>
                               <div class="opacity-0 group-hover:opacity-100 transition-all">
                                    <div class="w-8 h-8 rounded-full bg-surface-primary dark:bg-white/10 backdrop-blur-md flex items-center justify-center border border-border-subtle dark:border-white/20">
                                        <i data-lucide="arrow-up-right" class="w-4 h-4 text-brand-500"></i>
                                    </div>
                               </div>
                            </div>

                            <div class="relative z-10 transition-transform duration-500">
                                <h3 class="{{ $sizeClasses['name_text'] }} {{ $textClasses }} mb-0.5 tracking-tight group-hover:text-brand-500 transition-colors uppercase">
                                    {{ $category->name }}
                                </h3>
                                <div class="flex items-center gap-2">
                                    <span class="{{ $sizeClasses['count_text'] }} {{ $subTextClasses }} font-900 uppercase tracking-widest">{{ $category->products_count }} ITEMS</span>
                                    <div class="w-1.5 h-1.5 rounded-full bg-brand-500 opacity-0 group-hover:opacity-100 transition-all"></div>
                                </div>
                            </div>
                        @endif
                    </div>
                </a>
                @endforeach
            </div>
        </div>
    </div>

    <style>
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    </style>
</section>