<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Keahlian Poutrecs - Portal Rasmi</title>

    <link rel="icon" href="/assets/favicon.ico" type="image/x-icon">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              putraBlue: '#1F4E79',
              energyYellow: '#F9C600',
            }
          }
        }
      }
    </script>

    <style>
        .logo-hover { transition: 0.15s ease-in-out; }
        .logo-hover:hover { filter: brightness(1.15); transform: scale(1.03); }
    </style>
</head>
<body class="min-h-screen bg-slate-50">

<div class="max-w-6xl mx-auto px-4 py-6">

    <!-- TOP NAV -->
    <div class="flex items-center justify-between mb-8">
        <div class="flex items-center gap-3">
            <img src="/assets/logo-poutrecs.png" class="h-8 w-auto logo-hover" alt="Poutrecs">
            <div>
                <div class="text-xs font-semibold tracking-[0.2em] text-putraBlue uppercase">
                    Keahlian Poutrecs                </div>
                <div class="text-[13px] text-slate-500">
                    Platform Digital Rasmi · PSRP &amp; Komuniti Digital Poutrecs                </div>
            </div>
        </div>

        <div class="flex items-center gap-3 text-sm">
            <!-- Language Toggle -->
            <div class="flex items-center gap-2 text-[12px]">
                <a href="?lang=ms"
                   class="px-2 py-1 rounded-full border bg-putraBlue text-white border-putraBlue">
                    BM
                </a>
                <a href="?lang=en"
                   class="px-2 py-1 rounded-full border bg-white text-putraBlue border-slate-200">
                    EN
                </a>
            </div>

            <a href="https://poutrecs.com" target="_blank" class="text-slate-500 hover:text-putraBlue">
                Laman Utama Poutrecs            </a>

            <a href="/login.php"
               class="inline-flex items-center px-4 py-2 rounded-full text-[13px] font-semibold bg-white border border-slate-200 text-putraBlue hover:bg-slate-50">
                Log Masuk            </a>

            <a href="/choose-membership.php"
               class="inline-flex items-center px-4 py-2 rounded-full text-[13px] font-semibold bg-putraBlue text-white hover:bg-[#163653] shadow-sm">
                Daftar Sekarang            </a>
        </div>
    </div>

    <!-- HERO -->
    <section class="relative overflow-hidden rounded-3xl bg-white border border-slate-200 shadow-md">
        <div class="absolute -top-24 -right-20 w-72 h-72 rounded-full bg-energyYellow/25"></div>
        <div class="absolute -bottom-28 -left-24 w-80 h-80 rounded-full bg-putraBlue/10"></div>

        <div class="relative z-10 p-6 md:p-10 grid md:grid-cols-[1.3fr,1fr] gap-8 items-center">
            <div>
                <p class="text-[11px] font-semibold tracking-[0.25em] text-putraBlue uppercase mb-2">
                    Ekosistem Gaya Hidup Sukan Putrajaya                </p>

                <h1 class="text-3xl md:text-[38px] font-extrabold text-slate-900 leading-tight mb-3">
                    Membina Komuniti Lebih Sihat<br>
                    melalui sukan, rekreasi &amp; eksplorasi.                </h1>

                <p class="text-[14px] text-slate-600 leading-relaxed mb-5">
                    Portal rasmi untuk pendaftaran dan pengurusan keahlian Poutrecs &amp; PSRP. Nikmati akses program khas, kad ahli digital, diskaun merchandise dan komuniti tanpa politik.                </p>

                <div class="flex flex-wrap gap-2 mb-5">
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100 text-[12px] text-slate-700">
                        <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
                        Kad Ahli Digital + Pengesahan QR                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100 text-[12px] text-slate-700">
                        <span class="w-2 h-2 rounded-full bg-putraBlue"></span>
                        Pendaftaran Awal Program Terpilih                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100 text-[12px] text-slate-700">
                        <span class="w-2 h-2 rounded-full bg-energyYellow"></span>
                        Diskaun Merchandise                    </span>
                </div>

                <div class="flex flex-wrap gap-3">
                    <a href="/choose-membership.php"
                       class="inline-flex items-center justify-center px-5 py-2.5 rounded-full text-[13px] font-semibold bg-putraBlue text-white hover:bg-[#163653] shadow-sm">
                        Daftar Sekarang                    </a>

                    <a href="#fees"
                       class="inline-flex items-center justify-center px-5 py-2.5 rounded-full text-[13px] font-semibold bg-white border border-slate-200 text-putraBlue hover:bg-slate-50">
                        Lihat Yuran Keahlian                    </a>
                </div>

                <p class="mt-4 text-[12px] text-slate-500">
                    * Ahli Digital: Pendaftaran sekali seumur hidup + yuran tahunan untuk kekal aktif.                </p>
            </div>

            <!-- HERO SIDE CARD -->
            <div class="bg-slate-50 border border-slate-200 rounded-2xl p-5">
                <div class="flex items-center justify-between mb-3">
                    <p class="text-[13px] font-semibold text-slate-900">
                        Faedah Keahlian                    </p>
                    <span class="text-[11px] font-semibold text-putraBlue uppercase tracking-[0.2em]">
                        Manfaat Ahli                    </span>
                </div>

                <ul class="space-y-2 text-[13px] text-slate-700">
                    <li class="flex gap-2"><span class="mt-0.5">✅</span><span>Kad Ahli Digital + QR untuk sahkan status.</span></li>
                    <li class="flex gap-2"><span class="mt-0.5">✅</span><span>Pendaftaran Awal (contoh Briskwalk, PGS Tour).</span></li>
                    <li class="flex gap-2"><span class="mt-0.5">✅</span><span>Diskaun Merchandise 10–20% (produk terpilih).</span></li>
                    <li class="flex gap-2"><span class="mt-0.5">✅</span><span>Komuniti Digital (Telegram/WhatsApp untuk info awal).</span></li>
                </ul>

                <div class="mt-4 rounded-xl bg-white border border-slate-200 p-4">
                    <p class="text-[12px] text-slate-500 mb-1">
                        Pilihan popular untuk kebanyakan ahli                    </p>
                    <div class="flex items-end justify-between gap-3">
                        <div>
                            <p class="text-[14px] font-semibold text-slate-900">
                                Ahli Komuniti Digital                            </p>
                            <p class="text-[12px] text-slate-500">
                                Bukan mengundi · Tiada AGM · Tiada politik                            </p>
                        </div>
                        <a href="/register-digital.php"
                           class="inline-flex items-center px-3 py-1.5 rounded-full text-[12px] font-semibold bg-putraBlue text-white hover:bg-[#163653] shadow-sm">
                            Daftar Sekarang                        </a>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- TRUST / HIGHLIGHTS -->
    <section class="mt-10 grid md:grid-cols-3 gap-4">
        <div class="bg-white border border-slate-200 rounded-2xl shadow-sm p-5">
            <h3 class="text-[14px] font-semibold text-slate-900 mb-1">Rasmi &amp; Teratur</h3>
            <p class="text-[13px] text-slate-600">Kategori keahlian jelas: PSRP (Mengundi) dan Komuniti Digital Poutrecs (Bukan Mengundi).</p>
        </div>
        <div class="bg-white border border-slate-200 rounded-2xl shadow-sm p-5">
            <h3 class="text-[14px] font-semibold text-slate-900 mb-1">Tanpa Tunai &amp; Automasi</h3>
            <p class="text-[13px] text-slate-600">Pembayaran online, resit automatik, status keahlian dan tarikh luput diurus oleh sistem.</p>
        </div>
        <div class="bg-white border border-slate-200 rounded-2xl shadow-sm p-5">
            <h3 class="text-[14px] font-semibold text-slate-900 mb-1">Direka Untuk Komuniti</h3>
            <p class="text-[13px] text-slate-600">Fokus aktiviti sihat &amp; gaya hidup Putrajaya: sukan, rekreasi, eksplorasi &amp; merchandise.</p>
        </div>
    </section>

    <!-- USP -->
    <section class="mt-10">
        <div class="flex items-end justify-between mb-4">
            <div>
                <h2 class="text-xl font-bold text-slate-900">Kenapa jadi Ahli Komuniti Digital Poutrecs?</h2>
                <p class="text-[13px] text-slate-500">Manfaat eksklusif untuk Ahli Komuniti Digital Poutrecs.</p>
            </div>
            <a href="/choose-membership.php" class="text-[13px] font-semibold text-putraBlue hover:underline">
                Pilih Keahlian →
            </a>
        </div>

        <div class="grid md:grid-cols-3 gap-4">
            <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
                <div class="w-10 h-10 rounded-xl bg-energyYellow/30 flex items-center justify-center mb-3">🎫</div>
                <h3 class="text-[14px] font-semibold mb-1">Passport Aktiviti Poutrecs</h3>
                <p class="text-[13px] text-slate-600">Kumpul lencana apabila sertai program; buka diskaun, laluan VIP dan akses awal.</p>
            </div>
            <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
                <div class="w-10 h-10 rounded-xl bg-putraBlue/10 flex items-center justify-center mb-3">🛍️</div>
                <h3 class="text-[14px] font-semibold mb-1">Diskaun Merchandise</h3>
                <p class="text-[13px] text-slate-600">10%–20% diskaun untuk jersey, collectibles, postcard dan pakej terpilih.</p>
            </div>
            <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
                <div class="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center mb-3">⏱️</div>
                <h3 class="text-[14px] font-semibold mb-1">Keutamaan Pendaftaran Program</h3>
                <p class="text-[13px] text-slate-600">Pendaftaran lebih awal untuk Briskwalk Series, PGS Tour dan program terpilih.</p>
            </div>

            <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
                <div class="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center mb-3">📣</div>
                <h3 class="text-[14px] font-semibold mb-1">Akses Komuniti PutraCore</h3>
                <p class="text-[13px] text-slate-600">Sertai group rasmi, info penting lebih awal, voucher hari jadi &amp; hadiah penaja.</p>
            </div>
            <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
                <div class="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center mb-3">⭐</div>
                <h3 class="text-[14px] font-semibold mb-1">Sistem Putra Points</h3>
                <p class="text-[13px] text-slate-600">Points dari aktiviti &amp; pembelian; tebus ganjaran, diskaun event dan item terhad.</p>
            </div>
            <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
                <div class="w-10 h-10 rounded-xl bg-rose-100 flex items-center justify-center mb-3">🧘</div>
                <h3 class="text-[14px] font-semibold mb-1">Komuniti Tanpa Politik</h3>
                <p class="text-[13px] text-slate-600">Tiada AGM, tiada undi, tiada jawatan — hanya nikmati faedah dan aktiviti.</p>
            </div>
        </div>
    </section>

    <!-- FEES -->
    <section id="fees" class="mt-10">
        <div class="mb-4">
            <h2 class="text-xl font-bold text-slate-900">Kategori Keahlian &amp; Yuran</h2>
            <p class="text-[13px] text-slate-500">Pilih kategori yang paling sesuai dengan anda.</p>
        </div>

        <div class="grid md:grid-cols-2 gap-5">

            <!-- PSRP -->
            <div class="relative overflow-hidden bg-white border border-slate-200 rounded-2xl shadow-sm p-6">
                <div class="absolute -top-16 -right-10 w-40 h-40 rounded-full bg-putraBlue/10"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[11px] font-semibold bg-putraBlue text-white">
                            PSRP · Ahli Mengundi                        </span>
                    </div>

                    <h3 class="text-lg font-semibold mb-1">
                        PSRP Official Membership – Voting Member                    </h3>

                    <p class="text-[13px] text-slate-600 mb-4">
                        Keahlian rasmi persatuan dengan hak mengundi &amp; diundi mengikut Perlembagaan PSRP.                    </p>

                    <div class="rounded-xl bg-slate-50 border border-slate-200 p-4 mb-4">
                        <p class="text-[12px] text-slate-500 mb-1">
                            Yuran                        </p>
                        <p class="text-[14px] font-semibold text-slate-900">
                            Mengikut Perlembagaan PSRP                        </p>
                    </div>

                    <button type="button"
                            onclick="alert('Daftar PSRP (Akan Datang)')"
                            class="inline-flex items-center justify-center px-4 py-2 rounded-full text-[13px] font-semibold bg-slate-100 text-slate-700 hover:bg-slate-200">
                        Daftar PSRP (Akan Datang)                    </button>
                </div>
            </div>

            <!-- DIGITAL -->
            <div class="relative overflow-hidden bg-white border border-slate-200 rounded-2xl shadow-sm p-6">
                <div class="absolute -top-16 -right-10 w-40 h-40 rounded-full bg-energyYellow/25"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[11px] font-semibold bg-energyYellow text-black">
                            Komuniti Digital · Bukan Mengundi                        </span>
                        <span class="text-[11px] text-slate-600">
                            Tiada AGM                        </span>
                    </div>

                    <h3 class="text-lg font-semibold mb-1">
                        Poutrecs Digital Community – Non-Voting Member                    </h3>

                    <p class="text-[13px] text-slate-600 mb-4">
                        Keahlian komuniti rasmi di bawah Poutrecs. Fokus faedah program, gaya hidup &amp; komuniti.                    </p>

                    <div class="grid grid-cols-2 gap-3 mb-4">
                        <div class="rounded-xl bg-slate-50 border border-slate-200 p-4">
                            <p class="text-[12px] text-slate-500 mb-1">Pendaftaran (Sekali)</p>
                            <p class="text-[16px] font-extrabold text-putraBlue">
                                RM 100.00                            </p>
                            <p class="text-[11px] text-slate-500">Seumur hidup</p>
                        </div>

                        <div class="rounded-xl bg-slate-50 border border-slate-200 p-4">
                            <p class="text-[12px] text-slate-500 mb-1">Yuran Tahunan</p>
                            <p class="text-[16px] font-extrabold text-putraBlue">
                                RM 88.00                            </p>
                            <p class="text-[11px] text-slate-500">Untuk kekal aktif</p>
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <a href="/register-digital.php"
                           class="inline-flex items-center justify-center px-4 py-2 rounded-full text-[13px] font-semibold bg-putraBlue text-white hover:bg-[#163653] shadow-sm">
                            Daftar Ahli Digital                        </a>
                        <a href="/login.php"
                           class="inline-flex items-center justify-center px-4 py-2 rounded-full text-[13px] font-semibold bg-white border border-slate-200 text-putraBlue hover:bg-slate-50">
                            Saya sudah jadi ahli                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FINAL CTA -->
    <section class="mt-10">
        <div class="rounded-3xl bg-putraBlue text-white p-6 md:p-8 shadow-md overflow-hidden relative">
            <div class="absolute -top-16 -right-12 w-52 h-52 rounded-full bg-energyYellow/25"></div>

            <div class="relative z-10 grid md:grid-cols-[1.3fr,1fr] gap-6 items-center">
                <div>
                    <h2 class="text-xl md:text-2xl font-bold mb-2">
                        Bersedia untuk sertai komuniti Poutrecs?                    </h2>
                    <p class="text-[13px] text-slate-100">
                        Daftar sekarang untuk dapatkan kad ahli digital, akses program lebih awal dan manfaat komuniti.                    </p>
                </div>

                <div class="flex md:justify-end gap-2 flex-wrap">
                    <a href="/choose-membership.php"
                       class="inline-flex items-center justify-center px-5 py-2.5 rounded-full text-[13px] font-semibold bg-white text-putraBlue hover:bg-slate-100 shadow-sm">
                        Pilih Keahlian                    </a>
                    <a href="/register-digital.php"
                       class="inline-flex items-center justify-center px-5 py-2.5 rounded-full text-[13px] font-semibold bg-energyYellow text-slate-900 hover:brightness-95 shadow-sm">
                        Daftar Ahli Digital                    </a>
                </div>
            </div>
        </div>
    </section>

</div>

<footer class="mt-10 py-6 text-center text-[12px] text-slate-400">
    <img src="/assets/logo-poutrecs-icon.png"
         class="h-6 w-6 opacity-70 mx-auto mb-2"
         alt="Poutrecs Icon">
    <p>
        Poutrecs Digital Membership System<br>
        <span class="text-slate-500">Powered by Farhan</span>
    </p>
</footer>

</body>
</html>
