{% extends "base.html" %}
{% load static %}
{% block title %}
    Welcome to Matrix
{% endblock title %}
{% block content %}
    <div class="hero is-primary is-bold">
        <div class="hero-body">
            <div class="container">
                <div class="columns is-vcentered">
                    <div class="column is-7">
                        <h1 class="title is-1 has-text-weight-bold">Welcome to Our Matrix Server</h1>
                        <p class="subtitle is-4 mt-4">
                            Join our secure, decentralized communication network and connect with others across the Matrix.
                        </p>
                        <div class="mt-6">
                            <a href="{% url 'check_username' %}"
                               class="button is-white is-large is-rounded">
                                <span>Start Registration</span>
                                <span class="icon">
                                    <i class="fas fa-arrow-right"></i>
                                </span>
                            </a>
                        </div>
                    </div>
                    <div class="column is-5">
                        <div class="box has-text-centered p-6">
                            <img src="{% static 'matrix-logo-white.svg' %}"
                                 alt="Matrix Logo"
                                 width="200">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section">
        <div class="container">
            <h2 class="title is-2 has-text-centered mb-6">Why Join Our Matrix Server?</h2>
            <div class="columns is-multiline mt-5">
                <div class="column is-4">
                    <div class="card h-100">
                        <div class="card-content">
                            <div class="has-text-centered mb-4">
                                <span class="icon is-large has-text-primary">
                                    <i class="fas fa-lock fa-3x"></i>
                                </span>
                            </div>
                            <h3 class="title is-4 has-text-centered">Secure Communication</h3>
                            <p class="has-text-centered">End-to-end encryption ensures your messages stay private and secure.</p>
                        </div>
                    </div>
                </div>
                <div class="column is-4">
                    <div class="card h-100">
                        <div class="card-content">
                            <div class="has-text-centered mb-4">
                                <span class="icon is-large has-text-primary">
                                    <i class="fas fa-network-wired fa-3x"></i>
                                </span>
                            </div>
                            <h3 class="title is-4 has-text-centered">Decentralized Network</h3>
                            <p class="has-text-centered">Connect with users across the entire Matrix federation, not just our server.</p>
                        </div>
                    </div>
                </div>
                <div class="column is-4">
                    <div class="card h-100">
                        <div class="card-content">
                            <div class="has-text-centered mb-4">
                                <span class="icon is-large has-text-primary">
                                    <i class="fas fa-users fa-3x"></i>
                                </span>
                            </div>
                            <h3 class="title is-4 has-text-centered">Community Focused</h3>
                            <p class="has-text-centered">Join rooms and communities aligned with your interests and values.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="has-text-centered mt-6">
                <a href="{% url 'check_username' %}" class="button is-link is-medium">
                    <span>Get Started Now</span>
                    <span class="icon">
                        <i class="fas fa-user-plus"></i>
                    </span>
                </a>
            </div>
        </div>
    </div>
{% endblock content %}