@extends('app.template.index')

@section('title', 'Beranda')

@push('css')
    <style>

        @media (max-width: 576px) {
            .services-header h2 {
                text-align: justify;
                /* Ubah menjadi teks rata tengah */
            }

            .header-image {
                max-width: 103%;
                /* Pastikan gambar tidak melampaui lebar kontainer */
                height: auto;
                /* Pertahankan rasio gambar */
                justify-content: center;
                /* Ratakan elemen secara horizontal */
            }
        }
        header {
            position: relative;
        }

        .instagram-wrapper {
            max-width: 100%;
            width: 100%;
            border-radius: 20px;
            overflow: hidden;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }

        .instagram-wrapper iframe,
        .instagram-wrapper blockquote.instagram-media {
            width: 100% !important;
            max-width: 100% !important;
            min-width: auto !important;
            border-radius: 20px !important;
        }

        @media (min-width: 992px) {
            .instagram-wrapper {
                max-width: 900px;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $desktopImage = asset('app/assets/content/sudirman.png');
        $mobileImage = asset('app/assets/content/sudirman-mobile.png');
    @endphp
    
    <style>
        @media (max-width: 576px) {
            .responsive-header {
                background-image: url('{{ $mobileImage }}') !important;
            }
        }

        @media (max-width: 768px) {
            .responsive-header {
                background-image: url('{{ $mobileImage }}') !important;
            }
        }
    </style>

    <header class="bg-light responsive-header"
    style="min-height: 700px; background-image: url('{{ $desktopImage }}'); background-size: cover; background-position: center; position: relative;">        
        <div class="container-fluid position-relative" style="z-index: 10;">
            <div class="row align-items-start">
                <div class="col-lg-6 ps-lg-5 ps-4">
                    <h1 class="fw-bold mb-3" style="font-size: 2.5rem;">
                        <span class="text-dark">Selamat Datang di</span><br>
                        <span class="text-primary">Klinik Pratama dr. Abdul Radjak</span>
                    </h1>
                    <p class="fst-italic fs-4 mb-4">“One Stop Solution”</p>
                    <a href="#" class="btn btn-light btn-lg shadow-sm px-4">Selengkapnya</a>
                </div>
            </div>
        </div>
    </header>

    <header style="height: 80px; background-color:rgb(228, 228, 228)">
        <h1 class="display-6 fw-bolder text-primary mt-1" id="about-title">
            <span class="split-text">KLINIK PRATAMA DR. ABDUL RADJAK</span>
        </h1>
    </header>

    <section class="py-5 bg-white">
        <div class="container">
            <div class="row text-center justify-content-center align-items-center g-4">
                <div class="col-md-3">
                    <img src="{{ asset('app/assets/icons/medical-records.png') }}" alt="Layanan Medis" width="60" class="mb-3">
                    <p class="fw-semibold">Layanan Medis 24 Jam Terbaik</p>
                </div>
                <div class="col-md-3">
                    <img src="{{ asset('app/assets/icons/healthcare.png') }}" alt="Akses Kesehatan" width="60" class="mb-3">
                    <p class="fw-semibold">Terdepan dalam Akses Kesehatan Berkualitas dan Peningkatan Fasilitas</p>
                </div>
                <div class="col-md-3">
                    <img src="{{ asset('app/assets/icons/family.png') }}" alt="Manajemen BPJS" width="60" class="mb-3">
                    <p class="fw-semibold">Berpengalaman dalam Manajemen BPJS</p>
                </div>
                <div class="col-md-3">
                    <img src="{{ asset('app/assets/icons/medical-record.png') }}" alt="Sinergi Bisnis" width="60" class="mb-3">
                    <p class="fw-semibold">Sinergi antar Unit Bisnis dalam Grup Menciptakan Pelayanan yang bernilai</p>
                </div>
            </div>
        </div>
    </section>

    <section class="social-section bg-white">
        <div class="container px-5">
            <div class="instagram-wrapper">
                <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/klinikdrabdulradjak/?hl=en"
                    data-instgrm-version="12" style="background:#FFF; border:0; margin:0; padding:0;">
                </blockquote>
            </div>        
        </div>
    </section>

    <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 motto-title" 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 motto-heading d-block" style="font-size:2rem; min-height:44px; line-height:1;">CARE</span>
                    <span class="motto-text" 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 motto-heading d-block" style="font-size:2rem; min-height:44px; line-height:1;">COMPETENCE</span>
                    <span class="motto-text" 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 motto-heading d-block" style="font-size:2rem; min-height:44px; line-height:1;">ACTIVE</span>
                    <span class="motto-text" 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 motto-heading d-block" style="font-size:2rem; min-height:44px; line-height:1;">RESPONSIVE</span>
                    <span class="motto-text" 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 motto-heading d-block" style="font-size:2rem; min-height:44px; line-height:1;">EMPHATY</span>
                    <span class="motto-text" 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

@push('js')  
<script async src="https://www.instagram.com/embed.js"></script>
@endpush