@extends('layouts.app')

@section('content')
<!-- Hero Section -->
<section class="hero-section py-5 bg-gradient-primary">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <h1 class="display-4 fw-bold text-white mb-4">
                    {{ __('pdftools.hero.title') }}
                </h1>
                <p class="lead text-white-50 mb-4">
                    {{ __('pdftools.hero.subtitle') }}
                </p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="{{ route('tools') }}" class="btn btn-light btn-lg">
                        <i class="fas fa-tools me-2"></i> {{ __('pdftools.hero.cta_tools') }}
                    </a>
                    <a href="{{ route('compress.index') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-compress-arrows-alt me-2"></i> {{ __('pdftools.hero.cta_compress') }}
                    </a>
                </div>
                
                <!-- Stats -->
                <div class="row mt-5 text-white">
                    <div class="col-4 text-center">
                        <div class="stat-number fw-bold">{{ number_format($stats['files_processed'] / 1000000, 1) }}M+</div>
                        <div class="stat-label small">{{ __('pdftools.hero.stats.files') }}</div>
                    </div>
                    <div class="col-4 text-center">
                        <div class="stat-number fw-bold">{{ $stats['tools_count'] }}+</div>
                        <div class="stat-label small">{{ __('pdftools.hero.stats.tools') }}</div>
                    </div>
                    <div class="col-4 text-center">
                        <div class="stat-number fw-bold">{{ $stats['satisfaction'] }}%</div>
                        <div class="stat-label small">{{ __('pdftools.hero.stats.satisfaction') }}</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-image text-center">
                    <img src="{{ asset('images/hero-illustration.svg') }}" alt="PDF Tools" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Popular Tools Section -->
