{{template "app.html" .}}

{{define "title"}}Billing & Plan{{end}}

{{define "content"}}
<div class="max-w-4xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
    <h1 class="text-2xl font-bold text-white mb-2">Billing & Plan</h1>
    <p class="text-[#888] text-sm mb-8">Each site has its own plan. Upgrade individual sites to unlock more features.</p>

    <!-- Current Sites / Plans -->
    {{if billing.UserSites}}
    <div class="mb-10">
        <h2 class="text-sm font-medium text-[#888] uppercase tracking-wider mb-4">Your Sites</h2>
        <div class="space-y-3">
            {{range $site := billing.UserSites}}
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 rounded-xl border border-white/10 bg-white/[0.02]">
                <div class="flex items-center gap-3 min-w-0">
                    <div class="w-8 h-8 rounded-lg flex items-center justify-center text-xs font-medium flex-shrink-0" style="background: rgba(139,92,246,0.15); color: #a78bfa;">
                        {{upper (slice $site.Name 0 1)}}
                    </div>
                    <div class="min-w-0">
                        <div class="text-white text-sm font-medium truncate">{{$site.Name}}</div>
                        <div class="text-[#666] text-xs font-mono truncate">{{$site.Subdomain}}.readysite.app</div>
                    </div>
                </div>
                <div class="flex items-center gap-3 flex-shrink-0 pl-11 sm:pl-0">
                    <span class="text-xs px-2.5 py-0.5 rounded-full font-medium {{if eq $site.Status "active"}}bg-emerald-500/15 text-emerald-400{{else}}bg-yellow-500/15 text-yellow-400{{end}}">
                        {{$site.Status}}
                    </span>
                    {{if eq $site.Plan "pro"}}
                    <span class="text-xs px-2.5 py-0.5 rounded-full font-medium bg-violet-500/15 text-violet-400">Pro</span>
                    {{else}}
                    <button
                        hx-post="/api/sites/{{$site.ID}}/upgrade"
                        hx-swap="none"
                        hx-confirm="Upgrade {{$site.Name}} to Pro? Your site will get a persistent database."
                        class="text-xs px-2.5 py-1 rounded-full font-medium transition-colors cursor-pointer" style="background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(34,211,238,0.2)); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.3);">
                        Upgrade
                    </button>
                    {{end}}
                </div>
            </div>
            {{end}}
        </div>
    </div>
    {{end}}

    <!-- Pricing Comparison -->
    <h2 class="text-sm font-medium text-[#888] uppercase tracking-wider mb-4">Plans</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5 mb-10">
        <!-- Free Plan -->
        <div class="p-6 rounded-2xl border border-white/10 bg-white/[0.02]">
            <div class="flex items-center gap-2 mb-1">
                <h3 class="text-white font-semibold text-lg">Free</h3>
                <span class="text-xs px-2 py-0.5 rounded-full bg-white/5 text-[#888]">Default</span>
            </div>
            <div class="text-[#888] text-sm mb-5">Great for testing and personal projects.</div>
            <div class="text-2xl font-bold text-white mb-6">$0 <span class="text-sm font-normal text-[#666]">/ month</span></div>
            <ul class="space-y-2.5 text-sm text-[#ccc]">
                <li class="flex items-center gap-2">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    1 website per site
                </li>
                <li class="flex items-center gap-2">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    Subdomain hosting
                </li>
                <li class="flex items-center gap-2">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    Community support
                </li>
                <li class="flex items-center gap-2 text-[#555]">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    No services (database, app, automation)
                </li>
                <li class="flex items-center gap-2 text-[#555]">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    No custom domains
                </li>
            </ul>
        </div>

        <!-- Pro Plan -->
        <div class="p-6 rounded-2xl border border-violet-500/30 bg-violet-500/[0.03] relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-violet-500/10 rounded-full blur-3xl -mr-10 -mt-10 pointer-events-none"></div>
            <div class="flex items-center gap-2 mb-1 relative">
                <h3 class="text-white font-semibold text-lg">Pro</h3>
                <span class="text-xs px-2 py-0.5 rounded-full bg-violet-500/15 text-violet-400">Recommended</span>
            </div>
            <div class="text-[#888] text-sm mb-5">For production sites and serious projects.</div>
            <div class="text-2xl font-bold text-white mb-1">$0</div>
            <ul class="space-y-2.5 text-sm text-[#ccc] relative">
                <li class="flex items-center gap-2">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    Everything in Free
                </li>
                <li class="flex items-center gap-2">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    Persistent SQLite database
                </li>
                <li class="flex items-center gap-2">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    Custom domain support
                </li>
                <li class="flex items-center gap-2">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    Priority support
                </li>
                <li class="flex items-center gap-2">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    Persistent data (no resets)
                </li>
            </ul>
        </div>
    </div>

    <!-- Upgrade CTA -->
    <div class="p-6 rounded-2xl border border-white/10 bg-white/[0.02] text-center">
        <h3 class="text-white font-semibold mb-2">Ready to upgrade?</h3>
        <p class="text-[#888] text-sm mb-4">Upgrade individual sites to Pro for a persistent database.</p>
        <a href="/sites" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-colors" style="background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(34,211,238,0.3)); color: #e0d5ff; border: 1px solid rgba(139,92,246,0.3);">
            Go to Sites
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
        </a>
        <p class="text-[#555] text-xs mt-3">Upgrade from the site list above or from the site manager page.</p>
    </div>
</div>
{{end}}