@extends('frontend.layouts.app')

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

@section('content')
@php
    $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    $serviceHighlights = $featuredServices->count() ? $featuredServices->take(2) : $services->getCollection()->take(2);
    $serviceIconClass = function (string $name): string {
        $key = \Illuminate\Support\Str::lower($name);

        return match (true) {
            str_contains($key, 'school') || str_contains($key, 'student') || str_contains($key, 'education') => 'fa-solid fa-graduation-cap',
            str_contains($key, 'pos') || str_contains($key, 'sales') || str_contains($key, 'retail') => 'fa-solid fa-cash-register',
            str_contains($key, 'erp') || str_contains($key, 'enterprise') || str_contains($key, 'company') => 'fa-solid fa-building-columns',
            str_contains($key, 'mobile') || str_contains($key, 'app') || str_contains($key, 'android') || str_contains($key, 'ios') => 'fa-solid fa-mobile-screen-button',
            str_contains($key, 'web') || str_contains($key, 'software') || str_contains($key, 'system') || str_contains($key, 'custom') => 'fa-solid fa-code',
            str_contains($key, 'automation') || str_contains($key, 'workflow') || str_contains($key, 'digital') => 'fa-solid fa-gears',
            str_contains($key, 'security') || str_contains($key, 'cyber') => 'fa-solid fa-shield-halved',
            str_contains($key, 'cloud') || str_contains($key, 'hosting') => 'fa-solid fa-cloud',
            str_contains($key, 'support') || str_contains($key, 'help') => 'fa-solid fa-headset',
            str_contains($key, 'data') || str_contains($key, 'analytics') || str_contains($key, 'report') => 'fa-solid fa-chart-line',
            default => 'fa-solid fa-microchip',
        };
    };
@endphp

@include('frontend.layouts.breadcrumb', ['title' => $pageServicesTitle ?? 'Services'])

<section class="tv-feature-section bg-light space">
    <div class="container">
        <div class="row gy-30">
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="tv-feature-item wow fadeInLeft" data-wow-delay=".5s">
                    <div class="client-social-proof">
                        <div class="social">
                            @foreach($serviceHighlights as $service)
                                <span class="cms-about-proof-icon"><i class="{{ $serviceIconClass($service->name) }}"></i></span>
                            @endforeach
                            <h4>{{ max(1, $services->total()) }}+</h4>
                        </div>
                        <div class="count-box mt-30"><span class="count-number odometer" data-count="{{ max(1, $services->total()) }}">0</span></div>
                        <div class="rating-viewers">active services</div>
                        <a href="{{ route('frontend.contact') }}" class="theme-btn style2 mt-20 br-30">
                            <span class="link-effect"><span class="effect-1">Explore More</span><span class="effect-1">Explore More</span></span>
                            <span class="arrow-all-2"><i><svg width="11" height="12" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white"></path></svg><svg width="11" height="12" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white"></path></svg></i></span>
                        </a>
                        <div class="scribble-shape1 moving"><img src="{{ $assetPath('images/feature/scribble.webp') }}" alt=""></div>
                    </div>
                </div>
            </div>
            @foreach($serviceHighlights as $service)
                @php $highlightIcon = $serviceIconClass($service->name); @endphp
                <div class="col-lg-4 col-md-6 col-sm-6">
                    <div class="tv-feature-box {{ $loop->last ? 'bg-theme3' : '' }} wow fadeInLeft" data-wow-delay="{{ $loop->first ? '.7s' : '.9s' }}">
                        <div class="icon-top"><div class="icon {{ $loop->last ? 'style2 bg-dark' : '' }}"><i class="fa-solid fa-arrow-up-right"></i></div></div>
                        <div class="logo mb-40 cms-feature-fa-icon"><i class="{{ $highlightIcon }}"></i></div>
                        <h2>{{ $service->name }}</h2>
                        <p>{{ \Illuminate\Support\Str::limit(strip_tags($service->short_description ?: $service->description), 80) }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<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="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>{{ $pageServicesSubtitleLabel ?? 'Services' }}</div>
                        <h2 class="sec-title text-dark">{!! nl2br(e($pageServicesHeading ?? '')) !!}</h2>
                        @if(!empty($pageServicesIntro))
                            <div class="row justify-content-center mt-15">
                                <div class="col-lg-8">
                                    <p class="text-dark mb-0">{{ $pageServicesIntro }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="row gy-30">
                @forelse($services as $service)
                    @php
                        $iconClass = $serviceIconClass($service->name . ' ' . optional($service->category)->name);
                    @endphp
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
                        <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">{{ $service->name }}</h4>
                                <div class="border2 mt-20 mb-20"></div>
                                <p class="text">{{ \Illuminate\Support\Str::limit(strip_tags($service->short_description ?: $service->description), 115) }}</p>
                                <a href="{{ route('frontend.services.show', $service) }}" 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="col-lg-12">
                        <div class="cms-inotek-empty text-center">
                            <h3>No services found</h3>
                            <p>Services added from the admin side will appear here.</p>
                        </div>
                    </div>
                @endforelse
            </div>

            <div class="cms-pagination">{{ $services->withQueryString()->links() }}</div>
        </div>
    </div>
</section>

<div class="tv-marquee-section bg-light position-relative">
    <div class="tv-marquee-inner mx-30 ml-mx-0 position-relative">
        <div class="container-fluid p-0 overflow-hidden">
            <div class="slider__marquee clearfix marquee-wrap">
                <ul class="marquee_mode marquee__group">
                    @foreach(['Digital Marketing', 'Branding Solutions', 'Custom Website', 'Innovation Design', 'Cyber Security'] as $item)
                        <li class="item m-item"><img class="icon" src="{{ $assetPath('images/icons/marquee-icon.png') }}" alt=""> {{ $item }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>

@include('frontend.partials.service-template-extras')
@include('frontend.partials.newsletter')
@endsection