{% extends "base.html" %}
{% block title %}About Workforce – Our Mission & Team{% endblock %}

{% block content %}
<div class="container py-5">
    <!-- Hero Section -->
    <div class="row align-items-center mb-5">
        <div class="col-lg-6">
            <h1 class="display-4 fw-bold">Connecting Talent with Opportunity</h1>
            <p class="lead text-muted">Workforce is on a mission to make hiring and job searching simple, fast, and fair for everyone.</p>
            <hr class="my-4">
            <p>Founded in 2024, we’ve grown into a trusted platform where thousands of job seekers and companies meet. We eliminate friction, reduce bias, and put control back into the hands of users.</p>
            <a href="{{ url_for('contact') }}" class="btn btn-primary btn-lg mt-3">Get in Touch <i class="fas fa-arrow-right ms-2"></i></a>
        </div>
        <div class="col-lg-6 text-center mt-4 mt-lg-0">
            <img src="{{ url_for('static', filename='cover.png') }}" alt="Workforce team" class="img-fluid rounded-3 shadow" style="max-height: 400px; width: auto;">
        </div>
    </div>

    <!-- Mission & Vision Cards -->
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm text-center">
                <div class="card-body p-4">
                    <i class="fas fa-bullseye fa-3x text-primary mb-3"></i>
                    <h3>Our Mission</h3>
                    <p class="text-muted">To empower every professional and company to find their perfect match effortlessly.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm text-center">
                <div class="card-body p-4">
                    <i class="fas fa-eye fa-3x text-primary mb-3"></i>
                    <h3>Our Vision</h3>
                    <p class="text-muted">A world where recruitment is transparent, inclusive, and technology‑driven.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm text-center">
                <div class="card-body p-4">
                    <i class="fas fa-heart fa-3x text-primary mb-3"></i>
                    <h3>Our Values</h3>
                    <p class="text-muted">Transparency · Efficiency · Security · Equality</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics / Impact -->
    <div class="bg-light rounded-3 p-5 mb-5 text-center">
        <h2 class="fw-bold mb-4">Workforce by the Numbers</h2>
        <div class="row g-4">
            <div class="col-md-3">
                <div class="display-4 fw-bold text-primary">10k+</div>
                <p class="text-muted">Job Seekers</p>
            </div>
            <div class="col-md-3">
                <div class="display-4 fw-bold text-primary">500+</div>
                <p class="text-muted">Jobs Posted</p>
            </div>
            <div class="col-md-3">
                <div class="display-4 fw-bold text-primary">200+</div>
                <p class="text-muted">Companies</p>
            </div>
            <div class="col-md-3">
                <div class="display-4 fw-bold text-primary">98%</div>
                <p class="text-muted">Satisfaction Rate</p>
            </div>
        </div>
    </div>

    <!-- Team Section -->
    <h2 class="text-center fw-bold mb-4">Meet the Team Behind Workforce</h2>
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card text-center border-0 shadow-sm">
                <div class="card-body">
                    <i class="fas fa-user-circle fa-4x text-secondary mb-3"></i>
                    <h5 class="card-title">John Doe</h5>
                    <p class="text-muted">CEO & Founder</p>
                    <p>Former recruitment specialist with 15 years of experience.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-center border-0 shadow-sm">
                <div class="card-body">
                    <i class="fas fa-user-circle fa-4x text-secondary mb-3"></i>
                    <h5 class="card-title">Jane Smith</h5>
                    <p class="text-muted">CTO</p>
                    <p>Tech leader passionate about building scalable platforms.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-center border-0 shadow-sm">
                <div class="card-body">
                    <i class="fas fa-user-circle fa-4x text-secondary mb-3"></i>
                    <h5 class="card-title">Emily Johnson</h5>
                    <p class="text-muted">Head of Product</p>
                    <p>Designing intuitive experiences for job seekers and employers.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Call to Action -->
    <div class="text-center bg-primary text-white p-5 rounded-3">
        <h2 class="fw-bold">Ready to transform your career or hiring?</h2>
        <p class="lead">Join Workforce today – it’s free for job seekers.</p>
        <a href="{{ url_for('register') }}" class="btn btn-light btn-lg mt-2">Get Started <i class="fas fa-arrow-right ms-2"></i></a>
    </div>
</div>
{% endblock %}