@extends('app.template.index')

@section('title', 'Tentang Kami')

@push('css')
    <style>
        .header-custom {
        background-color: #f6f6f8;
        }
        .menu-btn {
        background-color: #d9d9d9;
        border: none;
        padding: 0.5rem;
        border-radius: 0.5rem;
        }
    </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-4    " id="about-title">
            <span class="split-text">TENTANG KAMI</span>
        </h1>
    </header>
    <section class="py-5">
        <div class="container">
            <div class="row align-items-start">
                <div class="col-lg-6 mb-5 mb-lg-0">
                    <!-- Logo -->
                    <div class="text-center text-lg-center mb-4">
                    <img src="{{ asset('app/assets/logo.png') }}" alt="Logo Klinik" width="250" class="mb-2">
                    </div>
                    <!-- Box Visi Misi -->
                    <div class="bg-light p-4 rounded-4 shadow mb-4" style="box-shadow: 4px 8px 20px #e6e6e6;">
                    <h2 class="fw-bold mb-3" style="font-size:1.5rem;">VISI</h2>
                    <ul class="mb-4" style="font-size:1.1rem;">
                        <li>Menjadi Klinik Pratama yang Unggul dan Terpercaya</li>
                    </ul>
                    <h2 class="fw-bold mb-3" style="font-size:1.5rem;">MISI</h2>
                    <ul style="font-size:1.1rem;">
                        <li>Memberikan pelayanan secara profesional sesuai standar akreditasi klinik</li>
                        <li>Mendekatkan pelayanan kepada masyarakat yang membutuhkan</li>
                        <li>Menyediakan fasilitas layanan unggulan yang mampu bersaing, bersinergi dengan semua lintas sektoral</li>
                    </ul>
                    </div>
                    <!-- Box Layanan Klinik -->
                    <div class="bg-primary text-white rounded-4 px-4 py-4" style="box-shadow: 4px 8px 20px #e6e6e6;">
                    <h4 class="fw-bold text-center mb-3" style="letter-spacing:1px;">LAYANAN KLINIK</h4>
                    <div class="row text-start">
                        <div class="col-6 col-md-4">
                        <ul class="list-unstyled mb-0">
                            <li><b>&bull; Dokter Umum</b></li>
                            <li><b>&bull; Dokter Gigi</b></li>
                        </ul>
                        </div>
                        <div class="col-6 col-md-4">
                        <ul class="list-unstyled mb-0">
                            <li><b>&bull; Tindakan Medis</b></li>
                            <li><b>&bull; Sunat Dewasa dan Anak</b></li>
                        </ul>
                        </div>
                        <div class="col-12 col-md-4">
                        <ul class="list-unstyled mb-0">
                            <li><b>&bull; Vaksin</b></li>
                            <li><b>&bull; Bekam</b></li>
                            <li><b>&bull; Terapi Wicara</b></li>
                            <li><b>&bull; Fisioterapi dll</b></li>
                        </ul>
                        </div>
                    </div>
                    </div>
                </div>
                <!-- Kolom Kanan: Foto -->
                <div class="col-lg-6 text-center d-flex align-items-start justify-content-center">
                    <img src="{{ asset('app/assets/content/bekasi.jpg') }}"
                        alt="Gedung Klinik"
                        class="img-fluid"
                        style="border-radius: 25px; max-width: 95%; max-height: 600px; object-fit: cover; box-shadow: 0 8px 32px #d5d5d5;">
                </div>
            </div>
        </div>
        <div class="container my-5">
            <div class="bg-light rounded-5 shadow p-4 px-lg-5" style="box-shadow: 4px 8px 20px #e6e6e6;">
                <div class="row align-items-start text-center">
                <div class="col-lg-2 col-12 d-flex flex-column justify-content-center align-items-lg-start align-items-center h-100">
                    <span class="fw-bold" style="font-size:2.4rem;">MOTTO KAMI</span>
                </div>
                <div class="col-lg-2 col-6 mb-3 d-flex flex-column align-items-center">
                    <span class="fw-bold text-primary d-block" style="font-size:2rem; min-height:44px; line-height:1;">CARE</span>
                    <span style="font-size:1.1rem;">Melayani dengan<br>ramah, peduli dan<br>terpercaya</span>
                </div>
                <div class="col-lg-2 col-6 mb-3 d-flex flex-column align-items-center">
                    <span class="fw-bold text-primary d-block" style="font-size:2rem; min-height:44px; line-height:1;">COMPETENCE</span>
                    <span style="font-size:1.1rem;">Semua karyawan medis dan non medis<br>memiliki kompetensi<br>sesuai bidangnya</span>
                </div>
                <div class="col-lg-2 col-6 mb-3 d-flex flex-column align-items-center">
                    <span class="fw-bold text-primary d-block" style="font-size:2rem; min-height:44px; line-height:1;">ACTIVE</span>
                    <span style="font-size:1.1rem;">Semua karyawan medis dan non medis<br>memiliki kompetensi<br>sesuai bidangnya</span>
                </div>
                <div class="col-lg-2 col-6 mb-3 d-flex flex-column align-items-center">
                    <span class="fw-bold text-primary d-block" style="font-size:2rem; min-height:44px; line-height:1;">RESPONSIVE</span>
                    <span style="font-size:1.1rem;">Cepat tanggap<br>dalam melaksanakan<br>pelayanan yang<br>dibutuhkan pasien</span>
                </div>
                <div class="col-lg-2 col-12 mb-3 d-flex flex-column align-items-center">
                    <span class="fw-bold text-primary d-block" style="font-size:2rem; min-height:44px; line-height:1;">EMPHATY</span>
                    <span style="font-size:1.1rem;">Melayani pasien dengan sepenuh hati dan memberi pelayanan seperti kita ingin diperlakukan oleh orang lain</span>
                </div>
                </div>
            </div>
        </div>
    </section>
@endsection