@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/packages.css') }}">
@endpush

@section('content')
<section class="section-space pt-4" id="package-plans">
    <div class="main-container">
        <div class="panel-shell scroll-load">
        <div class="section-head">
            <span class="section-kicker"><i class="fa-solid fa-layer-group"></i> {{ data_get($packagesContent, 'head.kicker') }}</span>
            <h2>{{ data_get($packagesContent, 'head.h2') }}</h2>
            <p>{{ data_get($packagesContent, 'head.p') }}</p>
        </div>

        <div class="pricing-grid-creative">
            <div class="pricing-creative-card theme-private">
                <div class="card-top">
                    <h3>{{ data_get($packagesContent, 'family.title') }}</h3>
                </div>

                <div class="pricing-core">
                    <ul class="simple-pricing-list simple-pricing-list--tall">
                        @foreach (data_get($packagesContent, 'family.prices', []) as $row)
                        <li class="simple-price-row">
                            <div class="simple-price-left">
                                <img class="simple-price-thumb" src="{{ $row['flag'] ?? '' }}" alt="{{ $row['flag_alt'] ?? '' }}">
                                <span class="simple-price-country">{{ $row['country'] ?? '' }}</span>
                            </div>
                            <div class="simple-price-right">{{ $row['price'] ?? '' }} <span class="muted-suffix">{{ $row['suffix'] ?? '' }}</span></div>
                        </li>
                        @endforeach
                    </ul>

                    <div class="company-benefits-wrap">
                        <div class="company-table-wrap company-compare-wrap">
                            <table class="company-package-table company-compare-table">
                                <thead>
                                    <tr>
                                        <th class="compare-feature-col">{{ data_get($packagesContent, 'family.compare.headers.0') }}</th>
                                        <th class="ready-col">{{ data_get($packagesContent, 'family.compare.headers.1') }}</th>
                                        <th class="overseas-col">{{ data_get($packagesContent, 'family.compare.headers.2') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (data_get($packagesContent, 'family.compare.rows', []) as $row)
                                    <tr>
                                        <td class="compare-feature">{{ $row['feature'] ?? '' }}</td>
                                        <td class="compare-icon-cell">
                                            @if (!empty($row['uae']))
                                                <i class="fa-solid fa-check compare-yes" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'family.compare.yes') }}</span>
                                            @else
                                                <i class="fa-solid fa-xmark compare-no" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'family.compare.no') }}</span>
                                            @endif
                                        </td>
                                        <td class="compare-icon-cell">
                                            @if (!empty($row['overseas']))
                                                <i class="fa-solid fa-check compare-yes" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'family.compare.yes') }}</span>
                                            @else
                                                <i class="fa-solid fa-xmark compare-no" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'family.compare.no') }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="card-actions double">
                        <a href="{{ data_get($packagesContent, 'family.actions.0.href') }}" class="action-wide action-uae">
                            <i class="fa-solid fa-location-dot"></i>
                            <span>{{ data_get($packagesContent, 'family.actions.0.text') }}</span>
                        </a>
                        <a href="{{ data_get($packagesContent, 'family.actions.1.href') }}" class="action-wide action-overseas">
                            <i class="fa-solid fa-earth-asia"></i>
                            <span>{{ data_get($packagesContent, 'family.actions.1.text') }}</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="pricing-creative-card theme-company featured">
                <div class="card-top">
                    <h3>{{ data_get($packagesContent, 'company.title') }}</h3>
                </div>

                <div class="pricing-core company-core">
                    <div class="company-table-wrap">
                        <table class="company-package-table">
                            <thead>
                                <tr>
                                    <th>{{ data_get($packagesContent, 'company.table_headers.0') }}</th>
                                    <th class="ready-col">{{ data_get($packagesContent, 'company.table_headers.1') }}</th>
                                    <th class="overseas-col">{{ data_get($packagesContent, 'company.table_headers.2') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (data_get($packagesContent, 'company.rows', []) as $row)
                                <tr>
                                    <td class="country-name">
                                        @if (($row['type'] ?? 'single') === 'pair')
                                            <div class="country-inline country-inline-pair-stacked">
                                                <div class="country-pair-stack">
                                                    @foreach (($row['countries'] ?? []) as $ci => $cty)
                                                        <div class="country-pair-row">
                                                            <img src="{{ $cty['flag'] ?? '' }}" alt="{{ $cty['flag_alt'] ?? '' }}">
                                                            <span class="country-pair-name">{{ $cty['name'] ?? '' }}</span>
                                                        </div>
                                                        @if ($ci === 0)
                                                            <span class="country-pair-join" aria-hidden="true">{{ $row['pair_join'] ?? '&' }}</span>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        @else
                                            <div class="country-inline">
                                                <img src="{{ data_get($row, 'countries.0.flag') }}" alt="{{ data_get($row, 'countries.0.flag_alt') }}">
                                                <span>{{ data_get($row, 'countries.0.name') }}</span>
                                            </div>
                                        @endif
                                    </td>
                                    <td class="price-cell price-cell-ready">
                                        <div class="price-main">
                                            <span class="price-value">{{ data_get($row, 'ready.price') }}</span>
                                            <span class="price-unit">{{ data_get($row, 'ready.unit') }}</span>
                                        </div>
                                    </td>
                                    <td class="price-cell price-cell-overseas">
                                        <div class="overseas-cell-stack">
                                            <div class="overseas-cell-main">
                                                <div class="overseas-cell-price">
                                                    <span class="price-value">{{ data_get($row, 'overseas.price') }}</span>
                                                    <span class="price-unit">{{ data_get($row, 'overseas.unit') }}</span>
                                                </div>
                                                <p class="overseas-arrival-line">
                                                    <i class="fa-solid fa-plane-departure" aria-hidden="true"></i>
                                                    <span>{{ data_get($packagesContent, 'company.overseas_arrival_prefix') }} {{ data_get($row, 'overseas.arrival') }}</span>
                                                </p>
                                            </div>
                                            <span class="overseas-save-tag overseas-save-tag--{{ data_get($row, 'overseas.save_theme', 'orange') }}">
                                                <span class="overseas-save-tag__punch" aria-hidden="true"></span>
                                                <span class="overseas-save-tag__inner overseas-save-tag__inner--btu">
                                                    <span class="overseas-save-tag__value">{{ data_get($row, 'overseas.save_value') }}</span>
                                                    <span class="overseas-save-tag__label">{{ data_get($packagesContent, 'company.save_label') }}</span>
                                                </span>
                                            </span>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="company-mobile-list">
                        @foreach (data_get($packagesContent, 'company.rows', []) as $row)
                        <div class="company-mobile-item">
                            @if (($row['type'] ?? 'single') === 'pair')
                                <div class="company-mobile-head company-mobile-head-stack">
                                    <div class="company-mobile-flag-stack">
                                        @foreach (($row['countries'] ?? []) as $ci => $cty)
                                            <div class="country-pair-row">
                                                <img src="{{ $cty['flag'] ?? '' }}" alt="{{ $cty['flag_alt'] ?? '' }}">
                                                <span class="country-pair-name">{{ $cty['name'] ?? '' }}</span>
                                            </div>
                                            @if ($ci === 0)
                                                <span class="country-pair-join" aria-hidden="true">{{ $row['pair_join'] ?? '&' }}</span>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            @else
                                <div class="company-mobile-head">
                                    <img src="{{ data_get($row, 'countries.0.flag') }}" alt="{{ data_get($row, 'countries.0.flag_alt') }}">
                                    <span>{{ data_get($row, 'countries.0.name') }}</span>
                                </div>
                            @endif
                            <div class="company-mobile-body">
                                <div class="company-mobile-col">
                                    <span class="company-mobile-label">{{ data_get($packagesContent, 'company.mobile_ready') }}</span>
                                    <div class="company-mobile-price">{{ data_get($row, 'ready.price') }} {{ data_get($row, 'ready.unit') }}</div>
                                </div>
                                <div class="company-mobile-col overseas">
                                    <span class="company-mobile-label">{{ data_get($packagesContent, 'company.mobile_overseas') }}</span>
                                    <div class="company-mobile-price">{{ data_get($row, 'overseas.price') }} {{ data_get($row, 'overseas.unit') }}</div>
                                    <p class="overseas-arrival-line overseas-arrival-line--mobile">
                                        <i class="fa-solid fa-plane-departure" aria-hidden="true"></i>
                                        <span>{{ data_get($packagesContent, 'company.overseas_arrival_prefix') }} {{ data_get($row, 'overseas.arrival') }}</span>
                                    </p>
                                    <span class="overseas-save-tag overseas-save-tag--{{ data_get($row, 'overseas.save_theme', 'orange') }} overseas-save-tag--sm">
                                        <span class="overseas-save-tag__punch" aria-hidden="true"></span>
                                        <span class="overseas-save-tag__inner overseas-save-tag__inner--btu">
                                            <span class="overseas-save-tag__value">{{ data_get($row, 'overseas.save_value') }}</span>
                                            <span class="overseas-save-tag__label">{{ data_get($packagesContent, 'company.save_label') }}</span>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <div class="company-benefits-wrap">
                        <div class="company-table-wrap company-compare-wrap">
                            <table class="company-package-table company-compare-table">
                                <thead>
                                    <tr>
                                        <th class="compare-feature-col">{{ data_get($packagesContent, 'company.compare.headers.0') }}</th>
                                        <th class="ready-col">{{ data_get($packagesContent, 'company.compare.headers.1') }}</th>
                                        <th class="overseas-col">{{ data_get($packagesContent, 'company.compare.headers.2') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (data_get($packagesContent, 'company.compare.rows', []) as $row)
                                    <tr>
                                        <td class="compare-feature">{{ $row['feature'] ?? '' }}</td>
                                        <td class="compare-icon-cell">
                                            @if (!empty($row['uae']))
                                                <i class="fa-solid fa-check compare-yes" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'company.compare.yes') }}</span>
                                            @else
                                                <i class="fa-solid fa-xmark compare-no" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'company.compare.no') }}</span>
                                            @endif
                                        </td>
                                        <td class="compare-icon-cell">
                                            @if (!empty($row['overseas']))
                                                <i class="fa-solid fa-check compare-yes" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'company.compare.yes') }}</span>
                                            @else
                                                <i class="fa-solid fa-xmark compare-no" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'company.compare.no') }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="card-actions double">
                        <a href="{{ data_get($packagesContent, 'company.actions.0.href') }}" class="action-wide action-uae">
                            <i class="fa-solid {{ data_get($packagesContent, 'company.actions.0.icon', 'fa-location-dot') }}"></i>
                            <span>{{ data_get($packagesContent, 'company.actions.0.text') }}</span>
                        </a>
                        <a href="{{ data_get($packagesContent, 'company.actions.1.href') }}" class="action-wide action-overseas">
                            <i class="fa-solid {{ data_get($packagesContent, 'company.actions.1.icon', 'fa-earth-asia') }}"></i>
                            <span>{{ data_get($packagesContent, 'company.actions.1.text') }}</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="pricing-creative-card theme-visa">
                <div class="card-top">
                    <h3>{{ data_get($packagesContent, 'visa.title') }}</h3>
                </div>

                <div class="pricing-core">
                    <ul class="simple-pricing-list simple-pricing-list--visa">
                        @foreach (data_get($packagesContent, 'visa.prices', []) as $pr)
                        <li class="simple-price-row">
                            <div class="simple-price-left">
                                <span class="simple-price-thumb d-inline-flex align-items-center justify-content-center">
                                    <i class="fa-solid {{ $pr['icon'] ?? 'fa-circle' }}" style="font-size:17px;color:#3566a8"></i>
                                </span>
                                <span class="simple-price-country">{{ $pr['label'] ?? '' }}</span>
                            </div>
                            <div class="simple-price-right">{{ $pr['price'] ?? '' }} <span class="muted-suffix">{{ $pr['suffix'] ?? '' }}</span></div>
                        </li>
                        @endforeach
                    </ul>

                    <div class="company-benefits-wrap">
                        <div class="company-table-wrap company-compare-wrap">
                            <table class="company-package-table company-compare-table">
                                <thead>
                                    <tr>
                                        <th class="compare-feature-col">{{ data_get($packagesContent, 'visa.compare.headers.0') }}</th>
                                        <th class="ready-col">{{ data_get($packagesContent, 'visa.compare.headers.1') }}</th>
                                        <th class="overseas-col">{{ data_get($packagesContent, 'visa.compare.headers.2') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (data_get($packagesContent, 'visa.compare.rows', []) as $row)
                                    <tr>
                                        <td class="compare-feature">{{ $row['feature'] ?? '' }}</td>
                                        <td class="compare-icon-cell">
                                            @if (!empty($row['uae']))
                                                <i class="fa-solid fa-check compare-yes" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'visa.compare.yes') }}</span>
                                            @else
                                                <i class="fa-solid fa-xmark compare-no" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'visa.compare.no') }}</span>
                                            @endif
                                        </td>
                                        <td class="compare-icon-cell">
                                            @if (!empty($row['overseas']))
                                                <i class="fa-solid fa-check compare-yes" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'visa.compare.yes') }}</span>
                                            @else
                                                <i class="fa-solid fa-xmark compare-no" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ data_get($packagesContent, 'visa.compare.no') }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="card-actions double">
                        <div class="packages-call-strip-pair">
                            <a href="{{ data_get($packagesContent, 'visa.actions.call_us.href') }}" class="strip-box strip-blue interactive mobile-only" style="background: linear-gradient(145deg, #4c72ca 0%, #63a2dd 90%, #7ecbed 100%)"><i class="fa-solid fa-phone"></i><span>{{ data_get($packagesContent, 'visa.actions.call_us.text') }}</span></a>
                            <a href="{{ data_get($packagesContent, 'visa.actions.call_me_back.href') }}" class="strip-box strip-blue interactive desktop-only callback-trigger" data-bs-toggle="modal" data-bs-target="#callbackModal" style="background: linear-gradient(145deg, #4c72ca 0%, #63a2dd 90%, #7ecbed 100%);"><i class="fa-solid fa-phone-volume"></i><span>{{ data_get($packagesContent, 'visa.actions.call_me_back.text') }}</span></a>
                        </div>
                        <a href="{{ data_get($packagesContent, 'visa.actions.whatsapp.href') }}" class="action-wide action-wa">
                            <i class="fa-brands fa-whatsapp" style="font-size:x-large"></i>
                            <span>{{ data_get($packagesContent, 'visa.actions.whatsapp.text') }}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</section>

