{% extends "base.html" %}
{% block title %}{{ settings.APP_NAME }} — Discover Scientific Knowledge{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="hero-content">
            <h1>Discover scientific knowledge and stay connected to the world of science</h1>
            <p class="hero-subtitle">Share your research, collaborate with peers, and advance your career in the global scientific community.</p>
            {% if not user %}
            <a href="/register" class="btn btn-primary btn-lg">Join for Free</a>
            {% else %}
            <div class="hero-search">
                <form action="/search" method="get" class="search-form-hero">
                    <input type="text" name="q" placeholder="Search publications, questions, researchers..." class="search-input-hero">
                    <button type="submit" class="btn btn-primary">Search</button>
                </form>
            </div>
            {% endif %}
        </div>
    </div>
</section>

<!-- Fields Section -->
<section class="section section-fields">
    <div class="container">
        <h2 class="section-title">Explore Research Fields</h2>
        <p class="section-subtitle">Connect with your scientific community</p>
        <div class="fields-grid">
            {% for field in fields %}
            <a href="/field/{{ field.slug }}" class="field-card" style="border-top: 4px solid {{ field.color }}">
                <span class="field-icon">{{ field.icon or '📚' }}</span>
                <h3 class="field-name">{{ field.name }}</h3>
                <p class="field-desc">{{ field.description or '' }}</p>
            </a>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Recent Publications -->
<section class="section section-alt">
    <div class="container">
        <div class="section-header-row">
            <h2 class="section-title">Recent Publications</h2>
            <a href="/publications" class="btn btn-outline btn-sm">View All</a>
        </div>
        <div class="pub-grid">
            {% for pub in recent_pubs %}
            <div class="pub-card">
                <div class="pub-type-badge">{{ pub.publication_type }}</div>
                <h3 class="pub-title"><a href="/publications/{{ pub.id }}">{{ pub.title }}</a></h3>
                <div class="pub-meta">
                    <span class="pub-author">
                        {{ pub.author.full_name }}
                        {% if pub.author.is_verified %}<span class="verified-badge">✓</span>{% endif %}
                    </span>
                    {% if pub.field %}
                    <span class="pub-field" style="color: {{ pub.field.color }}">{{ pub.field.name }}</span>
                    {% endif %}
                </div>
                {% if pub.abstract %}
                <p class="pub-abstract">{{ pub.abstract[:150] }}{% if pub.abstract|length > 150 %}...{% endif %}</p>
                {% endif %}
                <div class="pub-stats">
                    <span>👁 {{ pub.view_count }}</span>
                    <span>📄 {{ pub.citation_count }} citations</span>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Recent Questions -->
<section class="section">
    <div class="container">
        <div class="section-header-row">
            <h2 class="section-title">Recent Questions</h2>
            <a href="/questions" class="btn btn-outline btn-sm">View All</a>
        </div>
        <div class="question-list-home">
            {% for q in recent_questions %}
            <div class="question-card">
                <div class="q-votes">
                    <span class="q-vote-count">{{ q.vote_count }}</span>
                    <span class="q-vote-label">votes</span>
                </div>
                <div class="q-answers {% if q.answer_count > 0 %}has-answers{% endif %}">
                    <span class="q-answer-count">{{ q.answer_count }}</span>
                    <span class="q-answer-label">answers</span>
                </div>
                <div class="q-content">
                    <h3><a href="/questions/{{ q.id }}">{{ q.title }}</a></h3>
                    <div class="q-meta">
                        <span>Asked by {{ q.author.full_name }}{% if q.author.is_verified %} <span class="verified-badge">✓</span>{% endif %}</span>
                        {% if q.field %}<span style="color: {{ q.field.color }}">{{ q.field.name }}</span>{% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="section section-cta">
    <div class="container" style="text-align: center;">
        <h2>Advance your research and join a community of scientists</h2>
        {% if not user %}
        <a href="/register" class="btn btn-primary btn-lg">Join for Free</a>
        {% else %}
        <a href="/publications/new" class="btn btn-primary btn-lg">Share Your Research</a>
        {% endif %}
    </div>
</section>

<!-- Structured Data for SEO -->
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "{{ settings.APP_NAME }}",
    "url": "{{ settings.APP_URL }}",
    "description": "{{ settings.APP_DESCRIPTION }}"
}
</script>
{% endblock %}