final 0.9

app/components/UnlockModal.tsx

@@ -15,11 +15,19 @@ interface User {
   email: string
 }
 
+interface ReferralTier {
+  referralsNeeded: number
+  referralsRemaining: number
+  isUnlocked: boolean
+}
+
 interface ReferralStatus {
   referralCount: number
   isUnlocked: boolean
   referralsNeeded: number
   referralsRemaining: number
+  wholesaleTier?: ReferralTier
+  innerCircleTier?: ReferralTier
 }
 
 export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
@@ -86,8 +94,35 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
     isUnlocked: false,
     referralsNeeded: 3,
     referralsRemaining: 3,
+    wholesaleTier: {
+      referralsNeeded: 3,
+      referralsRemaining: 3,
+      isUnlocked: false
+    },
+    innerCircleTier: {
+      referralsNeeded: 10,
+      referralsRemaining: 10,
+      isUnlocked: false
+    }
   }
 
+  const wholesaleTier = status.wholesaleTier || {
+    referralsNeeded: 3,
+    referralsRemaining: Math.max(0, 3 - status.referralCount),
+    isUnlocked: status.isUnlocked
+  }
+
+  const innerCircleTier = status.innerCircleTier || {
+    referralsNeeded: 10,
+    referralsRemaining: Math.max(0, 10 - status.referralCount),
+    isUnlocked: status.referralCount >= 10
+  }
+
+  // Determine which tier to show and which title to use
+  const isShowingInnerCircle = wholesaleTier.isUnlocked && !innerCircleTier.isUnlocked
+  const currentTier = isShowingInnerCircle ? innerCircleTier : wholesaleTier
+  const modalTitle = isShowingInnerCircle ? t('unlockModal.innerCircleTitle') : t('unlockModal.title')
+
   return (
     <div
       style={{
@@ -117,7 +152,7 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
         onClick={(e) => e.stopPropagation()}
       >
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
-          <h2 style={{ margin: 0 }}>{t('unlockModal.title')}</h2>
+          <h2 style={{ margin: 0 }}>{modalTitle}</h2>
           <button
             onClick={onClose}
             style={{
@@ -144,12 +179,12 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
           <>
             <div style={{ marginBottom: '24px', textAlign: 'center' }}>
               <div style={{ fontSize: '18px', marginBottom: '8px' }}>
-                🔒 {t('unlockModal.referralsCompleted', { count: status.referralCount, needed: status.referralsNeeded })}
+                🔒 {t('unlockModal.referralsCompleted', { count: status.referralCount, needed: currentTier.referralsNeeded })}
               </div>
               <p style={{ color: 'var(--muted)', fontSize: '14px', margin: '8px 0' }}>
-                {t('unlockModal.inviteFriends', { needed: status.referralsNeeded })}
+                {t('unlockModal.inviteFriends', { needed: currentTier.referralsNeeded })}
                 <br />
-                {t('unlockModal.unlockForever')}
+                {isShowingInnerCircle ? t('unlockModal.innerCircleUnlockForever') : t('unlockModal.unlockForever')}
               </p>
             </div>
 
@@ -254,9 +289,9 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
                 marginBottom: '24px',
               }}
             >
-              {status.referralsRemaining === 1 
-                ? t('unlockModal.referralsToGoSingular', { remaining: status.referralsRemaining })
-                : t('unlockModal.referralsToGoPlural', { remaining: status.referralsRemaining })
+              {currentTier.referralsRemaining === 1 
+                ? t('unlockModal.referralsToGoSingular', { remaining: currentTier.referralsRemaining })
+                : t('unlockModal.referralsToGoPlural', { remaining: currentTier.referralsRemaining })
               }
             </div>