<section class="section-space pt-0">
    <div class="main-container">
        <div class="cta-band">
            <h2>{{ data_get($packagesContent, 'cta_band.h2') }}</h2>
            <p>{{ data_get($packagesContent, 'cta_band.p') }}</p>
            <div class="cta-band-actions">
                    <div class="packages-call-strip-pair">
                        <a href="{{ data_get($packagesContent, 'cta_band.actions.call_us.href') }}" class="strip-box strip-blue interactive mobile-only" style="background: linear-gradient(145deg, #4c72ca 0%, #63a2dd 90%, #7ecbed 100%)"><i class="fa-solid fa-phone"></i><span>{{ data_get($packagesContent, 'cta_band.actions.call_us.text') }}</span></a>
                        <a href="{{ data_get($packagesContent, 'cta_band.actions.call_me_back.href') }}" class="strip-box strip-blue interactive desktop-only callback-trigger" data-bs-toggle="modal" data-bs-target="#callbackModal" style="background: linear-gradient(145deg, #4c72ca 0%, #63a2dd 90%, #7ecbed 100%);"><i class="fa-solid fa-phone-volume"></i><span>{{ data_get($packagesContent, 'cta_band.actions.call_me_back.text') }}</span></a>
                    </div>
                <a href="{{ data_get($packagesContent, 'cta_band.actions.whatsapp.href') }}" class="btn-main btn-whatsapp"><i class="fa-brands fa-whatsapp" style="font-size:x-large"></i>{{ data_get($packagesContent, 'cta_band.actions.whatsapp.text') }}</a>
                <a href="{{ data_get($packagesContent, 'cta_band.actions.enquiry.href') }}" class="btn-light"><i class="fa-solid fa-envelope-open-text"></i>{{ data_get($packagesContent, 'cta_band.actions.enquiry.text') }}</a>
            </div>
        </div>
    </div>
