@extends('layouts.docs')

@section('content')
<div class=" min-h-screen">

    <!-- HERO -->
    <div class="relative bg-[#418D4A] py-10">
        <!-- Overlay Image -->
        <div class="absolute inset-0">
            <img src="welcome_banner_overlay.png"
                class="w-full h-full object-fit" />
        </div>

        <div class="relative max-w-6xl mx-auto px-6 py-16 text-center text-white">
            <h1 class="text-3xl md:text-4xl font-semibold mb-2">
                {{ __('Welcome to Flovix Help Center!') }}
            </h1>

            <p class="text-sm opacity-90 mb-14">
                {{ __('Flovix Products and Services Complete Guide') }}
            </p>

            @include('kb.partials.search-box', [
                'searchAction' => route('kb.index'),
                'searchValue' => request('query', ''),
            ])
        </div>
    </div>

    <!-- CATEGORIES -->
    <div class="max-w-6xl mx-auto px-6 py-10">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">

            @foreach($categories as $category)
                <a href="{{ route('kb.category_details', $category->slug) }}" class="cursor-pointer bg-gray-50 rounded-lg p-5 border border-transparent hover:shadow-lg transition">

                    <h3 class="capitalize font-bold text-gray-800 mb-1">
                        {{ $category->title }}
                    </h3>

                    <p class="text-xs text-gray-500 leading-relaxed mb-4">
                        {{ __('Easily view, search, and manage all Flovix records in one organized list efficiently.')}}
                    </p>

                    <hr class="mt-4 mb-3" />

                    <span class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider">
                        {{ $category->visible_articles_count }} {{ __('Guides') }}
                    </span>

                </a>
            @endforeach

        </div>
    </div>

    <!-- VIDEOS -->
    <div class="hidden max-w-6xl mx-auto px-6 pb-12">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-base font-semibold text-gray-800">{{ __('Videos') }}</h2>

            <a href="#" class="text-xs text-green-600 hover:underline">
                {{ __('See all Videos') }}
            </a>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">

            @for($i = 0; $i < 4; $i++)
                <div>
                    <div class="relative rounded-lg overflow-hidden bg-gray-200">
                        <img src="https://via.placeholder.com/300x180"
                             class="w-full h-28 object-cover">

                        <!-- play button -->
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="bg-white/90 rounded-full px-3 py-1 text-xs shadow">
                                ▶
                            </div>
                        </div>
                    </div>

                    <p class="text-[11px] mt-2 text-gray-600">
                        {{ __('How to add customers in Flovix') }}
                    </p>
                </div>
            @endfor

        </div>
    </div>

</div>
@endsection