@extends('frontend.layouts.master')

@section('title', __('front.about.page_title') . ' - Novalynk')

@section('styles')
<style>
.team-card {
    height: 100%;
}

.team-photo-wrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(59, 130, 246, 0.12);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
    background: var(--light-blue);
}

.team-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-photo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: 3rem;
}
</style>
@endsection

@section('content')
@php
    $localizedAboutTitle = app()->isLocale('en') ? __('front.content.about.title') : ($settings['about_title'] ?? __('front.content.about.title'));
    $localizedAboutDescription = app()->isLocale('en') ? __('front.content.about.description') : ($settings['about_description'] ?? __('front.content.about.description'));
    $localizedAboutMission = app()->isLocale('en') ? __('front.content.about.mission') : ($settings['about_mission'] ?? __('front.content.about.mission'));
@endphp
<!-- Page Header -->
<section class="py-5 bg-light-custom">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center" data-aos="fade-up">
                <h1 class="section-title">{{ __('front.about.page_title') }}</h1>
                <p class="section-subtitle mx-auto">{{ __('front.about.page_subtitle') }}</p>
            </div>
        </div>
    </div>
</section>

<!-- About Section -->
<section class="section-padding">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6" data-aos="fade-right">
                <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop" alt="{{ __('front.about.image_alt') }}" class="img-fluid rounded-4">
            </div>
            <div class="col-lg-6" data-aos="fade-left">
                <h2 class="mb-4">{{ $localizedAboutTitle }}</h2>
                <p class="mb-4" style="color: var(--gray-600);">{{ $localizedAboutDescription }}</p>
                <p style="color: var(--gray-600);">{{ __('front.about.intro') }}</p>
                
                <div class="row mt-4 g-4">
                    <div class="col-6">
                        <div class="d-flex align-items-center gap-3">
                            <div style="width: 50px; height: 50px; background: var(--light-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fa-solid fa-rocket text-primary-custom"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold">{{ __('front.about.feature_integration_title') }}</h6>
                                <small style="color: var(--gray-500);">{{ __('front.about.feature_integration_label') }}</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center gap-3">
                            <div style="width: 50px; height: 50px; background: var(--light-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fa-solid fa-shield-halved text-primary-custom"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold">{{ __('front.about.feature_automation_title') }}</h6>
                                <small style="color: var(--gray-500);">{{ __('front.about.feature_automation_label') }}</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center gap-3">
                            <div style="width: 50px; height: 50px; background: var(--light-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fa-solid fa-users text-primary-custom"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold">{{ __('front.about.feature_scalability_title') }}</h6>
                                <small style="color: var(--gray-500);">{{ __('front.about.feature_scalability_label') }}</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center gap-3">
                            <div style="width: 50px; height: 50px; background: var(--light-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fa-solid fa-headset text-primary-custom"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold">{{ __('front.about.feature_connected_life_title') }}</h6>
                                <small style="color: var(--gray-500);">{{ __('front.about.feature_connected_life_label') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Mission Vision -->
<section class="section-padding bg-light-custom">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-6" data-aos="fade-up">
                <div class="card-custom p-5 h-100">
                    <div style="width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue)); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
                        <i class="fa-solid fa-eye text-white" style="font-size: 1.75rem;"></i>
                    </div>
                    <h3 class="mb-3">{{ __('front.about.vision_title') }}</h3>
                    <p style="color: var(--gray-600);">{{ __('front.about.vision_text') }}</p>
                </div>
            </div>
            <div class="col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="card-custom p-5 h-100">
                    <div style="width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue)); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
                        <i class="fa-solid fa-bullseye text-white" style="font-size: 1.75rem;"></i>
                    </div>
                    <h3 class="mb-3">{{ __('front.about.mission_title') }}</h3>
                    <p style="color: var(--gray-600);">{{ $localizedAboutMission }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Team Section -->
@if(count($teamMembers) > 0)
<section class="section-padding">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <h2 class="section-title">{{ __('front.about.team_title') }}</h2>
            <p class="section-subtitle mx-auto">{{ __('front.about.team_subtitle') }}</p>
        </div>
        <div class="row g-4 justify-content-center">
            @foreach($teamMembers as $member)
            <div class="col-md-6 col-lg-4" data-aos="fade-up">
                <div class="card-custom team-card p-4 text-center">
                    <div class="team-photo-wrapper">
                        @if($member->photo)
                        <img src="{{ Storage::url($member->photo) }}" alt="{{ $member->name }}" class="team-photo">
                        @else
                        <div class="team-photo-fallback">
                            <i class="fa-solid fa-user"></i>
                        </div>
                        @endif
                    </div>
                    <h4 class="mb-1">{{ $member->name }}</h4>
                    <p class="text-primary-custom mb-3">{{ $member->position }}</p>
                    @if($member->bio)
                    <p style="color: var(--gray-500); font-size: 0.9rem;">{{ $member->bio }}</p>
                    @endif
                    <div class="d-flex justify-content-center gap-3">
                        @if($member->linkedin)
                        <a href="{{ $member->linkedin }}" target="_blank" class="text-primary-custom"><i class="fa-brands fa-linkedin fa-lg"></i></a>
                        @endif
                        @if($member->twitter)
                        <a href="{{ $member->twitter }}" target="_blank" class="text-primary-custom"><i class="fa-brands fa-twitter fa-lg"></i></a>
                        @endif
                        @if($member->email)
                        <a href="mailto:{{ $member->email }}" class="text-primary-custom"><i class="fa-solid fa-envelope fa-lg"></i></a>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- CTA Section -->
<section class="cta-section section-padding">
    <div class="container">
        <div class="cta-content text-center">
            <h2 class="cta-title" data-aos="fade-up">{{ __('front.about.cta_title') }}</h2>
            <p class="cta-desc mx-auto" data-aos="fade-up">{{ __('front.about.cta_desc') }}</p>
            <a href="{{ route('contact') }}" class="btn btn-light btn-lg" data-aos="fade-up">
                {{ __('front.common.contact_us') }} <i class="fa-solid fa-arrow-right ms-2"></i>
            </a>
        </div>
    </div>
</section>
@endsection