<section class="popular-tools py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">{{ __('pdftools.popular.title') }}</h2>
            <p class="text-muted">{{ __('pdftools.popular.subtitle') }}</p>
        </div>
        
        <div class="row g-4">
            @foreach($popularTools as $tool)
            <div class="col-lg-3 col-md-4 col-sm-6">
                <a href="{{ route($tool['route']) }}" class="tool-card text-decoration-none">
                    <div class="card h-100 border-0 shadow-sm hover-shadow-lg transition-all">
                        <div class="card-body text-center p-4">
                            <div class="tool-icon mb-3">
                                <i class="fas {{ $tool['icon'] }} fa-3x text-{{ $tool['color'] }}"></i>
                            </div>
                            <h5 class="card-title text-dark">{{ $tool['name'] }}</h5>
                            <p class="card-text text-muted small">{{ $tool['description'] }}</p>
                            @if($tool['badge'])
                            <span class="badge bg-{{ $tool['color'] }}">{{ $tool['badge'] }}</span>
                            @endif
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
        
        <div class="text-center mt-4">
            <a href="{{ route('tools') }}" class="btn btn-primary">
                {{ __('pdftools.popular.view_all') }} <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="features-section py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">{{ __('pdftools.features.title') }}</h2>
            <p class="text-muted">{{ __('pdftools.features.subtitle') }}</p>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="feature-item d-flex">
                    <div class="feature-icon flex-shrink-0">
                        <div class="icon-box bg-primary bg-opacity-10 text-primary rounded-circle p-3">
                            <i class="fas fa-bolt fa-2x"></i>
                        </div>
                    </div>
                    <div class="feature-content ms-3">
                        <h5>{{ __('pdftools.features.fast.title') }}</h5>
                        <p class="text-muted">{{ __('pdftools.features.fast.description') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-item d-flex">
                    <div class="feature-icon flex-shrink-0">
                        <div class="icon-box bg-success bg-opacity-10 text-success rounded-circle p-3">
                            <i class="fas fa-shield-alt fa-2x"></i>
                        </div>
                    </div>
                    <div class="feature-content ms-3">
                        <h5>{{ __('pdftools.features.secure.title') }}</h5>
                        <p class="text-muted">{{ __('pdftools.features.secure.description') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-item d-flex">
                    <div class="feature-icon flex-shrink-0">
                        <div class="icon-box bg-info bg-opacity-10 text-info rounded-circle p-3">
                            <i class="fas fa-gem fa-2x"></i>
                        </div>
                    </div>
                    <div class="feature-content ms-3">
                        <h5>{{ __('pdftools.features.quality.title') }}</h5>
                        <p class="text-muted">{{ __('pdftools.features.quality.description') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-item d-flex">
                    <div class="feature-icon flex-shrink-0">
                        <div class="icon-box bg-warning bg-opacity-10 text-warning rounded-circle p-3">
                            <i class="fas fa-user-check fa-2x"></i>
                        </div>
                    </div>
                    <div class="feature-content ms-3">
                        <h5>{{ __('pdftools.features.easy.title') }}</h5>
                        <p class="text-muted">{{ __('pdftools.features.easy.description') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-item d-flex">
                    <div class="feature-icon flex-shrink-0">
                        <div class="icon-box bg-danger bg-opacity-10 text-danger rounded-circle p-3">
                            <i class="fas fa-cloud fa-2x"></i>
                        </div>
                    </div>
                    <div class="feature-content ms-3">
                        <h5>{{ __('pdftools.features.cloud.title') }}</h5>
                        <p class="text-muted">{{ __('pdftools.features.cloud.description') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="feature-item d-flex">
                    <div class="feature-icon flex-shrink-0">
                        <div class="icon-box bg-secondary bg-opacity-10 text-secondary rounded-circle p-3">
                            <i class="fas fa-globe fa-2x"></i>
                        </div>
                    </div>
                    <div class="feature-content ms-3">
                        <h5>{{ __('pdftools.features.universal.title') }}</h5>
                        <p class="text-muted">{{ __('pdftools.features.universal.description') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- How It Works Section -->
<section class="how-it-works py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">{{ __('pdftools.how_it_works.title') }}</h2>
            <p class="text-muted">{{ __('pdftools.how_it_works.subtitle') }}</p>
        </div>
        
        <div class="row">
            <div class="col-md-4 text-center mb-4 mb-md-0">
                <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                    <span class="fw-bold fs-4">1</span>
                </div>
                <h5>{{ __('pdftools.how_it_works.step1.title') }}</h5>
                <p class="text-muted">{{ __('pdftools.how_it_works.step1.description') }}</p>
            </div>
            
            <div class="col-md-4 text-center mb-4 mb-md-0">
                <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                    <span class="fw-bold fs-4">2</span>
                </div>
                <h5>{{ __('pdftools.how_it_works.step2.title') }}</h5>
                <p class="text-muted">{{ __('pdftools.how_it_works.step2.description') }}</p>
            </div>
            
            <div class="col-md-4 text-center">
                <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                    <span class="fw-bold fs-4">3</span>
                </div>
                <h5>{{ __('pdftools.how_it_works.step3.title') }}</h5>
                <p class="text-muted">{{ __('pdftools.how_it_works.step3.description') }}</p>
            </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.cta.title') }}</h2>
        <p class="text-white-50 mb-4">{{ __('pdftools.cta.subtitle') }}</p>
        <a href="{{ route('tools') }}" class="btn btn-light btn-lg">
            {{ __('pdftools.cta.button') }} <i class="fas fa-arrow-right ms-2"></i>
        </a>
    </div>
</section>

<!-- Testimonials Section -->
<section class="testimonials py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">{{ __('pdftools.testimonials.title') }}</h2>
            <p class="text-muted">{{ __('pdftools.testimonials.subtitle') }}</p>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <div class="mb-3 text-warning">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <p class="card-text">"{{ __('pdftools.testimonials.1.text') }}"</p>
                        <div class="d-flex align-items-center mt-3">
                            <div class="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <span>JD</span>
                            </div>
                            <div>
                                <h6 class="mb-0">{{ __('pdftools.testimonials.1.name') }}</h6>
                                <small class="text-muted">{{ __('pdftools.testimonials.1.role') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <div class="mb-3 text-warning">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <p class="card-text">"{{ __('pdftools.testimonials.2.text') }}"</p>
                        <div class="d-flex align-items-center mt-3">
                            <div class="avatar bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <span>SM</span>
                            </div>
                            <div>
                                <h6 class="mb-0">{{ __('pdftools.testimonials.2.name') }}</h6>
                                <small class="text-muted">{{ __('pdftools.testimonials.2.role') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <div class="mb-3 text-warning">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <p class="card-text">"{{ __('pdftools.testimonials.3.text') }}"</p>
                        <div class="d-flex align-items-center mt-3">
                            <div class="avatar bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <span>AK</span>
                            </div>
                            <div>
                                <h6 class="mb-0">{{ __('pdftools.testimonials.3.name') }}</h6>
                                <small class="text-muted">{{ __('pdftools.testimonials.3.role') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

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

.hero-section {
    min-height: 600px;
    display: flex;
    align-items: center;
}

.stat-number {
    font-size: 2rem;
}

.tool-card {
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tool-card:hover {
    transform: translateY(-5px);
}

.hover-shadow-lg:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

.transition-all {
    transition: all 0.3s ease;
}

.feature-item {
    padding: 1.5rem;
    background: white;
    border-radius: 0.5rem;
    height: 100%;
}

.step-number {
    box-shadow: 0 0 0 10px rgba(102, 126, 234, 0.1);
}
</style>
@endpush