feat: update mobile app screens

- Enhance browse tab with improved navigation
- Update home tab with new features
- Refactor profile tab
- Update paywall screen styling

app/(tabs)/profile.tsx

@@ -1,40 +1,62 @@
 /**
- * TabataFit Profile Screen
- * SwiftUI-first settings with native iOS look
+ * TabataFit Profile Screen — Premium React Native
+ * Apple Fitness+ inspired design, pure React Native components
  */
 
-import { View, StyleSheet, ScrollView } from 'react-native'
 import { useRouter } from 'expo-router'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import {
-  Host,
-  List,
-  Section,
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
   Switch,
-  LabeledContent,
-  DateTimePicker,
-  Button,
-  VStack,
-  Text,
-} from '@expo/ui/swift-ui'
-import { useMemo } from 'react'
+  Text as RNText,
+  TextStyle,
+} from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import * as Linking from 'expo-linking'
+import Constants from 'expo-constants'
 import { useTranslation } from 'react-i18next'
+import { useMemo } from 'react'
 import { useUserStore } from '@/src/shared/stores'
 import { requestNotificationPermissions, usePurchases } from '@/src/shared/hooks'
-import { StyledText } from '@/src/shared/components/StyledText'
-
 import { useThemeColors, BRAND } from '@/src/shared/theme'
 import type { ThemeColors } from '@/src/shared/theme/types'
-import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
 
