@include('weblayouts.header')


    {{-- ============================================================ PROMO BANNER
    ============================================================ --}}

    @if ($banners->isNotEmpty())

    @php
    $popupBanner = $banners->first();
    @endphp
    <!-- ============================================================
                                                 GOLD LOAN PROMO MODAL (Bootstrap 5)
                                                 Unique class prefix: "goldpromo-" to avoid collisions
                                            ============================================================= -->

    <div class="modal fade goldpromo-modal" id="goldPromoModal" tabindex="-1"
        aria-labelledby="goldPromoModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered mt-5 goldpromo-dialog">
            <div class="modal-content goldpromo-content">

                {{-- CLOSE BUTTON --}}
                <button type="button" class="goldpromo-close" data-bs-dismiss="modal" aria-label="Close offer">
                    <i class="fa-solid fa-xmark"></i>
                </button>

                {{-- ================= TOP BANNER (dark maroon/gold) ================= --}}

                <div class="goldpromo-banner">
                    @if ($banners->isNotEmpty() && !empty($banners->first()->image))
                    <img src="{{ url('storage/' . $banners->first()->image) }}"
                        alt="{{ $banners->first()->title ?? 'Banner' }}" class="goldpromo-banner-img">
                    @else
                    <img src="{{ asset('assets/img/banner1.png') }}" alt="Thangasurangam"
                        class="goldpromo-banner-img">
                    @endif
                </div>







      
                <div class="goldpromo-actions">
                    <a href="#contact-us" id="promoPopupApply" class="goldpromo-btn goldpromo-btn-primary">
                        Apply for Gold Loan <i class="fa-solid fa-arrow-right"></i>
                    </a>

                </div>

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


    {{-- ================= AUTO SHOW ON LOAD (optional) ================= --}}
    {{-- <script>
            document.addEventListener('DOMContentLoaded', function() {
                var goldPromoModalEl = document.getElementById('goldPromoModal');
                if (goldPromoModalEl) {
                    var goldPromoModal = new bootstrap.Modal(goldPromoModalEl);
                    goldPromoModal.show();
                }
            });
        </script> --}}
    @endif

    <main>

       @include('weblayouts.hero')
