{% extends 'base.html' %}
{% load static %}

{% block title %}!!!Support Center!!!{% endblock %}

{% block head %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
    body {
        background-color: #f8f9fa;
    }
    .hero {
        background: linear-gradient(45deg, #1A237E, #5C6BC0);
        color: white;
        padding: 100px 0;
        text-align: center;
    }
    .hero h1 {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 3.5rem;
    }
    .hero p {
        font-family: 'Roboto', sans-serif;
        font-size: 1.25rem;
        margin-bottom: 30px;
    }
    .btn-accent {
        background-color: #FFB74D;
        border-color: #FFB74D;
        color: #212121;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        padding: 15px 30px;
        font-size: 1.2rem;
    }
    .btn-accent:hover {
        background-color: #ffa726;
        border-color: #ffa726;
    }
</style>
{% endblock %}

{% block content %}
<div class="hero">
    <div class="container">
        <h1>Support Center</h1>
        <p>Your one-stop solution for all support needs. Create and track your tickets with ease.</p>
        <a href="{% url 'core:submit_ticket' %}" class="btn btn-accent">Submit a Ticket</a>
    </div>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-4 text-center">
            <h3>Create Tickets</h3>
            <p>Quickly submit a new support ticket through our simple form.</p>
        </div>
        <div class="col-md-4 text-center">
            <h3>Track Status</h3>
            <p>Keep an eye on the progress of your tickets in real-time.</p>
        </div>
        <div class="col-md-4 text-center">
            <h3>Get Notified</h3>
            <p>Receive email notifications as your ticket is updated.</p>
        </div>
    </div>
</div>
{% endblock %}
