@extends('layouts.app')

@section('title', block('contact.hero.title_meta', $isRtl ? 'اتصل بنا' : 'Contact Us'))

@php
    $contactPhone    = $siteSettings->get('contact_phone', '+966 800 245 0071');
    $contactEmail    = $siteSettings->get('contact_email', 'customercare@hotspot.sa');
    $contactAddress  = $siteSettings->get($isRtl ? 'contact_address_ar' : 'contact_address_en', block('contact.info.address_default', $isRtl ? 'هوت سبوت للتسويق الرقمي، 2493 حي الصالحي 7326، الرياض، السعودية' : 'Hotspot Digital Marketplace LLC, 2493 Al Salhi Dist. 7326, Riyadh, SA'));
    $waNumber        = $siteSettings->get('whatsapp_number', '966500000000');
    $phoneTel        = preg_replace('/\D+/', '', $contactPhone);
@endphp

@section('content')
<section class="page-header about-hero contact-hero">
    <div class="hero-shape hero-shape-1"></div>
    <div class="hero-shape hero-shape-2"></div>
    <div class="container">
        <div class="sama-license-row sama-license-row--hero mb-3" style="justify-content: center;">
            <img src="{{ asset('assets/img/central-bank.png') }}" alt="{{ $isRtl ? 'البنك المركزي السعودي (ساما)' : 'Saudi Central Bank (SAMA)' }}" class="sama-license-logo">
            <span class="badge badge-primary sama-pulse">
                <i class="fa-solid fa-bolt"></i>
                {{ $isRtl ? 'مرخص من البنك المركزي السعودي (ساما)' : 'Licensed by the Saudi Central Bank (SAMA)' }}
            </span>
        </div>
        <h1 class="font-weight-bold" style="font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.2;">
            {{ $page?->title ?? block('contact.hero.title', $isRtl ? 'نحن هنا لمساعدتك' : "We're Here to Help") }}
        </h1>
        <p class="text-muted" style="max-width: 720px; margin: 1.25rem auto 0; font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.8;">
            {{ block('contact.hero.subtitle', $isRtl
                ? 'نقدّر ملاحظاتك. تواصل معنا وأخبرنا كيف يمكننا خدمتك بشكل أفضل.'
                : "We value your feedback. Get in touch and let us know how we can serve you better.") }}
        </p>
    </div>
</section>

<section class="contact-quick-section">
    <div class="container">
        <div class="contact-quick-grid">
            <a href="tel:{{ $phoneTel }}" class="contact-quick-card">
                <div class="contact-quick-icon icon-phone"><i class="fa-solid fa-phone"></i></div>
                <h4>{{ $isRtl ? 'اتصل بنا مباشرة' : 'Call Us Directly' }}</h4>
                <p>{{ $contactPhone }}</p>
            </a>
            <a href="https://wa.me/{{ preg_replace('/\D+/', '', $waNumber) }}" target="_blank" rel="noopener" class="contact-quick-card">
                <div class="contact-quick-icon icon-wa"><i class="fa-brands fa-whatsapp"></i></div>
                <h4>{{ $isRtl ? 'راسلنا عبر واتساب' : 'Message on WhatsApp' }}</h4>
                <p>{{ $isRtl ? 'رد فوري خلال دقائق' : 'Quick reply within minutes' }}</p>
            </a>
            <a href="mailto:{{ $contactEmail }}" class="contact-quick-card">
                <div class="contact-quick-icon icon-mail"><i class="fa-solid fa-envelope"></i></div>
                <h4>{{ $isRtl ? 'راسلنا بالبريد' : 'Email Support' }}</h4>
                <p>{{ $contactEmail }}</p>
            </a>
            <div class="contact-quick-card contact-quick-card--hours">
                <div class="contact-quick-icon icon-hours"><i class="fa-solid fa-clock"></i></div>
                <h4>{{ $isRtl ? 'ساعات العمل' : 'Working Hours' }}</h4>
                <p>{{ $isRtl ? 'الأحد – الخميس: 9 ص – 6 م' : 'Sun – Thu: 9 AM – 6 PM' }}</p>
            </div>
        </div>
    </div>
</section>

