@extends('web.layouts.master')
@section('meta_description', __('landing.meta_description', ['app' => config('app.name')]))
@section('canonical', route('index'))
@push('jsonld')
    @php
        $schema = [
            '@context' => 'https://schema.org',
            '@graph' => [
                [
                    '@type' => 'WebSite',
                    'name' => config('app.name'),
                    'url' => url('/'),
                    'description' => __('landing.meta_description', ['app' => config('app.name')]),
                    'inLanguage' => ['fr', 'ar', 'en'],
                ],
                [
                    '@type' => 'SoftwareApplication',
                    'name' => config('app.name'),
                    'applicationCategory' => 'BusinessApplication',
                    'operatingSystem' => 'Android, iOS',
                    'description' => __('landing.meta_description', ['app' => config('app.name')]),
                    'featureList' => __('landing.schema_feature_list'),
                    'offers' => [
                        '@type' => 'Offer',
                        'price' => '0',
                        'priceCurrency' => 'DZD',
                    ],
                ],
            ],
        ];
    @endphp
    <script type="application/ld+json">{!! json_encode($schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
@endpush
@section('content')
    <!-- Hero Section -->
    <main class="container mx-auto px-4 py-8 md:py-12 lg:py-16">
        <div class="flex flex-col lg:flex-row items-center justify-between">
            <!-- Left Section -->
            <div class="lg:w-1/2 mb-12 lg:mb-0">
              <!-- Badge -->
              <div class="badge rounded-full inline-flex items-center px-4 py-2 mb-6 md:mb-8">
                  <span class="text-sm md:text-base font-general-sans font-normal uppercase">
                      {{ __('landing.hero.badge') }}
                  </span>
              </div>

                <!-- Title -->
                <h1 class="hero-title text-3xl md:text-4xl lg:text-display-lg text-black mb-6 md:mb-8">
                    {!! __('landing.hero.title_html') !!}
                </h1>

                <!-- Description -->
                <p class="text-badge-text text-lg md:text-xl mb-8 md:mb-10 font-general-sans font-medium leading-relaxed max-w-2xl">
                    {{ __('landing.hero.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="hero-play-store-btn" href="#" target="_blank" rel="noopener noreferrer" class="block">
                      <img src="{{ asset('assets/images/play-store.png') }}" alt="{{ __('landing.hero.alt_play') }}" class="h-12 md:h-14 w-auto hover:opacity-90 transition-opacity">
                    </a>
                    <a id="hero-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.hero.alt_app_store') }}" class="h-12 md:h-14 w-auto hover:opacity-90 transition-opacity">
                    </a>
                </div>
            </div>

            <!-- Right Section (Phone Image) -->
            <div class="lg:w-1/2 flex justify-center lg:justify-end">
                <div class="relative">
                    <img 
                     src="{{ asset('assets/images/phones-image.png') }}" 
                        alt="{{ __('landing.hero.alt_phones') }}" 
                        class="w-full max-w-sm md:max-w-md lg:max-w-lg h-auto"
                    >
                </div>
            </div>
        </div>
    </main>

    <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('hero-play-store-btn');
            var appBtn  = document.getElementById('hero-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>

    <!-- Pour qui ? Section -->
    <section id="pour-qui" class="bg-hero-bg py-16 md:py-20 lg:py-24">
      <div class="container mx-auto px-4">
        <!-- Title -->
        <h2 class="section-title text-3xl md:text-4xl lg:text-[40px] lg:leading-[48px] text-dark-text text-center mb-6 tracking-tight">
          {{ __('landing.audience.title') }}
        </h2>
        
        <!-- Description -->
        <p class="text-badge-text text-lg md:text-xl text-center max-w-3xl mx-auto mb-12 md:mb-16 font-medium leading-[28px]">
          {{ __('landing.audience.description') }}
        </p>
        
        <!-- Cards Container -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-[1120px] mx-auto">
          <!-- Card 1 - Panne en pleine route -->
          <div class="pour-qui-card rounded-lg p-4 flex flex-col items-center text-center h-[184px] w-full max-w-[256px] mx-auto lg:mx-0">
            <!-- Icon Container -->
            <div class="icon-container rounded-lg w-11 h-11 flex items-center justify-center mb-3">
              <img src="{{ asset('assets/images/icons/flash.png') }}" alt="Flash Icon" class="w-6 h-6">
            </div>
            
            <!-- Card Title -->
            <h3 class="text-dark-text font-semibold text-base leading-[24px] mb-2">
              {{ __('landing.audience.card1_title') }}
            </h3>
            
            <!-- Card Description -->
            <p class="text-badge-text text-sm leading-[24px] flex-grow">
              {{ __('landing.audience.card1_text') }}
            </p>
          </div>
          
          <!-- Card 2 - Missions proches -->
          <div class="pour-qui-card rounded-lg p-4 flex flex-col items-center text-center h-[184px] w-full max-w-[256px] mx-auto lg:mx-0">
            <!-- Icon Container -->
            <div class="icon-container rounded-lg w-11 h-11 flex items-center justify-center mb-3">
              <img src="{{ asset('assets/images/icons/location-circle.png') }}" alt="Location Icon" class="w-6 h-6">
            </div>
            
            <!-- Card Title -->
            <h3 class="text-dark-text font-semibold text-base leading-[24px] mb-2">
              {{ __('landing.audience.card2_title') }}
            </h3>
            
            <!-- Card Description -->
            <p class="text-badge-text text-sm leading-[24px] flex-grow">
              {{ __('landing.audience.card2_text') }}
            </p>
          </div>
          
          <!-- Card 3 - Clients réels -->
          <div class="pour-qui-card rounded-lg p-4 flex flex-col items-center text-center h-[184px] w-full max-w-[256px] mx-auto lg:mx-0">
            <!-- Icon Container -->
            <div class="icon-container rounded-lg w-11 h-11 flex items-center justify-center mb-3">
              <img src="{{ asset('assets/images/icons/user-check.png') }}" alt="User Check Icon" class="w-6 h-6">
            </div>
            
            <!-- Card Title -->
            <h3 class="text-dark-text font-semibold text-base leading-[24px] mb-2">
              {{ __('landing.audience.card3_title') }}
            </h3>
            
            <!-- Card Description -->
            <p class="text-badge-text text-sm leading-[24px] flex-grow">
              {{ __('landing.audience.card3_text') }}
            </p>
          </div>
          
          <!-- Card 4 - Revenus concrets -->
          <div class="pour-qui-card rounded-lg p-4 flex flex-col items-center text-center h-[184px] w-full max-w-[256px] mx-auto lg:mx-0">
            <!-- Icon Container -->
            <div class="icon-container rounded-lg w-11 h-11 flex items-center justify-center mb-3">
              <img src="{{ asset('assets/images/icons/dollar-circle.png')}}" alt="Dollar Icon" class="w-6 h-6">
            </div>
            
            <!-- Card Title -->
            <h3 class="text-dark-text font-semibold text-base leading-[24px] mb-2">
              {{ __('landing.audience.card4_title') }}
            </h3>
            
            <!-- Card Description -->
            <p class="text-badge-text text-sm leading-[24px] flex-grow">
              {{ __('landing.audience.card4_text') }}
            </p>
          </div>
        </div>
      </div>
    </section>
        <!-- Cas d'usage Section -->
    <section id="cas-usage" class="bg-hero-bg py-16 md:py-20 lg:py-24">
      <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row lg:items-center lg:gap-8 max-w-6xl mx-auto">
          
          <!-- Left Section - Text Content -->
          <div class="lg:w-1/2 mb-12 lg:mb-0">
            <!-- Heading -->
            <h2 class="section-title text-3xl md:text-4xl lg:text-[40px] lg:leading-[48px] text-dark-text mb-6 lg:mb-8 tracking-tight">
              {{ __('landing.use_cases.title') }}
            </h2>
            
            <!-- Tab Buttons -->
            <div class="border border-[#E7E7E6] rounded-lg p-1 inline-flex mb-8">
              <button 
                id="clients-tab" 
                class="tab-button tab-button-active w-[170px] h-[52px] rounded-lg font-medium"
              >
                {{ __('landing.use_cases.tab_clients') }}
              </button>
              <button 
                id="prestataires-tab" 
                class="tab-button tab-button-inactive w-[170px] h-[52px] rounded-lg font-medium"
              >
                {{ __('landing.use_cases.tab_providers') }}
              </button>
            </div>
            
            <!-- Q&A Content -->
            <div id="qa-content" class="space-y-5">
              <!-- Clients Q&A (default visible) -->
              <div id="clients-content" class="qa-content">
                <!-- Q&A 1 -->
                <div class="qa-item">
                  <h3 class="qa-question">{{ __('landing.use_cases.c_q1') }}</h3>
                  <p class="qa-answer">{{ __('landing.use_cases.c_a1') }}</p>
                </div>
                
                <!-- Q&A 2 -->
                <div class="qa-item">
                  <h3 class="qa-question">{{ __('landing.use_cases.c_q2') }}</h3>
                  <p class="qa-answer">{{ __('landing.use_cases.c_a2') }}</p>
                </div>
                
                <!-- Q&A 3 -->
                <div class="qa-item">
                  <h3 class="qa-question">{{ __('landing.use_cases.c_q3') }}</h3>
                  <p class="qa-answer">{{ __('landing.use_cases.c_a3') }}</p>
                </div>
                
                <!-- Q&A 4 -->
                <div class="qa-item">
                  <h3 class="qa-question">{{ __('landing.use_cases.c_q4') }}</h3>
                  <p class="qa-answer">{{ __('landing.use_cases.c_a4') }}</p>
                </div>
              </div>
              
              <!-- Prestataires Q&A (hidden by default) -->
              <div id="prestataires-content" class="qa-content hidden">
                <!-- Q&A 1 -->
                <div class="qa-item">
                  <h3 class="qa-question">{{ __('landing.use_cases.p_q1') }}</h3>
                  <p class="qa-answer">{{ __('landing.use_cases.p_a1') }}</p>
                </div>
                
                <!-- Q&A 2 -->
                <div class="qa-item">
                  <h3 class="qa-question">{{ __('landing.use_cases.p_q2') }}</h3>
                  <p class="qa-answer">{{ __('landing.use_cases.p_a2') }}</p>
                </div>
                
                <!-- Q&A 3 -->
                <div class="qa-item">
                  <h3 class="qa-question">{{ __('landing.use_cases.p_q3') }}</h3>
                  <p class="qa-answer">{{ __('landing.use_cases.p_a3') }}</p>
                </div>
                
                <!-- Q&A 4 -->
                <div class="qa-item">
                  <h3 class="qa-question">{{ __('landing.use_cases.p_q4') }}</h3>
                  <p class="qa-answer">{{ __('landing.use_cases.p_a4') }}</p>
                </div>
              </div>
            </div>
          </div>
          
                  <!-- Right Section - Image -->
                  <!-- Right Section - Image -->
          <div class="lg:w-1/2">
            <div class="image-container">
              <!-- Clients Tab Image -->
              <div id="clients-image" class="qa-image">
                <picture>
                  <!-- Desktop & Tablet image for clients (both use tablet image) -->
                  <source 
                    media="(min-width: 768px)" 
                    srcset="{{ asset('assets/images/cas-dusage-tablette.png') }}"
                  >
                  <!-- Mobile image for clients (default) -->
                  <img 
                    src="assets/images/cas-dusage-phone.png" 
                    alt="{{ __('landing.use_cases.alt_clients') }}"
                    class="w-full h-auto rounded-xl"
                    loading="lazy"
                  >
                </picture>
              </div>
              
              <!-- Prestataires Tab Image (always desktop image) -->
              <div id="prestataires-image" class="qa-image hidden">
                <img 
                  src="{{ asset('assets/images/cas-dusage-desktop.png') }}" 
                  alt="{{ __('landing.use_cases.alt_providers') }}"
                  class="w-full h-auto rounded-xl"
                  loading="lazy"
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
        <!-- Avantages Section -->
    <section id="avantages" class="bg-hero-bg py-16 md:py-20 lg:py-24">
      <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row lg:items-start lg:gap-8 max-w-6xl mx-auto">
          
          <!-- Left Section - Image (shows first on mobile/tablet, last on desktop) -->
          <div class="order-2 lg:order-1 lg:w-1/2 mb-12 lg:mb-0">
            <div class="rounded-2xl overflow-hidden">
              <img 
                 src="{{ asset('assets/images/avantages-image.png') }}" 
                alt="{{ __('landing.advantages.alt_image') }}"
                class="w-full h-auto"
                loading="lazy"
              >
            </div>
          </div>
          
          <!-- Right Section - Content (shows first on mobile/tablet, first on desktop) -->
          <div class="order-1 lg:order-2 lg:w-1/2">
            <!-- Header Text -->
            <h2 class="section-title text-3xl md:text-4xl lg:text-[40px] lg:leading-[48px] text-dark-text mb-6 lg:mb-8 tracking-tight">
              {!! __('landing.advantages.title_html') !!}
            </h2>
            
            <!-- Content Container -->
            <div class="space-y-6">
              <!-- Avantage 1 - Tout-en-un -->
              <div class="avantage-item">
                <div class="avantage-icon-container flex items-center justify-center">
                  <img src="{{ asset('assets/images/icons/lamp.png') }}" alt="Lamp Icon" class="w-5 h-5">
                </div>
                <div class="avantage-text-container">
                  <h3 class="avantage-title">{{ __('landing.advantages.a1_title') }}</h3>
                  <p class="avantage-description">{{ __('landing.advantages.a1_text') }}</p>
                </div>
              </div>
              
              <!-- Avantage 2 - Gain de temps -->
              <div class="avantage-item">
                <div class="avantage-icon-container flex items-center justify-center">
                  <img src="{{ asset('assets/images/icons/clock.png') }}" alt="Clock Icon" class="w-5 h-5">
                </div>
                <div class="avantage-text-container">
                  <h3 class="avantage-title">{{ __('landing.advantages.a2_title') }}</h3>
                  <p class="avantage-description">{{ __('landing.advantages.a2_text') }}</p>
                </div>
              </div>
              
              <!-- Avantage 3 - Localisation intelligente -->
              <div class="avantage-item">
                <div class="avantage-icon-container flex items-center justify-center">
                  <img src="{{ asset('assets/images/icons/location-circle.png') }}" alt="Location Icon" class="w-5 h-5">
                </div>
                <div class="avantage-text-container">
                  <h3 class="avantage-title">{{ __('landing.advantages.a3_title') }}</h3>
                  <p class="avantage-description">{{ __('landing.advantages.a3_text') }}</p>
                </div>
              </div>
              
              <!-- Avantage 4 - Suivi et historique -->
              <div class="avantage-item">
                <div class="avantage-icon-container flex items-center justify-center">
                  <img src="{{ asset('assets/images/icons/suivi.png') }}" alt="Suivi Icon" class="w-5 h-5">
                </div>
                <div class="avantage-text-container">
                  <h3 class="avantage-title">{{ __('landing.advantages.a4_title') }}</h3>
                  <p class="avantage-description">{{ __('landing.advantages.a4_text') }}</p>
                </div>
              </div>
              
              <!-- Avantage 5 - Communication fluide -->
              <div class="avantage-item">
                <div class="avantage-icon-container flex items-center justify-center">
                  <img src="{{ asset('assets/images/icons/message.png') }}" alt="Message Icon" class="w-5 h-5">
                </div>
                <div class="avantage-text-container">
                  <h3 class="avantage-title">{{ __('landing.advantages.a5_title') }}</h3>
                  <p class="avantage-description">{{ __('landing.advantages.a5_text') }}</p>
                </div>
              </div>
              
              <!-- Avantage 6 - Sécurité & professionnalisme -->
              <div class="avantage-item">
                <div class="avantage-icon-container flex items-center justify-center">
                  <img src="{{ asset('assets/images/icons/padlock.png') }}" alt="Padlock Icon" class="w-5 h-5">
                </div>
                <div class="avantage-text-container">
                  <h3 class="avantage-title">{{ __('landing.advantages.a6_title') }}</h3>
                  <p class="avantage-description">{{ __('landing.advantages.a6_text') }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
        <!-- Fonctionnalités Section -->
    <section id="fonctionnalites" class="bg-hero-bg py-16 md:py-20 lg:py-24">
      <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row lg:items-start lg:gap-8 max-w-6xl mx-auto">
          
          <!-- Left Section - Content (shows first on mobile/tablet) -->
          <div class="lg:w-1/2 mb-12 lg:mb-0">
            <!-- Title -->
            <h2 class="section-title text-3xl md:text-4xl lg:text-[40px] lg:leading-[48px] text-dark-text mb-6 lg:mb-8 tracking-tight">
              {{ __('landing.features.title') }}
            </h2>
            
            <!-- Tab Buttons -->
            <div class="border border-[#E7E7E6] rounded-lg p-1 inline-flex mb-8">
              <button 
                id="fonc-clients-tab" 
                class="tab-button tab-button-active w-[170px] h-[52px] rounded-lg font-medium"
              >
                {{ __('landing.features.tab_clients') }}
              </button>
              <button 
                id="fonc-prestataires-tab" 
                class="tab-button tab-button-inactive w-[170px] h-[52px] rounded-lg font-medium"
              >
                {{ __('landing.features.tab_providers') }}
              </button>
            </div>
            
            <!-- Features Content -->
            <div id="fonc-content" class="space-y-5">
              <!-- Clients Features (default visible) -->
              <div id="fonc-clients-content">
                <!-- Feature 1 -->
                <div class="feature-item">
                  <img src="{{ asset('assets/images/icons/check-circle.png') }}" alt="Check Icon" class="feature-check-icon">
                  <p class="feature-text">{{ __('landing.features.fc1') }}</p>
                </div>
                
                <!-- Feature 2 -->
                <div class="feature-item">
                  <img src="{{ asset('assets/images/icons/check-circle.png') }}" alt="Check Icon" class="feature-check-icon">
                  <p class="feature-text">{{ __('landing.features.fc2') }}</p>
                </div>
                
                <!-- Feature 3 -->
                <div class="feature-item">
                  <img src="{{ asset('assets/images/icons/check-circle.png') }}" alt="Check Icon" class="feature-check-icon">
                  <p class="feature-text">{{ __('landing.features.fc3') }}</p>
                </div>
                
                <!-- Feature 4 -->
                <div class="feature-item">
                  <img src="{{ asset('assets/images/icons/check-circle.png') }}" alt="Check Icon" class="feature-check-icon">
                  <p class="feature-text">{{ __('landing.features.fc4') }}</p>
                </div>
                
                <!-- Feature 5 -->
                <div class="feature-item">
                  <img src="{{ asset('assets/images/icons/check-circle.png') }}" alt="Check Icon" class="feature-check-icon">
                  <p class="feature-text">{{ __('landing.features.fc5') }}</p>
                </div>
              </div>
              
              <!-- Prestataires Features (hidden by default) -->
              <div id="fonc-prestataires-content" class="hidden">
                <!-- Feature 1 -->
                <div class="feature-item">
                  <img src="{{ asset('assets/images/icons/check-circle.png') }}" alt="Check Icon" class="feature-check-icon">
                  <p class="feature-text">{{ __('landing.features.fp1') }}</p>
                </div>
                
                <!-- Feature 2 -->
                <div class="feature-item">
                  <img src="{{ asset('assets/images/icons/check-circle.png') }}" alt="Check Icon" class="feature-check-icon">
                  <p class="feature-text">{{ __('landing.features.fp2') }}</p>
                </div>
                
                <!-- Feature 3 -->
                <div class="feature-item">
                  <img src="{{ asset('assets/images/icons/check-circle.png') }}" alt="Check Icon" class="feature-check-icon">
                  <p class="feature-text">{{ __('landing.features.fp3') }}</p>
                </div>
                
                <!-- Feature 4 -->
                <div class="feature-item">
                  <img src="{{ asset('assets/images/icons/check-circle.png') }}" alt="Check Icon" class="feature-check-icon">
                  <p class="feature-text">{{ __('landing.features.fp4') }}</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Right Section - Image (shows first on mobile/tablet, last on desktop) -->
          <div class="lg:w-1/2">
            <div class="rounded-lg overflow-hidden">
              <!-- Clients Image (default visible) -->
              <div id="fonc-clients-image">
                <img 
                   src="{{ asset('assets/images/func-clients.png') }}" 
                  alt="{{ __('landing.features.alt_clients') }}"
                  class="w-full h-auto"
                  loading="lazy"
                >
              </div>
              
              <!-- Prestataires Image (hidden by default) -->
              <div id="fonc-prestataires-image" class="hidden">
                <img 
                  src="{{ asset('assets/images/func-prestataires.png') }}" 
                  alt="{{ __('landing.features.alt_providers') }}"
                  class="w-full h-auto"
                  loading="lazy"
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
       <!-- FAQ Section -->
    <section id="faq" class="bg-hero-bg py-16 md:py-20 lg:py-24">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
          <!-- Title and Description -->
          <div class="text-center mb-12 md:mb-16">
            <h2 class="section-title text-3xl md:text-4xl lg:text-[40px] lg:leading-[48px] text-dark-text mb-5 tracking-tight">
              {{ __('landing.faq.title') }}
            </h2>
            <p class="text-badge-text text-lg md:text-xl font-medium leading-[28px] max-w-2xl mx-auto">
              {{ __('landing.faq.subtitle') }}
            </p>
          </div>
          
          <!-- Accordion -->
          <div class="faq-container shadow-sm">
            <!-- FAQ Item 1 -->
            <div class="faq-item">
              <button class="faq-question">
                <span>{{ __('landing.faq.q1') }}</span>
                <div class="flex items-center">
                  <svg class="faq-icon plus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                  </svg>
                  <svg class="faq-icon minus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                  </svg>
                </div>
              </button>
              <div class="faq-answer">
                {{ __('landing.faq.a1') }}
              </div>
            </div>
            
            <!-- FAQ Item 2 -->
            <div class="faq-item">
              <button class="faq-question">
                <span>{{ __('landing.faq.q2') }}</span>
                <div class="flex items-center">
                  <svg class="faq-icon plus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                  </svg>
                  <svg class="faq-icon minus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                  </svg>
                </div>
              </button>
              <div class="faq-answer">
                {{ __('landing.faq.a2') }}
              </div>
            </div>
            
            <!-- FAQ Item 3 -->
            <div class="faq-item">
              <button class="faq-question">
                <span>{{ __('landing.faq.q3') }}</span>
                <div class="flex items-center">
                  <svg class="faq-icon plus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                  </svg>
                  <svg class="faq-icon minus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                  </svg>
                </div>
              </button>
              <div class="faq-answer">
                {{ __('landing.faq.a3') }}
              </div>
            </div>
            
            <!-- FAQ Item 4 -->
            <div class="faq-item">
              <button class="faq-question">
                <span>{{ __('landing.faq.q4') }}</span>
                <div class="flex items-center">
                  <svg class="faq-icon plus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                  </svg>
                  <svg class="faq-icon minus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                  </svg>
                </div>
              </button>
              <div class="faq-answer">
                {{ __('landing.faq.a4') }}
              </div>
            </div>
            
            <!-- FAQ Item 5 -->
            <div class="faq-item">
              <button class="faq-question">
                <span>{{ __('landing.faq.q5') }}</span>
                <div class="flex items-center">
                  <svg class="faq-icon plus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                  </svg>
                  <svg class="faq-icon minus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                  </svg>
                </div>
              </button>
              <div class="faq-answer">
                {{ __('landing.faq.a5') }}
              </div>
            </div>
            
            <!-- FAQ Item 6 -->
            <div class="faq-item">
              <button class="faq-question">
                <span>{{ __('landing.faq.q6') }}</span>
                <div class="flex items-center">
                  <svg class="faq-icon plus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                  </svg>
                  <svg class="faq-icon minus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                  </svg>
                </div>
              </button>
              <div class="faq-answer">
                {{ __('landing.faq.a6') }}
              </div>
            </div>
            
            <!-- FAQ Item 7 -->
            <div class="faq-item">
              <button class="faq-question">
                <span>{{ __('landing.faq.q7') }}</span>
                <div class="flex items-center">
                  <svg class="faq-icon plus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                  </svg>
                  <svg class="faq-icon minus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                  </svg>
                </div>
              </button>
              <div class="faq-answer">
                {{ __('landing.faq.a7') }}
              </div>
            </div>
            
            <!-- FAQ Item 8 -->
            <div class="faq-item">
              <button class="faq-question">
                <span>{{ __('landing.faq.q8') }}</span>
                <div class="flex items-center">
                  <svg class="faq-icon plus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                  </svg>
                  <svg class="faq-icon minus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                  </svg>
                </div>
              </button>
              <div class="faq-answer">
                {{ __('landing.faq.a8') }}
              </div>
            </div>
            
            <!-- FAQ Item 9 -->
            <div class="faq-item">
              <button class="faq-question">
                <span>{{ __('landing.faq.q9') }}</span>
                <div class="flex items-center">
                  <svg class="faq-icon plus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                  </svg>
                  <svg class="faq-icon minus" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                  </svg>
                </div>
              </button>
              <div class="faq-answer">
                {{ __('landing.faq.a9') }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
        <!-- Download App Section -->
    <section class="bg-hero-bg py-16 md:py-20 lg:py-24">
      <div class="container mx-auto px-4">
        <div class="download-container 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="download-section-play-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="download-section-app-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 download-image">
              <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('download-section-play-btn');
            var appBtn  = document.getElementById('download-section-app-btn');

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

@endsection