@extends('layouts.main')

@section('title', 'Struktur Organisasi | PPNI DPK BaliMéd')
@section('meta_description', 'Susunan pengurus PPNI DPK Rumah Sakit BaliMéd Denpasar periode 2022-2027.')
@section('og_title', 'Struktur Organisasi | PPNI DPK BaliMéd')
@section('og_description', 'Susunan pengurus PPNI DPK Rumah Sakit BaliMéd Denpasar periode 2022-2027.')
@section('og_image', asset('assets/images/logo-ppni.png'))

@section('content')

<!-- Hero -->
<section class="bg-gradient-to-r from-blue-950 via-blue-900 to-blue-700 text-white">
    <div class="max-w-7xl mx-auto px-4 py-16 sm:py-20">
        <p class="text-blue-200 font-semibold mb-3">Organisasi</p>
        <h1 class="text-4xl md:text-5xl font-extrabold mb-4">Struktur Organisasi</h1>
        <p class="text-base sm:text-lg text-blue-100 max-w-3xl leading-8">
            Susunan pengurus PPNI DPK Rumah Sakit BaliMéd Denpasar periode 2022–2027
            sebagai bentuk koordinasi, penguatan profesi, dan pengembangan organisasi.
        </p>
    </div>
</section>

<section class="max-w-7xl mx-auto px-4 py-12 sm:py-16">

    <!-- Header card -->
    <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6 sm:p-8 mb-10">
        <div class="flex flex-col md:flex-row md:items-center gap-5">
            <img src="{{ asset('assets/images/logo-ppni.png') }}"
                 alt="Logo PPNI"
                 class="w-20 h-20 object-contain rounded-2xl bg-white shadow-sm">

            <div>
                <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-950">
                    Susunan Pengurus DPK PPNI
                </h2>
                <p class="text-slate-600 mt-2 text-base sm:text-lg">
                    RS BaliMéd Denpasar
                </p>
                <p class="text-blue-700 font-semibold mt-1">
                    Periode 2022–2027
                </p>
            </div>
        </div>
    </div>

    <!-- Inti Pengurus -->
    <div class="mb-12">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-2xl sm:text-3xl font-bold text-blue-950">Inti Pengurus</h3>
            <span class="text-sm text-slate-500">Pengurus Harian</span>
        </div>

        <div class="grid md:grid-cols-3 gap-6">
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6 text-center">
                <div class="w-20 h-20 mx-auto rounded-full bg-blue-100 text-blue-900 flex items-center justify-center text-2xl font-bold mb-4">
                    K
                </div>
                <h4 class="text-xl font-bold text-blue-900">I Made Dedi Antara, A.Md.Kep</h4>
                <p class="text-slate-500 mt-2">Ketua</p>
                <p class="text-sm text-slate-600 mt-3">NIRA. 51710513574</p>
            </div>

            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6 text-center">
                <div class="w-20 h-20 mx-auto rounded-full bg-blue-100 text-blue-900 flex items-center justify-center text-2xl font-bold mb-4">
                    S
                </div>
                <h4 class="text-xl font-bold text-blue-900">Ns. Luh Putu Yuniartini, S.Kep</h4>
                <p class="text-slate-500 mt-2">Sekretaris</p>
                <p class="text-sm text-slate-600 mt-3">NIRA. 51710160449</p>
            </div>

            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6 text-center">
                <div class="w-20 h-20 mx-auto rounded-full bg-blue-100 text-blue-900 flex items-center justify-center text-2xl font-bold mb-4">
                    B
                </div>
                <h4 class="text-xl font-bold text-blue-900">Ns. Ni Luh Gede Mitha Candra Puspita, S.Kep</h4>
                <p class="text-slate-500 mt-2">Bendahara</p>
                <p class="text-sm text-slate-600 mt-3">NIRA. 51710470609</p>
            </div>
        </div>
    </div>

    <!-- Bidang / Seksi -->
    <div class="mb-12">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-2xl sm:text-3xl font-bold text-blue-950">Seksi / Bidang</h3>
            <span class="text-sm text-slate-500">Koordinator & Anggota</span>
        </div>

        <div class="grid lg:grid-cols-2 gap-6">

            <!-- Organisasi -->
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6">
                <h4 class="text-xl font-bold text-blue-900 mb-4">Seksi Organisasi, Kaderisasi, dan Hukum</h4>

                <div class="mb-4">
                    <p class="text-sm uppercase tracking-wide text-slate-500 mb-1">Koordinator</p>
                    <p class="font-semibold text-slate-800">Ns. Ni Putu Surya Rosita Dewi, S.Kep</p>
                    <p class="text-sm text-slate-600">NIRA. 51710496188</p>
                </div>

                <div>
                    <p class="text-sm uppercase tracking-wide text-slate-500 mb-2">Anggota</p>
                    <ul class="space-y-3 text-slate-700">
                        <li>
                            <p class="font-medium">Agus Mahendra Gosa, A.Md Kep</p>
                            <p class="text-sm text-slate-500">NIRA. 52710476608</p>
                        </li>
                        <li>
                            <p class="font-medium">Ns. Ni Putu Lilik Cahyani, S.Kep</p>
                            <p class="text-sm text-slate-500">NIRA. 5171047285</p>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Pelatihan -->
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6">
                <h4 class="text-xl font-bold text-blue-900 mb-4">Seksi Pelatihan dan Penelitian</h4>

                <div class="mb-4">
                    <p class="text-sm uppercase tracking-wide text-slate-500 mb-1">Koordinator</p>
                    <p class="font-semibold text-slate-800">Ns. I Kadek Apry Tismayana, S.Kep</p>
                    <p class="text-sm text-slate-600">NIRA. 51710571849</p>
                </div>

                <div>
                    <p class="text-sm uppercase tracking-wide text-slate-500 mb-2">Anggota</p>
                    <ul class="space-y-3 text-slate-700">
                        <li>
                            <p class="font-medium">Ns. Ni Made Rasma Indah Pratiwi, S.Kep</p>
                            <p class="text-sm text-slate-500">NIRA. 51710452130</p>
                        </li>
                        <li>
                            <p class="font-medium">Ni Luh Putu Eka Setiyani, A.Md.Kep</p>
                            <p class="text-sm text-slate-500">NIRA. 51710504762</p>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Sistem Informasi -->
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6">
                <h4 class="text-xl font-bold text-blue-900 mb-4">Seksi Sistem Informasi dan Komunikasi</h4>

                <div class="mb-4">
                    <p class="text-sm uppercase tracking-wide text-slate-500 mb-1">Koordinator</p>
                    <p class="font-semibold text-slate-800">Ns. Ni Luh Djani Utari, S.Kep</p>
                    <p class="text-sm text-slate-600">NIRA. 51710709490</p>
                </div>

                <div>
                    <p class="text-sm uppercase tracking-wide text-slate-500 mb-2">Anggota</p>
                    <ul class="space-y-3 text-slate-700">
                        <li>
                            <p class="font-medium">Ns. A.A Ngurah Bayu Bhaskara, S.Kep</p>
                            <p class="text-sm text-slate-500">NIRA. 51710648570</p>
                        </li>
                        <li>
                            <p class="font-medium">Ns. Luh Putu Mahayani, S.Kep</p>
                            <p class="text-sm text-slate-500">NIRA. 51710074226</p>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Pelayanan -->
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6">
                <h4 class="text-xl font-bold text-blue-900 mb-4">Seksi Pelayanan dan Kesejahteraan</h4>

                <div class="mb-4">
                    <p class="text-sm uppercase tracking-wide text-slate-500 mb-1">Koordinator</p>
                    <p class="font-semibold text-slate-800">Putu Ayu Jannaki Puspa Dewi, A.Md.Kep</p>
                    <p class="text-sm text-slate-600">NIRA. 51710494922</p>
                </div>

                <div>
                    <p class="text-sm uppercase tracking-wide text-slate-500 mb-2">Anggota</p>
                    <ul class="space-y-3 text-slate-700">
                        <li>
                            <p class="font-medium">I Made Suarsana, A.Md.Kep</p>
                            <p class="text-sm text-slate-500">NIRA. 51710073976</p>
                        </li>
                        <li>
                            <p class="font-medium">Putu Dessy Kalpika Dewi, A.Md.Kep</p>
                            <p class="text-sm text-slate-500">NIRA. 51710476322</p>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

    <!-- Penutup -->
    <div class="bg-blue-50 border border-blue-100 rounded-3xl p-6 sm:p-8">
        <div class="text-center max-w-3xl mx-auto">
            <h3 class="text-2xl font-bold text-blue-950 mb-3">
                Dewan Pengurus Komisariat PPNI
            </h3>
            <p class="text-slate-600 leading-8">
                Rumah Sakit BaliMéd Denpasar berkomitmen membangun organisasi profesi yang aktif,
                solid, komunikatif, dan berorientasi pada pengembangan mutu pelayanan keperawatan.
            </p>
        </div>
    </div>

</section>
@endsection