{% extends "base.html" %}
{% block title %}3D-Druck-AG{% endblock %}

{% block content %}
<div style="text-align: center; margin-bottom: 2rem;">
    <h1 style="font-size: 2rem;">3D-Druck-AG</h1>
    <p style="color: var(--text-light); font-size: 1.1rem;">
        Vom fertigen 3D-Modell zum eigenen Druck &mdash; Schritt fuer Schritt.
    </p>
</div>

<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 1000px; margin: 0 auto;">

    {% if session.profil_id %}
    <a href="/cockpit" class="card bereich-card" style="text-decoration:none; color:inherit; border-top: 5px solid var(--primary); text-align:center; padding: 2.5rem 1.5rem;">
        <div style="font-size: 3.5rem; margin-bottom: 0.5rem;">{{ tier_emoji(session.get('tier','')) }}</div>
        <h2 style="color: var(--primary);">Dein Cockpit</h2>
        <p style="margin: 0.8rem 0;">Projekt, Druckauftraege, Slots &mdash; alles auf einen Blick.</p>
        <span class="btn btn-primary">Zum Cockpit</span>
    </a>
    {% else %}
    <a href="/login" class="card bereich-card" style="text-decoration:none; color:inherit; border-top: 5px solid var(--primary); text-align:center; padding: 2.5rem 1.5rem;">
        <div style="font-size: 3.5rem; margin-bottom: 0.5rem;">&#x1F512;</div>
        <h2 style="color: var(--primary);">Login</h2>
        <p style="margin: 0.8rem 0;">Vorname &middot; Tier-Icon &middot; PIN. Danach siehst du deinen Stand und kannst Drucker reservieren.</p>
        <span class="btn btn-primary">Einloggen</span>
    </a>
    {% endif %}

    <a href="/lektionen" class="card bereich-card" style="text-decoration:none; color:inherit; border-top: 5px solid var(--success); text-align:center; padding: 2.5rem 1.5rem;">
        <div style="font-size: 3.5rem; margin-bottom: 0.5rem;">&#x1F4DA;</div>
        <h2 style="color: var(--success);">Lektionen</h2>
        <p style="margin: 0.8rem 0;">L1 Drucker-Kennenlernen &middot; L2 3D-Modell drucken &middot; L3 Customizer &middot; danach frei.</p>
        <span class="btn" style="background: var(--success); color: white;">Lektionen ansehen</span>
    </a>

    <a href="/drucker" class="card bereich-card" style="text-decoration:none; color:inherit; border-top: 5px solid var(--secondary); text-align:center; padding: 2.5rem 1.5rem;">
        <div style="font-size: 3.5rem; margin-bottom: 0.5rem;">&#x1F5A8;&#xFE0F;</div>
        <h2 style="color: var(--secondary);">Drucker</h2>
        <p style="margin: 0.8rem 0;">4 Bambu-Lab-Drucker. Live-Status, freie Slots, Reservierungen.</p>
        <span class="btn" style="background: var(--secondary); color: white;">Druckerstatus</span>
    </a>

</div>

<div class="card" style="max-width: 800px; margin: 2rem auto 0; background: var(--warn-bg); border-color: #F5C842;">
    <h3 style="margin-bottom: 0.5rem;">Hinweis</h3>
    <p style="margin: 0;">
        Diese Seite ist im Aufbau. Stand: 2026-05-23, Skelett. Inhalte werden in
        den naechsten Wochen schrittweise ergaenzt &mdash; siehe
        <code>docs/kurskonzept.md</code>.
    </p>
</div>
{% endblock %}

{% block scripts %}
<style>
.bereich-card { transition: transform 0.15s, box-shadow 0.15s; }
.bereich-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
</style>
{% endblock %}