rc 1.0

app/components/UnlockBar.tsx

@@ -2,15 +2,25 @@
 
 import { useState, useEffect } from 'react'
 import UnlockModal from './UnlockModal'
+import { useI18n } from '@/lib/i18n'
+
+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 UnlockBar() {
+  const { t } = useI18n()
   const [referralStatus, setReferralStatus] = useState<ReferralStatus | null>(null)
   const [showModal, setShowModal] = useState(false)
   const [loading, setLoading] = useState(true)
@@ -34,6 +44,16 @@ export default function UnlockBar() {
         isUnlocked: false,
         referralsNeeded: 3,
         referralsRemaining: 3,
+        wholesaleTier: {
+          referralsNeeded: 3,
+          referralsRemaining: 3,
+          isUnlocked: false
+        },
+        innerCircleTier: {
+          referralsNeeded: 10,
+          referralsRemaining: 10,
+          isUnlocked: false
+        }
       })
     } finally {
       setLoading(false)
@@ -54,27 +74,72 @@ export default function UnlockBar() {
     isUnlocked: false,
     referralsNeeded: 3,
     referralsRemaining: 3,
+    wholesaleTier: {
+      referralsNeeded: 3,
+      referralsRemaining: 3,
+      isUnlocked: false
+    },
+    innerCircleTier: {
+      referralsNeeded: 10,
+      referralsRemaining: 10,
+      isUnlocked: false
+    }
   }
 
-  // If unlocked, show different message or hide bar
-  if (status.isUnlocked) {
+  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
+  }
+
+  // If wholesale is unlocked but inner circle is not, show inner circle as next level
+  if (wholesaleTier.isUnlocked && !innerCircleTier.isUnlocked) {
+    return (
+      <>
+        <div className="unlock-bar" style={{ background: 'var(--accent)', color: '#000' }}>
+          <div>
+            {t('unlockBar.unlocked')} <strong>{t('unlockBar.unlockedText')}</strong>
+          </div>
+        </div>
+        <div className="unlock-bar">
+          <div>
+            {t('unlockBar.innerCircleLocked')} <strong>{t('unlockBar.referralsCompleted', { count: status.referralCount, needed: innerCircleTier.referralsNeeded })}</strong> · {t('unlockBar.toGo', { remaining: innerCircleTier.referralsRemaining })}
+            <br />
+            <small>{t('unlockBar.innerCircleUnlockText', { needed: innerCircleTier.referralsNeeded })}</small>
+            <a href="#unlock" onClick={handleUnlockClick}>{t('unlockBar.unlockNow')}</a>
+          </div>
+        </div>
+        <UnlockModal isOpen={showModal} onClose={() => setShowModal(false)} />
+      </>
+    )
+  }
+
+  // If both are unlocked, show success message
+  if (wholesaleTier.isUnlocked && innerCircleTier.isUnlocked) {
     return (
       <div className="unlock-bar" style={{ background: 'var(--accent)', color: '#000' }}>
         <div>
-          ✅ Wholesale prices unlocked — <strong>You have access to wholesale pricing!</strong>
+          {t('unlockBar.unlocked')} <strong>{t('unlockBar.unlockedText')}</strong> · {t('unlockBar.innerCircleUnlocked')}
         </div>
       </div>
     )
   }
 
+  // Show wholesale unlock progress
   return (
     <>
       <div className="unlock-bar">
         <div>
-          🔒 Wholesale prices locked — <strong>{status.referralCount} / {status.referralsNeeded} referrals completed</strong> · {status.referralsRemaining} to go
+          {t('unlockBar.locked')} <strong>{t('unlockBar.referralsCompleted', { count: status.referralCount, needed: wholesaleTier.referralsNeeded })}</strong> · {t('unlockBar.toGo', { remaining: wholesaleTier.referralsRemaining })}
           <br />
-          <small>{status.referralsNeeded} verified sign-ups unlock wholesale prices forever.</small>
-          <a href="#unlock" onClick={handleUnlockClick}>Unlock now</a>
+          <small>{t('unlockBar.unlockText', { needed: wholesaleTier.referralsNeeded })}</small>
+          <a href="#unlock" onClick={handleUnlockClick}>{t('unlockBar.unlockNow')}</a>
         </div>
       </div>
       <UnlockModal isOpen={showModal} onClose={() => setShowModal(false)} />