@extends('landing.layout')

@section('title', 'Beranda')

@section('header')
  @include('landing.header-beranda')
@endsection

@push('style')
  @vite(['resources/js/landing/home/import.js'])
@endpush

@section('content')
  <!-- example banners -->
  {{-- <section class="swiper mySwiper swiper-slider-hero relative block h-screen" id="home">
        <div class="swiper-wrapper">
            <div class="swiper-slide flex items-center overflow-hidden">
                <div class="slide-inner slide-bg-image bg-center; absolute start-0 top-0 flex h-full w-full items-center"
                    style="background-image: url('{{ asset('landing/images/bg/2.jpg') }}')">
                    <div class="absolute inset-0 bg-slate-900/70"></div>
                    <div class="container relative md:mt-16">
                        <div class="grid grid-cols-1">
                            <div class="text-center">
                                <h1 class="mb-5 text-4xl font-bold leading-normal text-white lg:text-5xl lg:leading-normal">
                                    Unlock Your Potential <br> with Online Learning</h1>
                                <p class="mx-auto max-w-xl text-lg text-white/70">Launch your campaign and benefit from our
                                    expertise on designing and managing conversion centered Tailwind CSS v3.x html page.</p>

                                <div class="mt-6">
                                    <a class="inline-flex h-12 items-center justify-center rounded-md bg-violet-600 px-6 font-medium tracking-wide text-white"
                                        href="#">Contact Us <i class="mdi mdi-arrow-right ms-1 align-middle"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-slide flex items-center overflow-hidden">
                <div class="slide-inner slide-bg-image bg-center; absolute start-0 top-0 flex h-full w-full items-center"
                    style="background-image: url('{{ asset('landing/images/bg/3.jpg') }}')">
                    <div class="absolute inset-0 bg-slate-900/70"></div>
                    <div class="container relative md:mt-16">
                        <div class="grid grid-cols-1">
                            <div class="text-center">
                                <h1 class="mb-5 text-4xl font-bold leading-normal text-white lg:text-5xl lg:leading-normal">
                                    Find the Perfect Course <br> for Your Carrier Goals</h1>
                                <p class="mx-auto max-w-xl text-lg text-white/70">Launch your campaign and benefit from our
                                    expertise on designing and managing conversion centered Tailwind CSS v3.x html page.</p>

                                <div class="mt-6">
                                    <a class="inline-flex h-12 items-center justify-center rounded-md bg-violet-600 px-6 font-medium tracking-wide text-white"
                                        href="#">Get Started <i class="mdi mdi-arrow-right ms-1 align-middle"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-slide flex items-center overflow-hidden">
                <div class="slide-inner slide-bg-image bg-center; absolute start-0 top-0 flex h-full w-full items-center"
                    style="background-image: url('{{ asset('landing/images/bg/4.jpg') }}')">
                    <div class="absolute inset-0 bg-slate-900/70"></div>
                    <div class="container relative md:mt-16">
                        <div class="grid grid-cols-1">
                            <div class="text-center">
                                <h1 class="mb-5 text-4xl font-bold leading-normal text-white lg:text-5xl lg:leading-normal">
                                    Welcome to Your Online <br> Learning Journey</h1>
                                <p class="mx-auto max-w-xl text-lg text-white/70">Launch your campaign and benefit from our
                                    expertise on designing and managing conversion centered Tailwind CSS v3.x html page.</p>

                                <div class="mt-6">
                                    <a class="inline-flex h-12 items-center justify-center rounded-md bg-violet-600 px-6 font-medium tracking-wide text-white"
                                        href="#">Get Started <i class="mdi mdi-arrow-right ms-1 align-middle"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="swiper-pagination"></div>
        <div
            class="swiper-button-next -mt-[30px] size-[35px] rounded-full border border-solid border-white/50 bg-transparent bg-none text-center leading-[35px] text-white hover:border-indigo-600 hover:bg-indigo-600">
        </div>
        <div
            class="swiper-button-prev -mt-[30px] size-[35px] rounded-full border border-solid border-white/50 bg-transparent bg-none text-center leading-[35px] text-white hover:border-indigo-600 hover:bg-indigo-600">
        </div>
    </section> --}}

  <section
    class="swiper mySwiper swiper-slider-hero relative block h-screen"
    id="home"
    x-data="bannerSlider()"
  >
    <div class="swiper-wrapper">
      @if (isset($banners) && $banners->count() > 0)
        @foreach ($banners as $banner)
          <div class="swiper-slide flex items-center overflow-hidden">
            <div
              class="slide-inner slide-bg-image absolute start-0 top-0 flex h-full w-full items-center bg-center"
              style="background-image: url('{{ $banner->image ? asset('storage/' . $banner->image) : asset('landing/images/bg/default.jpg') }}')"
            >
              <div class="absolute inset-0 bg-slate-900/70"></div>
              <div class="container relative md:mt-16">
                <div class="grid grid-cols-1">
                  <div class="text-center">
                    @if ($banner->custom_html)
                      {!! $banner->custom_html !!}
                    @else
                      <h1 class="mb-5 text-4xl font-bold leading-normal text-white lg:text-5xl lg:leading-normal">
                        {{ $banner->name }}
                      </h1>
                      <p class="mx-auto max-w-xl text-lg text-white/70">
                        Temukan pengalaman belajar online terbaik untuk mencapai tujuan karir Anda.
                      </p>
                    @endif

                    @if ($banner->url)
                      <div class="mt-6">
                        <a
                          class="inline-flex h-12 items-center justify-center rounded-md bg-violet-600 px-6 font-medium tracking-wide text-white transition-colors hover:bg-violet-700"
                          href="{{ $banner->url }}"
                          @if ($banner->url_new_tab) target="_blank" @endif
                        >
                          Get Started <i class="mdi mdi-arrow-right ms-1 align-middle"></i>
                        </a>
                      </div>
                    @endif
                  </div>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      @else
        <div class="swiper-slide flex items-center overflow-hidden">
          <div
            class="slide-inner slide-bg-image absolute start-0 top-0 flex h-full w-full items-center bg-center"
            style="background-image: url('{{ asset('landing/images/bg/3.jpg') }}')"
          >
            <div class="absolute inset-0 bg-slate-900/70"></div>
            <div class="container relative md:mt-16">
              <div class="grid grid-cols-1">
                <div class="text-center">
                  <h1 class="mb-5 text-4xl font-bold leading-normal text-white lg:text-5xl lg:leading-normal">
                    Welcome to Your Online <br> Learning Journey
                  </h1>
                  <p class="mx-auto max-w-xl text-lg text-white/70">
                    Discover the best online learning experience to achieve your career goals.
                  </p>
                  <div class="mt-6">
                    <a
                      class="inline-flex h-12 items-center justify-center rounded-md bg-violet-600 px-6 font-medium tracking-wide text-white transition-colors hover:bg-violet-700"
                      href="#courses"
                    >
                      Get Started <i class="mdi mdi-arrow-right ms-1 align-middle"></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      @endif
    </div>

    <div
      class="swiper-button-next -mt-[30px] size-[35px] rounded-full border border-solid border-white/50 bg-transparent bg-none text-center leading-[35px] text-white transition-colors hover:border-indigo-600 hover:bg-indigo-600"
    >
    </div>
    <div
      class="swiper-button-prev -mt-[30px] size-[35px] rounded-full border border-solid border-white/50 bg-transparent bg-none text-center leading-[35px] text-white transition-colors hover:border-indigo-600 hover:bg-indigo-600"
    >
    </div>

    <div class="swiper-pagination"></div>
  </section>

  <div class="z-1 container relative -mt-12">
    <div class="flex justify-center">
      <div class="rounded-xl bg-white p-6 shadow-sm shadow-slate-100 md:w-11/12 lg:w-3/4 dark:bg-slate-900 dark:shadow-slate-800">
        <form class="relative mx-auto">
          <input
            class="h-[50px] w-full rounded-full border border-slate-100 bg-white/70 pb-4 pe-40 ps-6 pt-4 text-slate-900 outline-none dark:border-slate-800 dark:bg-slate-900/70 dark:text-white"
            id="searchCourse"
            name="name"
            type="text"
            placeholder="Search..."
          >
          <button
            class="absolute end-[1px] top-[1px] h-12 items-center justify-center rounded-full bg-violet-600 px-6 font-medium tracking-wide text-white"
            type="submit"
          >Search Now</button>
        </form>
      </div>
    </div>
  </div>

  <section class="relative py-16 md:py-24">
    <div class="container relative">
      <div class="grid grid-cols-1 pb-6 text-center">
        <span class="mb-3 font-semibold uppercase text-violet-600">Kategori</span>
        <h4 class="mb-6 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">Pelatihan dan
          Pengetahuan</h4>
        <p class="mx-auto max-w-xl text-slate-400">
          Kembangkan keterampilan dan pengetahuan Anda melalui pelatihan berkualitas untuk mendukung karier dan
          masa depan.
        </p>
      </div>

      <div class="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
        <div
          class="group flex items-center rounded-md bg-white p-5 shadow-sm shadow-slate-200 duration-500 hover:bg-gradient-to-tr hover:from-fuchsia-600 hover:to-violet-600 dark:bg-slate-900 dark:shadow-slate-800"
        >
          <div
            class="flex size-12 items-center justify-center rounded-md bg-violet-600/5 align-middle text-violet-600 shadow-sm shadow-slate-200 group-hover:bg-white/20 group-hover:text-white dark:shadow-slate-800"
            style="min-width: 64px; min-height: 64px;"
          >
            <i
              class="iconoir-laptop-dev-mode text-2xl"
              style="font-size: 28px;"
            ></i>
          </div>

          <div
            class="content ms-3 pl-5"
            style="margin-left: 24px;"
          >
            <a
              class="title text-lg font-semibold group-hover:text-white"
              href="#"
              style="display: block; margin-bottom: 8px;"
            >Pelatihan</a>
            <p
              class="text-slate-400 group-hover:text-white/50"
              style="line-height: 1.6;"
            >Ikuti Pelatihan untuk
              tingkatkan kompetensi anda</p>
          </div>
        </div>

        <div
          class="group flex items-center rounded-md bg-white p-5 shadow-sm shadow-slate-200 duration-500 hover:bg-gradient-to-tr hover:from-fuchsia-600 hover:to-violet-600 dark:bg-slate-900 dark:shadow-slate-800"
        >
          <div
            class="flex size-12 items-center justify-center rounded-md bg-violet-600/5 align-middle text-violet-600 shadow-sm shadow-slate-200 group-hover:bg-white/20 group-hover:text-white dark:shadow-slate-800"
            style="min-width: 64px; min-height: 64px;"
          >
            <i
              class="iconoir-cube-replace-face text-2xl"
              style="font-size: 28px;"
            ></i>
          </div>

          <div
            class="content ms-3"
            style="margin-left: 24px;"
          >
            <a
              class="title text-lg font-semibold group-hover:text-white"
              href="#"
              style="display: block; margin-bottom: 8px;"
            >Klinik Pengetahuan</a>
            <p
              class="text-slate-400 group-hover:text-white/50"
              style="line-height: 1.6;"
            >Ikuti materi
              Pengetahuan untuk tingkatkan kualifikasi anda</p>
          </div>
        </div>

        <div
          class="group flex items-center rounded-md bg-white p-5 shadow-sm shadow-slate-200 duration-500 hover:bg-gradient-to-tr hover:from-fuchsia-600 hover:to-violet-600 dark:bg-slate-900 dark:shadow-slate-800"
        >
          <div
            class="flex size-12 items-center justify-center rounded-md bg-violet-600/5 align-middle text-violet-600 shadow-sm shadow-slate-200 group-hover:bg-white/20 group-hover:text-white dark:shadow-slate-800"
            style="min-width: 64px; min-height: 64px;"
          >
            <i
              class="iconoir-network-reverse text-2xl"
              style="font-size: 28px;"
            ></i>
          </div>

          <div
            class="content ms-3"
            style="margin-left: 24px;"
          >
            <a
              class="title text-lg font-semibold group-hover:text-white"
              href="#"
              style="display: block; margin-bottom: 8px;"
            >Berbagi Pengetahuan</a>
            <p
              class="text-slate-400 group-hover:text-white/50"
              style="line-height: 1.6;"
            >Ikuti materi
              Pengetahuan untuk tingkatkan kualifikasi anda</p>
          </div>
        </div>
      </div>
    </div>

    <div class="container relative mt-16 md:mt-24">
      <div class="grid grid-cols-1 items-center gap-6 md:grid-cols-12">
        <div class="md:col-span-7 lg:col-span-6">
          <div class="relative">
            <div class="relative me-10 md:shrink-0 lg:me-0">
              <img
                class="w-84 dark:shadow-gyay-700 h-[500px] rounded-lg object-cover shadow-md md:w-96"
                src="{{ asset('landing') }}/images/course/1.jpg"
                alt=""
              >
            </div>

            <div class="absolute bottom-10 end-0 lg:end-6">
              <div class="z-1 relative top-10 text-end lg:text-end xl:text-start">
                <a
                  class="lightbox dark:shadow-gyay-700 inline-flex size-20 items-center justify-center rounded-full bg-violet-600 text-white shadow-md"
                  data-type="youtube"
                  data-id="yba7hPeTSjk"
                  href="#!"
                >
                  <i class="mdi mdi-play inline-flex items-center justify-center text-2xl"></i>
                </a>
              </div>

              <div class="relative md:shrink-0">
                <img
                  class="dark:shadow-gyay-700 size-48 rounded-lg object-cover shadow-md"
                  src="{{ asset('landing') }}/images/course/4.jpg"
                  alt=""
                >
              </div>
            </div>
          </div>
        </div>

        <div class="md:col-span-5 lg:col-span-6">
          <span class="mb-3 font-semibold uppercase text-violet-600">Tentang Kami</span>
          <h4 class="mb-4 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">
            Simdiklat: Belajar Tanpa Batas
          </h4>

          <p class="mx-auto max-w-xl text-slate-400">
            Simdiklat menghadirkan pengalaman belajar terpadu bagi ASN Kementerian Agama melalui program
            pelatihan dan berbagi pengetahuan, baik secara online maupun tatap muka. Dengan materi variatif dan
            interaktif, Simdiklat mendukung pengembangan kompetensi dan mendorong kolaborasi untuk kemajuan
            bersama.
          </p>

          <div class="mt-4 grid gap-4 md:grid-cols-2">
            <ul class="list-none">
              <li class="mt-2 text-[16px]">
                <i class="mdi mdi-school-outline mr-2 text-xl text-violet-600"></i>
                <span class="text-slate-400">Pelatihan ASN online & offline</span>
              </li>
              <li class="mt-2 text-[16px]">
                <i class="mdi mdi-laptop mr-2 text-xl text-violet-600"></i>
                <span class="text-slate-400">Belajar dengan instruktur ahli</span>
              </li>
            </ul>

            <ul class="list-none">
              <li class="mt-2 text-[16px]">
                <i class="mdi mdi-book-open-page-variant mr-2 text-xl text-violet-600"></i>
                <span class="text-slate-400">Materi pengetahuan terkini</span>
              </li>
              <li class="mt-2 text-[16px]">
                <i class="mdi mdi-account-group-outline mr-2 text-xl text-violet-600"></i>
                <span class="text-slate-400">Pengembangan SDM Kemenag</span>
              </li>
            </ul>

          </div>

          <div class="mt-6">
            <a
              class="inline-flex h-10 items-center justify-center rounded-md bg-violet-600/10 px-5 font-medium tracking-wide text-violet-600 hover:bg-violet-600 hover:text-white"
              href="#"
            >Lihat selengkapnya <i class="mdi mdi-arrow-right ms-1 align-middle"></i></a>
          </div>

        </div>
      </div>
    </div>

    <div class="container relative mt-16 md:mt-24">
      <div class="grid grid-cols-1 pb-6 text-center">
        <span class="mb-3 font-semibold uppercase text-violet-600">Pelatihan</span>
        <h4 class="mb-6 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">Pelatihan Terbaru</h4>

        <p class="mx-auto max-w-xl text-slate-400">
          Ikuti pelatihan terbaru dengan materi terkini untuk meningkatkan keterampilan, wawasan, dan peluang
          karier Anda.
        </p>

      </div>

      <div class="relative mt-3 grid grid-cols-1">
        <div class="tiny-home-slide-three">

          @forelse($pelatihan as $pelatihan)
            <div class="tiny-slide">
              <div class="group m-3 rounded-md bg-white shadow-md shadow-slate-100 transition duration-500 hover:shadow-lg dark:bg-slate-900 dark:shadow-slate-800">
                <div class="relative p-3 pb-0">
                  <div class="relative overflow-hidden rounded-md">
                    <img
                      class="duration-500 group-hover:scale-105"
                      src="{{ $pelatihan->image ? asset('storage/' . $pelatihan->image) : asset('landing/images/course/default.jpg') }}"
                      alt=""
                      style="height: 200px; object-fit:cover"
                    >
                  </div>
                  <div class="absolute start-6 top-6">
                    <span class="h-4 rounded-md bg-violet-600 px-2.5 py-1 text-[12px] text-white">Angkatan{{ $pelatihan->angkatan }}</span>
                    <span class="h-4 rounded-md bg-violet-600 px-2.5 py-1 text-[12px] text-white">{{ $pelatihan->nama_pelatihan_jenis_pelatihan_nama }}</span>
                  </div>

                  {{-- <div class="absolute -bottom-5 end-6">
                                    <span
                                        class="flex size-10 items-center justify-center rounded-full bg-violet-600 font-semibold text-white shadow-md shadow-slate-100 dark:shadow-slate-800">$0</span>
                                </div> --}}
                </div>

                <div class="p-6">
                  <div class="mb-3 flex">
                    <span class="flex items-center text-sm text-slate-400"><i
                        class="me-1 size-[14px] text-slate-900 dark:text-white"
                        data-feather="book"
                      ></i>{{ $pelatihan->mataPelatihans->count() }}
                      Pelatihan</span>
                    <span class="ms-3 flex items-center text-sm text-slate-400"><i
                        class="me-1 size-[14px] text-slate-900 dark:text-white"
                        data-feather="users"
                      ></i>{{ $pelatihan->peserta_count }} Peserta</span>
                  </div>

                  <a
                    class="text-lg font-medium hover:text-violet-600"
                    href="{{ route('landing.pelatihan.show', $pelatihan->id) }}"
                  >{{ $pelatihan->nama_pelatihan_nama }}</a>

                  <p class="mt-2 text-slate-400">{!! Str::limit($pelatihan->description, 50) !!}</p>

                  <div class="mt-3">

                    <a
                      class="inline-flex h-8 w-full items-center justify-center rounded-md bg-violet-600/10 px-3 text-sm font-medium tracking-wide text-violet-600 hover:bg-violet-600 hover:text-white"
                      href="{{ route('landing.pelatihan.show', $pelatihan->id) }}"
                    >Selengkapnya <i class="mdi mdi-arrow-right ms-1 align-middle"></i></a>
                  </div>
                </div>
              </div>
            </div>
          @empty
            <div class="col-span-full py-12 text-center">
              <p class="text-slate-400">Belum ada pelatihan tersedia.</p>
            </div>
          @endforelse

        </div>
      </div>

      <div class="mt-6 grid grid-cols-1 md:grid-cols-12">
        <div class="text-center md:col-span-12">
          <a
            class="text-slate-400 duration-500 ease-in-out hover:text-violet-600"
            href="grid.html"
          >Lihat Semua
            Pelatihan <i class="mdi mdi-arrow-right align-middle"></i></a>
        </div>
      </div>
    </div>

    <div class="container relative mx-auto mt-16 max-w-7xl px-4 lg:mt-24">
      <div class="grid grid-cols-1 pb-6 text-center">
        <span class="mb-3 font-semibold uppercase text-violet-600 dark:text-violet-400">Keunggulan</span>
        <h4 class="mb-6 text-2xl font-semibold leading-normal text-gray-800 md:text-3xl md:leading-normal dark:text-white">
          Temukan Keunggulan Kami
        </h4>

        <p class="mx-auto max-w-xl text-slate-400 dark:text-slate-300">
          Dapatkan pengalaman belajar yang lebih efektif dengan fitur-fitur unggulan yang dirancang untuk
          mendukung perkembangan keterampilan Anda.
        </p>
      </div>

      <div class="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
        @forelse($advantages as $advantage)
          <div class="rounded-2xl p-6 shadow-lg shadow-slate-100 transition duration-500 dark:shadow-slate-800">
            <div class="mb-6 overflow-hidden rounded-2xl">
              <img
                class="h-32 w-full object-cover transition duration-500 group-hover:scale-105"
                src="{{ $advantage->image ? asset('storage/' . $advantage->image) : asset('landing/images/course/default.jpg') }}"
                alt="{{ $advantage->title }}"
              >
            </div>
            <div class="content mt-6">
              <a
                class="text-lg font-semibold transition-all duration-500 ease-in-out hover:text-violet-600 dark:text-white dark:hover:text-violet-600"
                href="#"
              >
                {{ $advantage->title }}
              </a>
              <p class="mt-3 text-slate-400">
                {!! $advantage->description !!}
              </p>
              <div class="mt-3">
                <a
                  class="transition duration-500 after:bg-violet-600 hover:text-violet-600 dark:text-white dark:hover:text-violet-600"
                  href="#"
                >
                  Selengkapnya <i class="mdi mdi-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
        @empty
          <div class="col-span-full py-12 text-center">
            <p class="text-slate-400">Belum ada keunggulan tersedia.</p>
          </div>
        @endforelse
      </div>
    </div>
  </section>

  <section
    class="relative bg-cover bg-fixed bg-center bg-no-repeat py-24"
    style="background-image: url('{{ asset('landing/images/bg/3.jpg') }}')"
  >
    <div class="absolute inset-0 bg-slate-900/60"></div>
    <div class="container relative">
      <div class="grid grid-cols-1 justify-center text-center md:text-start lg:grid-cols-12">
        <div class="lg:col-span-10 lg:col-start-2">
          <div class="grid grid-cols-2 items-center gap-6 sm:grid-cols-2 md:grid-cols-4">
            <div class="counter-box text-center">
              <h1 class="mb-2 text-4xl font-semibold text-white lg:text-5xl"><span
                  class="counter-value"
                  data-target="326"
                >326</span>+</h1>
              <h5 class="counter-head font-medium uppercase text-white">Pelatihan</h5>
            </div>

            <div class="counter-box text-center">
              <h1 class="mb-2 text-4xl font-semibold text-white lg:text-5xl"><span
                  class="counter-value"
                  data-target="615689"
                >615689</span>+</h1>
              <h5 class="counter-head font-medium uppercase text-white">Peserta</h5>
            </div>

            <div class="counter-box text-center">
              <h1 class="mb-2 text-4xl font-semibold text-white lg:text-5xl"><span
                  class="counter-value"
                  data-target="679"
                >679</span></h1>
              <h5 class="counter-head font-medium uppercase text-white">Modul Belajar</h5>
            </div>

            <div class="counter-box text-center">
              <h1 class="mb-2 text-4xl font-semibold text-white lg:text-5xl"><span
                  class="counter-value"
                  data-target="0"
                >0</span></h1>
              <h5 class="counter-head font-medium uppercase text-white">Pengguna Aktif</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="container relative mt-16 md:mt-24">
    <div class="grid grid-cols-1 items-center gap-6 md:grid-cols-12">
      <div class="md:col-span-7 lg:col-span-6">
        <div class="relative">
          <div class="relative mx-5 md:shrink-0 lg:mx-0">
            <img
              class="w-84 dark:shadow-gyay-700 h-[500px] rounded-lg object-cover shadow-md md:w-96"
              src="{{ asset('landing') }}/images/course/4.jpg"
              alt=""
            >
          </div>

          <div class="absolute bottom-10 end-0 lg:end-6">
            <div class="z-1 relative top-10 text-end lg:text-end xl:text-start">
              <a
                class="lightbox dark:shadow-gyay-700 inline-flex size-20 items-center justify-center rounded-full bg-violet-600 text-white shadow-md"
                data-type="youtube"
                data-id="yba7hPeTSjk"
                href="#!"
              >
                <i class="mdi mdi-play inline-flex items-center justify-center text-2xl"></i>
              </a>
            </div>

            <div class="relative md:shrink-0">
              <img
                class="dark:shadow-gyay-700 size-48 rounded-lg object-cover shadow-md"
                src="{{ asset('landing') }}/images/course/2.jpg"
                alt=""
              >
            </div>
          </div>

          <div class="z-2 mover absolute -start-2 top-12 w-56 rounded-lg bg-white p-4 shadow-md md:-start-10 md:top-16 dark:bg-slate-900 dark:shadow-gray-800">
            <h5 class="mb-3 font-semibold">Our Instrunctors</h5>

            <ul class="relative list-none">
              <li class="relative inline-block"><a href="#"><img
                    class="hover:z-1 relative size-10 rounded-full border-4 border-white shadow-md shadow-slate-100 transition-all duration-500 hover:scale-105 dark:border-slate-900 dark:shadow-slate-800"
                    src="{{ asset('landing') }}/images/team/1.jpg"
                    alt=""
                  ></a></li>
              <li class="relative -ms-4 inline-block"><a href="#"><img
                    class="hover:z-1 relative size-10 rounded-full border-4 border-white shadow-md shadow-slate-100 transition-all duration-500 hover:scale-105 dark:border-slate-900 dark:shadow-slate-800"
                    src="{{ asset('landing') }}/images/team/2.jpg"
                    alt=""
                  ></a></li>
              <li class="relative -ms-4 inline-block"><a href="#"><img
                    class="hover:z-1 relative size-10 rounded-full border-4 border-white shadow-md shadow-slate-100 transition-all duration-500 hover:scale-105 dark:border-slate-900 dark:shadow-slate-800"
                    src="{{ asset('landing') }}/images/team/3.jpg"
                    alt=""
                  ></a></li>
              <li class="relative -ms-4 inline-block"><a href="#"><img
                    class="hover:z-1 relative size-10 rounded-full border-4 border-white shadow-md shadow-slate-100 transition-all duration-500 hover:scale-105 dark:border-slate-900 dark:shadow-slate-800"
                    src="{{ asset('landing') }}/images/team/4.jpg"
                    alt=""
                  ></a></li>
              <li class="relative -ms-4 inline-block"><a href="#"><img
                    class="hover:z-1 relative size-10 rounded-full border-4 border-white shadow-md shadow-slate-100 transition-all duration-500 hover:scale-105 dark:border-slate-900 dark:shadow-slate-800"
                    src="{{ asset('landing') }}/images/team/5.jpg"
                    alt=""
                  ></a></li>
              <li class="relative -ms-4 inline-block"><a
                  class="hover:z-1 table-cell size-9 rounded-full bg-violet-600 text-center align-middle text-base tracking-wide text-white transition-all duration-500 hover:scale-105"
                  href="#"
                ><i class="mdi mdi-plus"></i></a></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="md:col-span-5 lg:col-span-6">
        <span class="mb-3 font-semibold uppercase text-violet-600">Faq</span>
        <h4 class="mb-4 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">Paling Sering
          Ditanyakan
        </h4>
        <p class="mx-auto max-w-xl text-slate-400">
          Temukan jawaban cepat untuk pertanyaan umum agar Anda memahami layanan dan proses kami dengan jelas.
        </p>

        <div
          class="mt-6"
          id="accordion-collapseone"
          data-accordion="collapse"
        >
          @forelse ($faqs as $key => $faq)
            @php
              $isFirst = $loop->first;
              $headingId = 'accordion-collapse-heading-' . ($key + 1);
              $bodyId = 'accordion-collapse-body-' . ($key + 1);
            @endphp

            <div class="@if (!$loop->first) mt-4 @endif relative overflow-hidden rounded-md shadow-sm dark:shadow-gray-700">
              <h2
                class="font-medium"
                id="{{ $headingId }}"
              >
                <button
                  class="flex w-full items-center justify-between p-5 text-start font-medium"
                  data-accordion-target="#{{ $bodyId }}"
                  type="button"
                  aria-expanded="{{ $isFirst ? 'true' : 'false' }}"
                  aria-controls="{{ $bodyId }}"
                >

                  <span>{{ $faq->question }}</span>

                  <svg
                    class="@if ($isFirst) rotate-180 @endif size-5 shrink-0"
                    data-accordion-icon
                    fill="currentColor"
                    viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </button>
              </h2>

              <div
                class="@unless ($isFirst) hidden @endunless"
                id="{{ $bodyId }}"
                aria-labelledby="{{ $headingId }}"
              >
                <div class="p-5">
                  <p class="text-slate-400 dark:text-gray-400">
                    {!! $faq->answer !!}
                  </p>
                </div>
              </div>
            </div>
          @empty
            <div class="col-span-full py-12 text-center">
              <p class="text-slate-400">Belum ada FAQ tersedia</p>
            </div>
          @endforelse
        </div>

      </div>
    </div>
  </div>

  <section class="relative py-16 lg:py-24">
    <div class="container relative mt-16 lg:mt-24">
      <div class="grid grid-cols-1 pb-8 text-center">
        <span class="mb-3 font-semibold uppercase text-violet-600">Testimonial</span>
        <h3 class="mb-6 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">Apa Kata Mereka?</h3>
        <p class="mx-auto max-w-xl text-slate-400">
          Dengarkan pengalaman nyata dari para peserta yang berhasil mengembangkan keterampilan melalui program
          pelatihan kami.
        </p>
      </div>
      <div class="relative mt-6 flex justify-center">
        <div class="relative w-full">
          <div class="tiny-three-item">
            @forelse($testimonials as $testimonial)
              <div class="tiny-slide">
                <div class="mx-3">
                  <ul class="text-md mb-2 list-none font-medium text-amber-500">
                    <li class="inline"><i class="mdi mdi-star"></i></li>
                    <li class="inline"><i class="mdi mdi-star"></i></li>
                    <li class="inline"><i class="mdi mdi-star"></i></li>
                    <li class="inline"><i class="mdi mdi-star"></i></li>
                    <li class="inline"><i class="mdi mdi-star"></i></li>
                  </ul>
                  <p
                    class="text-lg text-slate-400"
                    style="height: 230px"
                  > "
                    {{ strip_tags($testimonial->content) }} " </p>
                  <div class="mt-3 flex items-center">
                    <img
                      class="size-12 rounded-full object-cover shadow-md shadow-slate-100 dark:shadow-slate-800"
                      src="{{ $testimonial->image ? asset('storage/' . $testimonial->image) : asset('landing/images/course/default.jpg') }}"
                      alt="{{ $testimonial->name }}"
                    >
                    <div class="ms-2">
                      <h6 class="font-semibold">{{ $testimonial->name }}</h6>
                      <span class="text-sm text-slate-400">{{ $testimonial->profession }}</span>
                    </div>
                  </div>
                </div>
              </div>
            @empty
              <div class="col-span-full py-12 text-center">
                <p class="text-slate-400">Belum ada testimonial tersedia.</p>
              </div>
            @endforelse
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="relative py-16 lg:py-24">
    <div class="container relative mt-16 md:mt-24">
      <div class="grid grid-cols-1 pb-6 text-center">
        <span class="mb-3 font-semibold uppercase text-violet-600">Artikel</span>
        <h4 class="mb-6 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">
          Berita & Artikel Terbaru
        </h4>
        <p class="mx-auto max-w-xl text-slate-400">
          Dapatkan informasi terkini, tips bermanfaat, dan wawasan baru melalui berita serta artikel terbaru dari
          kami.
        </p>
      </div>

      <div class="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        @forelse($blogs as $blog)
          <div class="group relative h-fit overflow-hidden rounded-md bg-white shadow-sm transition-all duration-500 dark:bg-slate-900 dark:shadow-gray-700">
            <div class="relative overflow-hidden">
              <img
                class="w-full object-cover transition-transform duration-500 group-hover:scale-105"
                src="{{ $blog->image ? asset('storage/' . $blog->image) : asset('landing/images/course/default.jpg') }}"
                alt="{{ $blog->title }}"
                style="height: 200px;"
                loading="lazy"
              >
              <div class="absolute bottom-6 start-6">
                <span class="h-4 rounded-md bg-violet-600 px-2.5 py-1 text-[12px] text-white">
                  {{ $blog->category->name }}
                </span>
              </div>
            </div>

            <div class="relative p-6">
              <div class="mb-4 flex justify-between">
                <span class="flex items-center text-sm text-slate-400">
                  <i
                    class="me-1 size-4"
                    data-feather="calendar"
                  ></i>
                  {{ $blog->created_at->format('d M y') }}
                </span>
                <span class="flex items-center text-sm text-slate-400">
                  <i
                    class="me-1 size-4"
                    data-feather="eye"
                  ></i>
                  {{ $blog->views }}
                </span>
              </div>

              <a
                class="text-lg font-medium hover:text-violet-600"
                href="{{ route('landing.artikel.show', $blog->slug) }}"
              >
                {{ Str::limit($blog->title, 50) }}
              </a>

              <div class="mt-3">
                <a
                  class="btn btn-link duration-500 ease-in-out after:bg-violet-600 hover:text-violet-600"
                  href="{{ route('landing.artikel.show', $blog->slug) }}"
                >
                  Baca Selengkapnya <i class="mdi mdi-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
        @empty
          <div class="col-span-full py-12 text-center">
            <p class="text-slate-400">Belum ada artikel tersedia.</p>
          </div>
        @endforelse
      </div>
    </div>

    <div class="container relative 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">
          Kami siap membantu menjawab pertanyaan Anda dan memberikan informasi lengkap terkait layanan serta
          program kami.
        </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"
            href="/kontak"
          >
            <i class="iconoir-phone me-2 align-middle"></i> Kontak Kami
          </a>
        </div>
      </div>
    </div>
  </section>

@endsection