@php
    $services = config('constants.services');
@endphp

@extends('app')

@section('head')
<title>{{ ucwords($service['meta']['title']) }}</title>
<meta name="description" content="{{ $service['meta']['description'] }}">
<meta name="og:title" content="{{ ucwords($service['meta']['title']) }}">
<meta name="og:description" content="{{ $service['meta']['description'] }}">
<meta name="og:image" content="/images/meta-image.png">
<meta name="og:type" content="website">
<meta name="og:url" content="{{ url('/service/' . $service['slug']) }}">
@endsection

@section('scripts')
<script>
    const handleClickScroll = (e) => {
        e.preventDefault();
        const element = document.getElementById('scroll-content');
        element.scrollIntoView({ behavior: 'smooth' });
    }
</script>
@endsection

@section('styles')
<style>
</style>
@endsection

@section('main')
<main class="">
    <section class="px-5 lg:px-[120px]">
        <div class="py-4 border-b border-slate-200 flex gap-1 text-sm md:text-lg lg:text-xl">
            <a href="/">
                <img src="{{ asset('icons/arrow-left.svg') }}" alt="Logo" class="w-4 lg:w-6 mr-2 mb-1" />
            </a>
            <span class="text-slate-400 font-medium">Services</span>
            <span class="text-slate-800 font-medium">/ {{$service['title']}}</span>
        </div>
    </section>

    <section class="px-5 py-4 flex flex-col-reverse items-center gap-10 md:flex-row md:py-6 lg:py-10 lg:px-[120px] lg:gap-20">
        <div class="flex-1 flex flex-col gap-4 lg:gap-8">
            <h1 class="text-imperial-blue-900 text-2xl lg:text-5xl font-medium">
                {{ $service['title'] }}
            </h1>
            <h2 class="text-slate-500 text-lg lg:text-2xl font-medium">
                {{ $service['description'] }}
            </h2>
            <div>
                <button onclick="handleClickScroll(event)" class="flex items-center gap-2 rounded-full bg-white border border-slate-200 text-slate-800 hover:opacity-80 px-6 py-2" id="navbar-button-contact-us">
                    <img src="{{ asset('icons/arrow-down.svg') }}" alt="whatsapp" class="size-6 lg:size-8">
                    <span class="text-sm lg:text-xl font-medium">Learn More</span>
                </button>
            </div>
        </div>

        <img src="{{ asset($service['hero_src']) }}" alt="hero" class="w-full md:w-[320px] lg:w-[480px] aspect-square" />

    </section>


    <div id="scroll-content"></div>

    <section class="">

        @if($service['slug'] === 'hr-outsourcing')
            @include('service.hr-outsourcing')
        @endif

        @if($service['slug'] === 'facility-support-services')
            @include('service.facility-support-services')
        @endif

        @if($service['slug'] === 'project-event-manpower-services')
            @include('service.project-event-manpower-services')
        @endif

        @if($service['slug'] === 'recruitment-services')
            @include('service.recruitment-services')
        @endif

        @if($service['slug'] === 'payroll-agent')
            @include('service.payroll-agent')
        @endif


    </section>

</main>
@endsection