@extends('landing.layout')

@section('title', $page->title)

@section('content')
    @include('landing.breadcrumb')

    <section class="relative py-16 lg:py-24">
        <div class="container relative">
            <div class="grid grid-cols-1 items-center gap-6 md:grid-cols-12">

                @if ($page->image && $page->image_url)
                    <div class="md:col-span-4 lg:col-span-5">
                        <div class="relative md:shrink-0">
                            <img class="w-full rounded-lg object-cover shadow-md dark:shadow-gray-700"
                                src="{{ $page->image_url }}" alt="{{ $page->title }}" />
                        </div>
                    </div>
                    <div class="md:col-span-8 lg:col-span-7">
                        <div class="rounded-md bg-white p-6 shadow-sm dark:bg-slate-900 dark:shadow-gray-700">
                            <h5 class="mb-4 text-xl font-medium">{{ $page->title }}</h5>
                            <div class="text-slate-400">
                                {!! $page->description !!}
                            </div>
                        </div>
                    </div>
                @else
                    <div class="md:col-span-12">
                        <div class="mx-auto max-w-4xl">
                            <div class="rounded-md bg-white p-6 shadow-sm dark:bg-slate-900 dark:shadow-gray-700">
                                <h5 class="mb-4 text-xl font-medium">{{ $page->title }}</h5>
                                <div class="text-slate-400">
                                    {!! $page->description !!}
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

            </div>

            <div class="mt-16 lg:mt-24">
                <div class="grid grid-cols-1 text-center">
                    <h3 class="mb-6 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">
                        Punya Pertanyaan? Hubungi Kami!
                    </h3>

                    <p class="mx-auto max-w-xl text-slate-400">
                        Temukan dunia pengetahuan dan peluang melalui program pelatihan Simdiklat,
                        tersedia secara offline maupun online untuk mendukung pengembangan karier Anda.
                    </p>

                    <div class="mt-6">
                        <a class="inline-flex h-10 items-center justify-center rounded-md bg-violet-600 px-5 font-medium tracking-wide text-white transition-colors hover:bg-violet-700"
                            href="{{ route('landing.kontak.index') }}">
                            <i class="iconoir-phone me-2 align-middle"></i> Kontak Kami
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection