<div>
    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-t1">Billing</h1>
        <p class="text-sm text-t2 mt-1">Manage your plan and billing</p>
    </div>

    {{-- Current Plan --}}
    <div class="bg-s1 border border-white/[.06] rounded-xl p-6 mb-4">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-xs font-medium text-t2 uppercase tracking-wider mb-1">Current Plan</div>
                <div class="text-xl font-semibold text-t1">Free</div>
                <div class="text-sm text-t2 mt-1">20 / 50 links used</div>
            </div>
            <button class="px-4 py-2.5 bg-accent-gradient text-white text-sm font-medium rounded-lg hover:opacity-90">
                Upgrade Plan
            </button>
        </div>
        <div class="mt-4 bg-s3 rounded-full h-2">
            <div class="bg-blue h-2 rounded-full" style="width: 40%"></div>
        </div>
    </div>

    {{-- Plan Features --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        @foreach([
            ['name' => 'Free', 'price' => '€0', 'period' => '/mo', 'features' => ['50 links', '1 workspace', '1.000 clicks/mo', 'nimu.li domain'], 'current' => true],
            ['name' => 'Pro', 'price' => '€12', 'period' => '/mo', 'features' => ['Unlimited links', '3 workspaces', '50.000 clicks/mo', 'Custom domain', 'QR Codes', 'Bio pages'], 'current' => false],
            ['name' => 'Business', 'price' => '€49', 'period' => '/mo', 'features' => ['Unlimited everything', '10 workspaces', 'Unlimited clicks', 'API access', 'Team members', 'Priority support'], 'current' => false],
        ] as $plan)
        <div class="bg-s1 border {{ $plan['current'] ? 'border-blue/40' : 'border-white/[.06]' }} rounded-xl p-5">
            @if($plan['current'])
            <div class="text-xs font-medium text-blue mb-2">Current plan</div>
            @endif
            <div class="text-lg font-semibold text-t1">{{ $plan['name'] }}</div>
            <div class="mt-2 mb-4">
                <span class="text-2xl font-bold text-t1">{{ $plan['price'] }}</span>
                <span class="text-sm text-t2">{{ $plan['period'] }}</span>
            </div>
            <ul class="space-y-2 mb-5">
                @foreach($plan['features'] as $feature)
                <li class="flex items-center gap-2 text-sm text-t2">
                    <svg class="w-3.5 h-3.5 text-green flex-shrink-0" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
                    </svg>
                    {{ $feature }}
                </li>
                @endforeach
            </ul>
            @if(!$plan['current'])
            <button class="w-full px-4 py-2 bg-accent-gradient text-white text-sm font-medium rounded-lg hover:opacity-90">
                Upgrade to {{ $plan['name'] }}
            </button>
            @endif
        </div>
        @endforeach
    </div>
</div>
