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

{% block title %}Help & Support{% endblock %}
{% block content %}

<div class="help-support-container">
    <h1>Help & Support</h1>
    <p class="subtitle">Questions, comments, or suggestions? Simply fill in the form and we'll be in touch shortly.</p>

    <div class="content-wrapper">
        <div class="left-column">
            <div class="contact-info">
                <p><img src="{% static 'images\Frame 3879.png' %}" alt="Location"> 1055 Arthur ave Elk Groot, 67, New Palmas South Carolina.</p>
            
                <p><img src="{% static 'images\noun_Phone_3612570 1.png'%}" alt="Phone"> +1 234 678 9108 99</p>
                <p><img src="{% static 'images\noun_Email_247564 1.png' %}" alt="Email"> Contact@TripTracker.com</p>
            </div>

            <div class="documentation-section">
                <h2>Browse our documentation of 50+ Links</h2>
                <button class="btn-primary">Documentation links</button>
                </div>
        </div>

        <div class="right-column">
            <form class="support-form">
                <div class="form-row">
                    <input type="text" placeholder="First Name" required>
                    <input type="text" placeholder="Last Name" required>
                </div>
                <input type="email" placeholder="Email Address" required>
                <input type="tel" placeholder="Phone Number" required>
                <textarea placeholder="Your message" rows="5" required></textarea>
                <button type="submit" class="btn-primary">Send Message</button>
            </form>
        </div>
    </div>
</div>

<style>
    .help-support-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px;
        background-color: #f5f5f5;
    }

    h1 {
        color: #333;
        margin-bottom: 10px;
        font-size: 28px;
    }

    .subtitle {
        color: #666;
        margin-bottom: 30px;
    }

    .content-wrapper {
        display: flex;
        gap: 40px;
    }

    .left-column {
        flex: 1;
    }

    .right-column {
        flex: 1;
    }

    .contact-info {
        margin-bottom: 30px;
    }

    .contact-info p {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        color: #333;
    }

    .contact-info img {
        margin-right: 15px;
        width: 24px;
        height: 24px;
    }

    .documentation-section {
        background-color: #006699;
        color: white;
        padding: 30px;
        border-radius: 10px;
        margin-bottom: 30px;
    }

    .documentation-section h2 {
        margin-bottom: 20px;
        font-size: 24px;
    }

    .btn-primary {
        background-color: white;
        color: #006699;
        border: none;
        padding: 12px 24px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
    }

    .support-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
        background-color: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .form-row {
        display: flex;
        gap: 20px;
    }

    input, textarea {
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px;
    }

    textarea {
        resize: vertical;
        min-height: 120px;
    }

    .support-form .btn-primary {
        background-color: #006699;
        color: white;
        align-self: flex-end;
        font-size: 16px;
    }
</style>

{% endblock %}