{% extends "base.html" %}

{% block title %}{{ t('About') }} - {{ t('Your Business Name') }}{% endblock %}

{% block content %}
<!-- Page Header -->
<section class="bg-primary text-white py-5">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-8 mx-auto">
                <h1 class="display-4 fw-bold mb-3">{{ t('About Us') }}</h1>
                <p class="lead">{{ t('Learn more about our company, our mission, and the team behind our success.') }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Company Story -->
<section class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h2 class="display-6 fw-bold mb-4">{{ t('Our Story') }}</h2>
                <p class="lead text-muted mb-4">{{ t('Founded with a vision to provide exceptional services and build lasting relationships with our clients.') }}</p>
                <p class="mb-4">{{ t('We started as a small team with big dreams, determined to make a difference in the business world. Over the years, we have grown into a trusted partner for businesses of all sizes, helping them achieve their goals and overcome challenges.') }}</p>
                <p class="mb-4">{{ t('Our commitment to quality, innovation, and customer satisfaction has remained at the core of everything we do. We believe in building long-term partnerships based on trust, transparency, and mutual success.') }}</p>
                <div class="row g-3">
                    <div class="col-6">
                        <div class="text-center">
                            <h3 class="fw-bold text-primary">10+</h3>
                            <p class="text-muted mb-0">{{ t('Years Experience') }}</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center">
                            <h3 class="fw-bold text-primary">500+</h3>
                            <p class="text-muted mb-0">{{ t('Happy Clients') }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <div class="about-image">
                    <i class="bi bi-building display-1 text-primary opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Mission & Values -->
<section class="bg-light py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="display-6 fw-bold mb-3">{{ t('Our Mission & Values') }}</h2>
                <p class="lead text-muted">{{ t('We are guided by our core values and committed to our mission of delivering excellence.') }}</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="value-icon mb-3">
                            <i class="bi bi-bullseye text-primary display-4"></i>
                        </div>
                        <h4 class="fw-bold mb-3">{{ t('Our Mission') }}</h4>
                        <p class="text-muted">{{ t('To provide innovative, reliable, and cost-effective solutions that empower businesses to achieve their full potential and drive sustainable growth in an ever-evolving market.') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="value-icon mb-3">
                            <i class="bi bi-eye text-primary display-4"></i>
                        </div>
                        <h4 class="fw-bold mb-3">{{ t('Our Vision') }}</h4>
                        <p class="text-muted">{{ t('To be the leading provider of business solutions, recognized for our expertise, integrity, and commitment to client success across all industries.') }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row g-4 mt-4">
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="value-icon mb-3">
                        <i class="bi bi-award text-primary display-4"></i>
                    </div>
                    <h5 class="fw-bold">{{ t('Excellence') }}</h5>
                    <p class="text-muted">{{ t('We strive for excellence in everything we do, maintaining the highest standards of quality and professionalism.') }}</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="value-icon mb-3">
                        <i class="bi bi-heart text-primary display-4"></i>
                    </div>
                    <h5 class="fw-bold">{{ t('Integrity') }}</h5>
                    <p class="text-muted">{{ t('We conduct business with honesty, transparency, and ethical practices, building trust with our clients and partners.') }}</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="text-center p-4">
                    <div class="value-icon mb-3">
                        <i class="bi bi-lightbulb text-primary display-4"></i>
                    </div>
                    <h5 class="fw-bold">{{ t('Innovation') }}</h5>
                    <p class="text-muted">{{ t('We embrace new ideas and technologies to provide cutting-edge solutions that meet evolving business needs.') }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Team Section -->
<section class="py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="display-6 fw-bold mb-3">{{ t('Our Team') }}</h2>
                <p class="lead text-muted">{{ t('Meet the dedicated professionals who make our company successful.') }}</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm text-center">
                    <div class="card-body p-4">
                        <div class="team-member mb-3">
                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 120px; height: 120px;">
                                <i class="bi bi-person text-primary display-4"></i>
                            </div>
                        </div>
                        <h5 class="fw-bold">{{ t('John Doe') }}</h5>
                        <p class="text-muted mb-2">{{ t('CEO & Founder') }}</p>
                        <p class="small text-muted">{{ t('Experienced leader with a passion for innovation and business growth.') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm text-center">
                    <div class="card-body p-4">
                        <div class="team-member mb-3">
                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 120px; height: 120px;">
                                <i class="bi bi-person text-primary display-4"></i>
                            </div>
                        </div>
                        <h5 class="fw-bold">{{ t('Jane Smith') }}</h5>
                        <p class="text-muted mb-2">{{ t('Operations Manager') }}</p>
                        <p class="small text-muted">{{ t('Dedicated professional ensuring smooth operations and client satisfaction.') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm text-center">
                    <div class="card-body p-4">
                        <div class="team-member mb-3">
                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 120px; height: 120px;">
                                <i class="bi bi-person text-primary display-4"></i>
                            </div>
                        </div>
                        <h5 class="fw-bold">{{ t('Mike Johnson') }}</h5>
                        <p class="text-muted mb-2">{{ t('Technical Lead') }}</p>
                        <p class="small text-muted">{{ t('Expert in technical solutions and innovative problem-solving approaches.') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="card border-0 shadow-sm text-center">
                    <div class="card-body p-4">
                        <div class="team-member mb-3">
                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 120px; height: 120px;">
                                <i class="bi bi-person text-primary display-4"></i>
                            </div>
                        </div>
                        <h5 class="fw-bold">{{ t('Sarah Wilson') }}</h5>
                        <p class="text-muted mb-2">{{ t('Client Relations') }}</p>
                        <p class="small text-muted">{{ t('Committed to building strong relationships and ensuring client success.') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="bg-primary text-white py-5">
    <div class="container text-center">
        <h2 class="display-6 fw-bold mb-4">{{ t('Ready to Work With Us?') }}</h2>
        <p class="lead mb-4">{{ t('Let us help you achieve your business goals with our professional services and dedicated support.') }}</p>
        <a href="{{ url_for('contact') }}" class="btn btn-light btn-lg">{{ t('Get Started Today') }}</a>
    </div>
</section>
{% endblock %}