{% 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</h1>
        <p>Flexible cloud solutions for all teams with ease.</p>
    </section>

    <section class="support-content-grid">
        <div class="knowledge-base-section card">
            <h2>Knowledge Base</h2>
            <input type="text" class="search-input" placeholder="Search articles and FAQs...">

            <div class="featured-articles">
                <div class="article-category">
                    <img src="/static/images/icon-families.svg" alt="Getting Started Icon" class="icon"> {# Placeholder icon #}
                    <h3>Getting Started Guides</h3>
                    <ul>
                        <li><a href="#">How to upload your first files</a></li>
                        <li><a href="#">Setting up your account</a></li>
                        <li><a href="#">Understanding your dashboard</a></li>
                    </ul>
                </div>
                <div class="article-category">
                    <img src="/static/images/icon-professionals.svg" alt="Troubleshooting Icon" class="icon"> {# Placeholder icon #}
                    <h3>Troubleshooting Common Issues</h3>
                    <ul>
                        <li><a href="#">Resetting your password</a></li>
                        <li><a href="#">File synchronization problems</a></li>
                        <li><a href="#">Contacting support for technical issues</a></li>
                    </ul>
                </div>
                <div class="article-category">
                    <img src="/static/images/icon-students.svg" alt="Security Icon" class="icon"> {# Placeholder icon #}
                    <h3>Security & Privacy FAQs</h3>
                    <ul>
                        <li><a href="#">Understanding data encryption</a></li>
                        <li><a href="#">Our privacy policy explained</a></li>
                        <li><a href="#">Reporting a security vulnerability</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="contact-support-section card">
            <h2>Contact Support</h2>
            <div class="contact-option">
                <img src="/static/images/icon-families.svg" alt="Chat Icon" class="icon"> {# Placeholder icon #}
                <h3>Live Chat</h3>
                <p>Get instant help from our support team.</p>
                <button class="btn-primary">Chat Now</button>
            </div>
            <div class="contact-option">
                <img src="/static/images/icon-professionals.svg" alt="Email Icon" class="icon"> {# Placeholder icon #}
                <h3>Email Support</h3>
                <p>Submit a detailed request and we'll get back to you.</p>
                <button class="btn-primary">Submit a Ticket</button>
            </div>
            <div class="contact-option">
                <img src="/static/images/icon-students.svg" alt="Phone Icon" class="icon"> {# Placeholder icon #}
                <h3>Phone Support</h3>
                <p>Speak directly with a support agent.</p>
                <p class="phone-number">+00 77 5379 033</p>
            </div>
        </div>
    </section>
</main>
{% endblock %}