recipemuse/src/screens/SubList/index.tsx

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  Alert,
  Dimensions,
} from 'react-native';
import Svg, { Path } from 'react-native-svg';
import { useTheme } from '@/theme';
import { SafeScreen } from '@/components/templates';
import { RootScreenProps } from '@/navigation/types';
import { Paths } from '@/navigation/paths';

const { width } = Dimensions.get('window');

// CheckIcon Component
const CheckIcon = () => (
  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="#10B981">
    <Path
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={2}
      d="M5 13l4 4L19 7"
    />
  </Svg>
);

const SubList = ({ navigation }: RootScreenProps<Paths.SubList>) => {
  const { colors, layout, gutters, fonts } = useTheme();

  // 处理免费试用按钮点击
  const handleFreeTrial = () => {
    Alert.alert('成功', '开始7天免费试用');
  };

  // 处理高级套餐按钮点击
  const handlePremium = () => {
    Alert.alert('提示', '正在跳转到支付页面...');
  };

  return (
    <SafeScreen style={styles.pageBgColor} navigation={navigation}>
      <ScrollView style={styles.container}>
        <View style={styles.content}>
          {/* 页面标题区域 */}
          <View style={styles.headerSection}>
            <Text style={[styles.mainTitle, fonts.bold]}>Choose Your Plan</Text>
            <Text style={styles.subtitle}>
              Unlock premium features with our flexible{'\n'}subscription
              options
            </Text>
          </View>

          {/* 7天免费试用卡片 */}
          <View style={[styles.card, gutters.marginBottom_24]}>
            {/* 卡片头部 */}
            <View style={styles.cardHeaderLight}>
              <Text style={[styles.cardHeaderTitle, fonts.bold]}>
                7-Day Free Trial
              </Text>
            </View>

            {/* 卡片内容 */}
            <View style={styles.cardBody}>
              {/* 价格 */}
              <View style={styles.priceSection}>
                <Text style={[styles.priceAmount, fonts.bold]}>$0</Text>
                <Text style={styles.pricePeriod}> for 7 days</Text>
              </View>

              {/* 特性列表 */}
              <View style={styles.featureList}>
                <View style={styles.featureItem}>
                  <CheckIcon />
                  <Text style={styles.featureText}>
                    Full access to all features
                  </Text>
                </View>
                <View style={styles.featureItem}>
                  <CheckIcon />
                  <Text style={styles.featureText}>
                    No credit card required
                  </Text>
                </View>
                <View style={styles.featureItem}>
                  <CheckIcon />
                  <Text style={styles.featureText}>Cancel anytime</Text>
                </View>
              </View>

              {/* 按钮 */}
              <TouchableOpacity
                onPress={handleFreeTrial}
                style={styles.buttonLight}
              >
                <Text style={[styles.buttonLightText, fonts.bold]}>
                  Start Free Trial
                </Text>
              </TouchableOpacity>
            </View>
          </View>

          {/* Premium 高级套餐卡片 */}
          <View
            style={[styles.card, styles.cardPremium, gutters.marginBottom_24]}
          >
            {/* 卡片头部 */}
            <View style={styles.cardHeaderDark}>
              <Text style={[styles.cardHeaderTitleWhite, fonts.bold]}>
                Premium Plan
              </Text>
            </View>

            {/* 卡片内容 */}
            <View style={styles.cardBody}>
              {/* 价格 */}
              <View style={styles.priceSection}>
                <Text style={[styles.priceAmount, fonts.bold]}>$9.99</Text>
                <Text style={styles.pricePeriod}> per month</Text>
              </View>

              {/* 特性列表 */}
              <View style={styles.featureList}>
                <View style={styles.featureItem}>
                  <CheckIcon />
                  <Text style={styles.featureText}>All features included</Text>
                </View>
                <View style={styles.featureItem}>
                  <CheckIcon />
                  <Text style={styles.featureText}>Priority support</Text>
                </View>
                <View style={styles.featureItem}>
                  <CheckIcon />
                  <Text style={styles.featureText}>Cancel anytime</Text>
                </View>
              </View>

              {/* 按钮 */}
              <TouchableOpacity
                onPress={handlePremium}
                style={styles.buttonDark}
              >
                <Text style={[styles.buttonDarkText, fonts.bold]}>
                  Get Premium
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </ScrollView>
    </SafeScreen>
  );
};

const styles = StyleSheet.create({
  pageBgColor: {
    backgroundColor: '#FBBF24', // yellow-400
  },
  container: {
    flex: 1,
  },
  content: {
    maxWidth: 672, // 2xl
    width: width > 672 ? 672 : '100%',
    alignSelf: 'center',
    paddingHorizontal: 16,
    paddingVertical: 24,
  },
  headerSection: {
    alignItems: 'center',
    marginBottom: 32,
  },
  mainTitle: {
    fontSize: 30,
    color: '#1F2937', // gray-800
    marginBottom: 8,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    color: '#6B7280', // gray-600
    textAlign: 'center',
    lineHeight: 24,
  },
  card: {
    backgroundColor: '#FFFFFF',
    borderRadius: 24,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.15,
    shadowRadius: 12,
    elevation: 8,
  },
  cardPremium: {
    borderWidth: 2,
    borderColor: '#4F46E5', // indigo-600
  },
  cardHeaderLight: {
    backgroundColor: '#E0E7FF', // indigo-100
    paddingHorizontal: 24,
    paddingVertical: 16,
  },
  cardHeaderDark: {
    backgroundColor: '#4F46E5', // indigo-600
    paddingHorizontal: 24,
    paddingVertical: 16,
  },
  cardHeaderTitle: {
    fontSize: 24,
    color: '#4338CA', // indigo-700
  },
  cardHeaderTitleWhite: {
    fontSize: 24,
    color: '#FFFFFF',
  },
  cardBody: {
    paddingHorizontal: 24,
    paddingVertical: 32,
  },
  priceSection: {
    flexDirection: 'row',
    alignItems: 'baseline',
    marginBottom: 24,
  },
  priceAmount: {
    fontSize: 48,
    color: '#1F2937', // gray-800
  },
  pricePeriod: {
    fontSize: 20,
    color: '#6B7280', // gray-500
    marginLeft: 8,
  },
  featureList: {
    marginBottom: 32,
    gap: 16,
  },
  featureItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  featureText: {
    fontSize: 18,
    color: '#374151', // gray-700
    marginLeft: 12,
    flex: 1,
  },
  buttonLight: {
    width: '100%',
    backgroundColor: '#E0E7FF', // indigo-100
    paddingVertical: 16,
    paddingHorizontal: 24,
    borderRadius: 16,
  },
  buttonLightText: {
    color: '#4338CA', // indigo-700
    fontSize: 16,
    textAlign: 'center',
  },
  buttonDark: {
    width: '100%',
    backgroundColor: '#4F46E5', // indigo-600
    paddingVertical: 16,
    paddingHorizontal: 24,
    borderRadius: 16,
  },
  buttonDarkText: {
    color: '#FFFFFF',
    fontSize: 16,
    textAlign: 'center',
  },
});

export default SubList;