{% extends "layouts/base.html" %}

{% block title %}Support - Retoor's Cloud Solutions{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/static/css/components/support.css">
{% endblock %}

{% block content %}
<main>
    <section class="support-hero">
        <h1>We're Here to Help You Succeed</h1>
        <p>Find answers to your questions, troubleshoot issues, or contact our support team for personalized assistance.</p>
        <div class="search-support">
            <input type="text" placeholder="Search our knowledge base..." class="search-input">
            <button class="btn-primary">Search</button>
        </div>
    </section>

    <section class="support-categories">
        <h2>Quick Answers & Popular Topics</h2>
        <div class="category-grid">
            <div class="category-card">
                <img src="/static/images/icon-students.svg" alt="Getting Started Icon" class="icon">
                <h3>Getting Started</h3>
                <p>Guides to help you set up your account and start using Retoor's.</p>
                <a href="#" class="btn-link">View Articles</a>
            </div>
            <div class="category-card">
                <img src="/static/images/icon-professionals.svg" alt="Billing Icon" class="icon">
                <h3>Billing & Payments</h3>
                <p>Information about your subscription, invoices, and payment methods.</p>
                <a href="#" class="btn-link">View Articles</a>
            </div>
            <div class="category-card">
                <img src="/static/images/icon-students.svg" alt="Troubleshooting Icon" class="icon">
                <h3>Troubleshooting</h3>
                <p>Solutions to common issues and technical problems.</p>
                <a href="#" class="btn-link">View Articles</a>
            </div>
            <div class="category-card">
                <img src="/static/images/icon-professionals.svg" alt="Account Management Icon" class="icon">
                <h3>Account Management</h3>
                <p>Manage your profile, security settings, and user permissions.</p>
                <a href="#" class="btn-link">View Articles</a>
            </div>
        </div>
    </section>

    <section class="contact-options">
        <h2>Need More Help? Contact Us.</h2>
        <div class="contact-grid">
            <div class="contact-card">
                <img src="/static/images/icon-students.svg" alt="Live Chat Icon" class="icon">
                <h3>Live Chat</h3>
                <p>Get instant support from our team. Available 9 AM - 5 PM EST.</p>
                <button class="btn-primary">Chat with Us Now</button>
            </div>
            <div class="contact-card">
                <img src="/static/images/icon-professionals.svg" alt="Support Ticket Icon" class="icon">
                <h3>Submit a Ticket</h3>
                <p>For non-urgent inquiries, submit a detailed support ticket.</p>
                <a href="#" class="btn-primary">Submit a Ticket</a>
            </div>
            <div class="contact-card">
                <img src="/static/images/icon-students.svg" alt="Phone Support Icon" class="icon">
                <h3>Phone Support</h3>
                <p>Speak directly with a support agent. Call us at 1-800-RET-OORS.</p>
                <p class="phone-hours">Mon-Fri, 9 AM - 5 PM EST</p>
            </div>
        </div>
    </section>
</main>
{% endblock %}