@{
    string bgColor = ViewData["ContactBgColor"]?.ToString() ?? "bg-gray-100";
    string badgeBgColor = ViewData["ContactBadgeBgColor"]?.ToString() ?? "bg-primary-25";
    string badgeTextColor = ViewData["ContactBadgeTextColor"]?.ToString() ?? "text-primary-700";
    string badgeTitleColor = ViewData["ContactTitleTextColor"]?.ToString() ?? "text-gray-900";
    string borderCardColor = ViewData["ContactBorderCardColor"]?.ToString() ?? "border-gray-100";
    string bgCardColor = ViewData["ContactBgCardColor"]?.ToString() ?? "bg-white";
    string TitleCardColor = ViewData["ContactTitleCardColor"]?.ToString() ?? "text-gray-900";
    string badgeDotColor = ViewData["ContactBadgeDotColor"]?.ToString() ?? "bg-primary-700";
    string iconBgColor = ViewData["ContactIconBgColor"]?.ToString() ?? "bg-primary-700";
    string linkColor = ViewData["ContactLinkColor"]?.ToString() ?? "text-primary-500";
}

<!-- Contact Section -->
<section id="kontak" class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 @bgColor">
    <div class="w-full mx-auto">
        <div class="mb-10">
            <div class="inline-flex px-4 py-2 @badgeBgColor rounded-full mb-4">
                <div class="flex items-center gap-2">
                    <div class="w-2 h-2 @badgeDotColor rounded-full"></div>
                    <span class="@badgeTextColor text-base font-semibold font-jakarta">Hubungi Kami</span>
                </div>
            </div>
            <h2 class="@badgeTitleColor text-3xl lg:text-4xl font-bold font-jakarta">Informasi Kontak</h2>
        </div>

        <!-- Contact Grid -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Phone Card -->
            <div class="@bgCardColor p-8 rounded-2xl shadow-sm border @borderCardColor">
                <div class="w-[72px] h-[72px] @iconBgColor rounded-full flex items-center justify-center mb-6">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M18.0338 5.741C18.0677 5.61409 18.1263 5.49511 18.2063 5.39086C18.2862 5.28661 18.3859 5.19914 18.4997 5.13344C18.6134 5.06773 18.739 5.02509 18.8693 5.00794C18.9995 4.99079 19.1319 4.99948 19.2588 5.0335C21.1126 5.51718 22.804 6.4863 24.1587 7.84104C25.5135 9.19578 26.4826 10.8872 26.9663 12.741C27.0003 12.8679 27.009 13.0002 26.9918 13.1305C26.9747 13.2607 26.932 13.3863 26.8663 13.5001C26.8006 13.6138 26.7131 13.7135 26.6089 13.7935C26.5047 13.8734 26.3857 13.9321 26.2588 13.966C26.1743 13.9882 26.0873 13.9995 26 13.9997C25.7798 13.9998 25.5657 13.9272 25.391 13.7932C25.2163 13.6591 25.0907 13.4712 25.0338 13.2585C24.6395 11.7449 23.8486 10.3639 22.7428 9.2578C21.6369 8.15171 20.256 7.36059 18.7425 6.966C18.6155 6.93219 18.4964 6.87366 18.392 6.79378C18.2876 6.71389 18.2 6.61421 18.1342 6.50044C18.0683 6.38666 18.0256 6.26103 18.0084 6.13071C17.9911 6.0004 17.9998 5.86797 18.0338 5.741ZM17.7425 10.966C19.4663 11.426 20.5738 12.5347 21.0338 14.2585C21.0907 14.4712 21.2163 14.6591 21.391 14.7932C21.5657 14.9272 21.7798 14.9998 22 14.9997C22.0873 14.9995 22.1743 14.9882 22.2588 14.966C22.3857 14.9321 22.5047 14.8734 22.6089 14.7935C22.7131 14.7135 22.8006 14.6138 22.8663 14.5001C22.932 14.3863 22.9747 14.2607 22.9918 14.1305C23.009 14.0002 23.0003 13.8679 22.9663 13.741C22.3263 11.346 20.6538 9.6735 18.2588 9.0335C18.0025 8.96504 17.7295 9.00118 17.4999 9.13398C17.2703 9.26678 17.1028 9.48536 17.0344 9.74162C16.9659 9.99789 17.0021 10.2709 17.1349 10.5005C17.2677 10.7301 17.4862 10.8975 17.7425 10.966ZM26.7963 20.8072L20.9075 18.1685L20.8913 18.161C20.5856 18.0302 20.2521 17.9778 19.921 18.0083C19.5899 18.0389 19.2716 18.1515 18.995 18.336C18.9624 18.3575 18.9311 18.3809 18.9013 18.406L15.8588 20.9997C13.9313 20.0635 11.9413 18.0885 11.005 16.186L13.6025 13.0972C13.6275 13.066 13.6513 13.0347 13.6738 13.001C13.8543 12.7251 13.9638 12.4089 13.9926 12.0805C14.0214 11.752 13.9686 11.4216 13.8388 11.1185V11.1035L11.1925 5.20475C11.0209 4.80883 10.7259 4.47902 10.3515 4.26455C9.97707 4.05007 9.54333 3.96245 9.11501 4.01475C7.42122 4.23763 5.86649 5.06946 4.74118 6.35487C3.61587 7.64028 2.99695 9.29136 3.00001 10.9997C3.00001 20.9247 11.075 28.9997 21 28.9997C22.7084 29.0028 24.3595 28.3839 25.6449 27.2586C26.9303 26.1333 27.7621 24.5785 27.985 22.8847C28.0374 22.4566 27.95 22.0229 27.7357 21.6485C27.5215 21.2741 27.1919 20.979 26.7963 20.8072Z"
                            fill="white" />
                    </svg>
                </div>
                <h3 class="@TitleCardColor text-xl lg:text-2xl font-bold font-jakarta mb-2">Phone</h3>
                <p class="@TitleCardColor/80 text-base mb-4 leading-relaxed">Senin-Jumat, 08.00-16.00 WIB</p>
                <a href="tel:02138657455" class="@linkColor text-base hover:underline">(021) 3865745</a>
            </div>

            <!-- Email Card -->
            <div class="@bgCardColor p-8 rounded-2xl shadow-sm border @borderCardColor">
                <div class="w-[72px] h-[72px] @iconBgColor rounded-full flex items-center justify-center mb-6">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M26 6H6C4.89543 6 4 6.89543 4 8V24C4 25.1046 4.89543 26 6 26H26C27.1046 26 28 25.1046 28 24V8C28 6.89543 27.1046 6 26 6Z"
                            stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M28 8L16 17L4 8" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </div>
                <h3 class="@TitleCardColor text-xl lg:text-2xl font-bold font-jakarta mb-2">Email</h3>
                <p class="@TitleCardColor/80 text-base mb-4 leading-relaxed">Respon dalam 1-2 hari kerja</p>
                <a href="mailto:sampah@jakarta.go.id"
                    class="@linkColor text-base hover:underline break-all">sampah@jakarta.go.id</a>
            </div>

            <!-- Office Card -->
            <div class="@bgCardColor p-8 rounded-2xl shadow-sm border @borderCardColor">
                <div class="w-[72px] h-[72px] @iconBgColor rounded-full flex items-center justify-center mb-6">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M29.9662 26.0004H28V12.0004C28 11.47 27.7893 10.9612 27.4142 10.5862C27.0391 10.2111 26.5304 10.0004 26 10.0004H20.5C20.3674 10.0004 20.2402 10.0531 20.1464 10.1468C20.0527 10.2406 20 10.3678 20 10.5004V26.0004H18V4.05164C18.0033 3.74012 17.9357 3.43192 17.8023 3.15039C17.6689 2.86885 17.4732 2.62136 17.23 2.42664C16.8985 2.16819 16.494 2.02075 16.0739 2.00526C15.6539 1.98978 15.2396 2.10704 14.89 2.34039L4.89 9.00039C4.61567 9.18341 4.39086 9.43143 4.23558 9.72237C4.0803 10.0133 3.99937 10.3381 4 10.6679V26.0004H2.03375C1.77533 25.9966 1.52506 26.0908 1.33327 26.264C1.14148 26.4372 1.0224 26.6767 1 26.9341C0.990918 27.0709 1.01006 27.2081 1.05623 27.3372C1.1024 27.4663 1.17462 27.5845 1.2684 27.6845C1.36218 27.7845 1.47552 27.8641 1.60137 27.9185C1.72723 27.9728 1.86291 28.0007 2 28.0004H30C30.1371 28.0007 30.2728 27.9728 30.3986 27.9185C30.5245 27.8641 30.6378 27.7845 30.7316 27.6845C30.8254 27.5845 30.8976 27.4663 30.9438 27.3372C30.9899 27.2081 31.0091 27.0709 31 26.9341C30.9776 26.6767 30.8585 26.4372 30.6667 26.264C30.4749 26.0908 30.2247 25.9966 29.9662 26.0004Z"
                            fill="white" />
                    </svg>
                </div>
                <h3 class="@TitleCardColor text-xl lg:text-2xl font-bold font-jakarta mb-2">Office</h3>
                <p class="@TitleCardColor/80 text-base mb-4 leading-relaxed">Dinas Lingkungan Hidup DKI Jakarta</p>
                <p class="@linkColor text-base">Jl. Mandala V No. 67, Cililitan, Jakarta Timur</p>
            </div>
        </div>
    </div>
</section>