{{-- ABOUT US SECTION --}}
<section class="about-section" id="about-us">
    <div class="container">
        <div class="row align-items-center g-4 g-lg-5 about-hero-row">

            {{-- LEFT: ABOUT CONTENT --}}
            <div class="col-lg-6" data-aos="fade-right">

                <div class="about-intro">

                    <p class="about-eyebrow">
                        <span class="about-eyebrow-line"></span>
                        GOLD RATE CALCULATOR
                    </p>

                    <h2 class="about-hero-title">
                        Know Your Gold Value
                        <span>Instantly &amp; Accurately</span>
                    </h2>

                    <p class="about-hero-desc">
                        Our gold rate calculator helps you estimate the
                        current value of your gold based on live market
                        rates. Get accurate, transparent and real-time
                        valuation, anytime.
                    </p>

                    {{-- FEATURES --}}
                    <div class="row g-3 about-highlight-grid">

                        <div class="col-6">
                            <div class="about-highlight">
                                <div class="about-highlight-icon">
                                    <i class="fa-solid fa-coins"></i>
                                </div>
                                <div class="about-highlight-content">
                                    <h6>Live Gold Rates</h6>
                                    <p>Updated in real-time</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="about-highlight">
                                <div class="about-highlight-icon">
                                    <i class="fa-solid fa-shield-halved"></i>
                                </div>
                                <div class="about-highlight-content">
                                    <h6>Accurate Valuation</h6>
                                    <p>Based on purity &amp; weight</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="about-highlight">
                                <div class="about-highlight-icon">
                                    <i class="fa-solid fa-bolt"></i>
                                </div>
                                <div class="about-highlight-content">
                                    <h6>Fast &amp; Easy</h6>
                                    <p>Get results in seconds</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="about-highlight">
                                <div class="about-highlight-icon">
                                    <i class="fa-solid fa-lock"></i>
                                </div>
                                <div class="about-highlight-content">
                                    <h6>100% Transparent</h6>
                                    <p>No hidden charges</p>
                                </div>
                            </div>
                        </div>

                    </div>

                   

                </div>
            </div>

            {{-- RIGHT: EXISTING CALCULATOR --}}
            <div class="col-lg-6" data-aos="fade-left">
                   <div class="about-calc-wrap" data-aos="fade-down">



                    <!-- Calculator Card -->
                    <div class="calc-card">

                        <!-- Metal Tabs -->
                        <div class="metal-tabs">
                            <button class="metal-tab gold-tab active" id="tabGold" onclick="switchTab('gold')">
                                <span class="tab-icon">Au</span> Gold
                            </button>
                            <button class="metal-tab silver-tab" id="tabSilver" onclick="switchTab('silver')">
                                <span class="tab-icon">Ag</span> Silver
                            </button>
                        </div>

                        <!-- Form Body -->
                        <div class="calc-body" id="calcBody">
                            
<!-- Calculator Title -->
<p class="calc-title">
    <i class="fa-solid fa-calculator"></i>
    <span id="calcTitleText">Gold Rate Calculator</span>
</p>

<!-- Calculation Mode Tabs -->
<div class="calc-mode-tabs">
    <label class="calc-mode-tab active" id="gramsTab">
        <input type="radio" name="calcBy" value="grams" checked
            onchange="toggleMode(this)">
        <i class="fa-solid fa-weight-scale"></i>
        By Grams
    </label>

    <label class="calc-mode-tab" id="rupeesTab">
        <input type="radio" name="calcBy" value="rupees"
            onchange="toggleMode(this)">
        <i class="fa-solid fa-indian-rupee-sign"></i>
        By Rupees
    </label>
