{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
    .hero-section {
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), #0c0c0c;
        color: #f5f5f5;
        padding: 100px 0;
        text-align: center;
        border-bottom: 5px solid #e10600;
    }
    .hero-section h1 { font-family: 'Oswald', sans-serif; font-size: 3.5rem; text-transform: uppercase; }
    .btn-cdpr { background-color: #e10600; color: #fff; border: none; padding: 10px 25px; transition: 0.3s; }
    .btn-cdpr:hover { background-color: #ff3b2f; }
</style>

<div class="hero-section">
    <div class="container">
        <h1>CDPR Fan Hub</h1>
        <p class="lead">Your destination for news and game insights.</p>
        <a href="{% url 'games_list' %}" class="btn btn-cdpr">Explore Games</a>
    </div>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-6">
            <h2 style="font-family: 'Oswald', sans-serif;">Latest Games</h2>
            {% for game in games %}
            <div class="card mb-3 bg-dark text-light">
                <div class="card-body">
                    <h5 class="card-title">{{ game.title }}</h5>
                    <a href="{% url 'game_detail' game.pk %}" class="btn btn-sm btn-outline-light">View</a>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="col-md-6">
            <h2 style="font-family: 'Oswald', sans-serif;">Recent News</h2>
            {% for post in news %}
            <div class="card mb-3 bg-light text-dark">
                <div class="card-body">
                    <h5 class="card-title">{{ post.title }}</h5>
                    <a href="{% url 'news_detail' post.pk %}" class="btn btn-sm btn-outline-dark">Read</a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}