</section>

<section class="section-space pt-0" id="faq">
    <div class="main-container">
        <div class="panel-shell scroll-load">
        <div class="section-head">
            <span class="section-kicker"><i class="fa-solid fa-circle-question"></i> {{ data_get($packagesContent, 'faq.kicker') }}</span>
            <h2>{{ data_get($packagesContent, 'faq.h2') }}</h2>
            <p>{{ data_get($packagesContent, 'faq.p') }}</p>
        </div>

        <div class="accordion" id="faqAccordion">
            @foreach (data_get($packagesContent, 'faq.items', []) as $fi => $item)
            @php $n = $fi + 1; $collapseId = 'faqCollapse'.$n; $headingId = 'faqHead'.$n; @endphp
            <div class="faq-card">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="{{ $headingId }}">
                        <button class="accordion-button {{ $fi > 0 ? 'collapsed' : '' }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}" aria-expanded="{{ $fi === 0 ? 'true' : 'false' }}" aria-controls="{{ $collapseId }}">
                            {{ $item['q'] ?? '' }}
                        </button>
                    </h2>
                    <div id="{{ $collapseId }}" class="accordion-collapse collapse {{ $fi === 0 ? 'show' : '' }}" aria-labelledby="{{ $headingId }}" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            {{ $item['a'] ?? '' }}
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        </div>
    </div>
