{{-- ============================================================ GOLD RATE SECTION
        ============================================================ --}}
        <section class="gold-rate-section" id="gold-rate">
            <div class="text-center">
                <p class="eyebrow">
                    <span class="eyebrow-rule"></span>
                    Market Watch
                </p>

                <h2 class="section-title">
                    <p>
                        <span id="goldRateTyping" class="text-maroon fw-bold"></span>
                        <span class="typing-cursor">|</span>
                    </p>
                </h2>


                <p class="section-desc">
                    Stay updated with the latest market-linked gold prices before making
                    your next financial decision.
                </p>
            </div>
            <div class="container gr-grid">


                <div class="gr-copy" data-aos="fade-right">

                    <!-- <p class="section-desc">
                        Stay updated with the latest market-linked gold prices before making
                        your next financial decision.
                    </p> -->


                    {{-- LAST UPDATED --}}
                    <!-- @php
                        $latestRateDate = $goldRates->max('rate_date');
                    @endphp

                    <p class="gr-updated">
                        <span class="dot-live"></span>

                        Last Updated:

                        @if ($latestRateDate)
{{ \Carbon\Carbon::parse($latestRateDate)->format('d M Y') }}
@else
Today
@endif
                    </p> -->


                    {{-- GOLD RATE PAGE --}}
                    {{-- <a href="{{ url('/gold-rate') }}" class="btn btn-maroon">
                    Get Today's Rate
                    <i class="fa-solid fa-arrow-right"></i>
                    </a> --}}


                    {{-- GOLD IMAGE --}}
                    {{-- GOLD IMAGE AUTO CAROUSEL --}}
                    <div id="goldRateCarousel" class="gr-carousel">

                        <div class="gr-carousel-track">

                            {{-- IMAGE 1 --}}
                            <div class="gr-slide active">
                                <img src="{{ asset('assets/images/gold-rate1.png') }}" alt="Today's Gold Rate">
                            </div>

                            {{-- IMAGE 2 --}}
                            <div class="gr-slide">
                                <img src="{{ asset('assets/images/gold-rate2.png') }}" alt="Today's Gold Rate">
                            </div>

                            {{-- IMAGE 3 --}}
                            <div class="gr-slide">
                                <img src="{{ asset('assets/images/gold-rate3.png') }}" alt="Today's Gold Rate">
                            </div>

                        </div>

                        {{-- DOTS --}}
                        <div class="gr-carousel-dots">

                            <button class="gr-dot active" type="button"></button>
                            <button class="gr-dot" type="button"></button>
                            <button class="gr-dot" type="button"></button>

                        </div>

                    </div>

                </div>



                <div class="gr-cards-container" id="gold-rate" data-aos="fade-left">
                    <div class="gr-cards">

                        <h3 class="text-center text-white">
                            Today's <span class="text-gold text-decoration-underline">Gold Rate.</span>
                        </h3>
                        @if (isset($goldRates['24k']))
                        <div class="gr-card gr-card-main d-flex align-items-center gap-4 position-relative">
                            <div class="gr-card-media flex-shrink-0">
                                <img src="{{ asset('assets/images/gold-bar.png') }}" alt="24K Gold"
                                    class="img-fluid">
                            </div>
                            <div class="gr-card-body d-flex flex-column">
                                <span class="gr-card-label">24K GOLD</span>
                                <span
                                    class="gr-card-value">₹{{ number_format((float) $goldRates['24k']->rate, 2) }}</span>
                                <!-- <span class="gr-card-unit">Per {{ $goldRates['24k']->unit }}</span> -->
                            </div>
                            <!-- <span class="gr-trend gr-trend-live position-absolute d-inline-flex align-items-center gap-2">
                                <i class="fa-solid fa-arrow-trend-up"></i> Market Linked
                            </span> -->
                            <div class="gr-card-graphic position-absolute">
                                <i class="fa-solid fa-cubes-stacked"></i>
                            </div>
                        </div>
                        @else
                        <div class="gr-card gr-card-main d-flex align-items-center gap-4 position-relative">
                            <div class="gr-card-media flex-shrink-0">
                                <img src="{{ asset('assets/img/goldbar.png') }}" alt="24K Gold"
                                    class="img-fluid">
                            </div>
                            <div class="gr-card-body d-flex flex-column">
                                <span class="gr-card-label">24K GOLD</span>
                                <span class="gr-card-value">₹0.00</span>
                                <span class="gr-card-unit">Rate Not Available</span>

                            </div>
                            <span class="gr-trend position-absolute d-inline-flex align-items-center gap-2">
                                <i class="fa-solid fa-circle-info"></i> Currently Unavailable
                            </span>
                            <div class="gr-card-graphic position-absolute">
                                <i class="fa-solid fa-cubes-stacked"></i>
                            </div>
                        </div>
                        @endif

                        {{-- 22K & SILVER: side-by-side on sm+, stacked full-width rows on xs --}}
                        <div class="row gr-card-row g-3">

                            <div class="col-12 col-sm-6 col-lg-6">
                                <div class="gr-card gr-card-small d-flex align-items-center">
                                    <div class="gr-card-icon flex-shrink-0">
                                        <img src="{{ asset('assets/img/goldbar.png') }}" alt="22K Gold">
                                    </div>
                                    <div class="gr-card-body">
                                        <span class="gr-card-label">22K GOLD</span>
                                        <span class="gr-card-value">
                                            ₹{{ isset($goldRates['22k']) ? number_format((float) $goldRates['22k']->rate, 2) : '0.00' }}
                                        </span>
                                        <!-- <span class="gr-card-unit">{{ isset($goldRates['22k']) ? 'Per ' . $goldRates['22k']->unit : 'Rate Not Available' }}</span> -->
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-6 col-lg-6">
                                <div class="gr-card gr-card-small d-flex align-items-center">
                                    <div class="gr-card-icon flex-shrink-0">
                                        <img src="{{ asset('assets/img/silverbar.png') }}" alt="Silver">
                                    </div>
                                    <div class="gr-card-body">
                                        <span class="gr-card-label">SILVER</span>
                                        <span class="gr-card-value">
                                            ₹{{ isset($goldRates['silver']) ? number_format((float) $goldRates['silver']->rate, 2) : '0.00' }}
                                        </span>
                                        <!-- <span class="gr-card-unit">{{ isset($goldRates['silver']) ? 'Per ' . $goldRates['silver']->unit : 'Rate Not Available' }}</span> -->
                                    </div>
                                </div>
                            </div>

                        </div>



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

            </div>
        </section>



        <div class="wave-divider">
            <svg width="100%" viewBox="0 0 680 90" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
                <path fill="#4a0d1c"
                    d="M0,40 C80,10 160,70 240,40 C320,10 400,65 480,38 C560,12 620,55 680,35 L680,90 L0,90 Z" />
                <path fill="#6d1327" opacity=".7"
                    d="M0,52 C60,28 140,72 220,50 C300,28 380,68 460,46 C540,24 620,60 680,44 L680,90 L0,90 Z" />
                <path fill="#8a1a32" opacity=".45"
                    d="M0,62 C70,44 150,78 230,60 C310,42 390,74 470,56 C550,38 630,66 680,52 L680,90 L0,90 Z" />
                <path fill="none" stroke="#d4af37" stroke-width="1.2" opacity=".6"
                    d="M0,40 C80,10 160,70 240,40 C320,10 400,65 480,38 C560,12 620,55 680,35" />
                <circle fill="#d4af37" cx="240" cy="40" r="3" />
                <circle fill="#d4af37" cx="480" cy="38" r="3" />
                <circle fill="#d4af37" cx="0" cy="40" r="2.5" />
                <circle fill="#d4af37" cx="680" cy="35" r="2.5" />
            </svg>
        </div>