{{template "main.html" .}}

{{define "title"}}Setup — Congo Dev{{end}}
{{define "description"}}Get your own Congo Dev instance with a browser IDE, Docker hosting, and an AI twin.{{end}}

{{define "content"}}
<section class="py-16 px-6">
    <div class="max-w-3xl mx-auto">
        <h1 class="text-4xl font-bold mb-2 tracking-tight">Get Started</h1>
        <p class="text-muted text-base mb-14">Your own development server with browser IDE, Docker hosting, and AI twin.</p>

        <!-- Option 1: Congo Host (push to start) -->
        <div class="glow-card p-8 mb-6">
            <div class="flex items-start gap-4">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background: #4f8ef7;">
                    <span class="text-white text-sm font-bold">1</span>
                </div>
                <div>
                    <h2 class="text-xl font-bold mb-2 tracking-tight">Use Congo Host</h2>
                    <p class="text-body text-sm leading-relaxed mb-4">Create a server on <a href="https://host.congo.gg" class="text-accent" target="_blank">host.congo.gg</a>. Sign in, pick a size, click create. Congo Dev is pre-installed — you'll have a dashboard, IDE, and AI twin running in minutes.</p>
                    <a href="https://host.congo.gg" class="btn-glow btn-glow-primary" style="padding: 0.5rem 1.5rem; font-size: 0.875rem; border-radius: 0.5rem;" target="_blank">Create Server →</a>
                </div>
            </div>
        </div>

        <!-- Option 2: DIY -->
        <div class="glow-card p-8 mb-14">
            <div class="flex items-start gap-4">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background: rgba(79,142,247,0.1); border: 1px solid rgba(79,142,247,0.2);">
                    <span class="text-accent text-sm font-bold">2</span>
                </div>
                <div class="w-full">
                    <h2 class="text-xl font-bold mb-2 tracking-tight">Or Install Yourself</h2>
                    <p class="text-body text-sm leading-relaxed mb-4">Run the cloud-init script on any fresh Ubuntu 24.04 server. Works on DigitalOcean, AWS, Hetzner, or bare metal.</p>
                    <div class="code-block mb-4">
                        <pre><code class="language-bash">curl -fsSL https://congo.gg/cloud-init.sh | bash</code></pre>
                    </div>
                    <p class="text-muted text-xs mb-4">Installs Docker, Go, builds the Congo Dev image, and starts everything. Takes about 5 minutes on a 4GB droplet.</p>
                    <p class="text-body text-sm leading-relaxed mb-2"><strong>After it finishes:</strong></p>
                    <div class="code-block mb-4">
                        <pre><code class="language-bash"># The setup token is in the login banner:
ssh root@YOUR_SERVER

# Visit http://YOUR_IP in your browser
# Enter the token, create your account, done.</code></pre>
                    </div>
                </div>
            </div>
        </div>

        <!-- What You Get -->
        <div class="mb-14">
            <h2 class="text-xl font-bold mb-6 tracking-tight">What You Get</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                <div class="glow-card p-4">
                    <h3 class="text-bright font-semibold text-sm mb-1">Browser IDE</h3>
                    <p class="text-muted text-xs">VS Code in your browser. Edit, debug, run code from anywhere.</p>
                </div>
                <div class="glow-card p-4">
                    <h3 class="text-bright font-semibold text-sm mb-1">Docker Hosting</h3>
                    <p class="text-muted text-xs">Deploy apps from your repos. Auto-TLS via Caddy.</p>
                </div>
                <div class="glow-card p-4">
                    <h3 class="text-bright font-semibold text-sm mb-1">AI Agent</h3>
                    <p class="text-muted text-xs">Claude Code with full filesystem access. Reads tasks, writes code, deploys.</p>
                </div>
            </div>
        </div>

        <!-- After Setup -->
        <div>
            <h2 class="text-xl font-bold mb-4 tracking-tight">After Setup</h2>
            <ol class="space-y-2 text-body text-sm leading-relaxed">
                <li class="flex gap-3 items-start"><span class="text-accent font-mono text-xs mt-0.5">1.</span> Open the dashboard — create a project or clone a repo</li>
                <li class="flex gap-3 items-start"><span class="text-accent font-mono text-xs mt-0.5">2.</span> Open VS Code — edit code in the browser IDE</li>
                <li class="flex gap-3 items-start"><span class="text-accent font-mono text-xs mt-0.5">3.</span> Deploy — one click deploys your app as a Docker container</li>
                <li class="flex gap-3 items-start"><span class="text-accent font-mono text-xs mt-0.5">4.</span> Add a domain — point DNS, TLS is automatic</li>
            </ol>
        </div>
    </div>
</section>
{{end}}