@extends('lethean::layout')

@section('title', $name . '.lthn — Available')

@section('content')
<div class="section" style="text-align: center; padding: 4rem 0;">
    <h2><span style="color: var(--green);">{{ $name }}.lthn</span> is available!</h2>
    <p style="color: var(--muted); margin: 1rem 0;">This name has not been registered yet. Claim it now.</p>

    <div class="card-grid" style="max-width: 600px; margin: 2rem auto;">
        <div class="card" style="text-align: left;">
            <h3>What you get</h3>
            <ul style="color: var(--muted); line-height: 2; list-style: none; padding: 0;">
                <li>Blockchain-native .lthn identity</li>
                <li>DNS management via client portal</li>
                <li>VPN/proxy routing through your name</li>
                <li>Permanent on-chain registration</li>
            </ul>
        </div>
    </div>

    <a href="/names/register" class="api-link" style="font-size: 1rem; padding: 0.75rem 2rem;">Claim {{ $name }}.lthn &rarr;</a>

    <div style="margin-top: 2rem; display: flex; gap: 1.5rem; justify-content: center;">
        <a href="/names">&larr; Back to directory</a>
        <a href="/v1/names/available/{{ $name }}">API check &rarr;</a>
    </div>
</div>
@endsection