@include('weblayouts.about')


        {{-- ============================================================ GOLD LOAN SECTION
        ============================================================ --}}

        <section class="gold-loan-section" id="gold-loan">

            <div class="container gl-top-grid">

                <!-- SECTION INTRO -->
                <div data-aos="fade-right">

                    <p class="eyebrow">
                        <span class="eyebrow-rule"></span>
                        Gold Finance / தங்க நிதி
                    </p>

                    <h2 class="section-title">
                        Gold Loan That
                        <span class="text-gold">Works For You.</span>

                    </h2>


                    <a href="#contact-us" class="btn btn-maroon">
                        Apply For Gold Loan /
                        <span class="tamil-text"> தங்கக் கடனுக்கு விண்ணப்பிக்க &nbsp; <i class="fa-solid fa-arrow-up-right-from-square"></i>
                        </span>
                    </a>

                </div>

                <div class="row g-3">

                    <!-- CARD 1 -->
                    <div class="col-12 col-sm-6">
                        <div class="gl-card" data-aos="fade-up" data-aos-delay="0">
                            <span class="gl-card-num">01</span>

                            <h3>
                                Quick Processing
                                <span class="tamil-text">விரைவான செயல்முறை</span>
                            </h3>
                            <p>
                                Get your loan process started without delays.
                            </p>
                        </div>
                    </div>

                    <!-- CARD 2 -->
                    <div class="col-12 col-sm-6">
                        <div class="gl-card" data-aos="fade-up" data-aos-delay="100">
                            <span class="gl-card-num">02</span>

                            <h3>
                                Transparent Valuation
                                <span class="tamil-text">வெளிப்படையான மதிப்பீடு</span>
                            </h3>
                            <p>
                                Know the value of your gold clearly and confidently.
                            </p>
                        </div>
                    </div>

                    <!-- CARD 3 -->
                    <div class="col-12 col-sm-6">
                        <div class="gl-card" data-aos="fade-up" data-aos-delay="200">
                            <span class="gl-card-num">03</span>

                            <h3>
                                Flexible Support
                                <span class="tamil-text">நெகிழ்வான உதவி</span>
                            </h3>
                            <p>
                                Choose financial assistance according to your needs.
                            </p>
                        </div>
                    </div>

                    <!-- CARD 4 -->
                    <div class="col-12 col-sm-6">
                        <div class="gl-card" data-aos="fade-up" data-aos-delay="300">
                            <span class="gl-card-num">04</span>

                            <h3>
                                Trusted Service
                                <span class="tamil-text">நம்பகமான சேவை</span>
                            </h3>
                            <p>
                                Customer-focused assistance.
                            </p>
                        </div>
                    </div>

                </div>
            </div>

            <!-- WAVE DIVIDER -->
            <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,50 C80,80 160,20 240,50 C320,80 400,25 480,52 C560,78 620,35 680,55 L680,0 L0,0 Z" />

                    <path fill="#6d1327" opacity=".7"
                        d="M0,38 C60,62 140,18 220,40 C300,62 380,22 460,44 C540,66 620,30 680,46 L680,0 L0,0 Z" />

                    <path fill="#8a1a32" opacity=".45"
                        d="M0,28 C70,46 150,12 230,30 C310,48 390,16 470,34 C550,52 630,24 680,38 L680,0 L0,0 Z" />

                    <path fill="none" stroke="#d4af37"
                        stroke-width="1.2" opacity=".6"
                        d="M0,50 C80,80 160,20 240,50 C320,80 400,25 480,52 C560,78 620,35 680,55" />

                    <circle fill="#d4af37" cx="240" cy="50" r="3" />
                    <circle fill="#d4af37" cx="480" cy="52" r="3" />
                    <circle fill="#d4af37" cx="0" cy="50" r="2.5" />
                    <circle fill="#d4af37" cx="680" cy="55" r="2.5" />

                </svg>
            </div>

            <!-- SIMPLE PROCESS -->
            <div class="container gl-steps">

                <p class="eyebrow center">
                    <span class="eyebrow-rule"></span>
                    Simple Process / எளிய நடைமுறை
                </p>

                <h2 class="section-title center">
                    Get Your Gold Loan in
                    <span class="text-gold">4 Simple Steps</span>
                    <br>
                    <span class="tamil-text">
                        தங்கக் கடன் பெறுங்கள்
                    </span>
                </h2>

                <!-- <p class="section-desc center">
            A straightforward process designed around convenience and transparency.
            <br>
            <span class="tamil-text">
                எளிமையான மற்றும் வெளிப்படையான கடன் பெறும் நடைமுறை.
            </span>
        </p> -->

                <div class="steps-row">

                    <!-- STEP 1 -->
                    <div class="step-item" data-aos="zoom-in" data-aos-delay="0">

                        <div class="step-circle">01</div>

                        <h4>
                            Bring Your Gold
                            <span class="tamil-text">தங்க நகைகளைக் கொண்டு வாருங்கள்</span>
                        </h4>

                        <p>
                            <span class="tamil-text">
                                உங்கள் தங்க நகைகளுடன் எங்கள்
                                அலுவலகத்திற்கு வாருங்கள்.
                            </span>
                        </p>

                    </div>

                    <!-- STEP 2 -->
                    <div class="step-item" data-aos="zoom-in" data-aos-delay="100">

                        <div class="step-circle">02</div>

                        <h4>
                            Free Gold Valuation
                            <span class="tamil-text">இலவச தங்க மதிப்பீடு</span>
                        </h4>

                        <p>
                            <span class="tamil-text">
                                எங்கள் குழுவினர் உங்கள் தங்கத்தை மதிப்பீடு
                                செய்து அதன் மதிப்பைத் தெளிவாக விளக்குவார்கள்.
                            </span>
                        </p>

                    </div>

                    <!-- STEP 3 -->
                    <div class="step-item" data-aos="zoom-in" data-aos-delay="200">

                        <div class="step-circle">03</div>

                        <h4>
                            Documentation
                            <span class="tamil-text">ஆவணச் செயல்முறை</span>
                        </h4>

                        <p>
                            <span class="tamil-text">
                                தேவையான ஆவணங்களை எங்கள் வழிகாட்டுதலுடன்
                                எளிதாகப் பூர்த்தி செய்யுங்கள்.
                            </span>
                        </p>

                    </div>

                    <!-- STEP 4 -->
                    <div class="step-item" data-aos="zoom-in" data-aos-delay="300">

                        <div class="step-circle">04</div>

                        <h4>
                            Financial Assistance
                            <span class="tamil-text">நிதி உதவி</span>
                        </h4>

                        <p>
                            <span class="tamil-text">
                                ஒப்புக்கொள்ளப்பட்ட விதிமுறைகளின்படி
                                நிதி உதவியைப் பெறுங்கள்.
                            </span>
                        </p>

                    </div>

                </div>
            </div>

        </section>

        
