@extends('layouts.master')
@section('title' , __('messages.about'))
@section('meta')
    <meta name="description" content="{!! $about->meta_description !!}">
    <meta name="keywords" content="{!! $about->meta_keywords !!}">
@endsection

@section('content')
    <!-- About Section -->
    <section class="about-section mt-4 py-5">
        <div class="container">
            <div class="row align-items-center">
                <!-- Text Column -->
                <div class="col-lg-8" data-aos="fade-right" data-aos-duration="1000">
                    <h2 class="section-title">{{ __('messages.about') }}</h2>
                        @if (isset($about) && !empty($about->content))
                            {!! $about->content !!}
                        @else
                            {{ __('messages.no_data') }}
                        @endif
                    
                        
                    @if (isset($about) && !empty($about->file))
                        <a class="btn-custom mt-4" href="{{ asset('storage/about_files/' . $about->file) }}" download>
                            {{ __('messages.Download Company Profile') }}
                        </a>
                    @endif
                </div>

                <!-- Image Column -->
                <div class="col-lg-4 mb-4 mb-lg-0" data-aos="fade-left" data-aos-duration="1000">
                    <img src="{{ asset('storage/about_files/' . $about->main_image) }}" alt="About Us Image" class="img-fluid rounded">
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    @if($teams->count() > 0)
    <section class="team-section py-5">
        <div class="container">
            <h2 class="section-title mb-5" data-aos="fade-up" data-aos-duration="1000">{{ __('messages.Meet Our Team') }}</h2>
            <div class="row justify-content-start">
                <!-- Team Members -->
                @forelse ($teams as $team)
                    <div class="col-lg-3 col-md-3 col-sm-12 mb-4" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="{{ $loop->index * 100 }}">
                        <div class="team-member position-relative">
                            <img src="{{ asset('storage/team_images/' . $team->image) }}" alt="{{ $team->name }}" class="team-img">
                            <h3 data-aos="fade-right" data-aos-delay="300">{{ $team->localized_name }}</h3>
                            <p data-aos="fade-left" data-aos-delay="400">{{ $team->localized_position }}</p>
                        </div>
                    </div>
                @empty
                    <p>{{ __('messages.no_data') }}</p>
                @endforelse
            </div>
        </div>
    </section>
    @endif
    
    @include('layouts.clients')

    @include('layouts.cta')
@endsection