@extends('frontend.layouts.app')

@php
    $isRtl = app()->getLocale() === 'ar';
    
    // Get settings with fallbacks
    $heroTitle = $isRtl 
        ? (setting('about_hero_title_ar') ?: setting('about_hero_title') ?: __('messages.about_us')) 
        : (setting('about_hero_title') ?: __('messages.about_us'));
    $heroSubtitle = $isRtl 
        ? (setting('about_hero_subtitle_ar') ?: setting('about_hero_subtitle')) 
        : setting('about_hero_subtitle');
    $content = $isRtl 
        ? (setting('about_content_ar') ?: setting('about_content')) 
        : setting('about_content');
    $vision = $isRtl 
        ? (setting('about_vision_ar') ?: setting('about_vision') ?: __('messages.vision_text')) 
        : (setting('about_vision') ?: __('messages.vision_text'));
    $mission = $isRtl 
        ? (setting('about_mission_ar') ?: setting('about_mission') ?: __('messages.mission_text')) 
        : (setting('about_mission') ?: __('messages.mission_text'));
    $aboutImage = setting('about_image');
    
    // Get stats
    $statsJson = setting('about_stats');
    $stats = [];
    if ($statsJson) {
        $decoded = is_array($statsJson) ? $statsJson : json_decode($statsJson, true);
        if (is_array($decoded)) {
            $stats = $decoded;
        }
    }
@endphp

@section('title', $heroTitle . ' - ' . config('app.name'))

@section('content')
    <!-- Hero Section -->
    <section class="relative py-32 bg-gradient-to-br from-slate-900 via-slate-800 to-primary-900">
        <div class="container mx-auto px-4 relative z-10">
            <div class="max-w-4xl mx-auto text-center">
                <span class="inline-block px-4 py-1 bg-primary-500/20 text-primary-400 text-sm font-semibold rounded-full mb-6">
                    {{ __('messages.who_we_are') }}
                </span>
                <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">{{ $heroTitle }}</h1>
                @if($heroSubtitle)
                    <p class="text-xl text-slate-300">{{ $heroSubtitle }}</p>
                @endif
            </div>
        </div>
    </section>

    <!-- About Content -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="grid lg:grid-cols-2 gap-16 items-center">
                <div data-aos="fade-right">
                    <span class="text-primary-600 font-semibold text-sm uppercase tracking-wider">{{ __('messages.about_aisc') }}</span>
                    <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mt-2 mb-6">{{ __('messages.company_full_name') }}</h2>
                    
                    @if($content)
                        <div class="prose prose-lg max-w-none text-slate-600">
                            {!! $content !!}
                        </div>
                    @else
                        <div class="space-y-4 text-slate-600">
                            <p>{{ __('messages.about_paragraph_1') }}</p>
                            <p>{{ __('messages.about_paragraph_2') }}</p>
                            <p>{{ __('messages.about_paragraph_3') }}</p>
                        </div>
                    @endif
                </div>
                
                <div class="relative" data-aos="fade-left">
                    <div class="aspect-[4/3] rounded-2xl overflow-hidden shadow-2xl">
                        @if($aboutImage)
                            <img src="{{ asset('images/' . $aboutImage) }}" alt="{{ __('messages.factory_image') }}" class="w-full h-full object-cover">
                        @else
                            <div class="w-full h-full bg-gradient-to-br from-primary-600 to-primary-800 flex items-center justify-center">
                                <svg class="w-32 h-32 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                                </svg>
                            </div>
                        @endif
                    </div>
                    
                    <!-- Stats Box -->
                    <div class="absolute -bottom-8 {{ $isRtl ? '-left-8' : '-right-8' }} bg-white rounded-xl shadow-xl p-6">
                        @if(count($stats) > 0)
                            @foreach(array_slice($stats, 0, 2) as $stat)
                                <div class="{{ !$loop->last ? 'mb-4' : '' }}">
                                    <div class="text-3xl font-bold text-primary-600">{{ $stat['value'] ?? '' }}</div>
                                    <div class="text-sm text-slate-500">{{ $isRtl ? ($stat['label_ar'] ?? $stat['label'] ?? '') : ($stat['label'] ?? '') }}</div>
                                </div>
                            @endforeach
                        @else
                            <div class="mb-4">
                                <div class="text-3xl font-bold text-primary-600">500+</div>
                                <div class="text-sm text-slate-500">{{ $isRtl ? 'مشروع مكتمل' : 'Projects Completed' }}</div>
                            </div>
                            <div>
                                <div class="text-3xl font-bold text-primary-600">50+</div>
                                <div class="text-sm text-slate-500">{{ $isRtl ? 'عميل سعيد' : 'Happy Clients' }}</div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Vision & Mission -->
    <section class="py-20 bg-slate-50">
        <div class="container mx-auto px-4">
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-2xl p-8 shadow-sm" data-aos="fade-up">
                    <div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mb-6">
                        <svg class="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-slate-900 mb-4">{{ __('messages.our_vision') }}</h3>
                    <p class="text-slate-600 leading-relaxed">{{ $vision }}</p>
                </div>
                
                <div class="bg-white rounded-2xl p-8 shadow-sm" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mb-6">
                        <svg class="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-slate-900 mb-4">{{ __('messages.our_mission') }}</h3>
                    <p class="text-slate-600 leading-relaxed">{{ $mission }}</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Case Study -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto">
                <div class="text-center mb-12" data-aos="fade-up">
                    <span class="text-primary-600 font-semibold text-sm uppercase tracking-wider">{{ __('messages.real_example') }}</span>
                    <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mt-2">{{ __('messages.helicopter_parts_title') }}</h2>
                    <p class="text-slate-600 mt-4 max-w-2xl mx-auto">{{ __('messages.helicopter_parts_desc') }}</p>
                </div>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="bg-slate-100 rounded-2xl p-8" data-aos="fade-right">
                        <div class="text-sm text-slate-500 uppercase tracking-wider mb-2">{{ __('messages.traditional_sourcing') }}</div>
                        <div class="text-4xl font-bold text-slate-900">$92,700</div>
                        <div class="text-slate-500 mt-2">6-9 {{ __('messages.months') }}</div>
                    </div>
                    
                    <div class="bg-primary-600 rounded-2xl p-8 text-white" data-aos="fade-left">
                        <div class="text-sm text-primary-200 uppercase tracking-wider mb-2">{{ __('messages.aisc_solution') }}</div>
                        <div class="text-4xl font-bold">$28,600</div>
                        <div class="text-primary-200 mt-2">3-4 {{ __('messages.weeks') }}</div>
                        <div class="mt-4 pt-4 border-t border-primary-500">
                            <span class="text-2xl font-bold">69%</span>
                            <span class="text-primary-200">{{ __('messages.cost_savings') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-20 bg-gradient-to-r from-primary-600 to-primary-800">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-6" data-aos="fade-up">{{ __('messages.ready_to_start') }}</h2>
            <p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">{{ __('messages.cta_description') }}</p>
            <div class="flex flex-wrap justify-center gap-4" data-aos="fade-up" data-aos-delay="200">
                <a href="{{ route('quote') }}" class="px-8 py-4 bg-white text-primary-600 font-semibold rounded-lg hover:bg-primary-50 transition-all">
                    {{ __('messages.request_quote') }}
                </a>
                <a href="{{ route('contact') }}" class="px-8 py-4 border-2 border-white text-white font-semibold rounded-lg hover:bg-white/10 transition-all">
                    {{ __('messages.contact_us') }}
                </a>
            </div>
        </div>
    </section>
@endsection