@extends('layouts.app')

@section('title', __('About Us'))

@section('content')
    <div class="about-page">
        <!-- Hero Section -->
        <section class="hero-section bg-primary text-white py-5">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <h1 class="display-4 fw-bold mb-4">{{ __('About Our Company') }}</h1>
                        <p class="lead mb-4">
                            {{ __('We are a leading eCommerce platform dedicated to providing our customers with the best products and exceptional service. Our mission is to make online shopping easy, secure, and enjoyable for everyone.') }}
                        </p>
                        <div class="hero-stats">
                            <div class="row">
                                <div class="col-6 col-md-3 mb-3">
                                    <div class="stat-item">
                                        <h3 class="h2 fw-bold">10K+</h3>
                                        <small>{{ __('Happy Customers') }}</small>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3 mb-3">
                                    <div class="stat-item">
                                        <h3 class="h2 fw-bold">5K+</h3>
                                        <small>{{ __('Products') }}</small>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3 mb-3">
                                    <div class="stat-item">
                                        <h3 class="h2 fw-bold">50+</h3>
                                        <small>{{ __('Categories') }}</small>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3 mb-3">
                                    <div class="stat-item">
                                        <h3 class="h2 fw-bold">24/7</h3>
                                        <small>{{ __('Support') }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 text-center">
                        <div class="hero-image">
                            <i class="fas fa-store fa-10x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="bg-light py-3">
            <div class="container">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('home') }}">{{ __('Home') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ __('About Us') }}
                    </li>
                </ol>
            </div>
        </nav>

        <!-- Our Story Section -->
        <section class="py-5">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 mb-4 mb-lg-0">
                        <div class="story-image">
                            <div class="bg-light rounded p-5 text-center">
                                <i class="fas fa-history fa-5x text-primary mb-3"></i>
                                <h4>{{ __('Our Journey') }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <h2 class="h3 mb-4">{{ __('Our Story') }}</h2>
                        <p class="text-muted mb-3">
                            {{ __('Founded with a vision to revolutionize online shopping, we started as a small team of passionate entrepreneurs who believed in the power of technology to connect people with the products they love.') }}
                        </p>
                        <p class="text-muted mb-3">
                            {{ __('Today, we have grown into a trusted platform serving thousands of customers across the region, offering a wide range of high-quality products with competitive prices and exceptional customer service.') }}
                        </p>
                        <p class="text-muted mb-4">
                            {{ __('Our commitment to innovation, quality, and customer satisfaction drives everything we do, and we continue to evolve to meet the changing needs of our customers.') }}
                        </p>

                        <div class="d-flex align-items-center">
                            <a href="{{ route('contact') }}" class="btn btn-primary me-3">
                                {{ __('Contact Us') }}
                            </a>
                            <a href="{{ route('products.index') }}" class="btn btn-outline-primary">
                                {{ __('Shop Now') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Our Values Section -->
        <section class="py-5 bg-light">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="h3 mb-3">{{ __('Our Values') }}</h2>
                    <p class="text-muted">{{ __('The principles that guide everything we do') }}</p>
                </div>

                <div class="row">
                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="value-card text-center h-100">
                            <div class="value-icon mb-3">
                                <i class="fas fa-shield-alt fa-3x text-primary"></i>
                            </div>
                            <h4 class="h5 mb-3">{{ __('Trust & Security') }}</h4>
                            <p class="text-muted">
                                {{ __('We prioritize the security of our customers\' data and transactions with state-of-the-art encryption and security measures.') }}
                            </p>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="value-card text-center h-100">
                            <div class="value-icon mb-3">
                                <i class="fas fa-gem fa-3x text-primary"></i>
                            </div>
                            <h4 class="h5 mb-3">{{ __('Quality Products') }}</h4>
                            <p class="text-muted">
                                {{ __('We carefully curate our product selection to ensure our customers receive only the highest quality items from trusted brands.') }}
                            </p>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="value-card text-center h-100">
                            <div class="value-icon mb-3">
                                <i class="fas fa-heart fa-3x text-primary"></i>
                            </div>
                            <h4 class="h5 mb-3">{{ __('Customer First') }}</h4>
                            <p class="text-muted">
                                {{ __('Our customers are at the heart of everything we do. We strive to exceed expectations with exceptional service and support.') }}
                            </p>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="value-card text-center h-100">
                            <div class="value-icon mb-3">
                                <i class="fas fa-rocket fa-3x text-primary"></i>
                            </div>
                            <h4 class="h5 mb-3">{{ __('Innovation') }}</h4>
                            <p class="text-muted">
                                {{ __('We continuously invest in technology and innovation to improve the shopping experience and stay ahead of trends.') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Team Section -->
        <section class="py-5">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="h3 mb-3">{{ __('Meet Our Team') }}</h2>
                    <p class="text-muted">{{ __('The passionate people behind our success') }}</p>
                </div>

                <div class="row justify-content-center">
                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="team-member text-center">
                            <div class="member-avatar mb-3">
                                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center text-white" style="width: 120px; height: 120px; margin: 0 auto;">
                                    <i class="fas fa-user fa-3x"></i>
                                </div>
                            </div>
                            <h5>{{ __('Ahmed Al-Rashid') }}</h5>
                            <p class="text-muted small">{{ __('Chief Executive Officer') }}</p>
                            <div class="social-links">
                                <a href="#" class="text-primary me-2"><i class="fab fa-linkedin"></i></a>
                                <a href="#" class="text-primary me-2"><i class="fab fa-twitter"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="team-member text-center">
                            <div class="member-avatar mb-3">
                                <div class="bg-success rounded-circle d-flex align-items-center justify-content-center text-white" style="width: 120px; height: 120px; margin: 0 auto;">
                                    <i class="fas fa-user fa-3x"></i>
                                </div>
                            </div>
                            <h5>{{ __('Sarah Johnson') }}</h5>
                            <p class="text-muted small">{{ __('Chief Technology Officer') }}</p>
                            <div class="social-links">
                                <a href="#" class="text-primary me-2"><i class="fab fa-linkedin"></i></a>
                                <a href="#" class="text-primary me-2"><i class="fab fa-github"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="team-member text-center">
                            <div class="member-avatar mb-3">
                                <div class="bg-info rounded-circle d-flex align-items-center justify-content-center text-white" style="width: 120px; height: 120px; margin: 0 auto;">
                                    <i class="fas fa-user fa-3x"></i>
                                </div>
                            </div>
                            <h5>{{ __('Mohammed Hassan') }}</h5>
                            <p class="text-muted small">{{ __('Head of Marketing') }}</p>
                            <div class="social-links">
                                <a href="#" class="text-primary me-2"><i class="fab fa-linkedin"></i></a>
                                <a href="#" class="text-primary me-2"><i class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Why Choose Us Section -->
        <section class="py-5 bg-light">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="h3 mb-3">{{ __('Why Choose Us') }}</h2>
                    <p class="text-muted">{{ __('What makes us different from the competition') }}</p>
                </div>

                <div class="row">
                    <div class="col-lg-4 mb-4">
                        <div class="feature-item d-flex">
                            <div class="feature-icon me-3">
                                <i class="fas fa-shipping-fast fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>{{ __('Fast Delivery') }}</h5>
                                <p class="text-muted mb-0">{{ __('Quick and reliable delivery to your doorstep within 24-48 hours.') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 mb-4">
                        <div class="feature-item d-flex">
                            <div class="feature-icon me-3">
                                <i class="fas fa-undo fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>{{ __('Easy Returns') }}</h5>
                                <p class="text-muted mb-0">{{ __('Hassle-free returns within 30 days with full refund guarantee.') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 mb-4">
                        <div class="feature-item d-flex">
                            <div class="feature-icon me-3">
                                <i class="fas fa-headset fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>{{ __('24/7 Support') }}</h5>
                                <p class="text-muted mb-0">{{ __('Round-the-clock customer support to help you with any questions.') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 mb-4">
                        <div class="feature-item d-flex">
                            <div class="feature-icon me-3">
                                <i class="fas fa-lock fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>{{ __('Secure Payments') }}</h5>
                                <p class="text-muted mb-0">{{ __('Your payments are protected with bank-level security encryption.') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 mb-4">
                        <div class="feature-item d-flex">
                            <div class="feature-icon me-3">
                                <i class="fas fa-star fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>{{ __('Premium Quality') }}</h5>
                                <p class="text-muted mb-0">{{ __('All products are carefully selected and quality-tested before shipping.') }}</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 mb-4">
                        <div class="feature-item d-flex">
                            <div class="feature-icon me-3">
                                <i class="fas fa-tags fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h5>{{ __('Best Prices') }}</h5>
                                <p class="text-muted mb-0">{{ __('Competitive prices with regular discounts and special offers.') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Call to Action Section -->
        <section class="py-5 bg-primary text-white">
            <div class="container text-center">
                <h2 class="h3 mb-3">{{ __('Ready to Start Shopping?') }}</h2>
                <p class="lead mb-4">{{ __('Join thousands of satisfied customers and discover amazing products at great prices.') }}</p>
                <div class="cta-buttons">
                    <a href="{{ route('products.index') }}" class="btn btn-light btn-lg me-3">
                        <i class="fas fa-shopping-bag me-2"></i>
                        {{ __('Browse Products') }}
                    </a>
                    <a href="{{ route('categories.index') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-th-large me-2"></i>
                        {{ __('View Categories') }}
                    </a>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('styles')
    <style>
        .hero-section {
            background: linear-gradient(135deg, var(--bs-primary) 0%, #0056b3 100%);
        }

        .stat-item {
            text-align: center;
        }

        .stat-item h3 {
            color: white;
            margin-bottom: 0.25rem;
        }

        .stat-item small {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.875rem;
        }

        .hero-image {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        .value-card {
            background: white;
            padding: 2rem;
            border-radius: 0.5rem;
            border: 1px solid #e9ecef;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .value-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .feature-item {
            padding: 1.5rem;
            background: white;
            border-radius: 0.5rem;
            height: 100%;
            transition: transform 0.2s ease;
        }

        .feature-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .team-member {
            padding: 1.5rem;
            border-radius: 0.5rem;
            transition: transform 0.3s ease;
        }

        .team-member:hover {
            transform: translateY(-5px);
        }

        .social-links a {
            font-size: 1.25rem;
            transition: color 0.2s ease;
        }

        .social-links a:hover {
            color: var(--bs-primary) !important;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .hero-section .display-4 {
                font-size: 2rem;
            }

            .stat-item h3 {
                font-size: 1.5rem;
            }

            .value-card, .feature-item {
                padding: 1rem;
            }

            .cta-buttons .btn {
                display: block;
                width: 100%;
                margin-bottom: 1rem;
            }

            .cta-buttons .btn:last-child {
                margin-bottom: 0;
            }
        }
    </style>
@endpush