@extends('web.layouts.master')
@section('page_title', __('contact.meta_title'))
@section('meta_description', __('contact.meta_description', ['app' => config('app.name')]))
@section('canonical', route('web.contact'))
@section('content')
    <!-- Contact Form Section -->
    <main class="container mx-auto px-4 py-12 md:py-16 lg:py-20">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col lg:flex-row lg:items-start gap-12 lg:gap-16">
                
                <!-- Left Section - Text (40% width on desktop) -->
                <div class="lg:w-2/5">
                    <h1 class="section-title text-3xl md:text-4xl lg:text-[40px] lg:leading-[48px] text-dark-text mb-6 tracking-tight">
                        {{ __('contact.heading') }}
                    </h1>
                    <p class="text-badge-text text-lg md:text-xl font-medium leading-[28px]">
                        {{ __('contact.intro') }}
                    </p>
                </div>
                
                <!-- Right Section - Form (60% width on desktop) -->
                <div class="lg:w-3/5">
                  <form id="contact-form" class="bg-white rounded-xl p-6 md:p-8 shadow-sm" method="post" action="{{ route('web.send-contact') }}">
                      @csrf
                        <!-- Name Field -->
                        <div class="mb-6">
                            <label for="name" class="block text-dark-text text-base font-normal mb-2">
                                {{ __('contact.label_name') }}
                            </label>
                            <div class="relative">
                                <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                                    <img src="{{ asset('assets/images/icons/profile.png') }}" alt="{{ __('contact.alt_profile') }}" class="w-5 h-5 text-gray-400">
                                </div>
                                <input
                                    type="text"
                                    id="name"
                                    name="name"
                                    placeholder="{{ __('contact.placeholder_name') }}"
                                    class="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200"
                                    required
                                >
                                @error('name')
                                <p class="mt-2.5 text-sm text-primary">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        
                        <!-- Email Field -->
                        <div class="mb-6">
                            <label for="email" class="block text-dark-text text-base font-normal mb-2">
                                {{ __('contact.label_email') }}
                            </label>
                            <div class="relative">
                                <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                                    <img src="{{ asset('assets/images/icons/draft.png') }}" alt="{{ __('contact.alt_email') }}" class="w-5 h-5 text-gray-400">
                                </div>
                                <input
                                    type="email"
                                    id="email"
                                    name="email"
                                    placeholder="{{ __('contact.placeholder_email') }}"
                                    class="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200"
                                    required
                                >
                                @error('email')
                                <p class="mt-2.5 text-sm text-primary">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        
                        <!-- Subject Field -->
                        <div class="mb-6">
                            <label for="subject" class="block text-dark-text text-base font-normal mb-2">
                                {{ __('contact.label_subject') }}
                            </label>
                            <div class="relative">
                                <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                                    <img src="{{ asset('assets/images/icons/task-square.png') }}" alt="{{ __('contact.alt_subject') }}" class="w-5 h-5 text-gray-400">
                                </div>
                                <input
                                    type="text"
                                    id="subject"
                                    name="subject"
                                    placeholder="{{ __('contact.placeholder_subject') }}"
                                    class="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200"
                                    required
                                >
                                @error('subject')
                                <p class="mt-2.5 text-sm text-primary">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        
                        <!-- Message Field -->
                        <div class="mb-8">
                            <label for="message" class="block text-dark-text text-base font-normal mb-2">
                                {{ __('contact.label_message') }}
                            </label>
                            <div class="relative">
                                <div class="absolute left-3 top-4">
                                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                                    </svg>
                                </div>
                                <textarea
                                    id="message"
                                    name="message"
                                    placeholder="{{ __('contact.placeholder_message') }}"
                                    rows="5"
                                    class="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200 resize-none"
                                    style="height: 119px;"
                                    required
                                ></textarea>
                                @error('message')
                                <p class="mt-2.5 text-sm text-primary">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        
                        <!-- Submit Button -->
                        <button
                            type="submit"
                            class="bg-primary text-black px-8 py-3 rounded-lg font-medium flex items-center space-x-2 hover:bg-opacity-90 transition-colors duration-200 w-full sm:w-auto"
                        >
                            <span>{{ __('contact.submit') }}</span>
                            <i class="fas fa-arrow-right text-sm nav-download-arrow"></i>
                        </button>
                        
                        <!-- Success Message -->
                        @if(session('contact_success'))
                        <div class="mt-6 p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg flex items-start gap-3">
                            <i class="fas fa-circle-check mt-0.5 text-green-500"></i>
                            <div>
                                <p class="font-medium">{{ __('contact.success_title') }}</p>
                                <p class="text-sm mt-1">{{ __('contact.success_body') }}</p>
                            </div>
                        </div>
                        @endif
                    </form>
                </div>
            </div>
        </div>
    </main>

    <!-- Download App Section (same as index.html) -->
    <section class="bg-hero-bg py-16 md:py-20 lg:py-24">
      <div class="container mx-auto px-4">
        <div class="bg-[#F9DC83] rounded-3xl overflow-hidden max-w-6xl mx-auto p-8 md:p-12 lg:p-16">
          <div class="flex flex-col lg:flex-row items-center">
            
            <!-- Left Section - Content -->
            <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12">
              <!-- Title -->
              <h2 class="section-title text-3xl md:text-4xl lg:text-[40px] lg:leading-[48px] text-dark-text mb-6 tracking-tight">
                {{ __('landing.download.title') }}
              </h2>
              
              <!-- Description -->
              <p class="text-badge-text text-lg md:text-xl font-medium leading-[28px] mb-8 md:mb-10">
                {{ __('landing.download.description') }}
              </p>
              
              <!-- App Store Buttons -->
              <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-5">
                <a id="contact-play-store-btn" href="#" target="_blank" rel="noopener noreferrer" class="block">
                  <img src="{{ asset('assets/images/play-store.png') }}" alt="{{ __('landing.download.alt_play') }}" class="h-12 md:h-14 w-auto hover:opacity-90 transition-opacity">
                </a>
                <a id="contact-app-store-btn" href="https://apps.apple.com/us/app/chams-d%C3%A9pannage-support/id6763881564" target="_blank" rel="noopener noreferrer" class="block">
                  <img src="{{ asset('assets/images/app-store.png') }}" alt="{{ __('landing.download.alt_app') }}" class="h-12 md:h-14 w-auto hover:opacity-90 transition-opacity">
                </a>
              </div>
            </div>
            
            <!-- Right Section - Image -->
            <div class="lg:w-1/2">
              <img 
                src="{{ asset('assets/images/download-app.png') }}" 
                alt="{{ __('landing.download.alt_screens') }}"
                class="w-full max-w-lg mx-auto lg:max-w-none lg:w-[542px] lg:h-auto lg:relative lg:left-[-67px]"
                loading="lazy"
              >
            </div>
          </div>
        </div>
      </div>
    </section>

    <script>
        (function () {
            var PLAY_STORE_URL = 'https://play.google.com/store/apps/details?id=com.sadeem.shams_client&hl=en';
            var ua = navigator.userAgent || navigator.vendor || window.opera;
            var isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
            var isAndroid = /android/i.test(ua);

            var playBtn = document.getElementById('contact-play-store-btn');
            var appBtn  = document.getElementById('contact-app-store-btn');

            if (playBtn) {
                if (isIOS) { playBtn.style.display = 'none'; }
                else { playBtn.href = PLAY_STORE_URL; }
            }
            if (appBtn && isAndroid) {
                appBtn.style.display = 'none';
            }
        })();
    </script>
@endsection