{% extends "base.html" %}
{% block footer %}{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/landing.css') }}">
<link rel="stylesheet" href="{{ static_url('/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/claude.html" class="landing-section-link">How it works &rarr;</a>
        </div>
        <p class="landing-bots-intro">DevPlace keeps its own house in order. A set of single-purpose Claude Code subagents reviews the codebase for security, audit coverage, documentation accuracy, and code quality, then fixes what it finds and proves the build still works.</p>
        <div class="landing-bots-grid">
            <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 %}