{% extends "base.html" %}
{% block footer %}{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/landing.css">
<link rel="stylesheet" href="/static/css/news.css">
{% endblock %}
{% block content %}
<div class="landing">
    {% if user %}
    <section class="landing-hero landing-hero-user">
        <div class="landing-welcome">
            {% set _user = user %}{% set _size = 80 %}{% set _size_class = "lg" %}{% include "_avatar_link.html" %}
            <div class="landing-welcome-text">
                <span class="landing-welcome-eyebrow">Welcome back,</span>
                <h1 class="landing-welcome-name">{{ user['username'] }}</h1>
            </div>
        </div>
        <a href="/feed" class="landing-cta"><span class="icon">&#x1F4DD;</span> Go to your feed &rarr;</a>

        <div class="landing-stats">
            <div class="landing-stat">
                <span class="landing-stat-value">{{ user_post_count }}</span>
                <span class="landing-stat-label">Posts</span>
            </div>
            <div class="landing-stat">
                <span class="landing-stat-value">{{ user.get('stars', 0) }}</span>
                <span class="landing-stat-label">Stars</span>
            </div>
            <div class="landing-stat">
                <span class="landing-stat-value">Lv {{ user.get('level', 1) }}</span>
                <span class="landing-stat-label">Level</span>
            </div>
        </div>

        <div class="landing-quicklinks">
            <a href="/feed">New post</a>
            <a href="/projects">Projects</a>
            <a href="/gists">Gists</a>
            <a href="/notifications">Notifications</a>
        </div>
    </section>
    {% else %}
    <section class="landing-hero">
        <h1>Devplace.net - The Developer <span>Social Network</span></h1>
        <p>Track industry shifts. Discover bold releases. Share what you're building in an open, uncensored environment.</p>
        <a href="/auth/signup" class="landing-cta"><span class="icon">&#x2728;</span> Join DevPlace Free</a>

        <div class="landing-features">
            <div class="landing-feature">
                <div class="landing-feature-icon">&#x1F511;</div>
                <h3>100% Free Forever</h3>
            </div>
            <div class="landing-feature">
                <div class="landing-feature-icon">&#x1F6AB;</div>
                <h3>Zero Ads</h3>
            </div>
            <div class="landing-feature">
                <div class="landing-feature-icon">&#x1F4AD;</div>
                <h3>No Censorship</h3>
            </div>
            <div class="landing-feature">
                <div class="landing-feature-icon">&#x1F4B3;</div>
                <h3>No Payments</h3>
            </div>
        </div>

        <div class="landing-auth-link">
            Already have an account? <a href="/auth/login">Log In</a>
        </div>
    </section>
    {% endif %}

    {% if landing_posts %}
    <section class="landing-section">
        <div class="landing-section-header">
            <h2>Latest Posts</h2>
            <a href="/feed" class="landing-section-link">Browse all posts &rarr;</a>
        </div>
        <div class="landing-posts-grid">
            {% for item in landing_posts %}
            <article class="landing-post-card">
                <div class="landing-post-header">
                    {% set _user = item.author %}
                    {% set _size = 28 %}
                    {% set _size_class = "sm" %}
                    {% include "_avatar_link.html" %}
                    <div class="landing-post-author-wrap">
                        {% set _user = item.author %}{% set _class = "landing-post-author" %}{% include "_user_link.html" %}
                        <span class="landing-post-time">{{ item.time_ago }}</span>
                    </div>
                    <span class="badge badge-{{ item.post['topic'] }}">{{ item.post['topic'] }}</span>
                </div>
                {% if item.post.get('title') %}
                <h3 class="landing-post-title">
                    <a href="/posts/{{ item.slug }}">{{ item.post['title'] }}</a>
                </h3>
                {% endif %}
                <div class="landing-post-content rendered-content" data-render>{{ item.post['content'][:200] }}{% if item.post['content']|length > 200 %}...{% endif %}</div>
                <div class="landing-post-footer">
                    <span class="landing-post-stat">+{{ item.stars }}</span>
                    <span class="landing-post-stat">&#x1F4AC; {{ item.comment_count }}</span>
                    <a href="/posts/{{ item.slug }}" class="landing-post-open">Open &rarr;</a>
                </div>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    {% if landing_articles %}
    <section class="landing-section">
        <div class="landing-section-header">
            <h2>Developer News</h2>
            <a href="/news" class="landing-section-link">View all news &rarr;</a>
        </div>
        <div class="news-grid">
            {% for item in landing_articles %}
            <article class="news-card">
                {% if item.image_url %}
                <div class="news-card-image">
                    <img src="{{ item.image_url }}" alt="{{ item.title }}" loading="lazy" class="image-fallback">
                </div>
                {% endif %}
                <div class="news-card-body">
                    <div class="news-card-meta">
                        <span class="news-source">{{ item.source_name }}</span>
                        {% if item.grade >= 9 %}
                        <span class="news-grade news-grade-top">Grade {{ item.grade }}</span>
                        {% elif item.grade >= 7 %}
                        <span class="news-grade news-grade-high">Grade {{ item.grade }}</span>
                        {% else %}
                        <span class="news-grade">Grade {{ item.grade }}</span>
                        {% endif %}
                        <span class="news-time">{{ item.time_ago }}</span>
                    </div>
                    <h3 class="news-card-title">
                        <a href="/news/{{ item.slug or item.uid }}">{{ item.title }}</a>
                    </h3>
                    {% if item.description %}
                    <p class="news-card-desc">{{ item.description[:250] }}{% if item.description|length > 250 %}...{% endif %}</p>
                    {% endif %}
                    <a href="{{ item.url }}" target="_blank" rel="noopener" class="news-read-link">
                        Read on {{ item.source_name }} &#x2197;
                    </a>
                </div>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <section class="landing-section landing-bots">
        <div class="landing-section-header">
            <h2>Self-Maintaining by Design</h2>
            <a href="/docs/maintenance-agents.html" class="landing-section-link">How it works &rarr;</a>
        </div>
        <p class="landing-bots-intro">DevPlace keeps its own house in order. A fleet of autonomous AI agents continuously reviews the codebase for security, audit coverage, documentation accuracy, and code quality, then fixes what it finds and proves the build still works. You talk to one conductor, Maestro, and it runs the rest.</p>
        <div class="landing-bots-grid">
            <div class="landing-bot-card landing-bot-card-lead">
                <div class="landing-bot-icon">&#x1F3BC;</div>
                <h3>Maestro</h3>
                <p>The conductor you talk to in plain language. It decides which agent to run and explains the result.</p>
            </div>
            <div class="landing-bot-card">
                <div class="landing-bot-icon">&#x1F6E1;</div>
                <h3>Security</h3>
                <p>Checks every route guard, ownership rule, and input limit across the app.</p>
            </div>
            <div class="landing-bot-card">
                <div class="landing-bot-icon">&#x1F4DC;</div>
                <h3>Audit</h3>
                <p>Confirms every action that changes data leaves an audit trail.</p>
            </div>
            <div class="landing-bot-card">
                <div class="landing-bot-icon">&#x1F4DA;</div>
                <h3>Docs</h3>
                <p>Keeps the documentation in step with the code, for the right audience.</p>
            </div>
            <div class="landing-bot-card">
                <div class="landing-bot-icon">&#x267B;</div>
                <h3>Quality</h3>
                <p>Removes duplication and enforces the project's naming and style rules.</p>
            </div>
            <div class="landing-bot-card">
                <div class="landing-bot-icon">&#x1F9EA;</div>
                <h3>Tests</h3>
                <p>Spots routes with no integration test and writes the missing coverage.</p>
            </div>
        </div>
    </section>

    <footer class="landing-footer">
        {% include "_footer_links.html" %}
    </footer>
</div>
{% endblock %}