@extends('layouts.app')

@section('content')
<!-- Page Header -->
<section class="page-header py-5 bg-gradient-primary">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="display-5 fw-bold text-white mb-3">{{ __('pdftools.about.title') }}</h1>
                <p class="lead text-white-50 mb-0">{{ __('pdftools.about.subtitle') }}</p>
            </div>
        </div>
    </div>
</section>

<!-- About Content -->
<section class="about-content py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-5">
                        <h2 class="fw-bold mb-4">{{ __('pdftools.about.mission_title') }}</h2>
                        <p class="lead">{{ __('pdftools.about.mission_text') }}</p>
                        
                        <hr class="my-5">
                        
                        <h2 class="fw-bold mb-4">{{ __('pdftools.about.story_title') }}</h2>
                        <p>{{ __('pdftools.about.story_text') }}</p>
                        
                        <hr class="my-5">
                        
                        <h2 class="fw-bold mb-4">{{ __('pdftools.about.values_title') }}</h2>
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="d-flex">
                                    <div class="flex-shrink-0">
                                        <div class="icon-box bg-primary bg-opacity-10 text-primary rounded-circle p-3">
                                            <i class="fas fa-lock fa-lg"></i>
                                        </div>
                                    </div>
                                    <div class="ms-3">
                                        <h5>{{ __('pdftools.about.value1_title') }}</h5>
                                        <p class="text-muted">{{ __('pdftools.about.value1_text') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex">
                                    <div class="flex-shrink-0">
                                        <div class="icon-box bg-success bg-opacity-10 text-success rounded-circle p-3">
                                            <i class="fas fa-bolt fa-lg"></i>
                                        </div>
                                    </div>
                                    <div class="ms-3">
                                        <h5>{{ __('pdftools.about.value2_title') }}</h5>
                                        <p class="text-muted">{{ __('pdftools.about.value2_text') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex">
                                    <div class="flex-shrink-0">
                                        <div class="icon-box bg-info bg-opacity-10 text-info rounded-circle p-3">
                                            <i class="fas fa-users fa-lg"></i>
                                        </div>
                                    </div>
                                    <div class="ms-3">
                                        <h5>{{ __('pdftools.about.value3_title') }}</h5>
                                        <p class="text-muted">{{ __('pdftools.about.value3_text') }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex">
                                    <div class="flex-shrink-0">
                                        <div class="icon-box bg-warning bg-opacity-10 text-warning rounded-circle p-3">
                                            <i class="fas fa-heart fa-lg"></i>
                                        </div>
                                    </div>
                                    <div class="ms-3">
                                        <h5>{{ __('pdftools.about.value4_title') }}</h5>
                                        <p class="text-muted">{{ __('pdftools.about.value4_text') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="stats-section py-5 bg-light">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-3 mb-4 mb-md-0">
                <div class="stat-item">
                    <div class="stat-number display-4 fw-bold text-primary">15+</div>
                    <div class="stat-label text-muted">{{ __('pdftools.about.stats.tools') }}</div>
                </div>
            </div>
            <div class="col-md-3 mb-4 mb-md-0">
                <div class="stat-item">
                    <div class="stat-number display-4 fw-bold text-success">1M+</div>
                    <div class="stat-label text-muted">{{ __('pdftools.about.stats.users') }}</div>
                </div>
            </div>
            <div class="col-md-3 mb-4 mb-md-0">
                <div class="stat-item">
                    <div class="stat-number display-4 fw-bold text-info">10M+</div>
                    <div class="stat-label text-muted">{{ __('pdftools.about.stats.files') }}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-item">
                    <div class="stat-number display-4 fw-bold text-warning">15</div>
                    <div class="stat-label text-muted">{{ __('pdftools.about.stats.languages') }}</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section py-5 bg-primary">
    <div class="container text-center">
        <h2 class="text-white fw-bold mb-3">{{ __('pdftools.about.cta_title') }}</h2>
        <p class="text-white-50 mb-4">{{ __('pdftools.about.cta_text') }}</p>
        <a href="{{ route('tools') }}" class="btn btn-light btn-lg">
            {{ __('pdftools.about.cta_button') }} <i class="fas fa-arrow-right ms-2"></i>
        </a>
    </div>
</section>
@endsection

@push('styles')
<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
@endpush