{% extends 'base/base.html' %}

{% block title %}About Us | PRACA{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="about-hero text-white py-5" style="background-color: var(--color-primary);">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="display-4 fw-bold mb-4">About PRACA</h1>
                <p class="lead">Connecting filmmakers with the equipment and services they need to bring their vision to life.</p>
            </div>
        </div>
    </div>
</section>

<!-- About Content -->
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm mb-5" style="background-color: var(--color-light); border: 1px solid rgba(0,0,0,0.05);">
                <div class="card-body p-5" style="color: var(--color-text);">
                    <h2 class="h3 mb-4">Our Story</h2>
                    <p class="lead">PRACA was born out of a simple idea: to make film production more accessible and collaborative.</p>
                    
                    <p>In today's fast-paced media landscape, filmmakers often struggle to find affordable equipment and reliable services. At the same time, equipment owners and service providers need better ways to connect with potential clients. PRACA bridges this gap by creating a trusted marketplace for the film production community.</p>
                    
                    <h3 class="h4 mt-5 mb-3">Our Mission</h3>
                    <p>Our mission is to empower filmmakers by providing a seamless platform to discover, book, and manage production equipment and services. We believe in fostering a collaborative community where creativity can thrive without the traditional barriers to entry.</p>
                    
                    <h3 class="h4 mt-5 mb-3">Why Choose PRACA?</h3>
                    <div class="row mt-4">
                        <div class="col-md-6 mb-4">
                            <div class="d-flex">
                                <div class="me-3" style="color: var(--color-secondary);">
                                    <i class="fas fa-shield-alt fa-2x"></i>
                                </div>
                                <div>
                                    <h4 class="h5">Secure Platform</h4>
                                    <p class="mb-0" style="color: var(--color-text-light);">Verified users and secure transactions for peace of mind.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="d-flex">
                                <div class="me-3" style="color: var(--color-secondary);">
                                    <i class="fas fa-search-dollar fa-2x"></i>
                                </div>
                                <div>
                                    <h4 class="h5">Competitive Pricing</h4>
                                    <p class="mb-0" style="color: var(--color-text-light);">Find the best deals on equipment and services in your area.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="d-flex">
                                <div class="me-3" style="color: var(--color-secondary);">
                                    <i class="fas fa-headset fa-2x"></i>
                                </div>
                                <div>
                                    <h4 class="h5">Dedicated Support</h4>
                                    <p class="mb-0" style="color: var(--color-text-light);">Our team is here to help you with any questions or issues.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="d-flex">
                                <div class="me-3" style="color: var(--color-secondary);">
                                    <i class="fas fa-users fa-2x"></i>
                                </div>
                                <div>
                                    <h4 class="h5">Growing Community</h4>
                                    <p class="mb-0" style="color: var(--color-text-light);">Join thousands of filmmakers and production professionals.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <h3 class="h4 mt-5 mb-3">Get in Touch</h3>
                    <p>Have questions or feedback? We'd love to hear from you!</p>
                    <p class="mb-0">
                        <a href="mailto:info@praca.com" class="btn me-2" style="border-color: var(--color-secondary); color: var(--color-secondary);">
                            <i class="fas fa-envelope me-2"></i>Email Us
                        </a>
                        <a href="#" class="btn" style="border-color: var(--color-primary); color: var(--color-primary);">
                            <i class="fas fa-comment me-2"></i>Live Chat
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.about-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #122c4d 100%);
    padding: 5rem 0;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
    opacity: 0.5;
}

.card {
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}

.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(255, 107, 53, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.feature-icon i {
    font-size: 1.75rem;
    color: var(--color-secondary);
}

@media (max-width: 767.98px) {
    .about-hero {
        padding: 3rem 0;
    }
    
    .card-body {
        padding: 2rem !important;
    }
}
</style>
{% endblock %}