{% extends "layouts/public_base.html" %}
{% load i18n %}

{% block title %}{% trans "Inquiry Submitted" %} - PX360{% endblock %}

{% block extra_css %}
<style>
.success-container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 3rem 2rem;
    text-align: center;
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon svg {
    width: 40px;
    height: 40px;
    color: white;
}

.success-title {
    color: #005696;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.success-message {
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.reference-box {
    background: linear-gradient(135deg, #eef6fb 0%, #e0f2fe 100%);
    border: 2px solid #bae6fd;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.reference-label {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reference-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #005696;
    font-family: monospace;
}

.info-text {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

.btn-home {
    display: inline-block;
    background: linear-gradient(135deg, #005696 0%, #007bbd 100%);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.875rem;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(0, 86, 150, 0.3);
    color: white;
}
</style>
{% endblock %}

{% block content %}
<div class="success-container">
    <div class="success-icon">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
        </svg>
    </div>

    <h1 class="success-title">{% trans "Inquiry Submitted Successfully!" %}</h1>

    <p class="success-message">
        {% trans "Thank you for your inquiry. We have received your message and will respond within 24-48 hours." %}
    </p>

    <div class="reference-box">
        <div class="reference-label">{% trans "Reference Number" %}</div>
        <div class="reference-number">{{ reference_number }}</div>
    </div>

    <p class="info-text">
        {% trans "Please save this reference number for your records. You may need it for future correspondence." %}
    </p>

    <a href="/" class="btn-home">
        {% trans "Return to Home" %}
    </a>
</div>
{% endblock %}