@extends('layouts.app')

@section('title', __('Contact SavEX | Customer Support'))

@section('description', __('Contact the SavEX team for support, questions, app information, services, offers, or any inquiries related to your experience.'))

@section('canonical', route('contact', ['locale' => app()->getLocale()]))

@section('content')
<section id="contact" class="contact-section section-padding animate-section">
    <div class="container">
        <div class="row align-items-stretch g-5">
            <div class="col-lg-5">
                <div class="contact-info-card h-100" data-animate="fade-up">
                    <div class="section-badge d-inline-flex align-items-center gap-2 mb-3" data-animate="fade-up">
                        <span class="eyebrow-dot"></span>
                        {{ __('Contact Us') }}
                    </div>

                    <h2 class="section-title mb-3" data-animate="fade-up">
                        {!! __('We are here to <span>help you</span>') !!}
                    </h2>

                    <p class="section-description mb-4" data-animate="fade-up">
                        {{ __('Have a question about SavEX? Send us a message and our team will get back to you soon.') }}
                    </p>

                    <div class="contact-list">
                        <a href="mailto:{{ config('services.savex_links.email') }}" class="contact-item">
                            <span class="contact-icon">✉</span>
                            <div>
                                <small>{{ __('Email') }}</small>
                                <strong>{{ config('services.savex_links.email') }}</strong>
                            </div>
                        </a>

                        <a href="tel:{{ config('services.savex_links.phone') }}" class="contact-item">
                            <span class="contact-icon">☎</span>
                            <div>
                                <small>{{ __('Phone') }}</small>
                                <strong>{{ config('services.savex_links.phone') }}</strong>
                            </div>
                        </a>

                        <div class="contact-item">
                            <span class="contact-icon">⌖</span>
                            <div>
                                <small>{{ __('Location') }}</small>
                                <strong>
                                    {{ app()->getLocale() === 'ar'
                                        ? config('services.savex_links.address_ar')
                                        : config('services.savex_links.address_en') }}
                                </strong>
                            </div>
                        </div>
                    </div>

                    <div class="contact-social">
                        <a
                            href="{{ config('services.savex_links.facebook') }}"
                            target="_blank"
                            rel="noopener"
                            class="social-link"
                            aria-label="Facebook"
                        >
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.2-1.5 1.5-1.5h1.7V4.6c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.4-4 4.1v2.3H7.6V14h2.7v8h3.2z"/>
                            </svg>
                        </a>

                        <a
                            href="{{ config('services.savex_links.instagram') }}"
                            target="_blank"
                            rel="noopener"
                            class="social-link"
                            aria-label="Instagram"
                        >
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm0 2C5.7 4 4 5.7 4 7.8v8.4C4 18.3 5.7 20 7.8 20h8.4c2.1 0 3.8-1.7 3.8-3.8V7.8C20 5.7 18.3 4 16.2 4H7.8zm4.2 3.3A4.7 4.7 0 1 1 12 16.7 4.7 4.7 0 0 1 12 7.3zm0 2A2.7 2.7 0 1 0 12 14.7 2.7 2.7 0 0 0 12 9.3zM17.1 6.6a1.1 1.1 0 1 1-1.1 1.1 1.1 1.1 0 0 1 1.1-1.1z"/>
                            </svg>
                        </a>

                        <a
                            href="{{ config('services.savex_links.youtube') }}"
                            target="_blank"
                            rel="noopener"
                            class="social-link"
                            aria-label="YouTube"
                        >
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M21.6 7.2s-.2-1.6-.8-2.3c-.8-.8-1.7-.8-2.1-.9C15.8 3.8 12 3.8 12 3.8s-3.8 0-6.7.2c-.4 0-1.3.1-2.1.9-.6.7-.8 2.3-.8 2.3S2.2 9.1 2.2 11v1.8c0 1.9.2 3.8.2 3.8s.2 1.6.8 2.3c.8.8 1.9.8 2.4.9 1.7.2 6.4.2 6.4.2s3.8 0 6.7-.2c.4 0 1.3-.1 2.1-.9.6-.7.8-2.3.8-2.3s.2-1.9.2-3.8V11c0-1.9-.2-3.8-.2-3.8zM10.1 14.8V8.9l5.2 3-5.2 2.9z"/>
                            </svg>
                        </a>

                        <a
                            href="{{ config('services.savex_links.tiktok') }}"
                            target="_blank"
                            rel="noopener"
                            class="social-link"
                            aria-label="TikTok"
                        >
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M16.6 2c.3 2.3 1.6 3.7 3.9 3.9v3.2c-1.4.1-2.7-.3-3.8-1.1v6.2c0 4-2.7 6.8-6.5 6.8-3.5 0-6.3-2.7-6.3-6.2 0-3.7 3-6.4 6.8-6.1v3.3c-1.8-.3-3.3.8-3.3 2.7 0 1.7 1.2 2.8 2.8 2.8 1.8 0 2.9-1.1 2.9-3.3V2h3.5z"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>

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

                @if ($errors->any())
                    <div class="alert alert-danger mb-4">
                        {{ __('Please check the form fields and try again.') }}
                    </div>
                @endif
                <div class="contact-form-card h-100" data-animate="fade-up">
                    <form
                        action="{{ route('contact.submit', ['locale' => app()->getLocale()]) }}"
                        method="POST"
                        data-contact-form
                    >
                        @csrf

                        <input type="hidden" name="form_started_at" value="{{ now()->timestamp }}">

                        <div class="d-none" aria-hidden="true">
                            <label>Website</label>
                            <input
                                type="text"
                                name="website"
                                tabindex="-1"
                                autocomplete="off"
                            >
                        </div>

                        <div class="contact-form-alert d-none mb-4" data-contact-alert></div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">{{ __('Full Name') }}</label>

                                <input
                                    type="text"
                                    name="name"
                                    class="form-control savex-input @error('name') is-invalid @enderror"
                                    placeholder="{{ __('Enter your full name') }}"
                                    value="{{ old('name') }}"
                                >

                                @error('name')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">{{ __('Email Address') }}</label>

                                <input
                                    type="email"
                                    name="email"
                                    class="form-control savex-input @error('email') is-invalid @enderror"
                                    placeholder="{{ __('Enter your email address') }}"
                                    value="{{ old('email') }}"
                                >

                                @error('email')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">{{ __('Phone Number') }}</label>

                                <input
                                    type="text"
                                    name="phone"
                                    class="form-control savex-input @error('phone') is-invalid @enderror"
                                    placeholder="{{ __('Enter your phone number') }}"
                                    value="{{ old('phone') }}"
                                >

                                @error('phone')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">{{ __('Subject') }}</label>

                                <input
                                    type="text"
                                    name="subject"
                                    class="form-control savex-input @error('subject') is-invalid @enderror"
                                    placeholder="{{ __('How can we help?') }}"
                                    value="{{ old('subject') }}"
                                >

                                @error('subject')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label">{{ __('Message') }}</label>

                                <textarea
                                    name="message"
                                    rows="5"
                                    class="form-control savex-input @error('message') is-invalid @enderror"
                                    placeholder="{{ __('Write your message here...') }}"
                                >{{ old('message') }}</textarea>

                                @error('message')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <button
                                    type="submit"
                                    class="btn btn-savex-primary contact-submit"
                                    data-contact-submit
                                    data-default-text="{{ __('Send Message') }}"
                                    data-loading-text="{{ __('Sending...') }}"
                                >
                                    {{ __('Send Message') }}
                                </button>
                            </div>
                        </div>
                    </form>

                    <div class="contact-note">
                        {{ __('We usually reply within 24 hours.') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection