{# Empty State Component
   Usage: {% include "components/empty_state.html" with title="Welcome" message="Get started..." cta_url=url('...') cta_label="Create" %}
#}
<div class="flex flex-col items-center justify-center py-20 px-4 text-center animate-fade-in">
    <div class="flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-xl shadow-indigo-500/20 mb-8">
        <svg class="h-10 w-10 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
        </svg>
    </div>
    <h2 class="text-3xl font-bold tracking-tight text-[--foreground] sm:text-4xl mb-4">{{ title }}</h2>
    <p class="max-w-md mx-auto text-lg text-[--muted-foreground] mb-10">{{ message }}</p>
    {% if cta_url %}
    <a href="{{ cta_url }}" class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-6 py-3.5 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 transition-all hover:scale-[1.02]">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        {{ cta_label|default('Get Started') }}
    </a>
    {% endif %}
</div>