@extends('app.template.index')

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

@push('css')
    <style>
        .feature-list {
            padding-left: 0;
            margin-bottom: 0;
        }
        .feature-list li {
            display: flex;
            align-items: start;
            gap: 8px;
            margin-bottom: 6px;
        }
        .feature-list li::before {
            content: "✅";
            flex-shrink: 0;
            font-size: 1.1em;
            line-height: 1;
            margin-top: 2px;
        }
        .image-container {
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            aspect-ratio: 1;
            /* Membuat kotak persegi */
            /* Opsional: memberi ruang di sekitar gambar */
            border-radius: 8px;
            /* Sesuaikan sesuai kebutuhan */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            /* Menghindari gambar melampaui kotak */
        }

        .image-container img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            /* Menjaga proporsi gambar */
            border-radius: inherit;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.297);
            /* Menggunakan latar belakang semi-transparan */
            z-index: 1;
            /* Pastikan overlay berada di bawah konten */
        }

        .container {
            position: relative;
            z-index: 2;
            /* Pastikan konten berada di atas overlay */
        }

        /* Overlay with color */
        .overlay-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 159, 157, 0.9);
            /* rgba value with the color #009F9DE5 */
            z-index: 1;
        }

        /* Content inside the section */
        .content {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        /* Styling for the container */
        .container-content {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            padding: 20px;
        }

        /* Left and right columns */
        .col-md-6 {
            /* Make the columns take up 48% of the width */
            margin-bottom: 20px;
        }


        /* Text styling */
        h1 {
            font-size: 28px;
            font-weight: bold;
            color: #fff;
        }

        p {
            font-size: 18px;
            color: #fff;
        }

        .overlay-section h2 {
            font-size: 2rem;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .overlay-section h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            font-weight: bold;
            color: #fff;
        }

        .overlay-section .d-flex {
            display: flex;
            align-items: flex-start;
            /* Posisi konten sejajar di bagian atas */
            gap: 20px;
            /* Jarak antar kolom */
        }

        .overlay-section ul {
            list-style: dot;
            /* Menghilangkan bullet */
            padding: 0;
            line-height: 2;
            font-size: 1rem;
        }

        .overlay-section li {
            margin-bottom: 10px;
        }

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

        .icon-card-top-right {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 45px;
            height: 45px;
        }


    </style>
@endpush

@section('content')
    <header class="py-4 bg-light"
        style="background-image:url('app/assets/content/tentang-kami.png'); background-size: cover; background-position: center;">
        <div class="overlay"></div>
        <div class="container px-5 pb-5 text-left position-relative">
            <h1 class="display-4 fw-bolder text-white shadow-text" id="about-title">
                <span class="split-text">TENTANG KAMI</span>
            </h1>
        </div>
    </header>
    <section class="breadcrumb-section py-3">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="/">Beranda</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Tentang Kami</li>
                </ol>
            </nav>
        </div>
    </section>

    <section class="bg-white py-5 text-center">
        <h2 class="display-6 fw-bolder text-black mt-1" id="jasa">
            <span class="split-text">SEJARAH SINGKAT</span>
        </h2>
        <p class="text-muted text-justify p-5" style="font-size: 1.1rem">
            PT. Bhadra Afiat Thamrin Sadina mendapat Izin Operasional Institusi Pengujian Alat Kesehatan dari Kementrian Kesehatan pada tanggal 13 April 2021 dan mendapat Sertifikan KAN dengan No. LK 374 pada tanggal 28 Maret 2022 dengan kemampuan 6 ruang lingkup. Menjadi institute pengujian, inspeksi, sertifikasi, pelatihan yang handal dan terpercaya di Indonesia tahun 2025 merupakan Visi kami.
        </p>
    </section>

    <section class="bg-white py-5 text-center">
        <h2 class="display-6 fw-bolder text-black" id="jasa">
            <span class="split-text">KEUNGGULAN KAMI</span>
        </h2>
        <div class="container mt-4">
            <div class="row g-4">
                <!-- LEGAL -->
                <div class="col-md-6">
                    <div class="card shadow-sm h-100 rounded-4 position-relative">
                        <div class="card-body">
                            <img src="{{ asset('app') }}/assets/content/regulation.png" alt="Legal Icon" class="icon-card-top-right">
                            <h5 class="card-title text-black fw-bold">LEGAL</h5>
                            <ul class="feature-list list-unstyled">
                                <li>Izin Operasional Kemenkes</li>
                                <li>Akreditasi KAN</li>
                                <li>Anggota ALFAKES</li>
                            </ul>
                        </div>
                    </div>
                </div>
        
                <!-- SDM -->
                <div class="col-md-6">
                    <div class="card shadow-sm h-100 rounded-4 position-relative">
                        <div class="card-body">
                            <img src="{{ asset('app') }}/assets/content/team-management.png" alt="SDM Icon" class="icon-card-top-right">
                            <h5 class="card-title text-black fw-bold">SDM</h5>
                            <ul class="feature-list list-unstyled">
                                <li>Terlatih</li>
                                <li>Tersertifikasi</li>
                                <li>Teregistrasi Profesi</li>
                                <li>Berpengalaman</li>
                            </ul>
                        </div>
                    </div>
                </div>
        
                <!-- BENEFIT -->
                <div class="col-md-6">
                    <div class="card shadow-sm h-100 rounded-4 position-relative">
                        <div class="card-body">
                            <img src="{{ asset('app') }}/assets/content/authenticity.png" alt="Benefit Icon" class="icon-card-top-right">
                            <h5 class="card-title text-black fw-bold">BENEFIT</h5>
                            <ul class="feature-list list-unstyled">
                                <li>Sertifikat</li>
                                <li>Label Kalibrasi</li>
                                <li>Sesuai metode kerja Fasyankes</li>
                                <li>Konsistensi waktu pengerjaan</li>
                            </ul>
                        </div>
                    </div>
                </div>
        
                <!-- TANGGAP -->
                <div class="col-md-6">
                    <div class="card shadow-sm h-100 rounded-4 position-relative">
                        <div class="card-body">
                            <img src="{{ asset('app') }}/assets/content/feedback.png" alt="Tanggap Icon" class="icon-card-top-right">
                            <h5 class="card-title text-black fw-bold">TANGGAP</h5>
                            <ul class="feature-list list-unstyled">
                                <li>Tidak tebang pilih wilayah dan jumlah pekerjaan</li>
                                <li>Tanggapan komplain maksimal 1x24 jam</li>
                            </ul>
                        </div>
                    </div>
                </div>
        
                <!-- PERALATAN -->
                <div class="col-md-6 offset-md-3">
                    <div class="card shadow-sm h-100 rounded-4 position-relative">
                        <div class="card-body">
                            <img src="{{ asset('app') }}/assets/content/support.png" alt="Peralatan Icon" class="icon-card-top-right">
                            <h5 class="card-title text-black fw-bold">PERALATAN</h5>
                            <ul class="feature-list list-unstyled">
                                <li>Standar metode Kemenkes dan tersertifikasi</li>
                                <li>Peralatan sesuai standar Kemenkes</li>
                                <li>Peralatan kalibrasi steril</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </section>

    <section class="bg-image-overlay">
        <div class="overlay-content"></div>
        <div class="content">
            <div class="container-content p-5 overlay-section">
                <!-- Left column -->
                <div class="col-md-6 mb-4 px-4 text-start">
                    <h1>Visi</h1>
                    <p>Menjadi institute pengujian, inspeksi, sertifikasi, pelatihan yang handal dan terpercaya di Indonesia
                        tahun 2025</p>
                </div>
                <!-- Right column -->
                <div class="col-md-6 mb-4 px-4 text-justify">
                    <h1>Misi</h1>
                    <ul class="list-unstyled" style="color: white">
                        <li>Menyelenggarakan pelayanan pengujian alat kesehatan</li>
                        <li>Menyelenggarakan pelayanan jasa inspeksi alat kesehatan secara periodik.</li>
                        <li>Menyelenggarakan sertifikasi profesi.</li>
                        <li>Menyelenggarakan pelayanan pelatihan bidang kesehatan.</li>
                    </ul>
                </div>
            </div>
            <div class="container-content p-5 overlay-section">
                <div class="col-md-6 text-left text-white">
                    <h2>Motto Kami</h2>
                    <div class="d-flex align-items-start">
                        <!-- Kolom Kiri: BATS -->
                        <div class="me-4">
                            <h3 class="fw-bold">BATS</h3>
                        </div>
                        <!-- Kolom Kanan: List -->
                        <ul class="list-unstyled text-left mx-auto" style="max-width: 600px;">
                            <li><b>Best:</b> Memberikan pelayanan yang terbaik.</li>
                            <li><b>Accurate:</b> Keakuratan yang terjamin dalam melakukan kalibrasi.</li>
                            <li><b>Traceable:</b> Peralatan yang digunakan selalu terselusur.</li>
                            <li><b>Safety:</b> Pelayanan yang mengutamakan keselamatan pengguna</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-white py-5 p-5">
        <div class="container px-5" style="border-radius: 20px; border: 1px solid black;">
            <div class="row align-items-center">
                <!-- Kolom Sertifikat -->
                <div class="col-md-9 mt-3 mb-3 text-center">
                    <img src="{{ asset('app') }}/assets/content/legalitashome.png" alt="Sertifikat Akreditasi"
                        class="header-image" style="max-width: 100%; height: auto;">
                </div>
                <!-- Kolom Informasi -->
                <div class="col-md-3 mt-4">
                    <img src="{{ asset('app') }}/assets/logo.png" alt="Logo" class="">
                    <p class="text-black mt-2">
                        Layanan PT BATS telah memperoleh sertifikasi yang menegaskan kompetensinya
                        sebagai laboratorium kalibrasi yang terpercaya.
                    </p>
                </div>
            </div>
    </section>

    <section class="py-5" style="background-color: #E5F8F8;">
        <div class="container">
            <div class="row">
                <!-- Kolom Teks -->
                <div class="col-md-6">
                    <h3 class="mb-4" style="font-size: 24px"><strong>LEGALITAS</strong></h3>
                    <ol class="text-black" style="font-size: 20px">
                        <li>Akta Pendirian Perusahaan - 25 Mei 2012 No-05 dan 494 (29 Oktober 2019)</li>
                        <li>Nomor Izin Berusaha - 22 Desember 2021 NO : 022001653906</li>
                        <li>Akta Perubahan Perusahaan - 28 Desember 2021 No.04</li>
                        <li>NPWP : 93.502.738.3-015.0005.</li>
                        <li>Izin KEMENKUMHAM - AHU-0002967.AH.01.02 2021</li>
                        <li>Izin Operasional KEMENKES RI - 13 April 2021 HK.02.02/III/10003/2021</li>
                        <li>Akreditasi KAN - 28 Maret 2022 NO. LK-374-ID</li>
                    </ol>
                </div>
                <!-- Kolom Gambar -->
                <div class="col-md-6">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="image-container">
                                <img src="{{ asset('app') }}/assets/content/legal1.png" alt="Sertifikat 1"
                                    class="img-fluid rounded shadow">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="image-container">
                                <img src="{{ asset('app') }}/assets/content/legal2.png" alt="Sertifikat 2"
                                    class="img-fluid rounded shadow">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="image-container">
                                <img src="{{ asset('app') }}/assets/content/legal3.png" alt="Sertifikat 3"
                                    class="img-fluid rounded shadow">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="image-container">
                                <img src="{{ asset('app') }}/assets/content/legal4.png" alt="Sertifikat 4"
                                    class="img-fluid rounded shadow">
                            </div>
                        </div>
                    </div>
                </div>

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

    <section class="bg-white mt-5 mb-5 py-5"></section>
@endsection