@extends('layouts.setup')

@section('content')


<div class="bg-gradient-to-b from-indigo-50 to-white py-6 px-4">


    <!-- HEADER -->
    <div class="text-center max-w-4xl mx-auto mt-6 mb-8">
        <h1 class="text-2xl md:text-3xl font-extrabold text-gray-900 tracking-tight">
            Tempoh Percubaan Telah Tamat
        </h1>

        <p class="text-gray-600 mt-1 text-base">
            Untuk terus menggunakan sistem Koop Compliant, sila pilih pakej langganan yang sesuai
            dengan keperluan koperasi anda.
        </p>
    </div>

    @if(session('info'))
        <div class="mb-4 p-4 bg-blue-50 text-blue-700 rounded-lg text-sm">
            {{ session('info') }}
        </div>
    @endif

    <!-- PRICING CARDS -->
    <div class="flex flex-wrap items-stretch justify-center gap-8">

        <!-- BASIC / TRIAL -->
        <div class="w-72 bg-white text-gray-800 border border-gray-200
                    rounded-xl p-6 pb-14 text-center shadow-sm">

            <p class="font-semibold text-lg mt-4">Trial (Percubaan)</p>

            <h2 class="text-3xl font-bold mt-2">
                RM0
                <span class="text-gray-500 text-sm font-normal">/ percubaan</span>
            </h2>

            <ul class="mt-6 space-y-2 text-sm text-gray-600 text-left">
                <li class="flex items-center gap-2">✔ Pengurusan asas koperasi</li>
                <li class="flex items-center gap-2">✔ Maksimum 20 anggota</li>
                <li class="flex items-center gap-2">✖ Export PDF</li>
                <li class="flex items-center gap-2">✖ Ciri lanjutan</li>
            </ul>

            <button
                disabled
                class="mt-8 w-full py-2 rounded-lg bg-gray-200 text-gray-500
                       font-semibold cursor-not-allowed">
                Pakej Percubaan
            </button>
        </div>

        <!-- BASIC -->
        <div class="w-72 bg-white text-gray-800 border border-gray-200
                    rounded-xl p-6 pb-14 text-center
                    shadow-sm hover:shadow-md transition">

            <p class="font-semibold text-lg mt-4">Basic</p>

            <h2 class="text-3xl font-bold mt-2">
                RM 199
                <span class="text-gray-500 text-sm font-normal">/ tahun</span>
            </h2>

            <ul class="mt-6 space-y-2 text-sm text-gray-600 text-left">
                <li class="flex items-center gap-2">✔ Pengurusan asas koperasi</li>
                <li class="flex items-center gap-2">✔ Anggota tanpa had</li>
                <li class="flex items-center gap-2">✔ Pengurusan lebih fleksibel</li>
                <li class="flex items-center gap-2">✔ Sokongan keutamaan</li>
            </ul>

            <a href="{{ url('/payment/start/gold') }}"
   class="block bg-white text-sm w-full py-2 rounded text-indigo-600 font-semibold mt-7 border">
    Naik Taraf (TEST)
</a>
        </div>

        <!-- GOLD (FEATURED) -->
        <div class="w-72 bg-indigo-500 relative text-white
                    border border-indigo-600 rounded-xl
                    p-6 pb-14 text-center
                    shadow-xl scale-100">

            <span class="absolute top-4 left-4 px-3 py-1 text-xs font-semibold
                         bg-indigo-700 rounded-full">
                Disyorkan
            </span>

            <p class="font-semibold text-lg mt-6">Gold</p>

            <h2 class="text-3xl font-bold mt-2">
                RM 999
                <span class="text-sm font-normal">/ tahun</span>
            </h2>

            <p class="text-xs opacity-80 mt-1">
                Pilihan paling seimbang untuk koperasi
            </p>

            <ul class="mt-6 space-y-2 text-sm text-left">
                <li class="flex items-center gap-2">✔ Anggota tanpa had</li>
                <li class="flex items-center gap-2">✔ Export PDF</li>
                <li class="flex items-center gap-2">✔ Semua modul utama</li>
                <li class="flex items-center gap-2">✔ Sokongan standard</li>
            </ul>

            <a href="{{ route('payment.start', ['package' => 'gold']) }}"
               class="mt-8 block w-full py-2 rounded-lg
                      bg-white text-indigo-600 font-semibold
                      hover:bg-gray-100 hover:scale-[1.02]
                      active:scale-95 transition-all">
                Naik Taraf
            </a>
        </div>

        <!-- PLATINUM 
        <div class="w-72 bg-white text-gray-800 border border-gray-200
                    rounded-xl p-6 pb-14 text-center
                    shadow-sm hover:shadow-md transition">

            <p class="font-semibold text-lg">Platinum</p>

            <h2 class="text-3xl font-bold mt-2">
                RM 1299
                <span class="text-gray-500 text-sm font-normal">/ tahun</span>
            </h2>

            <ul class="mt-6 space-y-2 text-sm text-gray-600 text-left">
                <li class="flex items-center gap-2">✔ Semua ciri Gold</li>
                <li class="flex items-center gap-2">✔ Modul lanjutan</li>
                <li class="flex items-center gap-2">✔ Pengurusan lebih fleksibel</li>
                <li class="flex items-center gap-2">✔ Sokongan keutamaan</li>
            </ul>

            <a href="{{ route('payment.start', ['package' => 'platinum']) }}"
               class="mt-8 block w-full py-2 rounded-lg
                      bg-indigo-500 text-white font-semibold
                      hover:bg-indigo-600 hover:scale-[1.02]
                      active:scale-95 transition-all">
                Naik Taraf
            </a>
        </div>-->

        <!-- DIAMOND
        <div class="w-72 bg-white text-gray-800 border border-gray-200
                    rounded-xl p-6 pb-14 text-center
                    shadow-sm hover:shadow-md transition">

            <p class="font-semibold text-lg">Diamond</p>

            <h2 class="text-3xl font-bold mt-2">
                RM 1599
                <span class="text-gray-500 text-sm font-normal">/ tahun</span>
            </h2>

            <ul class="mt-6 space-y-2 text-sm text-gray-600 text-left">
                <li class="flex items-center gap-2">✔ Semua ciri Platinum</li>
                <li class="flex items-center gap-2">✔ Ciri enterprise</li>
                <li class="flex items-center gap-2">✔ Sokongan khas</li>
                <li class="flex items-center gap-2">✔ Sesuai koperasi besar</li>
            </ul>

            <a href="{{ route('payment.start', ['package' => 'diamond']) }}"
               class="mt-8 block w-full py-2 rounded-lg
                      bg-indigo-500 text-white font-semibold
                      hover:bg-indigo-600 hover:scale-[1.02]
                      active:scale-95 transition-all">
                Naik Taraf
            </a>
        </div>-->

    </div>
</div>
@endsection