<section class="contact-section section">
    <div class="container contact-container">
        <div class="contact-card" data-aos="fade-up">
            <div class="contact-sidebar">
                <div class="contact-info-list">
                    <div class="contact-info-item">
                        <div class="icon-box"><i class="fa-solid fa-location-dot"></i></div>
                        <div class="contact-info-content">
                            <h4>{{ block('contact.info.visit_title', $isRtl ? 'زر مقرّنا' : 'Visit Our Studio') }}</h4>
                            <p>{{ $contactAddress }}</p>
                        </div>
                    </div>

                    <div class="contact-info-item">
                        <div class="icon-box"><i class="fa-solid fa-phone"></i></div>
                        <div class="contact-info-content">
                            <h4>{{ block('contact.info.call_title', $isRtl ? 'اتصل بنا' : 'Call Us') }}</h4>
                            <p><a href="tel:{{ $phoneTel }}" class="contact-info-link">{{ $contactPhone }}</a></p>
                        </div>
                    </div>

                    <div class="contact-info-item">
                        <div class="icon-box"><i class="fa-solid fa-envelope"></i></div>
                        <div class="contact-info-content">
                            <h4>{{ block('contact.info.email_title', $isRtl ? 'راسلنا' : 'Email Us') }}</h4>
                            <p><a href="mailto:{{ $contactEmail }}" class="contact-info-link">{{ $contactEmail }}</a></p>
                        </div>
                    </div>
                </div>

                <div class="contact-map-preview">
                    <iframe src="https://maps.google.com/maps?q=24.7895597,46.7357167&hl={{ $currentLocale }}&z=15&output=embed" frameborder="0" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>

                <div class="contact-socials">
                    @foreach($socialLinks ?? [] as $social)
                        <a href="{{ $social->url ?? '#' }}"><i class="{{ $social->icon ?? 'fa-brands fa-link' }}"></i></a>
                    @endforeach
                </div>
            </div>

            <div class="contact-body">
                <div class="contact-form-title">
                    <h3 class="h4 font-weight-bold mb-1">{{ block('contact.form.title', $isRtl ? 'أرسل لنا رسالة' : 'Send us a Message') }}</h3>
                    <p class="text-muted small">{{ block('contact.form.subtitle', $isRtl ? 'سنرد عليك خلال 24 ساعة.' : "We'll get back to you within 24 hours.") }}</p>
                </div>

                @if(session('success'))
                    <div class="alert alert-success mb-3">{{ session('success') }}</div>
                @endif

                <form action="{{ url('/contact') }}" method="POST" class="contact-form">
                    @csrf
                    <div class="contact-form-grid">
                        <div class="input-group">
                            <label for="name">{{ block('contact.form.name_label', $isRtl ? 'الاسم الكامل' : 'Your Full Name') }}</label>
                            <input type="text" id="name" name="name" value="{{ old('name') }}" class="modern-input" placeholder="{{ block('contact.form.name_placeholder', $isRtl ? 'مثال: محمد أحمد' : 'E.g. Julian Thorne') }}" required>
                        </div>
                        <div class="input-group">
                            <label for="email">{{ block('contact.form.email_label', $isRtl ? 'البريد الإلكتروني' : 'Email Address') }}</label>
                            <input type="email" id="email" name="email" value="{{ old('email') }}" class="modern-input" placeholder="name@example.com" required>
                        </div>
                        <div class="input-group full-width">
                            <label for="inquiry">{{ block('contact.form.inquiry_label', $isRtl ? 'نوع الاستفسار' : 'Inquiry Type') }}</label>
                            <select id="inquiry" name="inquiry" class="modern-input">
                                <option value="general">{{ block('contact.form.inquiry_general', $isRtl ? 'استفسار عام' : 'General Inquiry') }}</option>
                                <option value="personal">{{ block('contact.form.inquiry_personal', $isRtl ? 'تمويل شخصي' : 'Personal Finance') }}</option>
                                <option value="auto">{{ block('contact.form.inquiry_auto', $isRtl ? 'تمويل سيارات' : 'Auto Finance') }}</option>
                                <option value="mortgage">{{ block('contact.form.inquiry_mortgage', $isRtl ? 'تمويل عقاري' : 'Mortgage') }}</option>
                                <option value="sme">{{ block('contact.form.inquiry_sme', $isRtl ? 'تمويل الأعمال' : 'Business/SME Finance') }}</option>
                            </select>
                        </div>
                        <div class="input-group full-width">
                            <label for="message">{{ block('contact.form.message_label', $isRtl ? 'رسالتك' : 'Your Message') }}</label>
                            <textarea id="message" name="message" class="modern-input" placeholder="{{ block('contact.form.message_placeholder', $isRtl ? 'أخبرنا عن مشروعك أو رؤيتك...' : 'Tell us about your project or vision...') }}" required>{{ old('message') }}</textarea>
                        </div>
                    </div>

                    <p class="contact-legal">
                        {{ block('contact.form.legal_pre', $isRtl ? 'بالضغط على إرسال، فإنك توافق على ' : 'By clicking send, you agree to our ') }}
                        <a href="{{ url('/privacy') }}">{{ block('contact.form.legal_link', $isRtl ? 'سياسة الخصوصية' : 'Privacy Policy') }}</a>
                        {{ block('contact.form.legal_post', $isRtl ? ' وتوافق على أن نتواصل معك.' : ' and consent to being contacted.') }}
                    </p>

                    <button type="submit" class="btn-submit">
                        {{ block('contact.form.submit', $isRtl ? 'إرسال الرسالة' : 'Send Message') }} <i class="fa-solid fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection