{% extends "base.html" %}
{% block content %}
<div class="max-w-2xl mx-auto px-4">
    <!-- Hero -->
    <div class="py-16 text-center">
        <img src="/static/hero.svg" alt="@bbs" class="mx-auto mb-4" style="width: 276px; image-rendering: pixelated;">
        <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">Dial 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 try one of these</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">Better yet, use your terminal</h2>
        <div class="flex gap-4 border-b border-neutral-800 mb-4">
            <button data-install="pip" class="install-tab py-2 text-neutral-200 border-b-2 border-neutral-200">pip</button>
            <button data-install="uv" class="install-tab py-2 text-neutral-500 hover:text-neutral-300 border-b-2 border-transparent">uv</button>
            <button data-install="brew" class="install-tab py-2 text-neutral-500 hover:text-neutral-300 border-b-2 border-transparent">brew</button>
        </div>
        <pre id="install-pip" class="install-panel bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-400 text-xs"><span class="text-neutral-500">$</span> pip install atbbs
<span class="text-neutral-500">$</span> atbbs</pre>
        <pre id="install-uv" class="install-panel bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-400 text-xs hidden"><span class="text-neutral-500">$</span> uv tool install atbbs
<span class="text-neutral-500">$</span> atbbs</pre>
        <pre id="install-brew" class="install-panel bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-400 text-xs hidden"><span class="text-neutral-500">$</span> brew install alyraffauf/tap/atbbs
<span class="text-neutral-500">$</span> atbbs</pre>
    </div>
</div>

{% endblock %}