@include('weblayouts.services')
@include('weblayouts.gold_rate')
@include('weblayouts.gold_calc')
       



   
        {{-- ============================================================ BANNER GALLERY SECTION
        ============================================================ --}}
        <!-- Wave Divider (Inverted) -->
        <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,50 C80,80 160,20 240,50 C320,80 400,25 480,52 C560,78 620,35 680,55 L680,0 L0,0 Z" />
                <path fill="#6d1327" opacity=".7"
                    d="M0,38 C60,62 140,18 220,40 C300,62 380,22 460,44 C540,66 620,30 680,46 L680,0 L0,0 Z" />
                <path fill="#8a1a32" opacity=".45"
                    d="M0,28 C70,46 150,12 230,30 C310,48 390,16 470,34 C550,52 630,24 680,38 L680,0 L0,0 Z" />
                <path fill="none" stroke="#d4af37" stroke-width="1.2" opacity=".6"
                    d="M0,50 C80,80 160,20 240,50 C320,80 400,25 480,52 C560,78 620,35 680,55" />
                <circle fill="#d4af37" cx="240" cy="50" r="3" />
                <circle fill="#d4af37" cx="480" cy="52" r="3" />
                <circle fill="#d4af37" cx="0" cy="50" r="2.5" />
                <circle fill="#d4af37" cx="680" cy="55" r="2.5" />
            </svg>
        </div>

        @if ($banners->isNotEmpty())

        <section class="banner-gallery-section" id="banner-gallery">

            <div class="container">

                <div class="banner-gallery-heading">


                    <h2 class="section-title center">
                        Our&nbsp;
                        <span class="text-gold">
                            Gallery
                        </span>
                    </h2>

                    <p class="section-desc center">
                        A quick look at our active gold loan offers — tap any banner to view it in full.
                    </p>

                </div>


                <div class="banner-slider-wrapper">

                    <div class="banner-slider-track">


                        <div class="banner-slider-group">

                            @foreach ($banners as $i => $banner)
                            @if (!empty($banner->image))
                            <button type="button" class="banner-gallery-item"
                                data-banner-image="{{ url(Storage::url($banner->image)) }}"
                                data-banner-title="{{ $banner->title }}"
                                aria-label="View {{ $banner->title }}">

                                <span class="banner-gallery-card">

                                    <span class="banner-gallery-frame">

                                        <img src="{{ url(Storage::url($banner->image)) }}"
                                            alt="{{ $banner->title ?? 'Thangasurangam gold loan offer banner' }}"
                                            loading="lazy">

                                        <span class="banner-gallery-coin">
                                            <i class="fa-solid fa-tag"></i>
                                        </span>


                                        <span class="banner-gallery-overlay">

                                            <!-- @if (!empty($banner->title))
                                                            <span class="banner-gallery-overlay-title">
                                                                {{ $banner->title }}
                                                            </span>
                                                        @endif -->

                                            <span class="banner-gallery-overlay-cta">
                                                View
                                                <i class="fa-solid fa-arrow-right"></i>
                                            </span>

                                        </span>

                                    </span>

                                </span>

                            </button>
                            @endif
                            @endforeach

                        </div>


                        <div class="banner-slider-group" aria-hidden="true">

                            @foreach ($banners as $i => $banner)
                            @if (!empty($banner->image))
                            <button type="button" class="banner-gallery-item" tabindex="-1"
                                data-banner-image="{{ url(Storage::url($banner->image)) }}"
                                data-banner-title="{{ $banner->title ?? 'Thangasurangam Offer' }}">

                                <span class="banner-gallery-card">

                                    <span class="banner-gallery-frame">

                                        <img src="{{ url(Storage::url($banner->image)) }}" alt=""
                                            loading="lazy">

                                        <span class="banner-gallery-coin">
                                            <i class="fa-solid fa-tag"></i>
                                        </span>


                                        <span class="banner-gallery-overlay">

                                            <!-- @if (!empty($banner->title))
                                            <span class="banner-gallery-overlay-title">
                                                {{ $banner->title }}
                                            </span>
                                            @endif -->

                                            <span class="banner-gallery-overlay-cta">
                                                View 
                                                <i class="fa-solid fa-arrow-right"></i>
                                            </span>

                                        </span>

                                    </span>

                                </span>

                            </button>
                            @endif
                            @endforeach

                        </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>




        <div class="banner-lightbox-overlay" id="bannerLightbox" aria-hidden="true">

            <div class="banner-lightbox modal-sm" role="dialog" aria-modal="true" aria-label="Banner preview">

                <button type="button" class="banner-lightbox-close" id="bannerLightboxClose"
                    aria-label="Close">
                    <i class="fa-solid fa-xmark"></i>
                </button>


                <div class="banner-lightbox-image-wrapper">

                    <img src="" alt="" class="banner-lightbox-image" id="bannerLightboxImage">

                </div>


                <p class="banner-lightbox-caption" id="bannerLightboxCaption"></p>

            </div>

        </div>

        @endif
      
       @include('weblayouts.reviews')
       @include('weblayouts.faq')
       @include('weblayouts.contact')



    </main>

    <section class="trust-section">
        <div class="container-fluid">
            <div class="trust-wrapper">

                <div class="trust-grid">

                    <!-- 01: GOVERNMENT REGISTERED -->
                    <div class="trust-item" data-aos="fade-up" data-aos-delay="0">
                        <div class="trust-icon-wrap">
                            <div class="trust-icon">
                                <i class="fa-solid fa-building-columns"></i>
                            </div>
                        </div>

                        <h3>
                            GOVERNMENT
                            <br>REGISTERED
                        </h3>

                        <span class="trust-line"></span>

                        <p class="trust-tamil">
                            அரசு பதிவு பெற்ற
                            <br>நிறுவனம்
                        </p>
                    </div>

                    <!-- 02: ISO CERTIFIED -->
                    <div class="trust-item" data-aos="fade-up" data-aos-delay="100">
                        <div class="trust-icon-wrap">
                            <div class="trust-icon">
                                <i class="fa-solid fa-file-circle-check"></i>
                            </div>
                        </div>

                        <h3>
                            ISO CERTIFIED
                            <br>PROCESS
                        </h3>

                        <span class="trust-line"></span>

                        <p class="trust-tamil">
                            தரமான மற்றும்
                            <br>நம்பகமான சேவை
                        </p>
                    </div>

                    <!-- 03: HAPPY CUSTOMERS -->
                    <div class="trust-item" data-aos="fade-up" data-aos-delay="200">
                        <div class="trust-icon-wrap">
                            <div class="trust-icon">
                                <i class="fa-solid fa-users"></i>
                            </div>
                        </div>

                        <h3>
                            100+ HAPPY
                            <br>CUSTOMERS
                        </h3>

                        <span class="trust-line"></span>

                        <p class="trust-tamil">
                            நூற்றுக்கும் மேற்பட்ட
                            வாடிக்கையாளர்கள்
                        </p>
                    </div>

                    <!-- 04: TRANSPARENT DEALS -->
                    <div class="trust-item" data-aos="fade-up" data-aos-delay="300">
                        <div class="trust-icon-wrap">
                            <div class="trust-icon">
                                <i class="fa-solid fa-handshake"></i>
                            </div>
                        </div>

                        <h3>
                            TRANSPARENT
                            <br>DEALS
                        </h3>

                        <span class="trust-line"></span>

                        <p class="trust-tamil">
                            வெளிப்படையான
                            <br>சேவைகள்
                        </p>
                    </div>

                    <!-- 05: DEDICATED SUPPORT -->
                    <div class="trust-item" data-aos="fade-up" data-aos-delay="400">
                        <div class="trust-icon-wrap">
                            <div class="trust-icon">
                                <i class="fa-solid fa-headset"></i>
                            </div>
                        </div>

                        <h3>
                            DEDICATED
                            <br>SUPPORT
                            24/7
                        </h3>

                        <span class="trust-line"></span>

                        <p class="trust-tamil">
                            எப்போதும் உங்களுக்காக
                            <br>வாடிக்கையாளர் சேவை
                        </p>
                    </div>

                </div>
            </div>
        </div>
    </section>
   
    {{-- ============================================================ FOOTER ============================================================ --}}
    <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>
    
@include('weblayouts.footer')

    {{-- ============================================================ SCRIPTS
    ============================================================ --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

    @php
    $websiteReviews = $reviews
    ->map(function ($review) {
    return [
    'text' => '"' . $review->review . '"',
    'name' => $review->name,
    'loc' => 'Nagercoil',
    'rating' => (int) $review->rating,
    ];
    })
    ->values();
    @endphp

    <script>
        window.websiteReviews = @json($websiteReviews);
    </script>
       @include('weblayouts.script')

</body>

</html>