@extends('frontend.layouts.app')

@section('title')
    Home
@endsection

@section('content')
    <!-- Hero Section Start -->
    <div class="ht-hero-section section">
        <!-- Hero One Slider Start -->
        <div class="ht-hero-slider ht-hero-slider-one">
            @foreach ($sliders as $item)
                <!-- Single Slide Start -->
                <div class="ht-single-slide" style="background-image: url({{ $item->upload->images }})">
                    <!-- Hero Content One Start -->
                    <div class="ht-hero-content-one container">
                        <h1 class="cssanimation leDoorCloseLeft sequence">{{ $item->title }}</h1>
                        <p>{{ $item->description }}</p>
                        <a href="{{ $item->url_button }}"
                            class="btn large circle blue hover-blue uppercase">{{ $item->title_button }}</a>
                    </div><!-- Hero Content One End -->
                </div><!-- Single Slide End -->
            @endforeach
        </div><!-- Hero One Slider End -->
    </div><!-- Hero Section End -->

    <!-- About Section Start -->
    <div class="ht-about-section section pt-120 pb-90">
        <div class="container">
            <div class="row">

                <!-- Section Title One Start -->
                <div class="ht-section-title-one col-lg-4 col-12 mb-30">

                    <h4>about us</h4>
                    <h2>WHO WE ARE</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. There are many variations of passages of Lorem.</p>

                    <a href="service.html" class="btn circle blue-border hover-blue uppercase mt-30">our
                        services</a>

                </div><!-- Section Title One End -->
                <!-- Service One Start -->
                <div class="col-lg-4 col-md-6 col-12 mb-30">
                    <div class="ht-service-one">

                        <!-- Image -->
                        <img src="assets/images/service/service-1.jpg" alt="Service One">

                        <!-- Content -->
                        <div class="content">
                            <div class="wrap">

                                <!-- Icon -->
                                <span class="icon"><img src="assets/images/icon/service-1.png" alt="Service Icon"></span>

                                <!-- Text -->
                                <div class="text">
                                    <h4><a href="service-details-financial.html">Financial Service</a></h4>
                                    <p>Lorem ipsum dolor sit amet, ctur scing elit, sed do eiuste incididu labore et
                                        dolore magna.</p>
                                    <a href="service-details-financial.html" class="read-more">read more</a>
                                </div>

                            </div>
                        </div>

                    </div>
                </div><!-- Service One End -->

                <!-- Service One Start -->
                <div class="col-lg-4 col-md-6 col-12 mb-30">
                    <div class="ht-service-one">

                        <!-- Image -->
                        <img src="assets/images/service/service-2.jpg" alt="Service One">

                        <!-- Content -->
                        <div class="content">
                            <div class="wrap">

                                <!-- Icon -->
                                <span class="icon"><img src="assets/images/icon/service-2.png" alt="Service Icon"></span>

                                <!-- Text -->
                                <div class="text">
                                    <h4><a href="service-details-business.html">Analyze Your Business</a></h4>
                                    <p>Lorem ipsum dolor sit amet, ctur scing elit, sed do eiuste incididu labore et
                                        dolore magna.</p>
                                    <a href="service-details-business.html" class="read-more">read more</a>
                                </div>

                            </div>
                        </div>

                    </div>
                </div><!-- Service One End -->

            </div>
        </div>
    </div><!-- About Section End -->

    <!-- Practice Section Start -->
    <div class="ht-practice-section section bg-light-grey pt-120 pb-90">
        <div class="container" id="services">
            <div class="row">

                <!-- Section Title One Start -->
                <div class="ht-section-title-one col-12 mb-70">

                    <h4>layanan</h4>
                    <h2>Our Practice Areas</h2>

                </div><!-- Section Title One End -->

                <div class="col-12 pos-relative">

                    <!-- Practice One Tab List Start -->
                    <ul class="ht-practice-one-tab-list nav">
                        <li>
                            <a class="{{ !$categorySearch ? 'active' : '' }}"
                                href="{{ route('pages.landing.home.index') . '#services' }}">
                                Semua
                            </a>
                        </li>
                        @foreach ($categories as $item)
                            <li>
                                <a class="{{ $item->slug == $categorySearch ? 'active' : '' }}"
                                    href="{{ route('pages.landing.home.index', ['categorySearch' => $item->slug]) . '#services' }}">
                                    {{ $item->name }}
                                </a>
                            </li>
                        @endforeach
                    </ul><!-- Practice One Tab List End -->

                    <!-- Practice One Tab Content Start -->
                    <div class="ht-practice-one-tab-content tab-content">
                        <!-- Practice One Tab Pane Start -->
                        <div class="tab-pane fade show active">
                            <div class="row row-10">
                                @foreach ($services as $product)
                                    <div class="col-lg-3 col-md-6 col-12 mb-30">
                                        <div class="ht-practice-one">
                                            <a href="{{ route('pages.landing.order') }}" class="image">
                                                <img src="{{ $product->upload->images }}" alt="{{ env('APP_ENV') }}">
                                            </a>
                                            <a href="practice-area.html"
                                                class="category">{{ $product->categories->name }}</a>
                                            <h4 class="title">
                                                <a href="{{ route('pages.landing.order') }}">
                                                    {{ Str::limit($product->name, 50, '...') }}
                                                </a>
                                            </h4>
                                        </div>
                                    </div>
                                @endforeach

                                {{-- Tampilkan tautan paginasi --}}
                                <div class="pagination-wrapper">
                                    @php
                                        $pagination_links = $services->onEachSide(1)->links();
                                        $modified_links = preg_replace(
                                            '/(<a\s[^>]*href=")([^"]*)/',
                                            '$1$2#services',
                                            $pagination_links,
                                        );
                                        echo $modified_links;
                                    @endphp
                                </div>
                            </div>
                        </div><!-- Practice One Tab Pane End -->
                    </div><!-- Practice One Tab Content End -->

                </div>

            </div>
        </div>
    </div><!-- Practice Section End -->

    <!-- FAQ Section Start -->
    <div class="ht-faq-section section pt-120 pb-90">
        <div class="container">
            <div class="row">
                <div class="col-lg-11 col-12 mx-auto">
                    <div class="row">

                        <!-- Request Call One Start -->
                        <div class="col-md-6 col-12 mb-30">
                            <div class="ht-request-call-one">

                                <h3>Butuh Bantuan?</h3>
                                <p>Isi form dibawah ini untuk menghubungi kami</p>

                                <!-- Request Call One Form Start -->
                                <div class="ht-request-call-one-form">
                                    <form action="#">
                                        @csrf
                                        <input type="text" placeholder="Masukan Nama*" required>
                                        <input type="email" placeholder="Masukan Email*" required>
                                        <textarea placeholder="Masukan Pesan*"></textarea>
                                        <input type="submit" value="submit">
                                    </form>
                                </div><!-- Request Call One Form End -->

                            </div>
                        </div><!-- Request Call One End -->

                        <!-- FAQ One Wrap Start -->
                        <div class="col-md-6 col-12 mb-30">
                            <div class="ht-faq-one-wrap">
                                <h3>FAQ</h3>
                                <!-- FAQ Collapse Start -->
                                <div id="faq">

                                    <!-- FAQ Card Start -->
                                    <div class="faq-card card">

                                        <!-- FAQ Card Header Start -->
                                        <div class="card-header">
                                            <h5>
                                                <a data-bs-toggle="collapse" data-bs-target="#faq-one">
                                                    Apa itu layanan konsultasi hukum yang ditawarkan?
                                                </a>
                                            </h5>
                                        </div><!-- FAQ Card Header End -->

                                        <!-- FAQ Card Body Start -->
                                        <div id="faq-one" class="collapse show" data-bs-parent="#faq">
                                            <div class="card-body">
                                                <p>Kami menyediakan layanan konsultasi hukum secara online dengan pengacara
                                                    berpengalaman. Anda dapat mengajukan pertanyaan hukum terkait masalah
                                                    pribadi atau bisnis dan mendapatkan jawaban yang jelas dan dapat
                                                    dipahami.</p>
                                            </div>
                                        </div><!-- FAQ Card Body End -->

                                    </div><!-- FAQ Card End -->

                                    <!-- FAQ Card Start -->
                                    <div class="faq-card card">

                                        <!-- FAQ Card Header Start -->
                                        <div class="card-header">
                                            <h5><a class="collapsed" data-bs-toggle="collapse" data-bs-target="#faq-two">
                                                    Bagaimana cara mengakses layanan konsultasi psikologi?
                                                </a></h5>
                                        </div><!-- FAQ Card Header End -->

                                        <!-- FAQ Card Body Start -->
                                        <div id="faq-two" class="collapse" data-bs-parent="#faq">
                                            <div class="card-body">
                                                <p>Anda dapat memilih paket konsultasi psikolog di situs kami, lalu mengatur
                                                    jadwal sesi melalui chat, panggilan suara, atau video call dengan
                                                    psikolog kami sesuai kenyamanan Anda.</p>
                                            </div>
                                        </div><!-- FAQ Card Body End -->

                                    </div><!-- FAQ Card End -->

                                    <!-- FAQ Card Start -->
                                    <div class="faq-card card">

                                        <!-- FAQ Card Header Start -->
                                        <div class="card-header">
                                            <h5>
                                                <a data-bs-toggle="collapse" data-bs-target="#faq-three">
                                                    Apakah layanan konsultasi ini aman dan terjamin kerahasiaannya?
                                                </a>
                                            </h5>
                                        </div><!-- FAQ Card Header End -->

                                        <!-- FAQ Card Body Start -->
                                        <div id="faq-three" class="collapse" data-bs-parent="#faq">
                                            <div class="card-body">
                                                <p>Ya, kami menjaga kerahasiaan informasi yang Anda berikan dengan ketat.
                                                    Semua sesi konsultasi dilakukan dengan privasi yang dilindungi oleh
                                                    aturan kerahasiaan profesi.</p>
                                            </div>
                                        </div><!-- FAQ Card Body End -->

                                    </div><!-- FAQ Card End -->

                                    <!-- FAQ Card Start -->
                                    <div class="faq-card card">

                                        <!-- FAQ Card Header Start -->
                                        <div class="card-header">
                                            <h5>
                                                <a data-bs-toggle="collapse" data-bs-target="#faq-four">
                                                    Apa itu layanan curhat yang tersedia di situs ini?
                                                </a>
                                            </h5>
                                        </div><!-- FAQ Card Header End -->

                                        <!-- FAQ Card Body Start -->
                                        <div id="faq-four" class="collapse" data-bs-parent="#faq">
                                            <div class="card-body">
                                                <p>Layanan curhat adalah ruang bagi Anda untuk berbicara atau menceritakan
                                                    perasaan Anda tanpa penilaian. Ini adalah dukungan emosional yang dapat
                                                    membantu Anda merasa didengar.</p>
                                            </div>
                                        </div><!-- FAQ Card Body End -->

                                    </div><!-- FAQ Card End -->

                                    <!-- FAQ Card Start -->
                                    <div class="faq-card card">

                                        <!-- FAQ Card Header Start -->
                                        <div class="card-header">
                                            <h5>
                                                <a data-bs-toggle="collapse" data-bs-target="#faq-five">
                                                    Berapa biaya untuk layanan yang saya pilih?
                                                </a>
                                            </h5>
                                        </div><!-- FAQ Card Header End -->

                                        <!-- FAQ Card Body Start -->
                                        <div id="faq-five" class="collapse" data-bs-parent="#faq">
                                            <div class="card-body">
                                                <p>Biaya bervariasi tergantung jenis layanan. Kami menyediakan paket harga
                                                    yang transparan dan terjangkau, sesuai dengan kebutuhan Anda.</p>
                                            </div>
                                        </div><!-- FAQ Card Body End -->

                                    </div><!-- FAQ Card End -->


                                </div><!-- FAQ Collapse End -->

                            </div>
                        </div><!-- FAQ One Wrap End -->

                    </div>
                </div>
            </div>
        </div>
    </div><!-- FAQ Section End -->

    <!-- CTA Section Start -->
    <div class="ht-cta-section section pt-100 pb-100" data-overlay="dark" data-opacity="8"
        style="background-image: url(assets/images/bg/cta.jpg)">
        <div class="container">
            <div class="row">
                <!-- CTA Content Start -->
                <div class="ht-cta-content text-white text-center col-12">
                    <h1>Ada yang ingin kamu konsultasikan?</h1>
                    <p>
                        Langsung saja klik tombol dibawah ini untuk melakukan penjadwalan konsultasi kamu
                    </p>
                    <a href="contact.html" class="btn circle blue hover-blue uppercase">Buat Penjadwalan</a>
                </div><!-- CTA Content End -->
            </div>
        </div>
    </div><!-- CTA Section End -->

    <!-- Testimonial Section Start -->
    <div class="ht-testimonial-section section pt-120 pb-120">
        <div class="container">
            <div class="row">

                <!-- Section Title One Start -->
                <div class="ht-section-title-one text-center col-12 mb-70">
                    <h4>Testimoni</h4>
                    <h2>Klien Testimoni</h2>
                </div><!-- Section Title One End -->

                <div class="col-12">

                    <!-- Testimonial Slider One Start -->
                    <div class="ht-testimonial-slider-one"><!-- Single Testimonial One Start -->
                        <div class="ht-testimonial-one">
                            <!-- Content -->
                            <div class="ht-testimonial-content">
                                <i class="fa fa-quote-right"></i>
                                <p>"Layanan hukum yang saya terima benar-benar membantu saya memahami proses yang rumit.
                                    Pengacara yang saya temui sangat profesional dan memberikan penjelasan yang jelas,
                                    membuat saya merasa lebih percaya diri dalam mengambil keputusan."</p>
                            </div>
                            <!-- Author -->
                            <div class="ht-testimonial-author">
                                <h4>Juan Snyder</h4>
                            </div>
                        </div><!-- Single Testimonial One End -->

                        <!-- Single Testimonial One Start -->
                        <div class="ht-testimonial-one">
                            <!-- Content -->
                            <div class="ht-testimonial-content">
                                <i class="fa fa-quote-right"></i>
                                <p>"Konsultasi psikologi yang saya lakukan sangat membuka mata saya. Psikolog yang saya
                                    temui mampu memberikan perspektif yang baru dan solusi untuk masalah yang saya hadapi.
                                    Ini benar-benar memberi dampak positif dalam kehidupan saya."</p>
                            </div>
                            <!-- Author -->
                            <div class="ht-testimonial-author">
                                <h4>Austin Ortiz</h4>
                            </div>
                        </div><!-- Single Testimonial One End -->

                        <!-- Single Testimonial One Start -->
                        <div class="ht-testimonial-one">
                            <!-- Content -->
                            <div class="ht-testimonial-content">
                                <i class="fa fa-quote-right"></i>
                                <p>"Layanan curhat yang saya coba sangat menginspirasi. Saya bisa berbicara dengan bebas
                                    tanpa merasa dihakimi. Ini membantu saya melepaskan banyak beban mental yang saya
                                    rasakan."</p>
                            </div>
                            <!-- Author -->
                            <div class="ht-testimonial-author">
                                <h4>Billy Beck</h4>
                            </div>
                        </div><!-- Single Testimonial One End -->

                        <!-- Single Testimonial One Start -->
                        <div class="ht-testimonial-one">
                            <!-- Content -->
                            <div class="ht-testimonial-content">
                                <i class="fa fa-quote-right"></i>
                                <p>"Saya sangat puas dengan layanan yang diberikan. Semua informasi yang saya dapat sangat
                                    berguna, dan dukungan yang diberikan membuat saya merasa lebih tenang dalam menghadapi
                                    situasi yang sulit."</p>
                            </div>
                            <!-- Author -->
                            <div class="ht-testimonial-author">
                                <h4>Sarah Johnson</h4>
                            </div>
                        </div><!-- Single Testimonial One End -->
                    </div><!-- Testimonial Slider One Start -->
                </div>
            </div>
        </div>
    </div><!-- Testimonial Section End -->
@endsection