rc 1.0

app/admin/buyers/page.tsx

@@ -8,11 +8,15 @@ interface Buyer {
   username: string
   email: string
   created_at?: string
+  referral_count?: number
+  hasWholesaleAccess?: boolean
+  hasInnerCircleAccess?: boolean
 }
 
 export default function BuyersManagementPage() {
   const router = useRouter()
   const [buyers, setBuyers] = useState<Buyer[]>([])
+  const [filteredBuyers, setFilteredBuyers] = useState<Buyer[]>([])
   const [loading, setLoading] = useState(true)
   const [authenticated, setAuthenticated] = useState(false)
   const [editingBuyer, setEditingBuyer] = useState<Buyer | null>(null)
@@ -21,6 +25,10 @@ export default function BuyersManagementPage() {
     email: '',
     password: '',
   })
+  const [filters, setFilters] = useState({
+    wholesaleOnly: false,
+    innerCircleOnly: false,
+  })
 
   useEffect(() => {
     // Check authentication
@@ -44,7 +52,9 @@ export default function BuyersManagementPage() {
       const response = await fetch('/api/buyers')
       if (response.ok) {
         const data = await response.json()
-        setBuyers(Array.isArray(data) ? data : [])
+        const buyersList = Array.isArray(data) ? data : []
+        setBuyers(buyersList)
+        applyFilters(buyersList, filters)
       }
     } catch (error) {
       console.error('Error fetching buyers:', error)
@@ -53,6 +63,24 @@ export default function BuyersManagementPage() {
     }
   }
 
+  const applyFilters = (buyersList: Buyer[], currentFilters: typeof filters) => {
+    let filtered = [...buyersList]
+    
+    if (currentFilters.wholesaleOnly) {
+      filtered = filtered.filter(buyer => buyer.hasWholesaleAccess)
+    }
+    
+    if (currentFilters.innerCircleOnly) {
+      filtered = filtered.filter(buyer => buyer.hasInnerCircleAccess)
+    }
+    
+    setFilteredBuyers(filtered)
+  }
+
+  useEffect(() => {
+    applyFilters(buyers, filters)
+  }, [filters])
+
   const handleEdit = (buyer: Buyer) => {
     setEditingBuyer(buyer)
     setFormData({
@@ -173,11 +201,62 @@ export default function BuyersManagementPage() {
           </button>
         </div>
 
-        {buyers.length === 0 ? (
+        <div style={{
+          marginBottom: '20px',
+          padding: '16px',
+          background: 'var(--card)',
+          borderRadius: '8px',
+          border: '1px solid var(--border)'
+        }}>
+          <h3 style={{ marginBottom: '12px', fontSize: '16px' }}>Filters</h3>
+          <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
+            <label style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '8px',
+              cursor: 'pointer',
+              userSelect: 'none'
+            }}>
+              <input
+                type="checkbox"
+                checked={filters.wholesaleOnly}
+                onChange={(e) => setFilters({ ...filters, wholesaleOnly: e.target.checked })}
+                style={{ width: '16px', height: '16px', cursor: 'pointer' }}
+              />
+              <span>Wholesale Access (3+ referrals)</span>
+            </label>
+            <label style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '8px',
+              cursor: 'pointer',
+              userSelect: 'none'
+            }}>
+              <input
+                type="checkbox"
+                checked={filters.innerCircleOnly}
+                onChange={(e) => setFilters({ ...filters, innerCircleOnly: e.target.checked })}
+                style={{ width: '16px', height: '16px', cursor: 'pointer' }}
+              />
+              <span>Inner Circle Access (10+ referrals)</span>
+            </label>
+          </div>
+          {(filters.wholesaleOnly || filters.innerCircleOnly) && (
+            <p style={{ 
+              marginTop: '12px', 
+              color: 'var(--muted)', 
+              fontSize: '14px' 
+            }}>
+              Showing {filteredBuyers.length} of {buyers.length} buyers
+            </p>
+          )}
+        </div>
+
+        {(filters.wholesaleOnly || filters.innerCircleOnly ? filteredBuyers : buyers).length === 0 ? (
           <p style={{ color: 'var(--muted)' }}>No buyers found</p>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-            {buyers.map((buyer) => (
+            {(filters.wholesaleOnly || filters.innerCircleOnly ? filteredBuyers : buyers).map((buyer) => (
               <div
                 key={buyer.id}
                 className="drop-card"
@@ -273,10 +352,35 @@ export default function BuyersManagementPage() {
                         ID: {buyer.id}
                       </p>
                       {buyer.created_at && (
-                        <p style={{ color: 'var(--muted)', fontSize: '12px' }}>
+                        <p style={{ color: 'var(--muted)', fontSize: '12px', marginBottom: '4px' }}>
                           Created: {new Date(buyer.created_at).toLocaleString()}
                         </p>
                       )}
+                      <div style={{ 
+                        display: 'flex', 
+                        gap: '8px', 
+                        marginTop: '8px',
+                        flexWrap: 'wrap'
+                      }}>
+                        <span style={{ 
+                          padding: '4px 8px',
+                          borderRadius: '4px',
+                          fontSize: '12px',
+                          background: buyer.hasWholesaleAccess ? '#10b981' : '#6b7280',
+                          color: '#fff'
+                        }}>
+                          {buyer.referral_count || 0} referrals - Wholesale {buyer.hasWholesaleAccess ? '✓' : '✗'}
+                        </span>
+                        <span style={{ 
+                          padding: '4px 8px',
+                          borderRadius: '4px',
+                          fontSize: '12px',
+                          background: buyer.hasInnerCircleAccess ? '#8b5cf6' : '#6b7280',
+                          color: '#fff'
+                        }}>
+                          Inner Circle {buyer.hasInnerCircleAccess ? '✓' : '✗'}
+                        </span>
+                      </div>
                     </div>
                     <div style={{ display: 'flex', gap: '8px' }}>
                       <button

app/admin/drops/page.tsx

@@ -537,7 +537,7 @@ export default function DropsManagementPage() {
                     onChange={(e) => setFormData({ ...formData, ppu: e.target.value })}
                     required
                     min="1"
-                    placeholder="2500 = 2.50 CHF"
+                    placeholder="2500 = 2.50 EUR"
                     style={{
                       width: '100%',
                       padding: '8px',
@@ -959,7 +959,7 @@ export default function DropsManagementPage() {
                       <div style={{ flex: 1 }}>
                         <h3 style={{ marginBottom: '8px' }}>{drop.item}</h3>
                         <p style={{ color: 'var(--muted)', fontSize: '14px', marginBottom: '4px' }}>
-                          ID: {drop.id} · Size: {drop.size}{drop.unit} · Price: {(drop.ppu / 1000).toFixed(2)} CHF / {drop.unit}
+                          ID: {drop.id} · Size: {drop.size}{drop.unit} · Price: {(drop.ppu / 1000).toFixed(2)} EUR / {drop.unit}
                         </p>
                         <p style={{ color: 'var(--muted)', fontSize: '12px', marginBottom: '12px' }}>
                           Created: {new Date(drop.created_at).toLocaleString()}

app/api/buyers/route.ts

@@ -1,13 +1,37 @@
 import { NextRequest, NextResponse } from 'next/server'
 import pool from '@/lib/db'
 
-// GET /api/buyers - Get all buyers
+// GET /api/buyers - Get all buyers with referral counts
 export async function GET(request: NextRequest) {
   try {
     const [rows] = await pool.execute(
-      'SELECT id, username, email, created_at FROM buyers ORDER BY created_at DESC'
+      `SELECT 
+        b.id, 
+        b.username, 
+        b.email, 
+        b.created_at,
+        COALESCE(ref_counts.referral_count, 0) as referral_count
+      FROM buyers b
+      LEFT JOIN (
+        SELECT referrer, COUNT(*) as referral_count
+        FROM referrals
+        GROUP BY referrer
+      ) ref_counts ON b.id = ref_counts.referrer
+      ORDER BY b.created_at DESC`
     )
-    return NextResponse.json(rows)
+    
+    // Add access status for each buyer
+    const buyersWithAccess = (rows as any[]).map((buyer: any) => {
+      const referralCount = parseInt(buyer.referral_count) || 0
+      return {
+        ...buyer,
+        referral_count: referralCount,
+        hasWholesaleAccess: referralCount >= 3,
+        hasInnerCircleAccess: referralCount >= 10
+      }
+    })
+    
+    return NextResponse.json(buyersWithAccess)
   } catch (error) {
     console.error('Error fetching buyers:', error)
     return NextResponse.json(

app/api/payments/create-invoice/route.ts

@@ -3,6 +3,8 @@ import { cookies } from 'next/headers'
 import pool from '@/lib/db'
 import { getNowPaymentsConfig } from '@/lib/nowpayments'
 import { ALLOWED_PAYMENT_CURRENCIES, isAllowedCurrency } from '@/lib/payment-currencies'
+import { getCountryFromIp, calculateShippingFee } from '@/lib/geolocation'
+import { getCurrencyForCountry, convertPriceForCountry } from '@/lib/currency'
 
 // POST /api/payments/create-invoice - Create a NOWPayments payment
 // Note: Endpoint name kept as "create-invoice" for backward compatibility
@@ -129,23 +131,38 @@ export async function POST(request: NextRequest) {
         )
       }
 
-    // Check if user has unlocked wholesale prices
-    const [referralRows] = await pool.execute(
-      'SELECT COUNT(*) as count FROM referrals WHERE referrer = ?',
-      [buyer_id]
-    )
-    const referralCount = (referralRows as any[])[0]?.count || 0
-    const isWholesaleUnlocked = referralCount >= 3
+      // Check if user has unlocked wholesale prices (use transaction connection to avoid connection leak)
+      const [referralRows] = await connection.execute(
+        'SELECT COUNT(*) as count FROM referrals WHERE referrer = ?',
+        [buyer_id]
+      )
+      const referralCount = (referralRows as any[])[0]?.count || 0
+      const isWholesaleUnlocked = referralCount >= 3
 
-    // Calculate price
-    // ppu is stored as integer where 1000 = $1.00, so divide by 1000 to get actual price
+    // Get country from IP to determine currency
+    const countryCode = await getCountryFromIp(request)
+    const currency = getCurrencyForCountry(countryCode)
+
+    // Calculate price in EUR (database stores prices in EUR)
+    // ppu is stored as integer where 1000 = 1.00 EUR, so divide by 1000 to get actual price
     // Assuming ppu is per gram
-    const pricePerGram = drop.ppu / 1000
-    const priceToUse = isWholesaleUnlocked ? pricePerGram * 0.76 : pricePerGram
-    const priceAmount = size * priceToUse
+    const pricePerGramEur = drop.ppu / 1000
+    const priceToUseEur = isWholesaleUnlocked ? pricePerGramEur * 0.76 : pricePerGramEur
+    const priceAmountEur = size * priceToUseEur
+
+    // Convert price to user's currency (CHF for Swiss, EUR for others)
+    const priceAmount = convertPriceForCountry(priceAmountEur, countryCode)
+
+    // Calculate shipping fee (already in correct currency: CHF for CH, EUR for others)
+    const shippingFee = calculateShippingFee(countryCode)
+
+    // Add shipping fee to total price
+    const totalPriceAmount = priceAmount + shippingFee
 
     // Round to 2 decimal places
-    const roundedPriceAmount = Math.round(priceAmount * 100) / 100
+    const roundedPriceAmount = Math.round(totalPriceAmount * 100) / 100
+    const roundedShippingFee = Math.round(shippingFee * 100) / 100
+    const roundedSubtotal = Math.round(priceAmount * 100) / 100
 
     // Generate order ID
     const orderId = `SALE-${Date.now()}-${drop_id}-${buyer_id}`
@@ -158,6 +175,10 @@ export async function POST(request: NextRequest) {
       // Get NOWPayments config (testnet or production)
       const nowPaymentsConfig = getNowPaymentsConfig()
 
+      // Use currency based on user location (CHF for Swiss, EUR for others)
+      // Override the default currency from config with user's currency
+      const priceCurrency = currency.toLowerCase()
+
       // Calculate expiration time (10 minutes from now)
       const expiresAt = new Date()
       expiresAt.setMinutes(expiresAt.getMinutes() + 10)
@@ -180,7 +201,7 @@ export async function POST(request: NextRequest) {
         },
         body: JSON.stringify({
           price_amount: roundedPriceAmount,
-          price_currency: nowPaymentsConfig.currency,
+          price_currency: priceCurrency, // CHF for Swiss users, EUR for others
           pay_currency: payCurrency, // Required: crypto currency (btc, eth, etc)
           order_id: orderId,
           order_description: `${drop.item} - ${size}g`,
@@ -206,7 +227,7 @@ export async function POST(request: NextRequest) {
       // payment.payment_id is the NOWPayments payment ID
       await connection.execute(
         'INSERT INTO pending_orders (payment_id, order_id, drop_id, buyer_id, buyer_data_id, size, price_amount, price_currency, expires_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)',
-        [payment.payment_id, orderId, drop_id, buyer_id, buyer_data_id, size, roundedPriceAmount, nowPaymentsConfig.currency, expiresAt]
+        [payment.payment_id, orderId, drop_id, buyer_id, buyer_data_id, size, roundedPriceAmount, priceCurrency, expiresAt]
       )
 
       // Commit transaction - inventory is now reserved
@@ -220,8 +241,10 @@ export async function POST(request: NextRequest) {
         pay_address: payment.pay_address, // Address where customer sends payment
         pay_amount: payment.pay_amount, // Amount in crypto to pay
         pay_currency: payment.pay_currency, // Crypto currency
-        price_amount: payment.price_amount, // Price in fiat
-        price_currency: payment.price_currency, // Fiat currency
+        price_amount: payment.price_amount, // Total price in fiat (includes shipping)
+        price_currency: payment.price_currency, // Fiat currency (CHF or EUR)
+        shipping_fee: roundedShippingFee, // Shipping fee in user's currency
+        subtotal: roundedSubtotal, // Product price without shipping in user's currency
         order_id: orderId,
         payin_extra_id: payment.payin_extra_id, // Memo/tag for certain currencies (XRP, XLM, etc)
         expiration_estimate_date: payment.expiration_estimate_date, // When payment expires

app/api/referrals/status/route.ts

@@ -14,7 +14,17 @@ export async function GET(request: NextRequest) {
           referralCount: 0,
           isUnlocked: false,
           referralsNeeded: 3,
-          referralsRemaining: 3
+          referralsRemaining: 3,
+          wholesaleTier: {
+            referralsNeeded: 3,
+            referralsRemaining: 3,
+            isUnlocked: false
+          },
+          innerCircleTier: {
+            referralsNeeded: 10,
+            referralsRemaining: 10,
+            isUnlocked: false
+          }
         },
         { status: 200 }
       )
@@ -29,15 +39,29 @@ export async function GET(request: NextRequest) {
     )
 
     const referralCount = (referralRows as any[])[0]?.count || 0
-    const isUnlocked = referralCount >= 3
-    const referralsNeeded = 3
-    const referralsRemaining = Math.max(0, referralsNeeded - referralCount)
+    const isWholesaleUnlocked = referralCount >= 3
+    const isInnerCircleUnlocked = referralCount >= 10
+    
+    // Determine which tier to show
+    const wholesaleTier = {
+      referralsNeeded: 3,
+      referralsRemaining: Math.max(0, 3 - referralCount),
+      isUnlocked: isWholesaleUnlocked
+    }
+    
+    const innerCircleTier = {
+      referralsNeeded: 10,
+      referralsRemaining: Math.max(0, 10 - referralCount),
+      isUnlocked: isInnerCircleUnlocked
+    }
 
     return NextResponse.json({
       referralCount,
-      isUnlocked,
-      referralsNeeded,
-      referralsRemaining,
+      isUnlocked: isWholesaleUnlocked, // Keep for backward compatibility
+      referralsNeeded: isWholesaleUnlocked ? innerCircleTier.referralsNeeded : wholesaleTier.referralsNeeded,
+      referralsRemaining: isWholesaleUnlocked ? innerCircleTier.referralsRemaining : wholesaleTier.referralsRemaining,
+      wholesaleTier,
+      innerCircleTier,
     })
   } catch (error) {
     console.error('Error fetching referral status:', error)

app/api/shipping-fee/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getCountryFromIp, calculateShippingFee } from '@/lib/geolocation'
+import { getCurrencyForCountry } from '@/lib/currency'
+
+// GET /api/shipping-fee - Get shipping fee based on user's IP location
+export async function GET(request: NextRequest) {
+  try {
+    const countryCode = await getCountryFromIp(request)
+    const shippingFee = calculateShippingFee(countryCode)
+    const currency = getCurrencyForCountry(countryCode)
+
+    return NextResponse.json({
+      shipping_fee: shippingFee,
+      country_code: countryCode,
+      currency: currency,
+    })
+  } catch (error) {
+    console.error('Error calculating shipping fee:', error)
+    // Default to 40 EUR if detection fails
+    return NextResponse.json({
+      shipping_fee: 40,
+      country_code: null,
+      currency: 'EUR',
+    })
+  }
+}
+

app/components/AuthModal.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import { useSearchParams } from 'next/navigation'
+import { useI18n } from '@/lib/i18n'
 
 interface User {
   id: number
@@ -16,6 +17,7 @@ interface AuthModalProps {
 }
 
 export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps) {
+  const { t } = useI18n()
   const searchParams = useSearchParams()
   const [isLogin, setIsLogin] = useState(true)
   const [username, setUsername] = useState('')
@@ -83,7 +85,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
       const data = await response.json()
 
       if (!response.ok) {
-        setError(data.error || 'An error occurred')
+        setError(data.error || t('auth.anErrorOccurred'))
         setLoading(false)
         return
       }
@@ -93,7 +95,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
       onClose()
     } catch (error) {
       console.error('Auth error:', error)
-      setError('An unexpected error occurred')
+      setError(t('auth.unexpectedError'))
     } finally {
       setLoading(false)
     }
@@ -131,7 +133,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
       >
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
           <h2 style={{ margin: 0 }}>
-            {isLogin ? 'Login' : 'Register'}
+            {isLogin ? t('auth.login') : t('auth.register')}
           </h2>
           <button
             onClick={onClose}
@@ -165,7 +167,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
                   color: 'var(--text)',
                 }}
               >
-                Email
+                {t('auth.email')}
               </label>
               <input
                 type="email"
@@ -182,7 +184,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
                   color: 'var(--text)',
                   fontSize: '14px',
                 }}
-                placeholder="your@email.com"
+                placeholder={t('auth.email')}
               />
             </div>
           )}
@@ -197,7 +199,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
                 color: 'var(--text)',
               }}
             >
-              Username
+              {t('auth.username')}
             </label>
             <input
               type="text"
@@ -215,7 +217,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
                 color: 'var(--text)',
                 fontSize: '14px',
               }}
-              placeholder="username"
+              placeholder={t('auth.username')}
             />
           </div>
 
@@ -229,7 +231,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
                 color: 'var(--text)',
               }}
             >
-              Password
+              {t('auth.password')}
             </label>
             <input
               type="password"
@@ -247,7 +249,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
                 color: 'var(--text)',
                 fontSize: '14px',
               }}
-              placeholder="password"
+              placeholder={t('auth.password')}
             />
           </div>
 
@@ -262,7 +264,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
                   color: 'var(--text)',
                 }}
               >
-                Referral ID <span style={{ color: 'var(--muted)', fontSize: '12px', fontWeight: 'normal' }}>(optional)</span>
+                {t('auth.referralId')} <span style={{ color: 'var(--muted)', fontSize: '12px', fontWeight: 'normal' }}>({t('auth.optional')})</span>
               </label>
               <input
                 type="text"
@@ -278,11 +280,11 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
                   color: 'var(--text)',
                   fontSize: '14px',
                 }}
-                placeholder="Enter referral ID"
+                placeholder={t('auth.referralId')}
               />
               {searchParams?.get('ref') && referralId === searchParams.get('ref') && (
                 <small style={{ display: 'block', marginTop: '4px', fontSize: '12px', color: 'var(--accent)' }}>
-                  ✓ Auto-filled from referral link
+                  {t('auth.autoFilled')}
                 </small>
               )}
             </div>
@@ -316,10 +318,10 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
             }}
           >
             {loading
-              ? 'Processing...'
+              ? t('common.processing')
               : isLogin
-                ? 'Login'
-                : 'Register'}
+                ? t('auth.login')
+                : t('auth.register')}
           </button>
         </form>
 
@@ -333,7 +335,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
         >
           {isLogin ? (
             <>
-              Don't have an account?{' '}
+              {t('auth.dontHaveAccount')}{' '}
               <button
                 onClick={() => {
                   setIsLogin(false)
@@ -348,12 +350,12 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
                   padding: 0,
                 }}
               >
-                Register
+                {t('auth.register')}
               </button>
             </>
           ) : (
             <>
-              Already have an account?{' '}
+              {t('auth.alreadyHaveAccount')}{' '}
               <button
                 onClick={() => {
                   setIsLogin(true)
@@ -368,7 +370,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
                   padding: 0,
                 }}
               >
-                Login
+                {t('auth.login')}
               </button>
             </>
           )}

app/components/Drop.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, Suspense } from 'react'
 import Image from 'next/image'
 import AuthModal from './AuthModal'
 import UnlockModal from './UnlockModal'