</div>
                            <!-- Input -->
                            <div class="form-row mb-3">
                                <label for="inputValue" id="inputValueLabel">Enter Grams</label>
                                <input type="number" id="inputValue" class="form-control" placeholder="e.g. 10"
                                    min="0">
                            </div>

                            <!-- Purity Select -->
                            <div class="form-row mb-3">
                                <label for="purity">Purity</label>
                                <select id="purity" class="form-control">
                                    <option value="99.9">24K — 99.9%</option>
                                    <option value="91.6" selected>22K — 91.6%</option>
                                    <option value="75.0">18K — 75.0%</option>
                                    <option value="58.3">14K — 58.3%</option>
                                    <option value="41.6">10K — 41.6%</option>
                                </select>
                            </div>

                            <!-- Result -->
                            <div class="form-row mb-3">
                                <label for="estimatedValue" id="resultLabel">Estimated Value</label>
                                <input type="text" id="estimatedValue" class="form-control readonly-box" readonly
                                    placeholder="₹ 0.00">
                            </div>

                        </div>

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

        </div>
    </div>

  <div class="container why-choose mt-3">
                <p class="eyebrow center"><span class="eyebrow-rule"></span> The Thangasurangam Difference</p>
                <h2 class="section-title center">Why Choose <span class="text-gold">Thangasurangam?</span></h2>
                <p class="section-desc center">Designed around trust, transparency and dependable customer service.</p>

                <div class="why-grid">
                    @php
                    $whyItems = [
                    [
                    'icon' => 'fa-solid fa-coins',
                    'title' => 'Trusted Gold Finance',
                    'text' => 'Reliable assistance for your gold finance requirements.',
                    ],
                    [
                    'icon' => 'fa-solid fa-magnifying-glass',
                    'title' => 'Transparent Process',
                    'text' => 'Clear communication at every stage.',
                    ],
                    [
                    'icon' => 'fa-solid fa-scale-balanced',
                    'title' => 'Professional Valuation',
                    'text' => "Understand your gold's value with confidence.",
                    ],
                    [
                    'icon' => 'fa-solid fa-gauge-high',
                    'title' => 'Quick Assistance',
                    'text' => 'A streamlined experience built around convenience.',
                    ],
                    [
                    'icon' => 'fa-solid fa-heart',
                    'title' => 'Customer First',
                    'text' => 'Your comfort and understanding remain important to us.',
                    ],
                    [
                    'icon' => 'fa-solid fa-handshake',
                    'title' => 'Convenient Service',
                    'text' => 'Friendly support when you need financial assistance.',
                    ],
                    [
                    'icon' => 'fa-solid fa-vault',
                    'title' => 'Secure Gold Handling',
                    'text' => 'Professional care throughout the process.',
                    ],
                    [
                    'icon' => 'fa-solid fa-map-location-dot',
                    'title' => 'Local Expertise',
                    'text' => 'Proudly serving customers in Nagercoil.',
                    ],
                    ];
                    @endphp

                    @foreach ($whyItems as $i => $item)
                    <div class="why-card" data-aos="fade-up" data-aos-delay="{{ ($i % 4) * 100 }}">
                        <div class="why-icon"><i class="{{ $item['icon'] }}"></i></div>
                        <h4>{{ $item['title'] }}</h4>
                        <p>{{ $item['text'] }}</p>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="container">
                <div class="about-cta" data-aos="zoom-in">
                    <div class="about-cta-copy">
                        <p class="eyebrow eyebrow-on-dark"><span class="eyebrow-rule"></span> Your Gold, Your
                            Opportunity.</p>
                        <h2 class="section-title on-dark">Your Gold Can <span class="text-gold">Do More For
                                You.</span></h2>
                        <p class="section-desc on-dark">Don't let financial needs wait. Explore a trusted gold finance
                            solution today.</p>
                        <div class="about-cta-actions">
                            <a href="#contact-us" class="btn btn-gold">Apply For Gold Loan</a>
                            <a href="tel:{{ $contact?->phone_office }}" class="btn btn-outline-light"><i
                                    class="fa-solid fa-phone"></i>
                                Call Us Now</a>
                        </div>
                    </div>
                    <img src="{{ asset('assets/images/banner.png') }}"
                        alt="Bag of gold coins representing financial opportunity through gold loans"
                        class="about-cta-image">
                </div>
            </div></section>