{% extends 'base.html' %}
{% block title %}Welcome | Liver & Sausage POS{% endblock %}

{% block content %}
<div class="row justify-content-center align-items-center" style="min-height: 80vh;">
    <div class="col-lg-8 text-center">
        <h1 class="display-3 fw-bold mb-4" style="color: var(--text-light);">
            Professional <span style="color: var(--orange);">Cashier System</span>
        </h1>
        <p class="lead mb-5 text-secondary">
            Streamlined order management, automated stock tracking, and real-time reporting for your restaurant.
        </p>
        
        <div class="row g-4 justify-content-center">
            <div class="col-md-5">
                <div class="card h-100 p-4 border-0 shadow-lg text-start" style="background: linear-gradient(145deg, #242427, #1c1c1f);">
                    <div class="display-6 mb-3 text-orange" style="color: var(--orange);"><i class="bi bi-cart4"></i></div>
                    <h3 class="fw-bold">Cashier POS</h3>
                    <p class="text-secondary">Create orders, customize sandwiches, and print receipts instantly.</p>
                    <a href="{% url 'pos' %}" class="btn btn-primary mt-auto">Open POS</a>
                </div>
            </div>
            <div class="col-md-5">
                <div class="card h-100 p-4 border-0 shadow-lg text-start" style="background: linear-gradient(145deg, #242427, #1c1c1f);">
                    <div class="display-6 mb-3 text-info"><i class="bi bi-graph-up"></i></div>
                    <h3 class="fw-bold">Manager Dashboard</h3>
                    <p class="text-secondary">Track liver, sausage, and fries stock. View sales reports and manage prices.</p>
                    <a href="{% url 'dashboard' %}" class="btn btn-outline-light mt-auto">View Reports</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
