@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
@php
    $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    $departmentSlides = $rootDepartments->count() ? $rootDepartments : $departments;
    $departmentIconClass = function (string $name): string {
        $key = \Illuminate\Support\Str::lower($name);

        return match (true) {
            str_contains($key, 'tech') || str_contains($key, 'it') || str_contains($key, 'software') => 'fa-solid fa-microchip',
            str_contains($key, 'finance') || str_contains($key, 'account') => 'fa-solid fa-file-invoice-dollar',
            str_contains($key, 'human') || str_contains($key, 'hr') || str_contains($key, 'people') => 'fa-solid fa-users-gear',
            str_contains($key, 'procurement') || str_contains($key, 'supply') => 'fa-solid fa-truck-fast',
            str_contains($key, 'inventory') || str_contains($key, 'warehouse') => 'fa-solid fa-boxes-stacked',
            str_contains($key, 'sales') || str_contains($key, 'crm') || str_contains($key, 'customer') => 'fa-solid fa-handshake',
            str_contains($key, 'project') || str_contains($key, 'operations') => 'fa-solid fa-diagram-project',
            str_contains($key, 'marketing') || str_contains($key, 'brand') => 'fa-solid fa-bullhorn',
            str_contains($key, 'support') || str_contains($key, 'service') => 'fa-solid fa-headset',
            default => 'fa-solid fa-sitemap',
        };
    };
@endphp

@include('frontend.layouts.breadcrumb', ['title' => 'Departments'])

@if(!empty($pageDepartmentsIntro))
    <section class="space-small pt-40 pb-0 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="title-wrap three"><p class="mb-0">{{ $pageDepartmentsIntro }}</p></div>
                </div>
            </div>
        </div>
    </section>
@endif

<section class="tv-service-section space-bottom inner style-2 bg-light">
    <div class="tv-service-inner position-relative overflow-hidden mx-30 ml-mx-0">
        <div class="p-top-left wow slideInLeft z-1"><img src="{{ $assetPath('images/service/hm2-shape01.webp') }}" alt=""></div>
        <div class="p-top-right wow slideInRight z-1"><img src="{{ $assetPath('images/service/hm2-shape02.webp') }}" alt=""></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="title-wrap two white">
                        <div class="sub-title-2"><i class="fa-solid fa-circle-check"></i>Departments</div>
                        <h2 class="sec-title text-dark">Explore the Teams Driving <br>Reliable and Scalable Delivery</h2>
                    </div>
                </div>
            </div>

            <div class="row gy-30">
                <div class="col-lg-12">
                    <div class="service-slider swiper">
                        <div class="swiper-wrapper">
                            @forelse($departmentSlides as $department)
                                @php $iconClass = $departmentIconClass($department->name); @endphp
                                <div class="swiper-slide">
                                    <div class="tv-service-single-box wow fadeInUp" data-wow-delay=".2s">
                                        <div class="inner-box">
                                            <div class="icon cms-service-card-icon"><i class="{{ $iconClass }}"></i></div>
                                            <h4 class="title">{{ $department->name }}</h4>
                                            <div class="border2 mt-20 mb-20"></div>
                                            <p class="text">{{ \Illuminate\Support\Str::limit($department->description ?: 'Meet the people, projects, and opportunities in this department.', 110) }}</p>
                                            <a href="{{ route('frontend.departments.show', $department->slug) }}" class="theme-btn w-100 mt-40">
                                                <span class="link-effect"><span class="effect-1">EXPLORE MORE</span><span class="effect-1">EXPLORE MORE</span></span>
                                                <i class="fa-solid fa-arrow-up-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="swiper-slide">
                                    <div class="cms-inotek-empty text-center">
                                        <h3>No Departments Available</h3>
                                        <p>Our organizational structure is being updated.</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            <div class="cta-section style-1 space-top">
                <div class="row gy-30">
                    <div class="col-lg-12 lg-px-0">
                        <div class="cta-inner position-relative">
                            <div class="bg image"><img src="{{ $assetPath('images/cta/hm2-bg02.webp') }}" alt=""></div>
                            <div class="cta-left">
                                <div class="mike"><img src="{{ $assetPath('images/cta/mike.webp') }}" alt=""></div>
                                <h4>See how our departments work together <br> to deliver stronger outcomes.</h4>
                            </div>
                            <div class="cta-right text-right">
                                <a href="{{ route('frontend.departments.chart') }}" class="theme-btn br-30">
                                    <span class="link-effect"><span class="effect-1">View Full Structure</span><span class="effect-1">View Full Structure</span></span>
                                </a>
                                <div class="arrow"><img src="{{ $assetPath('images/cta/hm2-arrow1.webp') }}" alt=""></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="tv-counter-section style-2 bg-light position-relative z-1">
    <div class="counter-inner lg-br-0 py-65 lg-py-40 position-relative mx-30 xxl-mx-0 overflow-hidden">
        <div class="bg image"><img src="{{ $assetPath('images/counter/hm1-bg01.webp') }}" alt=""></div>
        <div class="overlay bg-theme mbm-overlay"></div>
        <div class="container">
            <div class="row gy-30">
                <div class="col-lg-4 col-md-6">
                    <div class="counter-box">
                        <div class="icon"><img src="{{ $assetPath('images/counter/hm1-icon01.webp') }}" alt=""></div>
                        <div class="content"><h4 class="title mb-0">{{ $departments->count() }}+</h4><h6 class="text mb-0">Total Departments</h6></div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="counter-box justify-content-center">
                        <div class="icon"><img src="{{ $assetPath('images/counter/hm1-icon02.webp') }}" alt=""></div>
                        <div class="content"><h4 class="title mb-0">{{ $departments->sum('users_count') }}+</h4><h6 class="text mb-0">Team Members</h6></div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="counter-box align-items-start align-items-lg-end">
                        <div class="icon"><img src="{{ $assetPath('images/counter/hm1-icon03.webp') }}" alt=""></div>
                        <div class="content"><h4 class="title mb-0">{{ $departments->sum('projects_count') }}+</h4><h6 class="text mb-0">Active Projects</h6></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@include('frontend.partials.newsletter')
@endsection