hstream/resources/views/matrix/index.blade.php

<x-app-layout>
<div class="min-h-screen">
    <div class="max-w-5xl mx-auto py-16 px-6">

        <!-- Header -->
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
                We're Moving to Matrix 🚀
            </h1>
            <p class="text-lg text-gray-600 dark:text-neutral-200 max-w-3xl mx-auto">
                Due to recent changes with Discord, we are transitioning our community to
                <span class="font-semibold text-indigo-600">Matrix</span> —
                an open, decentralized communication network.
            </p>
        </div>

        <!-- Why Matrix -->
        <div class="bg-white dark:bg-neutral-800 rounded-2xl shadow-sm p-8 mb-8">
            <h2 class="text-2xl dark:text-white font-semibold mb-4">What is Matrix?</h2>

            <p class="text-gray-700 dark:text-neutral-300 mb-4">
                Matrix is an open-source messaging system. Unlike Discord, it is
                <strong>decentralized</strong>. That means no single company controls it.
            </p>

            <ul class="list-disc pl-6 text-gray-700 dark:text-neutral-300 space-y-2">
                <li>You can choose which server (called a “homeserver”) you register on.</li>
                <li>All servers communicate with each other (this is called federation).</li>
                <li>You are <strong>not required</strong> to use our server to join our rooms.</li>
            </ul>

            <div class="mt-6 p-4 bg-pink-50 dark:bg-pink-950 border border-pink-100 dark:border-pink-700 rounded-lg">
                <p class="text-pink-500 text-sm">
                    Example: You can register at a different server like matrix.org and still join our rooms.
                </p>
            </div>
        </div>

        <!-- Our Server -->
        <div class="bg-white dark:bg-neutral-800 rounded-2xl shadow-sm p-8 mb-8">
            <h2 class="text-2xl dark:text-white font-semibold mb-4">Our Matrix Server</h2>

            <p class="text-gray-700 dark:text-neutral-300 mb-4">
                We provide our own Matrix homeserver for community members.
            </p>

            <ul class="list-disc pl-6 text-gray-700 dark:text-neutral-300 space-y-2 mb-6">
                <li>Available to users registered for more than 1 month</li>
                <li>Fully federated with the entire Matrix network</li>
                <li>No obligation to use it — it’s optional</li>
            </ul>

            @auth
                @if(auth()->user()->created_at->lt(now()->subMonth()))
                    @if(auth()->user()->matrix_id)
                    <div class="bg-green-50 dark:bg-green-950 dark:border-green-700 border border-green-200 p-6 rounded-xl">
                        <h3 class="font-semibold text-green-800 dark:text-green-300 mb-2">
                            ✅ You are registered!
                        </h3>
                        <p class="text-green-700 dark:text-green-400 mb-4">
                            Your Matrix account has been created successfully.
                        </p>
                        <p class="text-green-700 dark:text-green-400 mb-4">
                            Make sure to store your password, as we don't have a password reset function!
                        </p>
                        <p class="text-green-700 dark:text-green-400 mb-4">
                            You can now log in using any Matrix client of your choice.
                        </p>
                        <p class="text-green-700 dark:text-green-400 mb-4">
                            For the best experience, we recommend:
                        </p>
                        <ul class="list-disc text-green-700 dark:text-green-400 pl-6 space-y-2 mb-6">
                            <li>Downloading the official <strong><a href="https://element.io/download" target="_blank" class="underline">Element</a></strong> app for desktop or mobile</li>
                            <li>Or using our web client via <strong><a href="https://element.hstream.moe/" target="_blank" class="underline">Element Web</a></strong></li>
                        </ul>
                        <p class="text-green-700 dark:text-green-400 mb-4">
                            Simply sign in with your new username and password to get started.
                        </p>
                    </div>
                    @else
                    <div class="bg-green-50 dark:bg-green-950 dark:border-green-700 border border-green-200 p-6 rounded-xl">
                        <h3 class="font-semibold text-green-800 dark:text-green-300 mb-2">
                            🎉 You are eligible!
                        </h3>
                        <p class="text-green-700 dark:text-green-400 mb-4">
                            Your account is older than one month. You can create your account now.
                        </p>

                        @include('matrix.register')
                    </div>
                    @endif
                @else
                    <div class="bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 p-6 rounded-xl">
                        <h3 class="font-semibold text-yellow-800 dark:text-yellow-300 mb-2">
                            ⏳ Not Yet Eligible
                        </h3>
                        <p class="text-yellow-700 dark:text-yellow-400">
                            Your account must be at least one month old to register
                            on our Matrix server.
                        </p>
                    </div>
                @endif
            @else
                <div class="bg-gray-100 dark:bg-neutral-700 p-6 rounded-xl text-center">
                    <p class="text-gray-700 dark:text-gray-100">
                        Please log in to check if you're eligible for our Matrix server.
                    </p>
                </div>
            @endauth
        </div>

        <!-- Our Space -->
        <div class="bg-white dark:bg-neutral-800 rounded-2xl shadow-sm p-8 mb-8">
            <h2 class="text-2xl dark:text-white font-semibold mb-4">Our Matrix Space</h2>

            <p class="text-gray-700 dark:text-neutral-300 mb-4">
                All of our rooms are organized inside our main Matrix Space:
            </p>

            <div class="bg-gray-100 dark:bg-neutral-700 dark:text-neutral-300 p-4 rounded-lg font-mono text-sm break-all">
                <a href="https://matrix.to/#/#hstream:hstream.moe" target="_blank">https://matrix.to/#/#hstream:hstream.moe</a>
            </div>
        </div>

        <!-- Room List -->
        <div class="bg-white dark:bg-neutral-800 rounded-2xl shadow-sm p-8">
            <h2 class="text-2xl dark:text-white font-semibold mb-6">Our Matrix Rooms</h2>

            <div class="grid md:grid-cols-2 gap-6">
                @foreach($rooms as $room)
                    <div class="border dark:border-neutral-900 rounded-xl p-6 hover:shadow-md dark:bg-neutral-800 hover:dark:bg-neutral-900/60 transition">
                        <h3 class="font-semibold dark:text-neutral-100 text-lg mb-2">
                            {{ $room['name'] }}
                        </h3>

                        <p class="text-gray-600 dark:text-neutral-300 text-sm mb-4">
                            {{ $room['description'] }}
                        </p>

                        <div class="bg-gray-100 dark:bg-neutral-700 dark:text-neutral-300 p-3 rounded text-xs font-mono break-all">
                            <a href="{{ $room['alias'] }}" target="_blank">{{ $room['alias'] }}</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
</x-app-layout>