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

{% block content %}

<div class="container-fluid bg-success text-white text-center py-5">
    <h1 class="display-4">Sustainable Software Engineering (SSE)</h1>
    <p class="lead">Bridging Theory & Practice: Evaluating Sustainable Software Engineering for Real-World Impact</p>
    <a href="/suse/" class="btn btn-light btn-lg">What is SSE?</a>
    <a href="/tools/" class="btn btn-light btn-lg">Try SSE Tools</a>
    <a href="/techniques/" class="btn btn-light btn-lg">Discover SSE Techniques</a>
</div>

<div class="container mt-5">
    <h2 class="text-center">Provide Your Feedback</h2>
    <p class="text-center">Help us improve by sharing your thoughts on the UI, tools, and techniques.</p>

    <div class="row mt-4 justify-content-center">
        <div class="col-md-4 d-flex">
            <div class="card shadow-sm h-100 w-100">
                <div class="card-header text-center">
                    <h5>Tools Feedback</h5>
                </div>
                <div class="card-body text-center d-flex flex-column">
                    <p class="flex-grow-1">Share your thoughts on the sustainability tools you explored.</p>
                    <a href="{% url 'tools_feedback' %}" class="btn btn-success mt-auto">Give Tools Feedback</a>
                </div>
            </div>
        </div>

        <div class="col-md-4 d-flex">
            <div class="card shadow-sm h-100 w-100">
                <div class="card-header text-center">
                    <h5>Techniques Feedback</h5>
                </div>
                <div class="card-body text-center d-flex flex-column">
                    <p class="flex-grow-1">Provide feedback on the sustainability techniques you learned.</p>
                    <a href="{% url 'techniques_feedback' %}" class="btn btn-success mt-auto">Give Techniques Feedback</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4 justify-content-center">
        <div class="col-md-4 d-flex">
            <div class="card shadow-sm h-100 w-100">
                <div class="card-header text-center">
                    <h5>UI Feedback</h5>
                </div>
                <div class="card-body text-center d-flex flex-column">
                    <p class="flex-grow-1">Tell us what you think about the design, layout, and usability.</p>
                    <a href="{% url 'ui_feedback' %}" class="btn btn-success mt-auto">Give UI Feedback</a>
                </div>
            </div>
        </div>
    </div>

</div>

{% endblock %}