{% extends 'base.html' %}

{% block title %}{{ settings.site_name if settings else 'ScholarPress' }} - {{ settings.site_tagline if settings else 'Academic Research Publication' }}{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <h1>{{ settings.hero_title if settings and settings.hero_title else 'Publish Your Research with ScholarPress' }}</h1>
                <p class="lead mb-4">
                    {{ settings.hero_subtitle if settings and settings.hero_subtitle else 'Join thousands of researchers sharing their discoveries with the global scientific community.' }}
                </p>
                <div class="d-flex gap-3 flex-wrap">
                    <a href="{{ settings.hero_cta_link if settings and settings.hero_cta_link else url_for('submission.submit') }}" class="hero-cta">
                        <i class="fas fa-paper-plane me-2"></i>{{ settings.hero_cta_text if settings and settings.hero_cta_text else 'Submit Your Research' }}
                    </a>
                    <a href="{{ url_for('articles.list_articles') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-book-open me-2"></i>Browse Articles
                    </a>
                </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block text-center">
                {% if settings and settings.hero_image %}
                <img src="{{ url_for('main.uploaded_file', filename= settings.hero_image) }}" alt="Research" class="img-fluid" style="max-height: 350px;">
                {% else %}
                <i class="fas fa-microscope" style="font-size: 15rem; opacity: 0.3;"></i>
                {% endif %}
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="section">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title">Why Publish With Us</h2>
            <p class="section-subtitle">Discover the advantages of publishing your research with ScholarPress</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas {{ settings.feature1_icon if settings and settings.feature1_icon else 'fa-unlock-alt' }}"></i>
                    </div>
                    <h4>{{ settings.feature1_title if settings and settings.feature1_title else 'Open Access' }}</h4>
                    <p>{{ settings.feature1_description if settings and settings.feature1_description else 'Making research freely accessible to everyone worldwide, removing barriers to scientific knowledge.' }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas {{ settings.feature2_icon if settings and settings.feature2_icon else 'fa-users' }}"></i>
                    </div>
                    <h4>{{ settings.feature2_title if settings and settings.feature2_title else 'Expert Peer Review' }}</h4>
                    <p>{{ settings.feature2_description if settings and settings.feature2_description else 'Rigorous peer review process by leading experts ensuring high-quality research publication.' }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas {{ settings.feature3_icon if settings and settings.feature3_icon else 'fa-rocket' }}"></i>
                    </div>
                    <h4>{{ settings.feature3_title if settings and settings.feature3_title else 'Fast Publication' }}</h4>
                    <p>{{ settings.feature3_description if settings and settings.feature3_description else 'Streamlined publication process for timely dissemination of your research findings.' }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Latest Articles Section -->
<section class="section section-light">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h2 class="section-title mb-0">Latest Research</h2>
                <p class="text-muted mb-0">Discover the newest published articles</p>
            </div>
            <a href="{{ url_for('articles.list_articles') }}" class="btn btn-outline-primary">
                View All <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>
        
        {% if latest_articles %}
        <div class="row g-4">
            {% for article in latest_articles %}
            <div class="col-md-6 col-lg-4">
                <div class="article-card">
                    <span class="journal-badge">{{ article.journal.name }}</span>
                    
                    {% if article.is_open_access %}
                    <span class="open-access-badge ms-2">
                        <i class="fas fa-lock-open"></i> Open Access
                    </span>
                    {% endif %}
                    
                    <h3>
                        <a href="{{ url_for('articles.article_detail', slug=article.slug) }}">{{ article.title }}</a>
                    </h3>
                    
                    <p class="authors">
                        <i class="fas fa-users me-1"></i> {{ article.authors }}
                    </p>
                    
                    <p class="abstract">{{ article.abstract[:200] }}{% if article.abstract|length > 200 %}...{% endif %}</p>
                    
                    {% if article.tags %}
                    <div class="tags">
                        {% for tag in article.tags[:3] %}
                        <a href="{{ url_for('articles.articles_by_tag', slug=tag.slug) }}" class="tag">{{ tag.name }}</a>
                        {% endfor %}
                    </div>
                    {% endif %}
                    
                    <div class="meta">
                        <span><i class="fas fa-calendar me-1"></i> {{ article.published_date.strftime('%b %d, %Y') if article.published_date else '' }}</span>
                        <span><i class="fas fa-eye me-1"></i> {{ article.view_count }} views</span>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-book-open fa-3x text-muted mb-3"></i>
            <p class="text-muted">No articles published yet. Be the first to submit your research!</p>
            <a href="{{ url_for('submission.submit') }}" class="btn btn-primary">Submit Research</a>
        </div>
        {% endif %}
    </div>
</section>

<!-- Journals Section -->
{% if journals %}
<section class="section">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title">Our Journals</h2>
            <p class="section-subtitle">Explore our diverse collection of academic journals</p>
        </div>
        
        <div class="row g-4">
            {% for journal in journals[:4] %}
            <div class="col-md-6 col-lg-3">
                <div class="journal-card">
                    <div class="journal-card-cover">
                        {% if journal.cover_image %}
                        <img src="{{ url_for('main.uploaded_file', filename= journal.cover_image) }}" alt="{{ journal.name }}">
                        {% else %}
                        <i class="fas fa-journal-whills"></i>
                        {% endif %}
                    </div>
                    <div class="journal-card-body">
                        <h4>{{ journal.name }}</h4>
                        <p class="text-truncate-2">{{ journal.description[:100] if journal.description else 'Explore articles in this journal.' }}{% if journal.description and journal.description|length > 100 %}...{% endif %}</p>
                        <a href="{{ url_for('main.journal_detail', slug=journal.slug) }}" class="btn btn-sm btn-outline-primary">
                            View Journal <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        {% if journals|length > 4 %}
        <div class="text-center mt-4">
            <a href="{{ url_for('main.journals') }}" class="btn btn-outline-primary">View All Journals</a>
        </div>
        {% endif %}
    </div>
</section>
{% endif %}

<!-- About Section -->
<section class="section section-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                {% if settings and settings.about_image %}
                <img src="{{ url_for('main.uploaded_file', filename= settings.about_image) }}" alt="About Us" class="img-fluid rounded shadow">
                {% else %}
                <div class="bg-gradient-primary rounded p-5 text-center text-white">
                    <i class="fas fa-university fa-5x mb-3"></i>
                    <h3>Advancing Science Together</h3>
                </div>
                {% endif %}
            </div>
            <div class="col-lg-6">
                <h2 class="section-title">{{ settings.about_title if settings and settings.about_title else 'About ScholarPress' }}</h2>
                <p class="text-muted">
                    {{ settings.about_content if settings and settings.about_content else 'ScholarPress is dedicated to advancing scientific knowledge by providing an open, accessible platform for researchers to publish and discover high-quality academic work. Our commitment to open access ensures that research reaches the widest possible audience, accelerating scientific progress and innovation.' }}
                </p>
                <div class="row mt-4">
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <div class="bg-primary rounded-circle p-3 me-3">
                                <i class="fas fa-file-alt text-white"></i>
                            </div>
                            <div>
                                <h4 class="mb-0">{{ latest_articles|length if latest_articles else '0' }}+</h4>
                                <small class="text-muted">Articles</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <div class="bg-secondary rounded-circle p-3 me-3">
                                <i class="fas fa-book text-white"></i>
                            </div>
                            <div>
                                <h4 class="mb-0">{{ journals|length if journals else '0' }}</h4>
                                <small class="text-muted">Journals</small>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="{{ url_for('main.about') }}" class="btn btn-primary mt-4">Learn More About Us</a>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="section bg-gradient-primary text-white text-center">
    <div class="container">
        <h2 class="mb-3">Ready to Share Your Research?</h2>
        <p class="lead mb-4">Join our community of researchers and make your work accessible to the world.</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('submission.guidelines') }}" class="btn btn-outline-light btn-lg">
                <i class="fas fa-info-circle me-2"></i>Submission Guidelines
            </a>
        </div>
    </div>
</section>
{% endblock %}