Block 8 complete: streaks, notifications, referrals, premium identity, gamification

src/app/profile/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, FormEvent } from "react";
 import { useAuth } from "@/lib/AuthContext";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { getUserTier } from "@/lib/tiers";
 import { PERSONAS } from "@/lib/personas";
 import {
@@ -14,7 +15,10 @@ import {
   Save,
   Sparkles,
   Shield,
+  TrendingUp,
+  ExternalLink,
 } from "lucide-react";
+import PremiumBadge from "@/components/PremiumBadge";
 
 const VALID_MADHABS = ["Hanafi", "Maliki", "Shafi'i", "Hanbali"];
 
@@ -145,6 +149,7 @@ export default function ProfilePage() {
                     ? "Premium"
                     : "Pro"}
               </span>
+              <PremiumBadge tier={tier} size="md" />
             </div>
             <div className="flex items-center gap-1.5">
               <Zap size={14} className="text-gray-600" />
@@ -156,6 +161,57 @@ export default function ProfilePage() {
             </div>
           </div>
 
+          {/* Premium/Pro Banner with Gradient */}
+          {(tier === "premium" || tier === "pro") && (
+            <div className={`mt-3 rounded-xl p-4 relative overflow-hidden ${
+              tier === "pro"
+                ? "bg-gradient-to-r from-purple-900/40 via-purple-900/20 to-gray-900/60 border border-purple-500/30"
+                : "bg-gradient-to-r from-[#D4AF37]/20 via-yellow-900/15 to-gray-900/60 border border-[#D4AF37]/30"
+            }`}>
+              <div className={`absolute top-0 right-0 w-32 h-32 rounded-full blur-3xl ${
+                tier === "pro" ? "bg-purple-500/10" : "bg-[#D4AF37]/10"
+              }`} />
+              <div className="relative flex items-center gap-3">
+                <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
+                  tier === "pro" ? "bg-purple-900/40" : "bg-[#D4AF37]/20"
+                }`}>
+                  {tier === "pro" ? (
+                    <Crown size={20} className="text-purple-400" />
+                  ) : (
+                    <Sparkles size={20} className="text-[#D4AF37]" />
+                  )}
+                </div>
+                <div className="flex-1">
+                  <p className={`text-sm font-bold ${
+                    tier === "pro" ? "text-purple-300" : "text-[#D4AF37]"
+                  }`}>
+                    {tier === "pro" ? "Pro Member" : "Premium Member"}
+                  </p>
+                  <p className="text-[10px] text-gray-500 mt-0.5">
+                    {tier === "pro"
+                      ? "Unlimited everything + 0% marketplace fees"
+                      : "Enhanced AI + marketplace access"}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* FLH Earning Multiplier */}
+          {(tier === "premium" || tier === "pro") && (
+            <div className="mt-3 flex items-center justify-between bg-gradient-to-r from-[#D4AF37]/10 to-[#D4AF37]/5 border border-[#D4AF37]/20 rounded-xl px-4 py-3">
+              <div className="flex items-center gap-2">
+                <TrendingUp size={16} className="text-[#D4AF37]" />
+                <span className="text-sm font-medium text-gray-300">
+                  FLH Earning Multiplier
+                </span>
+              </div>
+              <span className="text-lg font-bold text-[#D4AF37]">
+                2x
+              </span>
+            </div>
+          )}
+
           {/* FLH Balance */}
           <div className="mt-3 flex items-center justify-between bg-[#1a1a24] rounded-xl px-4 py-2.5">
             <div className="flex items-center gap-2">
@@ -322,6 +378,39 @@ export default function ProfilePage() {
               </div>
             )}
           </div>
+
+          {/* Subscription Management */}
+          {(tier === "premium" || tier === "pro") && (
+            <div className="mt-4 pt-3 border-t border-gray-800/60">
+              <Link
+                href="/upgrade"
+                className="flex items-center justify-between py-2 px-3 rounded-xl bg-[#D4AF37]/10 border border-[#D4AF37]/20 active:bg-[#D4AF37]/20 transition"
+              >
+                <div className="flex items-center gap-2">
+                  <ExternalLink size={14} className="text-[#D4AF37]" />
+                  <span className="text-xs font-medium text-[#D4AF37]">
+                    Manage Subscription
+                  </span>
+                </div>
+                <ChevronRight size={14} className="text-[#D4AF37]" />
+              </Link>
+              {user.trialEndsAt && (
+                <div className="mt-2 flex items-center gap-1.5 px-3 py-1.5">
+                  <span className="text-[10px] text-gray-600">
+                    Trial ends{" "}
+                    {new Date(user.trialEndsAt).toLocaleDateString("en-MY", {
+                      month: "short",
+                      day: "numeric",
+                    })}
+                  </span>
+                  <span className="text-[10px] text-gray-700">·</span>
+                  <span className="text-[10px] text-amber-400 font-medium">
+                    {Math.max(0, Math.ceil((new Date(user.trialEndsAt).getTime() - Date.now()) / (1000 * 60 * 60 * 24)))} days remaining
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
         </div>
 
         {/* Logout */}