@{
    Layout = "_Layout";

    ViewData["Title"] = "Whistleblowing System - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Sistem pelaporan pelanggaran lingkungan untuk masyarakat dalam melaporkan dugaan pelanggaran dan pencemaran lingkungan hidup.";
    ViewData["Keywords"] = "Whistleblowing System, Pelaporan Pelanggaran Lingkungan, Laporan Pencemaran, Aduan Lingkungan, Sistem Pelaporan, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Whistleblowing System - Sistem Pelaporan Pelanggaran Lingkungan | Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Layanan Whistleblowing System untuk melaporkan dugaan pelanggaran dan pencemaran lingkungan hidup. Platform pelaporan online yang aman dan terpercaya di DKI Jakarta.";
    ViewData["TwitterTitle"] = "Whistleblowing System - Sistem Pelaporan Pelanggaran Lingkungan | Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Layanan Whistleblowing System untuk melaporkan dugaan pelanggaran dan pencemaran lingkungan hidup. Platform pelaporan online yang aman dan terpercaya di DKI Jakarta.";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Whistleblowing System";
    ViewData["TitleBeforeHighlight"] = "WHISTLEBLOWING";
    ViewData["TitleHighlight"] = "SYSTEM";
}

<!-- Breadcumb -->
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />

<div class="container mx-auto max-w-6xl py-8">

    <div class="flex justify-center">
    <div class="w-full max-w-6xl py-12">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold mb-4">Whistleblowing System</h1>
            <p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
               Layanan Whistleblowing System untuk melaporkan dugaan pelanggaran dan pencemaran lingkungan hidup. Platform pelaporan online yang aman dan terpercaya di DKI Jakarta.
            </p>
        </div>
    </div>
</div>

    <!-- Report Section -->
    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
        <div class="flex items-start space-x-6">
            <div class="flex-shrink-0">
                <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                    </svg>
                </div>
            </div>
            <div class="flex-1">
                <h3 class="text-xl font-semibold text-gray-800 mb-3">Laporkan Dugaan PUNGLI</h3>
                <p class="text-gray-600 mb-6 leading-relaxed">
                    Jika anda menemukan <span class="font-semibold text-red-600">PUNGLI</span> di Dinas Lingkungan Hidup DKI Jakarta, silahkan laporkan melalui:
                </p>
                
                <div class="space-y-4">
                    <!-- Email Report -->
                    <div class="flex items-center p-4 bg-blue-50 rounded-lg border border-blue-200">
                        <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-4">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600 mb-1">Kirim email ke:</p>
                            <a href="mailto:dinaslh@jakarta.go.id" class="text-blue-600 font-semibold hover:text-blue-800 transition-colors">
                                dinaslh@jakarta.go.id
                            </a>
                        </div>
                    </div>

                    <!-- Link Report -->
                    <div class="flex items-center p-4 bg-green-50 rounded-lg border border-green-200">
                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-4">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600 mb-1">Atau akses melalui link:</p>
                            <a href="https://bit.ly/wbsdlhdki" target="_blank" 
                               class="inline-flex items-center text-green-600 font-semibold hover:text-green-800 transition-colors">
                                https://bit.ly/wbsdlhdki
                                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Privacy Notice -->
                <div class="mt-6 p-4 bg-gray-50 rounded-lg border-l-4 border-blue-500">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <p class="text-sm text-gray-600">
                            <span class="font-semibold">Jaminan Kerahasiaan:</span> Identitas pelapor akan dijaga kerahasiaannya dan dilindungi sesuai ketentuan peraturan perundang-undangan yang berlaku.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>