rc 1.0

app/components/UnlockModal.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, Suspense } from 'react'
 import AuthModal from './AuthModal'
+import { useI18n } from '@/lib/i18n'
 
 interface UnlockModalProps {
   isOpen: boolean
@@ -22,6 +23,7 @@ interface ReferralStatus {
 }
 
 export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
+  const { t } = useI18n()
   const [referralStatus, setReferralStatus] = useState<ReferralStatus | null>(null)
   const [referralLink, setReferralLink] = useState<string>('')
   const [loading, setLoading] = useState(true)
@@ -115,7 +117,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 }}>Unlock wholesale prices</h2>
+          <h2 style={{ margin: 0 }}>{t('unlockModal.title')}</h2>
           <button
             onClick={onClose}
             style={{
@@ -137,17 +139,17 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
         </div>
 
         {loading ? (
-          <p style={{ color: 'var(--muted)', textAlign: 'center' }}>Loading...</p>
+          <p style={{ color: 'var(--muted)', textAlign: 'center' }}>{t('common.loading')}</p>
         ) : (
           <>
             <div style={{ marginBottom: '24px', textAlign: 'center' }}>
               <div style={{ fontSize: '18px', marginBottom: '8px' }}>
-                🔒 {status.referralCount} of {status.referralsNeeded} referrals completed
+                🔒 {t('unlockModal.referralsCompleted', { count: status.referralCount, needed: status.referralsNeeded })}
               </div>
               <p style={{ color: 'var(--muted)', fontSize: '14px', margin: '8px 0' }}>
-                Invite {status.referralsNeeded} friends to sign up.
+                {t('unlockModal.inviteFriends', { needed: status.referralsNeeded })}
                 <br />
-                Once they do, wholesale prices unlock forever.
+                {t('unlockModal.unlockForever')}
               </p>
             </div>
 
@@ -162,7 +164,7 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
                     fontWeight: 500,
                   }}
                 >
-                  Your referral link
+                  {t('unlockModal.yourReferralLink')}
                 </label>
                 <div style={{ display: 'flex', gap: '8px' }}>
                   <input
@@ -194,7 +196,7 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
                       whiteSpace: 'nowrap',
                     }}
                   >
-                    {copied ? 'Copied!' : 'Copy link'}
+                    {copied ? t('unlockModal.copied') : t('unlockModal.copyLink')}
                   </button>
                 </div>
               </div>
@@ -209,7 +211,7 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
                 }}
               >
                 <p style={{ color: 'var(--muted)', fontSize: '14px', margin: '0 0 12px 0' }}>
-                  Please log in to get your referral link
+                  {t('unlockModal.yourReferralLink')}
                 </p>
                 <button
                   onClick={() => setShowAuthModal(true)}
@@ -224,7 +226,7 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
                     fontWeight: 500,
                   }}
                 >
-                  Login
+                  {t('auth.login')}
                 </button>
               </div>
             )}
@@ -240,7 +242,7 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
                 textAlign: 'center',
               }}
             >
-              Friends must sign up to count.
+              {t('unlockModal.friendsMustSignUp')}
             </div>
 
             <div
@@ -252,7 +254,10 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
                 marginBottom: '24px',
               }}
             >
-              {status.referralsRemaining} referral{status.referralsRemaining !== 1 ? 's' : ''} to go
+              {status.referralsRemaining === 1 
+                ? t('unlockModal.referralsToGoSingular', { remaining: status.referralsRemaining })
+                : t('unlockModal.referralsToGoPlural', { remaining: status.referralsRemaining })
+              }
             </div>
 
             <button
@@ -269,7 +274,7 @@ export default function UnlockModal({ isOpen, onClose }: UnlockModalProps) {
                 fontWeight: 500,
               }}
             >
-              Close
+              {t('common.close')}
             </button>
           </>
         )}