{% extends 'base.html' %}

{% block title %}About Us | {{ settings.site_name }}{% endblock %}

{% block meta_description %}Learn about {{ settings.site_name }}'s mission to advance scientific research through quality publications, open access, and academic excellence.{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="display-4 fw-bold mb-4">About {{ settings.site_name if settings else 'ScholarPress' }}</h1>
                <p class="lead">
                    {{ about_content.subtitle if about_content else 'Advancing scientific knowledge through rigorous peer review, innovative publishing, and open access to research.' }}
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Mission Section -->
<section class="section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <img src="{{ about_content.mission_image if about_content else '/static/images/mission.jpg' }}" 
                     alt="Our Mission" class="img-fluid rounded shadow-sm"
                     onerror="this.src='https://via.placeholder.com/600x400?text=Our+Mission'">
            </div>
            <div class="col-lg-6">
                <h2 class="section-title">Our Mission</h2>
                {% if about_content and about_content.mission %}
                {{ about_content.mission|safe }}
                {% else %}
                <p class="lead">
                    To accelerate scientific progress by providing researchers with a trusted platform for 
                    sharing their discoveries with the global academic community.
                </p>
                <p>
                    We believe that scientific knowledge should be accessible to all. Through our commitment 
                    to rigorous peer review, ethical publishing practices, and open access options, we help 
                    researchers make their work visible to colleagues, policymakers, and the public.
                </p>
                <p>
                    Our journals span multiple disciplines, from fundamental sciences to applied research, 
                    ensuring that groundbreaking discoveries in every field find their audience.
                </p>
                {% endif %}
            </div>
        </div>
    </div>
</section>

<!-- Values Section -->
<section class="section-light">
    <div class="container">
        <h2 class="section-title text-center mb-5">Our Core Values</h2>
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 text-center border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-award"></i>
                        </div>
                        <h5 class="card-title">Excellence</h5>
                        <p class="card-text text-muted">
                            We maintain the highest standards in peer review and publication quality.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 text-center border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-balance-scale"></i>
                        </div>
                        <h5 class="card-title">Integrity</h5>
                        <p class="card-text text-muted">
                            Ethical publishing practices and transparency in all our operations.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 text-center border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-globe"></i>
                        </div>
                        <h5 class="card-title">Accessibility</h5>
                        <p class="card-text text-muted">
                            Making research available to everyone, everywhere in the world.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card h-100 text-center border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <h5 class="card-title">Innovation</h5>
                        <p class="card-text text-muted">
                            Continuously improving our platforms and services for researchers.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Statistics Section -->
<section class="section bg-primary text-white">
    <div class="container">
        <div class="row text-center">
            <div class="col-6 col-md-3 mb-4 mb-md-0">
                <div class="display-4 fw-bold">{{ stats.articles if stats else '1000+' }}</div>
                <p class="mb-0">Published Articles</p>
            </div>
            <div class="col-6 col-md-3 mb-4 mb-md-0">
                <div class="display-4 fw-bold">{{ stats.journals if stats else '15+' }}</div>
                <p class="mb-0">Academic Journals</p>
            </div>
            <div class="col-6 col-md-3">
                <div class="display-4 fw-bold">{{ stats.authors if stats else '500+' }}</div>
                <p class="mb-0">Contributing Authors</p>
            </div>
            <div class="col-6 col-md-3">
                <div class="display-4 fw-bold">{{ stats.countries if stats else '50+' }}</div>
                <p class="mb-0">Countries Reached</p>
            </div>
        </div>
    </div>
</section>

<!-- Editorial Process -->
<section class="section">
    <div class="container">
        <h2 class="section-title text-center mb-5">Our Editorial Process</h2>
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-marker bg-primary">1</div>
                        <div class="timeline-content">
                            <h5>Submission</h5>
                            <p class="text-muted mb-0">
                                Authors submit their manuscripts through our online portal. 
                                Our editorial team conducts an initial review for scope and quality.
                            </p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-marker bg-primary">2</div>
                        <div class="timeline-content">
                            <h5>Peer Review</h5>
                            <p class="text-muted mb-0">
                                Expert reviewers evaluate the manuscript for scientific rigor, 
                                methodology, and contribution to the field.
                            </p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-marker bg-primary">3</div>
                        <div class="timeline-content">
                            <h5>Revision</h5>
                            <p class="text-muted mb-0">
                                Authors receive feedback and have the opportunity to strengthen 
                                their work based on reviewer comments.
                            </p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-marker bg-primary">4</div>
                        <div class="timeline-content">
                            <h5>Acceptance & Publication</h5>
                            <p class="text-muted mb-0">
                                Accepted manuscripts undergo copyediting and are published 
                                with a DOI for permanent citation.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Team Section (Optional) -->
{% if team %}
<section class="section-light">
    <div class="container">
        <h2 class="section-title text-center mb-5">Our Leadership</h2>
        <div class="row g-4 justify-content-center">
            {% for member in team %}
            <div class="col-md-4 col-lg-3">
                <div class="card text-center border-0 shadow-sm">
                    <div class="card-body p-4">
                        <img src="{{ member.photo or 'https://via.placeholder.com/150' }}" 
                             alt="{{ member.name }}" class="rounded-circle mb-3" width="120" height="120">
                        <h5 class="card-title mb-1">{{ member.name }}</h5>
                        <p class="text-muted small mb-2">{{ member.role }}</p>
                        {% if member.bio %}
                        <p class="card-text small">{{ member.bio }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- CTA Section -->
<section class="section bg-secondary text-white">
    <div class="container text-center">
        <h2 class="mb-4">Ready to Publish Your Research?</h2>
        <p class="lead mb-4">
            Join thousands of researchers who trust us with their discoveries.
        </p>
        <div class="d-flex gap-3 justify-content-center flex-wrap">
            <a href="{{ url_for('submission.submit') }}" class="btn btn-light btn-lg">
                <i class="fas fa-paper-plane me-2"></i>Submit Your Research
            </a>
            <a href="{{ url_for('contact.contact') }}" class="btn btn-outline-light btn-lg">
                <i class="fas fa-envelope me-2"></i>Contact Us
            </a>
        </div>
    </div>
</section>
{% endblock %}