+import { useI18n } from '@/lib/i18n'
 
 interface DropData {
   id: number
@@ -28,6 +29,7 @@ interface User {
 }
 
 export default function Drop() {
+  const { t } = useI18n()
   const [drop, setDrop] = useState<DropData | null>(null)
   const [loading, setLoading] = useState(true)
   const [selectedSize, setSelectedSize] = useState(50)
@@ -52,11 +54,15 @@ export default function Drop() {
   const [isWholesaleUnlocked, setIsWholesaleUnlocked] = useState(false)
   const [showUnlockModal, setShowUnlockModal] = useState(false)
   const [selectedImageIndex, setSelectedImageIndex] = useState(0)
+  const [shippingFee, setShippingFee] = useState<number | null>(null)
+  const [loadingShippingFee, setLoadingShippingFee] = useState(false)
+  const [currency, setCurrency] = useState<'CHF' | 'EUR'>('EUR') // Default to EUR
 
   useEffect(() => {
     fetchActiveDrop()
     checkAuth()
     checkWholesaleStatus()
+    fetchShippingFee() // Fetch currency info on mount
 
     // Poll active drop every 30 seconds
     const interval = setInterval(() => {
@@ -193,11 +199,12 @@ export default function Drop() {
 
   const getMinimumGrams = () => {
     if (!drop) return 0
-    // Minimum price is 5 CHF
-    // Calculate minimum grams needed for 5 CHF
-    const pricePerGram = drop.ppu / 1000
+    // Minimum price is 5 in user's currency
+    // Calculate minimum grams needed for 5 (EUR or CHF)
+    const pricePerGramEur = drop.ppu / 1000
+    const minPriceEur = currency === 'CHF' ? 5 / 0.97 : 5 // Convert min CHF to EUR equivalent
     // Use the higher price (standard) to ensure minimum is met
-    return Math.ceil(5 / pricePerGram)
+    return Math.ceil(minPriceEur / pricePerGramEur)
   }
 
   const handleCustomQuantityChange = (value: string) => {
@@ -224,17 +231,17 @@ export default function Drop() {
     const minimum = getMinimumGrams()
 
     if (isNaN(numValue) || numValue <= 0) {
-      setQuantityError('Please enter a valid number')
+      setQuantityError(t('drop.enterValidNumber'))
       return false
     }
 
     if (numValue < minimum) {
-      setQuantityError(`Minimum ${minimum}g required (5 CHF minimum)`)
+      setQuantityError(t('drop.minimumRequired', { minimum }))
       return false
     }
 
     if (numValue > remaining) {
-      setQuantityError(`Maximum ${remaining}g available`)
+      setQuantityError(t('drop.maximumAvailable', { maximum: remaining }))
       return false
     }
 
@@ -311,6 +318,41 @@ export default function Drop() {
     }
   }
 
+  const fetchShippingFee = async () => {
+    setLoadingShippingFee(true)
+    try {
+      const response = await fetch('/api/shipping-fee', {
+        credentials: 'include',
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setShippingFee(data.shipping_fee || 40)
+        setCurrency(data.currency || 'EUR')
+      } else {
+        // Default to 40 EUR if fetch fails
+        setShippingFee(40)
+        setCurrency('EUR')
+      }
+    } catch (error) {
+      console.error('Error fetching shipping fee:', error)
+      // Default to 40 EUR on error
+      setShippingFee(40)
+      setCurrency('EUR')
+    } finally {
+      setLoadingShippingFee(false)
+    }
+  }
+
+  // Convert EUR price to user's currency (CHF for Swiss, EUR for others)
+  // Database stores prices in EUR, so we need to convert if user is Swiss
+  const convertPrice = (priceInEur: number): number => {
+    if (currency === 'CHF') {
+      // Convert EUR to CHF (1 EUR ≈ 0.97 CHF)
+      return priceInEur * 0.97
+    }
+    return priceInEur
+  }
+
   const handleJoinDrop = () => {
     // Validate custom quantity if entered
     if (customQuantity && !validateCustomQuantity()) {
@@ -322,9 +364,10 @@ export default function Drop() {
       setShowAuthModal(true)
       return
     }
-    // Fetch available currencies and buyer data when opening confirm modal
+    // Fetch available currencies, buyer data, and shipping fee when opening confirm modal
     fetchAvailableCurrencies()
     fetchBuyerData()
+    fetchShippingFee()
     setShowConfirmModal(true)
   }
 
@@ -334,6 +377,7 @@ export default function Drop() {
     // After login, fetch buyer data and show the confirmation modal
     fetchAvailableCurrencies()
     fetchBuyerData()
+    fetchShippingFee()
     setShowConfirmModal(true)
   }
 
@@ -342,7 +386,7 @@ export default function Drop() {
 
     // Validate buyer data fields
     if (!buyerFullname.trim() || !buyerAddress.trim() || !buyerPhone.trim()) {
-      setErrorMessage('Please fill in all delivery information (full name, address, and phone)')
+      setErrorMessage(t('drop.fillDeliveryInfo'))
       setShowErrorModal(true)
       return
     }
@@ -434,23 +478,43 @@ export default function Drop() {
 
   const calculatePrice = () => {
     if (!drop) return 0
-    // ppu is stored as integer where 1000 = $1.00, so divide by 1000 to get actual price
+    // ppu is stored as integer where 1000 = 1.00 EUR, so divide by 1000 to get actual price in EUR
     // Assuming ppu is per gram
-    const pricePerGram = drop.ppu / 1000
-    const priceToUse = isWholesaleUnlocked ? pricePerGram * 0.76 : pricePerGram
-    return selectedSize * priceToUse
+    const pricePerGramEur = drop.ppu / 1000
+    const priceToUseEur = isWholesaleUnlocked ? pricePerGramEur * 0.76 : pricePerGramEur
+    const priceEur = selectedSize * priceToUseEur
+    // Convert to user's currency
+    return convertPrice(priceEur)
   }
 
   const calculateStandardPrice = () => {
     if (!drop) return 0
-    const pricePerGram = drop.ppu / 1000
-    return selectedSize * pricePerGram
+    const pricePerGramEur = drop.ppu / 1000
+    const priceEur = selectedSize * pricePerGramEur
+    // Convert to user's currency
+    return convertPrice(priceEur)
   }
 
   const calculateWholesalePrice = () => {
     if (!drop) return 0
-    const pricePerGram = drop.ppu / 1000
-    return selectedSize * pricePerGram * 0.76
+    const pricePerGramEur = drop.ppu / 1000
+    const priceEur = selectedSize * pricePerGramEur * 0.76
+    // Convert to user's currency
+    return convertPrice(priceEur)
+  }
+
+  // Get price per gram in user's currency
+  const getPricePerGram = () => {
+    if (!drop) return 0
+    const pricePerGramEur = drop.ppu / 1000
+    return convertPrice(pricePerGramEur)
+  }
+
+  // Get wholesale price per gram in user's currency
+  const getWholesalePricePerGram = () => {
+    if (!drop) return 0
+    const pricePerGramEur = drop.ppu / 1000
+    return convertPrice(pricePerGramEur * 0.76)
   }
 
   const getTimeUntilStart = () => {
@@ -467,11 +531,16 @@ export default function Drop() {
     const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60))
     
     if (diffDays > 0) {
-      return `${diffDays} day${diffDays > 1 ? 's' : ''}${diffHours > 0 ? ` ${diffHours} hour${diffHours > 1 ? 's' : ''}` : ''}`
+      const dayText = diffDays === 1 ? t('drop.day') : t('drop.days')
+      const hourText = diffHours > 0 ? (diffHours === 1 ? t('drop.hour') : t('drop.hours')) : ''
+      return `${diffDays} ${dayText}${diffHours > 0 ? ` ${diffHours} ${hourText}` : ''}`
     } else if (diffHours > 0) {
-      return `${diffHours} hour${diffHours > 1 ? 's' : ''}${diffMinutes > 0 ? ` ${diffMinutes} minute${diffMinutes > 1 ? 's' : ''}` : ''}`
+      const hourText = diffHours === 1 ? t('drop.hour') : t('drop.hours')
+      const minuteText = diffMinutes > 0 ? (diffMinutes === 1 ? t('drop.minute') : t('drop.minutes')) : ''
+      return `${diffHours} ${hourText}${diffMinutes > 0 ? ` ${diffMinutes} ${minuteText}` : ''}`
     } else {
-      return `${diffMinutes} minute${diffMinutes > 1 ? 's' : ''}`
+      const minuteText = diffMinutes === 1 ? t('drop.minute') : t('drop.minutes')
+      return `${diffMinutes} ${minuteText}`
     }
   }
 
@@ -495,7 +564,7 @@ export default function Drop() {
     return (
       <div className="drop">
         <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '40px' }}>
-          <p style={{ color: 'var(--muted)' }}>Loading...</p>
+          <p style={{ color: 'var(--muted)' }}>{t('drop.loading')}</p>
         </div>
       </div>
     )
@@ -505,12 +574,12 @@ export default function Drop() {
     return (
       <div className="drop">
         <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '60px' }}>
-          <h2 style={{ marginBottom: '16px' }}>Drop Sold Out</h2>
+          <h2 style={{ marginBottom: '16px' }}>{t('drop.dropSoldOut')}</h2>
           <p style={{ color: 'var(--muted)', marginBottom: '20px' }}>
-            The current collective drop has been fully reserved.
+            {t('drop.fullyReserved')}
           </p>
           <p style={{ color: 'var(--muted)' }}>
-            Next collective drop coming soon.
+            {t('drop.nextDropComingSoon')}
           </p>
         </div>
       </div>
@@ -601,27 +670,26 @@ export default function Drop() {
             color: 'var(--muted)',
           }}
         >
-          No Image
+          {t('common.noImage')}
         </div>
       )}
       <div>
         <h2>{drop.item}</h2>
         <div className="meta">
-          {formatSize(drop.size, drop.unit)} batch
+          {formatSize(drop.size, drop.unit)} {t('drop.batch')}
         </div>
         <div className="price">
           {(() => {
-            // ppu is stored as integer where 1000 = $1.00
-            // Assuming ppu is always per gram for display purposes
-            const pricePerGram = drop.ppu / 1000;
-            const wholesalePricePerGram = pricePerGram * 0.76;
+            // Get prices in user's currency
+            const pricePerGram = getPricePerGram();
+            const wholesalePricePerGram = getWholesalePricePerGram();
             
             if (isWholesaleUnlocked) {
               return (
                 <>
-                  <strong>Wholesale price: {wholesalePricePerGram.toFixed(2)} CHF / g</strong>
+                  <strong>{t('drop.wholesalePriceLabel')} {wholesalePricePerGram.toFixed(2)} {currency} / g</strong>
                   <span className="muted" style={{ display: 'block', marginTop: '6px', fontSize: '14px' }}>
-                    Standard: {pricePerGram.toFixed(2)} CHF / g
+                    {t('drop.standard')}: {pricePerGram.toFixed(2)} {currency} / g
                   </span>
                 </>
               );
@@ -629,11 +697,11 @@ export default function Drop() {
             
             return (
               <>
-                <strong>Standard price: {pricePerGram.toFixed(2)} CHF / g</strong>
+                <strong>{t('drop.standardPriceLabel')} {pricePerGram.toFixed(2)} {currency} / g</strong>
                 <span className="muted">
-                  Wholesale: {wholesalePricePerGram.toFixed(2)} CHF / g 🔒 <a href="#unlock" onClick={(e) => { e.preventDefault(); setShowUnlockModal(true); }}>unlock</a>
+                  {t('drop.wholesale')}: {wholesalePricePerGram.toFixed(2)} {currency} / g 🔒 <a href="#unlock" onClick={(e) => { e.preventDefault(); setShowUnlockModal(true); }}>{t('drop.unlock')}</a>
                 </span>
-                <div className="hint">Unlock once. Keep wholesale forever.</div>
+                <div className="hint">{t('drop.unlockOnce')}</div>
               </>
             );
           })()}
@@ -642,7 +710,7 @@ export default function Drop() {
         {isUpcoming ? (
           <div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
             <p style={{ margin: 0, color: 'var(--muted)', fontSize: '16px' }}>
-              Drop starts in <strong>{timeUntilStart}</strong>
+              {t('drop.dropStartsIn')} <strong>{timeUntilStart}</strong>
             </p>
           </div>
         ) : (
@@ -654,7 +722,7 @@ export default function Drop() {
               {(() => {
                 const fillDisplay = drop.unit === 'kg' ? Math.round(drop.fill * 1000) : Math.round(drop.fill);
                 const sizeDisplay = drop.unit === 'kg' ? Math.round(drop.size * 1000) : drop.size;
-                return `${fillDisplay}g of ${sizeDisplay}g reserved`;
+                return `${fillDisplay}g ${t('drop.of')} ${sizeDisplay}g ${t('drop.reserved')}`;
               })()}
             </div>
             {(() => {
@@ -663,7 +731,7 @@ export default function Drop() {
               return pendingFill > 0 && (
                 <div className="meta" style={{ fontSize: '12px', color: 'var(--muted)', marginTop: '4px' }}>
                   {drop.unit === 'kg' ? pendingFill.toFixed(2) : Math.round(pendingFill)}
-                  {drop.unit} on hold (10 min checkout window)
+                  {drop.unit} {t('drop.onHold')}
                 </div>
               )
             })()}
@@ -692,7 +760,7 @@ export default function Drop() {
                   value={customQuantity}
                   onChange={(e) => handleCustomQuantityChange(e.target.value)}
                   onBlur={validateCustomQuantity}
-                  placeholder="Custom (g)"
+                  placeholder={t('drop.custom')}
                   min={getMinimumGrams()}
                   max={getRemainingInGrams()}
                   style={{
@@ -712,7 +780,7 @@ export default function Drop() {
                 )}
                 {!quantityError && customQuantity && (
                   <div style={{ marginTop: '6px', fontSize: '12px', color: 'var(--muted)' }}>
-                    Min: {getMinimumGrams()}g · Max: {getRemainingInGrams()}g
+                    {t('drop.min')}: {getMinimumGrams()}g · {t('drop.max')}: {getRemainingInGrams()}g
                   </div>
                 )}
               </div>
@@ -722,42 +790,42 @@ export default function Drop() {
               {isWholesaleUnlocked ? (
                 <>
                   <div style={{ fontSize: '18px', fontWeight: 500, marginBottom: '8px' }}>
-                    Total: {calculatePrice().toFixed(2)} CHF
+                    {t('drop.total')}: {calculatePrice().toFixed(2)} {currency}
                   </div>
                   <div style={{ fontSize: '14px', color: 'var(--muted)' }}>
-                    Standard total: {calculateStandardPrice().toFixed(2)} CHF
+                    {t('drop.standardTotal')}: {calculateStandardPrice().toFixed(2)} {currency}
                   </div>
                 </>
               ) : (
                 <>
                   <div style={{ fontSize: '18px', fontWeight: 500, marginBottom: '8px' }}>
-                    Total: {calculateStandardPrice().toFixed(2)} CHF
+                    {t('drop.total')}: {calculateStandardPrice().toFixed(2)} {currency}
                   </div>
                   <div style={{ fontSize: '14px', color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: '6px' }}>
-                    Wholesale total: {calculateWholesalePrice().toFixed(2)} CHF 🔒
+                    {t('drop.wholesaleTotal')}: {calculateWholesalePrice().toFixed(2)} {currency} 🔒
                   </div>
                 </>
               )}
             </div>
 
             <button className="cta" onClick={handleJoinDrop}>
-              Join the drop
+              {t('drop.joinTheDrop')}
             </button>
-            <div className="cta-note">No subscription · No obligation</div>
+            <div className="cta-note">{t('drop.noSubscription')}</div>
           </>
         )}
 
         {hasRemaining && availableSizes.length === 0 && (
           <div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
             <p style={{ margin: 0, color: 'var(--muted)' }}>
-              Less than 50{drop.unit} remaining. This drop is almost fully reserved.
+              {t('drop.lessThanRemaining', { amount: 50, unit: drop.unit })}
             </p>
           </div>
         )}
 
         {!hasRemaining && (
           <div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
-            <p style={{ margin: 0, color: 'var(--muted)' }}>This drop is fully reserved</p>
+            <p style={{ margin: 0, color: 'var(--muted)' }}>{t('drop.fullyReservedText')}</p>
           </div>
         )}
       </div>
@@ -792,34 +860,34 @@ export default function Drop() {
             onClick={(e) => e.stopPropagation()}
           >
             <h2 style={{ marginTop: 0, marginBottom: '20px' }}>
-              Confirm Purchase
+              {t('drop.confirmPurchase')}
             </h2>
             <div style={{ marginBottom: '24px' }}>
               <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
-                <strong>Item:</strong> {drop.item}
+                <strong>{t('drop.item')}:</strong> {drop.item}
               </p>
               <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
-                <strong>Quantity:</strong> {selectedSize}g
+                <strong>{t('drop.quantity')}:</strong> {selectedSize}g
               </p>
               <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
-                <strong>Price per {drop.unit}:</strong> {(drop.ppu / 1000).toFixed(2)} CHF
+                <strong>{t('drop.pricePerUnit', { unit: drop.unit })}:</strong> {getPricePerGram().toFixed(2)} {currency}
               </p>
 
               {/* Delivery Information */}
               <div style={{ marginTop: '24px', marginBottom: '16px' }}>
                 <h3 style={{ marginBottom: '16px', fontSize: '16px', color: 'var(--text)' }}>
-                  Delivery Information
+                  {t('drop.deliveryInformation')}
                 </h3>
                 
                 <div style={{ marginBottom: '12px' }}>
                   <label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', color: 'var(--muted)' }}>
-                    <strong>Full Name *</strong>
+                    <strong>{t('drop.fullNameRequired')}</strong>
                   </label>
                   <input
                     type="text"
                     value={buyerFullname}
                     onChange={(e) => setBuyerFullname(e.target.value)}
-                    placeholder="Enter your full name"
+                    placeholder={t('drop.enterFullName')}
                     required
                     style={{
                       width: '100%',
@@ -836,12 +904,12 @@ export default function Drop() {
 
                 <div style={{ marginBottom: '12px' }}>
                   <label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', color: 'var(--muted)' }}>
-                    <strong>Address *</strong>
+                    <strong>{t('drop.addressRequired')}</strong>
                   </label>
                   <textarea
                     value={buyerAddress}
                     onChange={(e) => setBuyerAddress(e.target.value)}
-                    placeholder="Enter your delivery address"
+                    placeholder={t('drop.enterAddress')}
                     required
                     rows={3}
                     style={{
@@ -861,13 +929,13 @@ export default function Drop() {
 
                 <div style={{ marginBottom: '12px' }}>
                   <label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', color: 'var(--muted)' }}>
-                    <strong>Phone Number *</strong>
+                    <strong>{t('drop.phoneRequired')}</strong>
                   </label>
                   <input
                     type="tel"
                     value={buyerPhone}
                     onChange={(e) => setBuyerPhone(e.target.value)}
-                    placeholder="Enter your phone number"
+                    placeholder={t('drop.enterPhone')}
                     required
                     style={{
                       width: '100%',
@@ -886,10 +954,10 @@ export default function Drop() {
               {/* Currency Selection */}
               <div style={{ marginTop: '24px', marginBottom: '16px' }}>
                 <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
-                  <strong>Payment Currency:</strong>
+                  <strong>{t('drop.paymentCurrency')}:</strong>
                 </label>
                 {loadingCurrencies ? (
-                  <p style={{ color: 'var(--muted)', fontSize: '14px' }}>Loading currencies...</p>
+                  <p style={{ color: 'var(--muted)', fontSize: '14px' }}>{t('drop.loadingCurrencies')}</p>
                 ) : (
                   <select
                     value={selectedCurrency}
@@ -941,9 +1009,32 @@ export default function Drop() {
                   marginTop: '16px',
                 }}
               >
-                <p style={{ margin: 0, fontSize: '18px', fontWeight: 'bold' }}>
-                  Total: {calculatePrice().toFixed(2)} CHF
-                </p>
+                <div style={{ marginBottom: '12px' }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                    <span style={{ color: 'var(--muted)', fontSize: '14px' }}>{t('drop.subtotal')}:</span>
+                    <span style={{ fontWeight: 500, fontSize: '14px' }}>
+                      {calculatePrice().toFixed(2)} {currency}
+                    </span>
+                  </div>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                    <span style={{ color: 'var(--muted)', fontSize: '14px' }}>{t('drop.shippingFee')}:</span>
+                    <span style={{ fontWeight: 500, fontSize: '14px' }}>
+                      {loadingShippingFee ? '...' : (shippingFee !== null ? shippingFee.toFixed(2) : '40.00')} {currency}
+                    </span>
+                  </div>
+                  <div style={{ 
+                    display: 'flex', 
+                    justifyContent: 'space-between', 
+                    marginTop: '12px', 
+                    paddingTop: '12px', 
+                    borderTop: '1px solid var(--border)' 
+                  }}>
+                    <span style={{ fontSize: '18px', fontWeight: 'bold' }}>{t('drop.total')}:</span>
+                    <span style={{ fontSize: '18px', fontWeight: 'bold' }}>
+                      {loadingShippingFee ? '...' : ((calculatePrice() + (shippingFee || 40)).toFixed(2))} {currency}
+                    </span>
+                  </div>
+                </div>
                 <p
                   style={{
                     margin: '4px 0 0 0',
@@ -951,7 +1042,7 @@ export default function Drop() {
                     color: 'var(--muted)',
                   }}
                 >
-                  incl. 2.5% VAT
+                  {t('drop.inclVat')}
                 </p>
                 <p
                   style={{
@@ -960,7 +1051,7 @@ export default function Drop() {
                     color: 'var(--muted)',
                   }}
                 >
-                  Pay with: {String(selectedCurrency || '').toUpperCase()}
+                  {t('drop.payWith')}: {String(selectedCurrency || '').toUpperCase()}
                 </p>
               </div>
             </div>
@@ -989,7 +1080,7 @@ export default function Drop() {
                   display: 'inline-block',
                 }}
               >
-                Cancel
+                {t('common.cancel')}
               </button>
               <button
                 onClick={handleConfirmPurchase}
@@ -1009,7 +1100,7 @@ export default function Drop() {
                   display: 'inline-block',
                 }}
               >
-                {processing ? 'Processing...' : 'Confirm Purchase'}
+                {processing ? t('common.processing') : t('drop.confirmPurchase')}
               </button>
             </div>
           </div>
@@ -1061,14 +1152,14 @@ export default function Drop() {
             onClick={(e) => e.stopPropagation()}
           >
             <h2 style={{ marginTop: 0, marginBottom: '20px', color: '#0a7931' }}>
-              Payment confirmed ✔️
+              {t('drop.paymentConfirmed')}
             </h2>
             <p style={{ marginBottom: '16px', color: 'var(--text)' }}>
-              Your order has been successfully processed and is now reserved in this drop.
+              {t('drop.orderProcessed')}
             </p>
             <div style={{ marginBottom: '24px' }}>
               <p style={{ marginBottom: '12px', fontWeight: '600', color: 'var(--text)' }}>
-                What happens next:
+                {t('drop.whatHappensNext')}:
               </p>
               <ul style={{ 
                 margin: 0, 
@@ -1076,13 +1167,13 @@ export default function Drop() {
                 color: 'var(--muted)',
                 lineHeight: '1.8'
               }}>
-                <li>Your order will be processed within 24 hours</li>
-                <li>Shipped via express delivery</li>
-                <li>You'll receive a shipping confirmation and tracking link by email</li>
+                <li>{t('drop.orderProcessed24h')}</li>
+                <li>{t('drop.shippedExpress')}</li>
+                <li>{t('drop.shippingConfirmation')}</li>
               </ul>
             </div>
             <p style={{ marginBottom: '24px', color: 'var(--muted)', fontStyle: 'italic' }}>
-              Thank you for being part of the collective.
+              {t('drop.thankYouCollective')}
             </p>
             <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
               <button
@@ -1104,7 +1195,7 @@ export default function Drop() {
                   display: 'inline-block',
                 }}
               >
-                Close
+                {t('common.close')}
               </button>
             </div>
           </div>
@@ -1145,7 +1236,7 @@ export default function Drop() {
             onClick={(e) => e.stopPropagation()}
           >
             <h2 style={{ marginTop: 0, marginBottom: '20px', color: '#dc2626' }}>
-              ⚠️ Error
+              {t('drop.error')}
             </h2>
             <p style={{ marginBottom: '24px', color: 'var(--muted)' }}>
               {errorMessage}
@@ -1172,7 +1263,7 @@ export default function Drop() {
                   display: 'inline-block',
                 }}
               >
-                Close
+                {t('common.close')}
               </button>
             </div>
           </div>
@@ -1240,20 +1331,50 @@ export default function Drop() {
             onClick={(e) => e.stopPropagation()}
           >
             <h2 style={{ marginTop: 0, marginBottom: '20px' }}>
-              Complete Payment
+              {t('drop.completePayment')}
             </h2>
             
             <div style={{ marginBottom: '24px' }}>
               <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
-                <strong>Amount to Pay:</strong> {paymentData.pay_amount} {paymentData.pay_currency.toUpperCase()}
-              </p>
-              <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
-                <strong>Price:</strong> {paymentData.price_amount} {paymentData.price_currency.toUpperCase()}
+                <strong>{t('drop.amountToPay')}:</strong> {paymentData.pay_amount} {paymentData.pay_currency.toUpperCase()}
               </p>
               
+              <div style={{ 
+                marginTop: '20px', 
+                marginBottom: '20px', 
+                padding: '16px', 
+                background: 'var(--bg-soft)', 
+                borderRadius: '8px' 
+              }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                  <span style={{ color: 'var(--muted)' }}>{t('drop.subtotal')}:</span>
+                  <span style={{ fontWeight: 500 }}>
+                    {paymentData.subtotal?.toFixed(2) || (paymentData.price_amount - (paymentData.shipping_fee || 0)).toFixed(2)} {paymentData.price_currency.toUpperCase()}
+                  </span>
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                  <span style={{ color: 'var(--muted)' }}>{t('drop.shippingFee')}:</span>
+                  <span style={{ fontWeight: 500 }}>
+                    {paymentData.shipping_fee?.toFixed(2) || '0.00'} {paymentData.price_currency.toUpperCase()}
+                  </span>
+                </div>
+                <div style={{ 
+                  display: 'flex', 
+                  justifyContent: 'space-between', 
+                  marginTop: '12px', 
+                  paddingTop: '12px', 
+                  borderTop: '1px solid var(--border)' 
+                }}>
+                  <span style={{ fontWeight: 600, fontSize: '16px' }}>{t('drop.total')}:</span>
+                  <span style={{ fontWeight: 600, fontSize: '16px' }}>
+                    {paymentData.price_amount} {paymentData.price_currency.toUpperCase()}
+                  </span>
+                </div>
+              </div>
+              
               <div style={{ marginTop: '20px', marginBottom: '20px' }}>
                 <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
-                  Send payment to this address:
+                  {t('drop.sendPaymentTo')}
                 </label>
                 <div
                   style={{
@@ -1288,14 +1409,14 @@ export default function Drop() {
                     fontSize: '14px',
                   }}
                 >
-                  Copy Address
+                  {t('drop.copyAddress')}
                 </button>
               </div>
 
               {paymentData.payin_extra_id && (
                 <div style={{ marginTop: '20px', marginBottom: '20px' }}>
                   <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
-                    Memo / Destination Tag (Required):
+                    {t('drop.memoRequired')}:
                   </label>
                   <div
                     style={{
@@ -1318,34 +1439,34 @@ export default function Drop() {
                       button.textContent = 'Copied!'
                       setTimeout(() => {
                         if (button) button.textContent = originalText
-                      }, 2000)
-                    }}
-                    style={{
-                      padding: '8px 16px',
-                      background: 'var(--bg-soft)',
-                      border: '1px solid var(--border)',
-                      borderRadius: '8px',
-                      cursor: 'pointer',
-                      fontSize: '14px',
-                    }}
-                  >
-                    Copy Memo
-                  </button>
+                    }, 2000)
+                  }}
+                  style={{
+                    padding: '8px 16px',
+                    background: 'var(--bg-soft)',
+                    border: '1px solid var(--border)',
+                    borderRadius: '8px',
+                    cursor: 'pointer',
+                    fontSize: '14px',
+                  }}
+                >
+                  {t('drop.copyMemo')}
+                </button>
                 </div>
               )}
 
               {paymentData.expiration_estimate_date && (
                 <p style={{ marginTop: '16px', fontSize: '12px', color: 'var(--muted)' }}>
-                  Payment expires: {new Date(paymentData.expiration_estimate_date).toLocaleString()}
+                  {t('drop.paymentExpires')}: {new Date(paymentData.expiration_estimate_date).toLocaleString()}
                 </p>
               )}
 
               <div style={{ marginTop: '24px', padding: '16px', background: 'var(--bg-soft)', borderRadius: '8px' }}>
                 <p style={{ margin: 0, fontSize: '14px', color: 'var(--muted)' }}>
-                  <strong>Status:</strong> {paymentData.payment_status}
+                  <strong>{t('drop.status')}:</strong> {paymentData.payment_status}
                 </p>
                 <p style={{ margin: '12px 0 0 0', fontSize: '12px', color: '#dc2626', fontWeight: 500 }}>
-                  ⚠️ Closing this window will cancel your reservation and free up the inventory.
+                  {t('drop.closingWarning')}
                 </p>
               </div>
             </div>
@@ -1398,7 +1519,7 @@ export default function Drop() {
                   display: 'inline-block',
                 }}
               >
-                Close
+                {t('common.close')}
               </button>
             </div>
           </div>

app/components/Footer.tsx

@@ -1,7 +1,13 @@
+'use client'
+
+import { useI18n } from '@/lib/i18n'
+
 export default function Footer() {
+  const { t } = useI18n()
+  
   return (
     <footer>
-      © 2025 420Deals.ch · CBD &lt; 1% THC · Sale from 18 years · Switzerland
+      {t('footer.text')}
     </footer>
   )
 }

app/components/InfoBox.tsx

@@ -1,26 +1,23 @@
+'use client'
+
+import { useI18n } from '@/lib/i18n'
+
 export default function InfoBox() {
+  const { t } = useI18n()
+  
   return (
     <div className="info-box">
       <div>
-        <h3>Why so cheap?</h3>
-        <p>
-          Retail prices are around 10 CHF/g. Through collective
-          bulk orders, we buy like wholesalers – without
-          intermediaries.
-        </p>
+        <h3>{t('infoBox.whyCheap')}</h3>
+        <p>{t('infoBox.whyCheapText')}</p>
       </div>
       <div>
-        <h3>Taxes & Legal</h3>
-        <p>
-          Bulk sale with 2.5% VAT. No retail packaging, no
-          tobacco tax.
-        </p>
+        <h3>{t('infoBox.taxesLegal')}</h3>
+        <p>{t('infoBox.taxesLegalText')}</p>
       </div>
       <div>
-        <h3>Drop Model</h3>
-        <p>
-          One variety per drop. Only when sold out – then the next drop.
-        </p>
+        <h3>{t('infoBox.dropModel')}</h3>
+        <p>{t('infoBox.dropModelText')}</p>
       </div>
     </div>
   )

app/components/LanguageSwitcher.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useI18n } from '@/lib/i18n'
+
+export default function LanguageSwitcher() {
+  const { language, setLanguage } = useI18n()
+
+  return (
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginLeft: '16px' }}>
+      <button
+        onClick={() => setLanguage('en')}
+        style={{
+          padding: '6px 12px',
+          fontSize: '13px',
+          background: language === 'en' ? 'var(--accent)' : 'transparent',
+          color: language === 'en' ? '#000' : 'var(--muted)',
+          border: `1px solid ${language === 'en' ? 'var(--accent)' : 'var(--border)'}`,
+          borderRadius: '6px',
+          cursor: 'pointer',
+          fontWeight: language === 'en' ? 500 : 400,
+          transition: 'all 0.2s',
+        }}
+      >
+        EN
+      </button>
+      <button
+        onClick={() => setLanguage('de')}
+        style={{
+          padding: '6px 12px',
+          fontSize: '13px',
+          background: language === 'de' ? 'var(--accent)' : 'transparent',
+          color: language === 'de' ? '#000' : 'var(--muted)',
+          border: `1px solid ${language === 'de' ? 'var(--accent)' : 'var(--border)'}`,
+          borderRadius: '6px',
+          cursor: 'pointer',
+          fontWeight: language === 'de' ? 500 : 400,
+          transition: 'all 0.2s',
+        }}
+      >
+        DE
+      </button>
+    </div>
+  )
+}
+

app/components/Nav.tsx

@@ -2,6 +2,8 @@
 
 import { useState, useEffect } from 'react'
 import AuthModal from './AuthModal'
+import LanguageSwitcher from './LanguageSwitcher'
+import { useI18n } from '@/lib/i18n'
 
 interface User {
   id: number
@@ -10,6 +12,7 @@ interface User {
 }
 
 export default function Nav() {
+  const { t } = useI18n()
   const [user, setUser] = useState<User | null>(null)
   const [showAuthModal, setShowAuthModal] = useState(false)
   const [loading, setLoading] = useState(true)
@@ -72,9 +75,10 @@ export default function Nav() {
             </button>
           </div>
           <div className={`links ${mobileMenuOpen ? 'mobile-open' : ''}`}>
-          <a href="#drop" onClick={() => setMobileMenuOpen(false)}>Drop</a>
-          <a href="#past" onClick={() => setMobileMenuOpen(false)}>Past Drops</a>
-          <a href="#community" onClick={() => setMobileMenuOpen(false)}>Community</a>
+          <a href="#drop" onClick={() => setMobileMenuOpen(false)}>{t('nav.drop')}</a>
+          <a href="#past" onClick={() => setMobileMenuOpen(false)}>{t('nav.pastDrops')}</a>
+          <a href="#community" onClick={() => setMobileMenuOpen(false)}>{t('nav.community')}</a>
+          <LanguageSwitcher />
           {!loading && (
             user ? (
               <>
@@ -99,7 +103,7 @@ export default function Nav() {
                     cursor: 'pointer',
                   }}
                 >
-                  Orders
+                  {t('nav.orders')}
                 </a>
                 <button
                   onClick={() => {
@@ -120,7 +124,7 @@ export default function Nav() {
                     display: 'inline-block',
                   }}
                 >
-                  Logout
+                  {t('nav.logout')}
                 </button>
               </>
             ) : (
@@ -144,7 +148,7 @@ export default function Nav() {
                   display: 'inline-block',
                 }}
               >
-                Login
+                {t('nav.login')}
               </button>
             )
           )}

app/components/PastDrops.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import Image from 'next/image'
+import { useI18n } from '@/lib/i18n'
 
 interface PastDrop {
   id: number
@@ -22,6 +23,7 @@ interface PastDropsProps {
 }
 
 export default function PastDrops({ limit, showMoreLink = false }: PastDropsProps = {}) {
+  const { t } = useI18n()
   const [drops, setDrops] = useState<PastDrop[]>([])
   const [loading, setLoading] = useState(true)
 
@@ -55,18 +57,20 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
 
   const formatSoldOutTime = (hours: number) => {
     if (hours < 1) {
-      return 'Sold out in less than 1h'
+      return `${t('pastDrops.soldOutIn')} ${t('pastDrops.lessThan1h')}`
     } else if (hours === 1) {
-      return 'Sold out in 1h'
+      return `${t('pastDrops.soldOutIn')} ${t('pastDrops.1h')}`
     } else if (hours < 24) {
-      return `Sold out in ${hours}h`
+      return `${t('pastDrops.soldOutIn')} ${t('pastDrops.hours', { hours })}`
     } else {
       const days = Math.floor(hours / 24)
       const remainingHours = hours % 24
       if (remainingHours === 0) {
-        return days === 1 ? 'Sold out in 1 day' : `Sold out in ${days} days`
+        return days === 1 
+          ? `${t('pastDrops.soldOutIn')} ${t('pastDrops.1day')}` 
+          : `${t('pastDrops.soldOutIn')} ${t('pastDrops.days', { days })}`
       } else {
-        return `Sold out in ${days}d ${remainingHours}h`
+        return `${t('pastDrops.soldOutIn')} ${t('pastDrops.daysHours', { days, hours: remainingHours })}`
       }
     }
   }
@@ -88,7 +92,7 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
   if (loading) {
     return (
       <div className="past">
-        <p style={{ color: 'var(--muted)', textAlign: 'center' }}>Loading past drops...</p>
+        <p style={{ color: 'var(--muted)', textAlign: 'center' }}>{t('pastDrops.loading')}</p>
       </div>
     )
   }
@@ -97,7 +101,7 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
     return (
       <div className="past">
         <p style={{ color: 'var(--muted)', textAlign: 'center' }}>
-          No past drops yet. Check back soon!
+          {t('pastDrops.noDrops')}
         </p>
       </div>
     )
@@ -149,7 +153,7 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
                     color: 'var(--muted)',
                   }}
                 >
-                  No Image
+                  {t('common.noImage')}
                 </div>
               )}
               <strong>{drop.item}</strong>
@@ -174,7 +178,7 @@ export default function PastDrops({ limit, showMoreLink = false }: PastDropsProp
               fontWeight: 500,
             }}
           >
-            More →
+            {t('pastDrops.more')}
           </a>
         </div>
       )}

app/components/Signup.tsx

@@ -1,8 +1,10 @@
 'use client'
 
 import { useState } from 'react'
+import { useI18n } from '@/lib/i18n'
 
 export default function Signup() {
+  const { t } = useI18n()
   const [email, setEmail] = useState('')
   const [whatsapp, setWhatsapp] = useState('')
   const [loading, setLoading] = useState(false)
@@ -60,19 +62,19 @@ export default function Signup() {
   return (
     <>
       <div className="signup">
-        <h2>Drop Notifications</h2>
-        <p>Receive updates about new drops via email or WhatsApp.</p>
+        <h2>{t('signup.title')}</h2>
+        <p>{t('signup.subtitle')}</p>
         <form onSubmit={handleSubmit}>
           <input
             type="email"
-            placeholder="E-Mail"
+            placeholder={t('signup.email')}
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             disabled={loading}
           />
           <input
             type="text"
-            placeholder="WhatsApp Number"
+            placeholder={t('signup.whatsapp')}
             value={whatsapp}
             onChange={(e) => setWhatsapp(e.target.value)}
             disabled={loading}
@@ -80,7 +82,7 @@ export default function Signup() {
           <br />
           {error && <div style={{ color: '#ff4444', marginTop: '10px', fontSize: '14px' }}>{error}</div>}
           <button type="submit" disabled={loading}>
-            {loading ? 'Subscribing...' : 'Get Notified'}
+            {loading ? t('signup.subscribing') : t('signup.getNotified')}
           </button>
         </form>
       </div>
@@ -103,7 +105,7 @@ export default function Signup() {
           }}
         >
           <p style={{ margin: 0, fontSize: '16px', color: '#eaeaea' }}>
-            You will receive a notification as soon as a new drop drops.
+            {t('signup.successMessage')}
           </p>
           <button
             onClick={() => setShowPopup(false)}
@@ -118,7 +120,7 @@ export default function Signup() {
               fontSize: '14px',
             }}
           >
-            OK
+            {t('common.ok')}
           </button>
         </div>
       )}

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)} />

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>
           </>
         )}

app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import { I18nProvider } from '@/lib/i18n'
 
 const inter = Inter({ subsets: ['latin'], weight: ['300', '400', '500', '600'] })
 
@@ -16,7 +17,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <I18nProvider>{children}</I18nProvider>
+      </body>
     </html>
   )
 }

app/page.tsx

@@ -9,9 +9,11 @@ import Signup from './components/Signup'
 import PastDrops from './components/PastDrops'
 import Footer from './components/Footer'
 import UnlockBar from './components/UnlockBar'
+import { useI18n } from '@/lib/i18n'
 
 function PaymentHandler() {
   const searchParams = useSearchParams()
+  const { t } = useI18n()
 
   useEffect(() => {
     const payment = searchParams.get('payment')
@@ -21,16 +23,17 @@ function PaymentHandler() {
       // Clean up URL - IPN is handled by external service
       window.history.replaceState({}, '', window.location.pathname)
     } else if (payment === 'cancelled') {
-      alert('Payment was cancelled.')
+      alert(t('payment.cancelled'))
       // Clean up URL
       window.history.replaceState({}, '', window.location.pathname)
     }
-  }, [searchParams])
+  }, [searchParams, t])
 
   return null
 }
 
 export default function Home() {
+  const { t } = useI18n()
 
   return (
     <>
@@ -40,11 +43,8 @@ export default function Home() {
       <Nav />
       <UnlockBar />
       <header className="container">
-        <h1>Shop together. Wholesale prices for private buyers.</h1>
-        <p>
-          Limited CBD drops directly from Swiss producers. No retail.
-          No markup. Just collective bulk prices.
-        </p>
+        <h1>{t('header.title')}</h1>
+        <p>{t('header.subtitle')}</p>
       </header>
 
       <section className="container" id="drop">
@@ -57,7 +57,7 @@ export default function Home() {
       </section>
 
       <section className="container" id="past">
-        <h2>Past Drops</h2>
+        <h2>{t('pastDrops.title')}</h2>
         <PastDrops limit={3} showMoreLink={true} />
       </section>