@extends('layouts.app_rtl')

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

@section('content')
<section class="section-space">
    <div class="main-container">
        <div class="about-hero-shell scroll-load">
            <div class="row g-0 align-items-stretch">
                <div class="col-lg-5">
                    <div class="about-hero-image">
                        <img src="{{ asset('assets/images/about.jpg') }}" alt="{{ data_get($aboutUsContent, 'hero.image_alt') }}">
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="about-hero-content">
                        <div class="about-mini-bar">
                            <i class="fa-solid fa-circle-info"></i>
                            <span>{{ data_get($aboutUsContent, 'hero.mini_bar') }}</span>
                        </div>

                        <h1>{{ data_get($aboutUsContent, 'hero.h1') }}</h1>

                        <p class="lead-copy">{{ data_get($aboutUsContent, 'hero.lead') }}</p>

                        <ul class="about-feature-list">
                            @php $icons = ['fa-bullseye', 'fa-flag-checkered', 'fa-heart', 'fa-compass']; @endphp
                            @foreach (data_get($aboutUsContent, 'hero.features', []) as $idx => $line)
                                <li><i class="fa-solid {{ $icons[$idx] ?? 'fa-circle' }}"></i><span>{!! $line !!}</span></li>
                            @endforeach
                        </ul>

                        @php
                            $resolveAboutHeroHref = static function (?string $saved, string $fallbackRoute): string {
                                $h = trim((string) ($saved ?? ''));
                                if ($h === '') {
                                    return route($fallbackRoute);
                                }
                                if (str_starts_with($h, '#')) {
                                    return $h;
                                }

                                return url(\Illuminate\Support\Str::start($h, '/'));
                            };
                            $aboutHeroPrimaryHref = $resolveAboutHeroHref(data_get($aboutUsContent, 'hero.primary_cta.href'), 'ar.packages');
                            $aboutHeroSecondaryHref = $resolveAboutHeroHref(data_get($aboutUsContent, 'hero.secondary_cta.href'), 'ar.profiles');
                        @endphp
                        <div class="about-hero-actions">
                            <a href="{{ $aboutHeroPrimaryHref }}" class="btn-main interactive"><i class="fa-solid fa-arrow-left"></i>{{ data_get($aboutUsContent, 'hero.primary_cta.text') }}</a>
                            <a href="{{ $aboutHeroSecondaryHref }}" class="btn-outline-soft interactive"><i class="fa-solid fa-user-group"></i>{{ data_get($aboutUsContent, 'hero.secondary_cta.text') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-space pt-0">
    <div class="main-container">
        <div class="about-panel scroll-load">
            <div class="section-head">
                <span class="section-kicker"><i class="fa-solid fa-building-shield"></i> {{ data_get($aboutUsContent, 'center.kicker') }}</span>
                <h2>{{ data_get($aboutUsContent, 'center.h2') }}</h2>
                <p>{{ data_get($aboutUsContent, 'center.lead') }}</p>
            </div>

            <div class="about-copy-grid">
                <div class="about-copy-card interactive">
                    <h3><i class="fa-solid fa-house-user"></i><span>{{ data_get($aboutUsContent, 'cards.who_title') }}</span></h3>
                    <p>{{ data_get($aboutUsContent, 'cards.who_p1') }}</p>
                    <p>{{ data_get($aboutUsContent, 'cards.who_p2') }}</p>
                </div>

                <div class="about-copy-card interactive">
                    <h3><i class="fa-solid fa-layer-group"></i><span>{{ data_get($aboutUsContent, 'cards.what_title') }}</span></h3>
                    <ul class="about-points">
                        @foreach (data_get($aboutUsContent, 'cards.what_items', []) as $item)
                            <li><i class="fa-solid fa-check"></i><span>{!! $item !!}</span></li>
                        @endforeach
                    </ul>
                </div>

                <div class="about-copy-card interactive">
                    <h3><i class="fa-solid fa-star"></i><span>{{ data_get($aboutUsContent, 'cards.why_title') }}</span></h3>
                    <ul class="about-points">
                        @foreach (data_get($aboutUsContent, 'cards.why_items', []) as $item)
                            <li><i class="fa-solid fa-check"></i><span>{!! $item !!}</span></li>
                        @endforeach
                    </ul>
                </div>

                <div class="about-copy-card interactive">
                    <h3><i class="fa-solid fa-handshake-angle"></i><span>{{ data_get($aboutUsContent, 'cards.commitment_title') }}</span></h3>
                    <p>{{ data_get($aboutUsContent, 'cards.commitment_p1') }}</p>
                    <p>{{ data_get($aboutUsContent, 'cards.commitment_p2') }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-space pt-0" id="contact-section">
    <div class="main-container">
        <div class="contact-wrap scroll-load">
            <div class="row g-0 contact-layout">
                <div class="col-lg-5 contact-col">
                    <div class="map-panel">
                        <h3>{{ data_get($aboutUsContent, 'contact.map_title') }}</h3>
                        <p>{!! data_get($aboutUsContent, 'contact.map_address_html') !!}</p>

                        <div class="contact-points">
                            @php
                                $mapPtIcons = [
                                    ['fa-solid', 'fa-phone-volume'],
                                    ['fa-brands', 'fa-whatsapp'],
                                    ['fa-solid', 'fa-envelope'],
                                    ['fa-solid', 'fa-location-dot'],
                                ];
                            @endphp
                            @foreach (data_get($aboutUsContent, 'contact.map_points', []) as $idx => $pt)
                            @if (! empty($pt['href']))
                            <div class="contact-point interactive">
                                <div class="icon"><i class="{{ ($mapPtIcons[$idx][0] ?? 'fa-solid') }} {{ $mapPtIcons[$idx][1] ?? 'fa-circle' }}"></i></div>
                                <h4>{{ $pt['title'] ?? '' }}</h4>
                                <a href="{{ $pt['href'] }}">{{ $pt['text'] ?? '' }}</a>
                            </div>
                            @else
                            <div class="contact-point interactive">
                                <div class="icon"><i class="fa-solid fa-location-dot"></i></div>
                                <h4>{{ $pt['title'] ?? '' }}</h4>
                                <p>{{ $pt['text'] ?? '' }}</p>
                            </div>
                            @endif
                            @endforeach
                        </div>

                        <div class="map-embed interactive">
                            <iframe src="{{ data_get($aboutUsContent, '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">
                        <h3>{{ data_get($aboutUsContent, 'contact.form_title') }}</h3>
                        <p>{{ data_get($aboutUsContent, 'contact.form_description') }}</p>

                        <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($aboutUsContent, 'contact_form.first_name_placeholder', data_get($aboutUsContent, 'contact_form.name_placeholder')) }}" required>
                                </div>
                                <div class="col-md-6">
                                    <input type="text" name="last_name" class="form-control interactive" placeholder="{{ data_get($aboutUsContent, 'contact_form.last_name_placeholder', 'اسم العائلة') }}">
                                </div>
                                <div class="col-md-6">
                                    <input type="tel" name="mobile" class="form-control interactive" placeholder="{{ data_get($aboutUsContent, 'contact_form.phone_placeholder') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <input type="email" name="email" class="form-control interactive" placeholder="{{ data_get($aboutUsContent, 'contact_form.email_placeholder') }}">
                                </div>
                                <div class="col-12">
                                    <textarea name="message" class="form-control interactive" placeholder="{{ data_get($aboutUsContent, '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($aboutUsContent, 'contact_form.submit') }}</span></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
