@extends('app.template.index')

@section('title', 'Layanan')

@push('css')
    <style>
        split-text {
        display: block;
        text-align: justify;
    }
    .split-text::after {
        content: "";
        display: inline-block;
        width: 100%;
    }
    </style>
@endpush

@section('content')
    <header class="text-left" style="height: 100px; background-color:rgb(228, 228, 228)">
        <h1 class="display-7 fw-bolder text-primary mt-5" id="about-title">
            <span class="split-text">LAYANAN</span>
        </h1>
    </header>
    <section id="layanan-kami" class="py-5 bg-light">
        <div class="container">
            <!-- Judul & Deskripsi -->
            <div class="text-justify mb-5">
                <h2 class="text-primary fw-bold text-center" style="font-size: 1.5rem">LAYANAN KAMI</h2>
                <p class="text-muted" style="font-size: 1.1rem">
                    Kami menyediakan berbagai layanan kesehatan profesional yang dirancang untuk memenuhi kebutuhan Anda dan keluarga. Berikut adalah beberapa layanan utama yang kami tawarkan:
                </p>
            </div>
        </div>
        <div class="container">
            <!-- Cards -->
            <div class="row g-4">
                <!-- Card Item -->
                <div class="col-sm-6 col-lg-4">
                <div class="card bg-white border-0 shadow-sm h-100 rounded-4">
                <div class="card-body text-center p-4">
                    <img src="{{ asset("app/assets/content/dummy.png") }}" 
                        class="img-fluid rounded-4 mb-3" 
                        alt="Poli Umum">
                    <h5 class="text-primary fw-bold">POLI UMUM</h5>
                    <a href="#" 
                    class="btn bg-white text-dark shadow-sm rounded-pill px-4 fst-italic mt-3">
                    Selengkapnya
                    </a>
                </div>
                </div>
            </div>
            <!-- /Card Item -->

            <!-- Duplikasi untuk Poli Gigi -->
            <div class="col-sm-6 col-lg-4">
                <div class="card bg-white border-0 shadow-sm h-100 rounded-4">
                <div class="card-body text-center p-4">
                    <img src="{{ asset("app/assets/content/dummy.png") }}" 
                        class="img-fluid rounded-4 mb-3" 
                        alt="Poli Gigi">
                    <h5 class="text-primary fw-bold">POLI GIGI</h5>
                    <a href="#" 
                    class="btn bg-white text-dark shadow-sm rounded-pill px-4 fst-italic mt-3">
                    Selengkapnya
                    </a>
                </div>
                </div>
            </div>

            <!-- Duplikasi untuk Poli KIA -->
            <div class="col-sm-6 col-lg-4">
                <div class="card bg-white border-0 shadow-sm h-100 rounded-4">
                <div class="card-body text-center p-4">
                    <img src="{{ asset("app/assets/content/dummy.png") }}" 
                        class="img-fluid rounded-4 mb-3" 
                        alt="Poli KIA">
                    <h5 class="text-primary fw-bold">POLI KIA</h5>
                    <a href="#" 
                    class="btn bg-white text-dark shadow-sm rounded-pill px-4 fst-italic mt-3">
                    Selengkapnya
                    </a>
                </div>
                </div>
            </div>
            <!-- /Card Item -->
            </div>
            <!-- /row -->
        </div>
    </section>
@endsection