-const FONTS = {
-  LARGE_TITLE: 34,
-  TITLE_2: 22,
-  CAPTION_1: 12,
+// ═══════════════════════════════════════════════════════════════════════════
+// STYLED TEXT COMPONENT
+// ═══════════════════════════════════════════════════════════════════════════
+
+interface TextProps {
+  children: React.ReactNode
+  style?: TextStyle
+  size?: number
+  weight?: 'normal' | 'bold' | '600' | '700' | '800' | '900'
+  color?: string
+  center?: boolean
+}
+
+function Text({ children, style, size, weight, color, center }: TextProps) {
+  const colors = useThemeColors()
+  return (
+    <RNText
+      style={[
+        {
+          fontSize: size ?? 17,
+          fontWeight: weight ?? 'normal',
+          color: color ?? colors.text.primary,
+          textAlign: center ? 'center' : 'left',
+        },
+        style,
+      ]}
+    >
+      {children}
+    </RNText>
+  )
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
-// MAIN SCREEN
+// COMPONENT: PROFILE SCREEN
 // ═══════════════════════════════════════════════════════════════════════════
 
 export default function ProfileScreen() {
@@ -46,10 +68,28 @@ export default function ProfileScreen() {
   const profile = useUserStore((s) => s.profile)
   const settings = useUserStore((s) => s.settings)
   const updateSettings = useUserStore((s) => s.updateSettings)
-  const { restorePurchases } = usePurchases()
+  const updateProfile = useUserStore((s) => s.updateProfile)
+  const { restorePurchases, isPremium } = usePurchases()
 
-  const isPremium = profile.subscription !== 'free'
   const planLabel = isPremium ? 'TabataFit+' : t('profile.freePlan')
+  const avatarInitial = profile.name?.[0]?.toUpperCase() || 'U'
+
+  // Mock stats (replace with real data from activityStore when available)
+  const stats = {
+    workouts: 47,
+    streak: 12,
+    calories: 12500,
+  }
+
+  const handleSignOut = () => {
+    updateProfile({
+      name: '',
+      email: '',
+      subscription: 'free',
+      onboardingCompleted: false,
+    })
+    router.replace('/onboarding')
+  }
 
   const handleRestore = async () => {
     await restorePurchases()
@@ -63,43 +103,24 @@ export default function ProfileScreen() {
     updateSettings({ reminders: enabled })
   }
 
-  const handleTimeChange = (date: Date) => {
-    const hh = String(date.getHours()).padStart(2, '0')
-    const mm = String(date.getMinutes()).padStart(2, '0')
-    updateSettings({ reminderTime: `${hh}:${mm}` })
+  const handleRateApp = () => {
+    Linking.openURL('https://apps.apple.com/app/tabatafit/id1234567890')
   }
 
-  // Build initial date string for the picker (today at reminderTime)
-  const today = new Date()
-  const [rh, rm] = settings.reminderTime.split(':').map(Number)
-  const pickerDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), rh, rm)
-  const pickerInitial = pickerDate.toISOString()
+  const handleContactUs = () => {
+    Linking.openURL('mailto:contact@tabatafit.app')
+  }
 
-  // Calculate total height for single SwiftUI island
-  // insetGrouped style: ~50px top/bottom margins, section header ~35px, row ~44px
-  const basePadding = 100 // top + bottom margins for insetGrouped
+  const handlePrivacyPolicy = () => {
+    router.push('/privacy')
+  }
 
-  // Account section
-  const accountRows = 1 + (isPremium ? 1 : 0) // plan, [+ restore]
-  const accountHeight = 35 + accountRows * 44
+  const handleFAQ = () => {
+    Linking.openURL('https://tabatafit.app/faq')
+  }
 
-  // Upgrade section (free users only)
-  const upgradeHeight = isPremium ? 0 : 35 + 80 // header + VStack content
-
-  // Workout section
-  const workoutHeight = 35 + 3 * 44 // haptics, sound, voice
-
-  // Notifications section
-  const notificationRows = settings.reminders ? 2 : 1
-  const notificationHeight = 35 + notificationRows * 44
-
-  // About section
-  const aboutHeight = 35 + 2 * 44 // version, privacy
-
-  // Sign out section
-  const signOutHeight = 44 // single button row
-
-  const totalHeight = basePadding + accountHeight + upgradeHeight + workoutHeight + notificationHeight + aboutHeight + signOutHeight
+  // App version
+  const appVersion = Constants.expoConfig?.version ?? '1.0.0'
 
   return (
     <View style={[styles.container, { paddingTop: insets.top }]}>
@@ -108,125 +129,195 @@ export default function ProfileScreen() {
         contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
         showsVerticalScrollIndicator={false}
       >
-        {/* Header */}
-        <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
-          {t('profile.title')}
-        </StyledText>
-
-        {/* Profile Header Card */}
-        <View style={styles.profileHeader}>
+      {/* ════════════════════════════════════════════════════════════════════
+          PROFILE HEADER CARD
+      ═══════════════════════════════════════════════════════════════════ */}
+      <View style={styles.section}>
+        <View style={styles.headerContainer}>
+          {/* Avatar with gradient background */}
           <View style={styles.avatarContainer}>
-            <StyledText size={FONTS.LARGE_TITLE} weight="bold" color="#FFFFFF">
-              {profile.name?.[0] || '?'}
-            </StyledText>
+            <Text size={48} weight="bold" color="#FFFFFF">
+              {avatarInitial}
+            </Text>
           </View>
-          <View style={styles.profileInfo}>
-            <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
+
+          {/* Name & Plan */}
+          <View style={styles.nameContainer}>
+            <Text size={22} weight="600" center>
               {profile.name || t('profile.guest')}
-            </StyledText>
-            {isPremium && (
-              <View style={styles.premiumBadge}>
-                <StyledText size={FONTS.CAPTION_1} weight="semibold" color={BRAND.PRIMARY}>
-                  {planLabel}
-                </StyledText>
-              </View>
-            )}
+            </Text>
+            <View style={styles.planContainer}>
+              <Text size={15} color={isPremium ? BRAND.PRIMARY : colors.text.tertiary}>
+                {planLabel}
+              </Text>
+              {isPremium && (
+                <Text size={12} color={BRAND.PRIMARY}>
+                  ✓
+                </Text>
+              )}
+            </View>
+          </View>
+
+          {/* Stats Row */}
+          <View style={styles.statsContainer}>
+            <View style={styles.statItem}>
+              <Text size={20} weight="bold" color={BRAND.PRIMARY} center>
+                🔥 {stats.workouts}
+              </Text>
+              <Text size={12} color={colors.text.tertiary} center>
+                {t('profile.statsWorkouts')}
+              </Text>
+            </View>
+            <View style={styles.statItem}>
+              <Text size={20} weight="bold" color={BRAND.PRIMARY} center>
+                📅 {stats.streak}
+              </Text>
+              <Text size={12} color={colors.text.tertiary} center>
+                {t('profile.statsStreak')}
+              </Text>
+            </View>
+            <View style={styles.statItem}>
+              <Text size={20} weight="bold" color={BRAND.PRIMARY} center>
+                ⚡️ {Math.round(stats.calories / 1000)}k
+              </Text>
+              <Text size={12} color={colors.text.tertiary} center>
+                {t('profile.statsCalories')}
+              </Text>
+            </View>
           </View>
         </View>
+      </View>
 
-        {/* All Settings in Single SwiftUI Island */}
-        <Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: totalHeight }}>
-          <List listStyle="insetGrouped" scrollEnabled={false}>
-            {/* Account Section */}
-            <Section header={t('profile.sectionAccount')}>
-              <LabeledContent label={t('profile.plan')}>
-                <Text color={isPremium ? BRAND.PRIMARY : undefined}>{planLabel}</Text>
-              </LabeledContent>
-              {isPremium && (
-                <Button variant="borderless" onPress={handleRestore} color={colors.text.tertiary}>
-                  {t('profile.restorePurchases')}
-                </Button>
-              )}
-            </Section>
+      {/* ════════════════════════════════════════════════════════════════════
+          UPGRADE CTA (FREE USERS ONLY)
+      ═══════════════════════════════════════════════════════════════════ */}
+      {!isPremium && (
+        <View style={styles.section}>
+          <TouchableOpacity
+            style={styles.premiumContainer}
+            onPress={() => router.push('/paywall')}
+          >
+            <View style={styles.premiumContent}>
+              <Text size={17} weight="600" color={BRAND.PRIMARY}>
+                ✨ {t('profile.upgradeTitle')}
+              </Text>
+              <Text size={15} color={colors.text.tertiary} style={{ marginTop: 4 }}>
+                {t('profile.upgradeDescription')}
+              </Text>
+            </View>
+            <Text size={15} color={BRAND.PRIMARY} style={{ marginTop: 12 }}>
+              {t('profile.learnMore')} →
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
 
-            {/* Upgrade CTA for Free Users */}
-            {!isPremium && (
-              <Section>
-                <VStack alignment="leading" spacing={8}>
-                  <Text font="headline" color={BRAND.PRIMARY}>
-                    {t('profile.upgradeTitle')}
-                  </Text>
-                  <Text color="systemSecondary" font="subheadline">
-                    {t('profile.upgradeDescription')}
-                  </Text>
-                </VStack>
-                <Button variant="borderless" onPress={() => router.push('/paywall')} color={BRAND.PRIMARY}>
-                  {t('profile.learnMore')}
-                </Button>
-              </Section>
-            )}
+      {/* ════════════════════════════════════════════════════════════════════
+          WORKOUT SETTINGS
+      ═══════════════════════════════════════════════════════════════════ */}
+      <Text style={styles.sectionHeader}>{t('profile.sectionWorkout')}</Text>
+      <View style={styles.section}>
+        <View style={styles.row}>
+          <Text style={styles.rowLabel}>{t('profile.hapticFeedback')}</Text>
+          <Switch
+            value={settings.haptics}
+            onValueChange={(v) => updateSettings({ haptics: v })}
+            trackColor={{ false: colors.bg.overlay1, true: BRAND.PRIMARY }}
+            thumbColor="#FFFFFF"
+          />
+        </View>
+        <View style={styles.row}>
+          <Text style={styles.rowLabel}>{t('profile.soundEffects')}</Text>
+          <Switch
+            value={settings.soundEffects}
+            onValueChange={(v) => updateSettings({ soundEffects: v })}
+            trackColor={{ false: colors.bg.overlay1, true: BRAND.PRIMARY }}
+            thumbColor="#FFFFFF"
+          />
+        </View>
+        <View style={[styles.row, styles.rowLast]}>
+          <Text style={styles.rowLabel}>{t('profile.voiceCoaching')}</Text>
+          <Switch
+            value={settings.voiceCoaching}
+            onValueChange={(v) => updateSettings({ voiceCoaching: v })}
+            trackColor={{ false: colors.bg.overlay1, true: BRAND.PRIMARY }}
+            thumbColor="#FFFFFF"
+          />
+        </View>
+      </View>
 
-            {/* Workout Settings */}
-            <Section header={t('profile.sectionWorkout')} footer={t('profile.workoutSettingsFooter')}>
-              <Switch
-                label={t('profile.hapticFeedback')}
-                value={settings.haptics}
-                onValueChange={(v) => updateSettings({ haptics: v })}
-                color={BRAND.PRIMARY}
-              />
-              <Switch
-                label={t('profile.soundEffects')}
-                value={settings.soundEffects}
-                onValueChange={(v) => updateSettings({ soundEffects: v })}
-                color={BRAND.PRIMARY}
-              />
-              <Switch
-                label={t('profile.voiceCoaching')}
-                value={settings.voiceCoaching}
-                onValueChange={(v) => updateSettings({ voiceCoaching: v })}
-                color={BRAND.PRIMARY}
-              />
-            </Section>
+      {/* ════════════════════════════════════════════════════════════════════
+          NOTIFICATIONS
+      ═══════════════════════════════════════════════════════════════════ */}
+      <Text style={styles.sectionHeader}>{t('profile.sectionNotifications')}</Text>
+      <View style={styles.section}>
+        <View style={styles.row}>
+          <Text style={styles.rowLabel}>{t('profile.dailyReminders')}</Text>
+          <Switch
+            value={settings.reminders}
+            onValueChange={handleReminderToggle}
+            trackColor={{ false: colors.bg.overlay1, true: BRAND.PRIMARY }}
+            thumbColor="#FFFFFF"
+          />
+        </View>
+        {settings.reminders && (
+          <View style={styles.rowTime}>
+            <Text style={styles.rowLabel}>{t('profile.reminderTime')}</Text>
+            <Text style={styles.rowValue}>{settings.reminderTime}</Text>
+          </View>
+        )}
+      </View>
 
-            {/* Notification Settings */}
-            <Section header={t('profile.sectionNotifications')} footer={settings.reminders ? t('profile.reminderFooter') : undefined}>
-              <Switch
-                label={t('profile.dailyReminders')}
-                value={settings.reminders}
-                onValueChange={handleReminderToggle}
-                color={BRAND.PRIMARY}
-              />
-              {settings.reminders && (
-                <LabeledContent label={t('profile.reminderTime')}>
-                  <DateTimePicker
-                    displayedComponents="hourAndMinute"
-                    variant="compact"
-                    initialDate={pickerInitial}
-                    onDateSelected={handleTimeChange}
-                    color={BRAND.PRIMARY}
-                  />
-                </LabeledContent>
-              )}
-            </Section>
+      {/* ════════════════════════════════════════════════════════════════════
+          ABOUT
+      ═══════════════════════════════════════════════════════════════════ */}
+      <Text style={styles.sectionHeader}>{t('profile.sectionAbout')}</Text>
+      <View style={styles.section}>
+        <View style={styles.row}>
+          <Text style={styles.rowLabel}>{t('profile.version')}</Text>
+          <Text style={styles.rowValue}>{appVersion}</Text>
+        </View>
+        <TouchableOpacity style={styles.row} onPress={handleRateApp}>
+          <Text style={styles.rowLabel}>{t('profile.rateApp')}</Text>
+          <Text style={styles.rowValue}>›</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.row} onPress={handleContactUs}>
+          <Text style={styles.rowLabel}>{t('profile.contactUs')}</Text>
+          <Text style={styles.rowValue}>›</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.row} onPress={handleFAQ}>
+          <Text style={styles.rowLabel}>{t('profile.faq')}</Text>
+          <Text style={styles.rowValue}>›</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={[styles.row, styles.rowLast]} onPress={handlePrivacyPolicy}>
+          <Text style={styles.rowLabel}>{t('profile.privacyPolicy')}</Text>
+          <Text style={styles.rowValue}>›</Text>
+        </TouchableOpacity>
+      </View>
 
-            {/* About Section */}
-            <Section header={t('profile.sectionAbout')}>
-              <LabeledContent label={t('profile.version')}>
-                <Text color="systemSecondary">1.0.0</Text>
-              </LabeledContent>
-              <Button variant="borderless" color="systemSecondary" onPress={() => router.push('/privacy')}>
-                {t('profile.privacyPolicy')}
-              </Button>
-            </Section>
+      {/* ════════════════════════════════════════════════════════════════════
+          ACCOUNT (PREMIUM USERS ONLY)
+      ═══════════════════════════════════════════════════════════════════ */}
+      {isPremium && (
+        <>
+          <Text style={styles.sectionHeader}>{t('profile.sectionAccount')}</Text>
+          <View style={styles.section}>
+            <TouchableOpacity style={[styles.row, styles.rowLast]} onPress={handleRestore}>
+              <Text style={styles.rowLabel}>{t('profile.restorePurchases')}</Text>
+              <Text style={styles.rowValue}>›</Text>
+            </TouchableOpacity>
+          </View>
+        </>
+      )}
 
-            {/* Sign Out */}
-            <Section>
-              <Button variant="borderless" role="destructive" onPress={() => {}}>
-                {t('profile.signOut')}
-              </Button>
-            </Section>
-          </List>
-        </Host>
+      {/* ════════════════════════════════════════════════════════════════════
+          SIGN OUT
+      ═══════════════════════════════════════════════════════════════════ */}
+      <View style={[styles.section, styles.signOutSection]}>
+        <TouchableOpacity style={styles.button} onPress={handleSignOut}>
+          <Text style={styles.destructive}>{t('profile.signOut')}</Text>
+        </TouchableOpacity>
+      </View>
       </ScrollView>
     </View>
   )
@@ -246,34 +337,107 @@ function createStyles(colors: ThemeColors) {
       flex: 1,
     },
     scrollContent: {
-      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+      flexGrow: 1,
     },
-
-    // Profile Header
-    profileHeader: {
-      flexDirection: 'row',
+    section: {
+      marginHorizontal: 16,
+      marginTop: 20,
+      backgroundColor: colors.bg.surface,
+      borderRadius: 10,
+      overflow: 'hidden',
+    },
+    sectionHeader: {
+      fontSize: 13,
+      fontWeight: '600',
+      color: colors.text.tertiary,
+      textTransform: 'uppercase',
+      marginLeft: 32,
+      marginTop: 20,
+      marginBottom: 8,
+    },
+    headerContainer: {
       alignItems: 'center',
-      paddingVertical: SPACING[5],
-      gap: SPACING[4],
+      paddingVertical: 24,
+      paddingHorizontal: 16,
     },
     avatarContainer: {
-      width: 60,
-      height: 60,
-      borderRadius: 30,
+      width: 90,
+      height: 90,
+      borderRadius: 45,
       backgroundColor: BRAND.PRIMARY,
-      alignItems: 'center',
       justifyContent: 'center',
+      alignItems: 'center',
+      shadowColor: BRAND.PRIMARY,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.5,
+      shadowRadius: 20,
+      elevation: 10,
     },
-    profileInfo: {
-      flex: 1,
+    nameContainer: {
+      marginTop: 16,
+      alignItems: 'center',
     },
-    premiumBadge: {
-      backgroundColor: 'rgba(255, 107, 53, 0.15)',
-      paddingHorizontal: SPACING[3],
-      paddingVertical: SPACING[1],
-      borderRadius: 12,
-      alignSelf: 'flex-start',
-      marginTop: SPACING[1],
+    planContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: 4,
+      gap: 4,
+    },
+    statsContainer: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginTop: 16,
+      gap: 32,
+    },
+    statItem: {
+      alignItems: 'center',
+    },
+    premiumContainer: {
+      paddingVertical: 16,
+      paddingHorizontal: 16,
+    },
+    premiumContent: {
+      gap: 4,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.border.glassLight,
+    },
+    rowLast: {
+      borderBottomWidth: 0,
+    },
+    rowLabel: {
+      fontSize: 17,
+      color: colors.text.primary,
+    },
+    rowValue: {
+      fontSize: 17,
+      color: colors.text.tertiary,
+    },
+    rowTime: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      borderTopWidth: 0.5,
+      borderTopColor: colors.border.glassLight,
+    },
+    button: {
+      paddingVertical: 14,
+      alignItems: 'center',
+    },
+    destructive: {
+      fontSize: 17,
+      color: BRAND.DANGER,
+    },
+    signOutSection: {
+      marginTop: 20,
     },
   })
 }