{% extends 'layout.twig' %}
{% block content %}
    <section class="hero">
        <div class="container">
            <h1>{{ brand.tagline }}</h1>
            <p class="hero-sub">Search the knowledge base or open a ticket — we're here to help.</p>
            <form action="{{ app_url('/kb/search') }}" method="get" class="hero-search" role="search">
                <input type="search" name="q" placeholder="Search the knowledge base…" autofocus>
                <button type="submit">Search</button>
            </form>
        </div>
    </section>

    {% if kb_enabled and categories %}
    <section class="container">
        <h2 class="section-title">Browse by topic</h2>
        <div class="card-grid">
            {% for c in categories %}
                <a class="card kb-card" href="{{ app_url('/kb/category/' ~ c.slug) }}">
                    <h3>{{ c.name }}</h3>
                    {% if c.description %}<p class="muted">{{ c.description }}</p>{% endif %}
                    <p class="small muted">{{ c.article_count }} article{{ c.article_count == 1 ? '' : 's' }}</p>
                </a>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <section class="container two-col">
        <div>
            <h2 class="section-title">Need a hand?</h2>
            <p>Open a support ticket and our team will get back to you. You can attach files and reply directly from your email inbox.</p>
            <a class="btn btn-primary" href="{{ app_url('/tickets/new') }}">Submit a Ticket</a>
        </div>
        {% if popular %}
        <div>
            <h2 class="section-title">Popular articles</h2>
            <ul class="link-list">
                {% for a in popular %}
                    <li><a href="{{ app_url('/kb/article/' ~ a.slug) }}">{{ a.title }}</a></li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </section>
{% endblock %}