{% extends "base.html" %}
{% block content %}
<div class="max-w-2xl mx-auto px-4">
    <!-- Hero -->
    <div class="py-16 text-center">
        <div class="text-7xl font-bold mb-4 whitespace-nowrap"><span class="text-amber-500" style="margin-right: 0.05em">@</span><span class="text-neutral-100">boards</span></div>
        <h1 class="text-lg text-neutral-400 mb-3">Bulletin boards on the Atmosphere.</h1>
        <p class="text-neutral-500 max-w-md mx-auto">Run a BBS from your own account. No server required. Users own their posts, communities migrate freely. Built on <a href="https://atproto.com" class="text-neutral-400 hover:text-neutral-300 underline underline-offset-2">atproto</a>.</p>
    </div>

    <!-- Connect -->
    <div class="border-t border-neutral-800 py-8">
        <h2 class="text-neutral-300 mb-4">Connect to a BBS</h2>
        <form action="/" method="get" id="handle-form" class="flex gap-2 mb-6">
            <input
                type="text"
                name="handle"
                placeholder="handle.example.com"
                required
                class="flex-1 bg-neutral-900 border border-neutral-800 rounded px-3 py-2 text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-neutral-600"
            >
            <button type="submit" class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-4 py-2 rounded">
                go
            </button>
        </form>
        <div id="discover" class="hidden">
            <p class="text-neutral-500 text-xs uppercase tracking-wide mb-3">or find one</p>
            <div id="discover-list" class="space-y-1"></div>
        </div>
    </div>

    <!-- Install -->
    <div class="border-t border-neutral-800 py-8">
        <h2 class="text-neutral-300 mb-4">Dial in from your terminal</h2>
        <pre class="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-400 text-xs mb-3"><span class="text-neutral-500">$</span> pip install atboards
<span class="text-neutral-500">$</span> atb</pre>
        <p class="text-neutral-500 text-xs">Requires Python 3.14+.</p>
    </div>
</div>

<script>
    document.getElementById("handle-form").addEventListener("submit", function(e) {
        e.preventDefault();
        const handle = this.elements["handle"].value.trim();
        if (handle) window.location.href = "/bbs/" + encodeURIComponent(handle);
    });

    fetch("/api/discover")
        .then(r => r.json())
        .then(data => {
            if (data.bbses && data.bbses.length > 0) {
                const list = document.getElementById("discover-list");
                data.bbses.forEach(bbs => {
                    const a = document.createElement("a");
                    a.href = "/bbs/" + encodeURIComponent(bbs.handle);
                    a.className = "flex items-baseline gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900 group";
                    a.innerHTML = `<span class="text-neutral-200 group-hover:text-white">${bbs.name || bbs.handle}</span><span class="text-neutral-500">${bbs.description}</span>`;
                    list.appendChild(a);
                });
                document.getElementById("discover").classList.remove("hidden");
            }
        })
        .catch(() => {});
</script>
{% endblock %}