</section>

<section class="section-space pt-0" id="contact-section">
    <div class="main-container">
        <div class="panel-shell scroll-load">
            <div class="contact-title-wrap scroll-load">
                <span class="section-kicker"><i class="fa-solid fa-headset"></i> {{ data_get($packagesContent, 'contact.kicker') }}</span>
                <h2>{{ data_get($packagesContent, 'contact.heading') }}</h2>
                <p style="font-size: 1.1rem;">{{ data_get($packagesContent, 'contact.description') }}</p>
            </div>

            <div class="contact-strip scroll-load" style="display: flex; gap: 14px;justify-content: center;">
                <a href="{{ data_get($packagesContent, 'contact.strip.0.href') }}" class="strip-box strip-blue interactive mobile-only" style="background: linear-gradient(145deg, #4c72ca 0%, #63a2dd 90%, #7ecbed 100%)"><i class="fa-solid fa-phone"></i><span>{{ data_get($packagesContent, 'contact.strip.0.label') }}</span></a>
                <a href="{{ data_get($packagesContent, 'contact.strip.1.href') }}" class="strip-box strip-blue interactive desktop-only callback-trigger" data-bs-toggle="modal" data-bs-target="#callbackModal" style="background: linear-gradient(145deg, #4c72ca 0%, #63a2dd 90%, #7ecbed 100%);"><i class="fa-solid fa-phone-volume"></i><span>{{ data_get($packagesContent, 'contact.strip.1.label') }}</span></a>
                <a href="{{ data_get($packagesContent, 'contact.strip.2.href') }}" target="_blank" rel="noopener" class="strip-box strip-green interactive"><i class="fa-brands fa-whatsapp"></i><span>{{ data_get($packagesContent, 'contact.strip.2.label') }}</span></a>
                <a href="{{ data_get($packagesContent, 'contact.strip.3.href') }}" style="background: linear-gradient(145deg, #4c72ca 0%, #63a2dd 90%, #7ecbed 100%)" target="_blank" rel="noopener" class="strip-box strip-blue interactive"><i class="fa-solid fa-location-dot"></i><span>{{ data_get($packagesContent, 'contact.strip.3.label') }}</span></a>
            </div>

            <div class="contact-wrap scroll-load">
                <div class="row g-0 align-items-stretch contact-layout">
                    <div class="col-lg-5 contact-col">
                        <div class="map-panel contact-panel">
                            <div class="contact-panel-head" style="margin-left: 15px; text-align: left;">
                                <h3>{{ data_get($packagesContent, 'contact.map_title') }}</h3>
                                <p style="font-size: 1.1rem;">{!! data_get($packagesContent, 'contact.map_address_html') !!}</p>
                            </div>

                            <div class="contact-points-compact d-none">
                                @php
                                    $mapPtIcons = [
                                        ['fa-solid', 'fa-phone-volume'],
                                        ['fa-brands', 'fa-whatsapp'],
                                        ['fa-solid', 'fa-envelope'],
                                        ['fa-solid', 'fa-location-dot'],
                                    ];
                                @endphp
                                @foreach (data_get($packagesContent, 'contact.map_points', []) as $idx => $pt)
                                @if (! empty($pt['href']))
                                <a href="{{ $pt['href'] }}" class="contact-point contact-point-link interactive" @if(str_starts_with((string) $pt['href'], 'http')) target="_blank" rel="noopener" @endif>
                                    <div class="point-icon"><i class="{{ ($mapPtIcons[$idx][0] ?? 'fa-solid') }} {{ $mapPtIcons[$idx][1] ?? 'fa-circle' }}"></i></div>
                                    <div class="contact-point-body">
                                        <h4>{{ $pt['title'] ?? '' }}</h4>
                                        <span>{{ $pt['text'] ?? '' }}</span>
                                    </div>
                                </a>
                                @else
                                <div class="contact-point interactive">
                                    <div class="point-icon"><i class="fa-solid fa-location-dot"></i></div>
                                    <div class="contact-point-body">
                                        <h4>{{ $pt['title'] ?? '' }}</h4>
                                        <span>{{ $pt['text'] ?? '' }}</span>
                                    </div>
                                </div>
                                @endif
                                @endforeach
                            </div>

                            <div class="map-embed interactive" style="min-height: 320px;">
                                <iframe src="{{ data_get($packagesContent, 'contact.map_iframe_src') }}" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-7 contact-col">
                        <div class="form-panel contact-panel">
                            <div class="form-panel-head">
                                <h3>{{ data_get($packagesContent, 'contact.form_title') }}</h3>
                                <p style="font-size: 1.1rem;">{{ data_get($packagesContent, 'contact.form_description') }}</p>
                            </div>

                            <form class="inquiry-form" method="POST" action="{{ route(($locale ?? 'en') === 'ar' ? 'ar.contact.inquiry' : 'contact.inquiry') }}">
                                @csrf
                                <input type="hidden" name="source_page" value="{{ request()->path() }}">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <input type="text" name="first_name" class="form-control interactive" placeholder="{{ data_get($packagesContent, 'contact_form.first_name_placeholder', data_get($packagesContent, 'contact_form.name_placeholder')) }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" name="last_name" class="form-control interactive" placeholder="{{ data_get($packagesContent, 'contact_form.last_name_placeholder', 'Last Name') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="tel" name="mobile" class="form-control interactive" placeholder="{{ data_get($packagesContent, 'contact_form.phone_placeholder') }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="email" name="email" class="form-control interactive" placeholder="{{ data_get($packagesContent, 'contact_form.email_placeholder') }}">
                                    </div>
                                    <div class="col-12">
                                        <textarea name="message" class="form-control interactive" placeholder="{{ data_get($packagesContent, 'contact_form.message_placeholder') }}"></textarea>
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="submit-btn btn-main interactive">
                                            <i class="fa-solid fa-paper-plane"></i>
                                            <span>{{ data_get($packagesContent, 'contact_form.submit') }}</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

