@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

package/src/components/Subscription/SubOne.tsx

@@ -1,874 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Mon 21 Jul 2025 at 04:55 PM
- */
-
-import React, { memo, useCallback, useMemo, useState } from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  ScrollView,
-  Dimensions,
-} from 'react-native';
-import Carousel from 'react-native-reanimated-carousel';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import LinearGradient from 'react-native-linear-gradient';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
-import Modal from 'react-native-modal';
-import { X } from 'lucide-react-native';
-import { Text } from '../Text';
-import AppHeader from '../Headers/AppHeader';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import Display from '../../utils/Display';
-import type { ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-export type Plan = {
-  id: string;
-  title: string;
-  price: string;
-  duration: string;
-  platforms: string;
-  benefits?: string[];
-  isPopular?: boolean;
-  extraDetails?: {
-    description?: string;
-    features?: string[];
-    terms?: string;
-    [key: string]: any;
-  };
-};
-
-// Memoized Plan Details Modal Component
-const PlanDetailsModalContent = memo<{
-  plan: Plan;
-  colors: {
-    surface: string;
-    background: string;
-    textPrimary: string;
-    textSecondary: string;
-    primary: string;
-  };
-  onClose: () => void;
-}>(({ plan, colors, onClose }) => {
-  const modalContentStyle = useMemo(
-    () => [styles.modalContent, { backgroundColor: colors.surface }],
-    [colors.surface]
-  );
-
-  const modalTitleStyle = useMemo(
-    () => [styles.modalTitle, { color: colors.textPrimary }],
-    [colors.textPrimary]
-  );
-
-  const modalCloseButtonStyle = useMemo(
-    () => [styles.modalCloseButton, { backgroundColor: colors.background }],
-    [colors.background]
-  );
-
-  const priceHighlightBoxStyle = useMemo(
-    () => [styles.priceHighlightBox, { backgroundColor: colors.background }],
-    [colors.background]
-  );
-
-  const platformBadgeStyle = useMemo(
-    () => [
-      styles.platformBadge,
-      {
-        backgroundColor: colors.surface,
-        borderColor: colors.primary,
-      },
-    ],
-    [colors.surface, colors.primary]
-  );
-
-  const modalPriceLabelStyle = useMemo(
-    () => [styles.modalPriceLabel, { color: colors.textSecondary }],
-    [colors.textSecondary]
-  );
-
-  const modalPriceValueStyle = useMemo(
-    () => [styles.modalPriceValue, { color: colors.primary }],
-    [colors.primary]
-  );
-
-  const modalPriceDurationStyle = useMemo(
-    () => [styles.modalPriceDuration, { color: colors.textSecondary }],
-    [colors.textSecondary]
-  );
-
-  const modalSectionTitleStyle = useMemo(
-    () => [styles.modalSectionTitle, { color: colors.textPrimary }],
-    [colors.textPrimary]
-  );
-
-  const platformBadgeTextStyle = useMemo(
-    () => [styles.platformBadgeText, { color: colors.textPrimary }],
-    [colors.textPrimary]
-  );
-
-  const benefitBulletStyle = useMemo(
-    () => [styles.benefitBullet, { color: colors.primary }],
-    [colors.primary]
-  );
-
-  const benefitTextStyle = useMemo(
-    () => [styles.benefitText, { color: colors.textSecondary }],
-    [colors.textSecondary]
-  );
-
-  const modalSectionValueStyle = useMemo(
-    () => [styles.modalSectionValue, { color: colors.textSecondary }],
-    [colors.textSecondary]
-  );
-
-  return (
-    <View style={modalContentStyle}>
-      <View style={styles.modalHeader}>
-        <Text style={modalTitleStyle}>{plan.title || 'Plan Details'}</Text>
-        <TouchableOpacity
-          onPress={onClose}
-          style={modalCloseButtonStyle}
-          activeOpacity={0.7}
-        >
-          <X size={scale(20)} color={colors.textPrimary} />
-        </TouchableOpacity>
-      </View>
-
-      <ScrollView
-        style={styles.modalScrollView}
-        contentContainerStyle={styles.modalScrollContent}
-        showsVerticalScrollIndicator={false}
-        bounces={false}
-        scrollEventThrottle={16}
-        keyboardShouldPersistTaps="handled"
-        removeClippedSubviews={false}
-        nestedScrollEnabled={true}
-      >
-        <View style={[styles.modalSection, styles.modalFirstSection]}>
-          <View style={priceHighlightBoxStyle}>
-            <Text style={modalPriceLabelStyle}>PRICING</Text>
-            <Text style={modalPriceValueStyle}>{plan.price}</Text>
-            <Text style={modalPriceDurationStyle}>per {plan.duration}</Text>
-          </View>
-        </View>
-
-        <View style={styles.modalSection}>
-          <Text style={modalSectionTitleStyle}>Available On</Text>
-          <View style={platformBadgeStyle}>
-            <Text style={platformBadgeTextStyle}>{plan.platforms}</Text>
-          </View>
-        </View>
-
-        {plan.benefits && plan.benefits.length > 0 && (
-          <View style={styles.modalSection}>
-            <Text style={modalSectionTitleStyle}>Benefits</Text>
-            {plan.benefits.map((benefit, index) => (
-              <View
-                key={`benefit-${plan.id}-${index}`}
-                style={styles.benefitRow}
-              >
-                <Text style={benefitBulletStyle}>•</Text>
-                <Text style={benefitTextStyle}>{benefit}</Text>
-              </View>
-            ))}
-          </View>
-        )}
-
-        {plan.extraDetails?.description && (
-          <View style={styles.modalSection}>
-            <Text style={modalSectionTitleStyle}>Description</Text>
-            <Text style={modalSectionValueStyle}>
-              {plan.extraDetails.description}
-            </Text>
-          </View>
-        )}
-
-        {plan.extraDetails?.features &&
-          plan.extraDetails.features.length > 0 && (
-            <View style={styles.modalSection}>
-              <Text style={modalSectionTitleStyle}>Features</Text>
-              {plan.extraDetails.features.map((feature, index) => (
-                <View
-                  key={`feature-${plan.id}-${index}`}
-                  style={styles.benefitRow}
-                >
-                  <Text style={benefitBulletStyle}>✓</Text>
-                  <Text style={benefitTextStyle}>{feature}</Text>
-                </View>
-              ))}
-            </View>
-          )}
-
-        {plan.extraDetails?.terms && (
-          <View style={styles.modalSection}>
-            <Text style={modalSectionTitleStyle}>Terms & Conditions</Text>
-            <Text style={modalSectionValueStyle}>
-              {plan.extraDetails.terms}
-            </Text>
-          </View>
-        )}
-      </ScrollView>
-    </View>
-  );
-});
-
-PlanDetailsModalContent.displayName = 'PlanDetailsModalContent';
-
-type SubscriptionSliderOneProps = {
-  theme?: ThemeOverride;
-  headerTitleAlign?: 'center' | 'left';
-  subscribeButtonText?: string;
-  onSubscribe?: (plan: Plan) => void;
-  subscribeLoadingId?: string | null;
-  plans: Plan[];
-  errorMessage?: string;
-  isLoading?: boolean;
-  onBackPress?: () => void;
-  header: {
-    topTitle: string;
-    topTitleAlign?: 'center' | 'left';
-    title: string;
-    subTitle: string;
-  };
-  footer: {
-    title: string;
-    subTitle: string;
-  };
-  extraContentText?: React.ReactNode;
-};
-const CAROUSEL_WIDTH = Display.fullWidth;
-const CAROUSEL_HEIGHT = verticalScale(CAROUSEL_WIDTH / 1.4);
-
-// Move parsePrice outside component to avoid recreation on every render
-const parsePrice = (price: string) =>
-  parseFloat(price.replace(/[^\d.]/g, '')) || 0;
-
-const SubscriptionSliderOne = ({
-  theme,
-  onSubscribe,
-  subscribeButtonText = 'Subscribe',
-  subscribeLoadingId,
-  plans,
-  errorMessage = 'Something went wrong',
-  isLoading = false,
-  onBackPress = () => {},
-  header,
-  footer,
-  extraContentText,
-}: SubscriptionSliderOneProps) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  const colors = appliedTheme.colors;
-  const [selectedPlan, setSelectedPlan] = useState<Plan | null>(null);
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const sortedPlans = useMemo(() => {
-    return [...plans].sort((a, b) => {
-      const aPopular = a?.isPopular ? 1 : 0;
-      const bPopular = b?.isPopular ? 1 : 0;
-
-      if (aPopular !== bPopular) {
-        return bPopular - aPopular;
-      }
-
-      if (aPopular === 1 && bPopular === 1) {
-        return parsePrice(b.price) - parsePrice(a.price);
-      }
-
-      return 0;
-    });
-  }, [plans]);
-
-  const placeholderData = useMemo(
-    () => new Array(plans.length || 3).fill({}),
-    [plans.length]
-  );
-
-  const shouldLoop = useMemo(
-    () => sortedPlans.length > 1,
-    [sortedPlans.length]
-  );
-
-  const carouselModeConfig = useMemo(
-    () => ({
-      parallaxScrollingOffset: Display.fullWidth * 0.21,
-      parallaxAdjacentItemScale: 0.8,
-    }),
-    []
-  );
-
-  const errorMessageStyle = useMemo(
-    () => ({ color: colors.error }),
-    [colors.error]
-  );
-
-  const containerStyle = useMemo(
-    () => [styles.container, { backgroundColor: colors.background }],
-    [colors.background]
-  );
-
-  const headingStyle = useMemo(() => [styles.heading], []);
-
-  const subTextStyle = useMemo(
-    () => [styles.subText, { color: colors.onSurfaceVariant }],
-    [colors.onSurfaceVariant]
-  );
-
-  const infoStyle = useMemo(
-    () => [styles.info, { color: colors.onSurfaceVariant }],
-    [colors.onSurfaceVariant]
-  );
-
-  const cancelTextStyle = useMemo(
-    () => [styles.cancelText, { color: colors.onSurfaceVariant }],
-    [colors.onSurfaceVariant]
-  );
-
-  const extraContentTextStyle = useMemo(
-    () => [styles.extraContentTextText, { color: colors.onSurfaceVariant }],
-    [colors.onSurfaceVariant]
-  );
-
-  const modalColors = useMemo(
-    () => ({
-      surface: colors.surface,
-      background: colors.background,
-      textPrimary: colors.textPrimary,
-      textSecondary: colors.textSecondary,
-      primary: colors.primary,
-    }),
-    [
-      colors.surface,
-      colors.background,
-      colors.textPrimary,
-      colors.textSecondary,
-      colors.primary,
-    ]
-  );
-
-  const skeletonColors = useMemo(
-    () => ({
-      backgroundColor: colors.skeletonBaseColor,
-      highlightColor: colors.skeletonHighlightColor,
-    }),
-    [colors.skeletonBaseColor, colors.skeletonHighlightColor]
-  );
-
-  const renderSkeleton = useCallback(
-    () => (
-      <Animated.View
-        entering={FadeIn}
-        exiting={FadeOut}
-        style={styles.cardContainer}
-      >
-        <SkeletonPlaceholder
-          borderRadius={20}
-          backgroundColor={skeletonColors.backgroundColor}
-          highlightColor={skeletonColors.highlightColor}
-        >
-          <View style={styles.card} />
-        </SkeletonPlaceholder>
-      </Animated.View>
-    ),
-    [skeletonColors]
-  );
-
-  const openDetailsModal = useCallback((plan: Plan) => {
-    setSelectedPlan(plan);
-    setIsModalVisible(true);
-  }, []);
-
-  const closeDetailsModal = useCallback(() => {
-    setIsModalVisible(false);
-    // Delay clearing selectedPlan to prevent flicker during close animation
-    setTimeout(() => {
-      setSelectedPlan(null);
-    }, 300);
-  }, []);
-
-  const gradientConfig = useMemo(
-    () => ({
-      colors: colors.cardGradient,
-      start: { x: 1, y: 0 },
-      end: { x: 0, y: 1.2 },
-      locations: [0, 0.7, 1] as number[],
-    }),
-    [colors.cardGradient]
-  );
-
-  const cardStyle = useMemo(
-    () => [styles.card, { shadowColor: colors.primary }],
-    [colors.primary]
-  );
-
-  const handleSubscribe = useCallback(
-    (item: Plan) => {
-      onSubscribe?.(item);
-    },
-    [onSubscribe]
-  );
-
-  const renderPlan = useCallback(
-    ({ item }: { item: Plan }) => {
-      const isPopular = item?.isPopular;
-      const hasBenefits = !!item.benefits?.length;
-      const benefitsCount = item.benefits?.length || 0;
-      const showViewDetails = hasBenefits || !!item.extraDetails;
-      const isSubscribing = subscribeLoadingId === item.id;
-      const viewDetailsText =
-        hasBenefits && benefitsCount > 4 ? 'View More Details' : 'View Details';
-
-      return (
-        <View style={styles.cardContainer}>
-          <LinearGradient
-            colors={gradientConfig.colors}
-            start={gradientConfig.start}
-            end={gradientConfig.end}
-            locations={gradientConfig.locations}
-            style={cardStyle}
-          >
-            {isPopular && (
-              <View
-                style={[
-                  styles.popularBadge,
-                  { backgroundColor: colors.button },
-                ]}
-              >
-                <Text
-                  style={[styles.popularText, { color: colors.buttonText }]}
-                >
-                  POPULAR
-                </Text>
-              </View>
-            )}
-
-            <Text
-              numberOfLines={1}
-              style={[styles.cardTitle, { color: colors.white }]}
-            >
-              {item.title}
-            </Text>
-            <Text style={[styles.price, { color: colors.white }]}>
-              {item.price}
-            </Text>
-            <Text style={[styles.per, { color: colors.white }]}>
-              {item.duration}
-            </Text>
-            <Text style={[styles.platforms, { color: colors.white }]}>
-              {item.platforms}
-            </Text>
-            {hasBenefits && item.benefits && (
-              <View style={styles.benefitsContainer}>
-                {item.benefits.slice(0, 4).map((benefit, i) => (
-                  <Text
-                    key={`${item.id}-benefit-${i}`}
-                    numberOfLines={1}
-                    style={[styles.benefit, { color: colors.white }]}
-                  >
-                    • {benefit}
-                  </Text>
-                ))}
-              </View>
-            )}
-            {showViewDetails && (
-              <TouchableOpacity
-                style={styles.viewDetailsButton}
-                onPress={() => openDetailsModal(item)}
-                activeOpacity={0.7}
-              >
-                <Text style={[styles.viewDetailsText, { color: colors.white }]}>
-                  {viewDetailsText}
-                </Text>
-              </TouchableOpacity>
-            )}
-            <TouchableOpacity
-              style={[
-                styles.subscribeButton,
-                { backgroundColor: colors.button },
-              ]}
-              onPress={() => handleSubscribe(item)}
-              activeOpacity={0.8}
-              disabled={isSubscribing}
-            >
-              {isSubscribing ? (
-                <ActivityIndicator size="small" color={colors.buttonText} />
-              ) : (
-                <Text
-                  style={[styles.subscribeText, { color: colors.buttonText }]}
-                >
-                  {subscribeButtonText}
-                </Text>
-              )}
-            </TouchableOpacity>
-          </LinearGradient>
-        </View>
-      );
-    },
-    [
-      gradientConfig,
-      cardStyle,
-      colors.button,
-      colors.buttonText,
-      colors.white,
-      subscribeButtonText,
-      subscribeLoadingId,
-      openDetailsModal,
-      handleSubscribe,
-    ]
-  );
-
-  return (
-    <View style={containerStyle}>
-      <AppHeader
-        title={header.topTitle}
-        onBackPress={onBackPress}
-        titleAlign={header.topTitleAlign}
-        theme={theme}
-      />
-      <View style={styles.content}>
-        <Text style={headingStyle} color={colors.textPrimary}>
-          {header.title}
-        </Text>
-        <Text style={subTextStyle}>{header.subTitle}</Text>
-
-        {!plans || (plans.length === 0 && !isLoading && errorMessage) ? (
-          <View style={styles.errorMessage}>
-            <Text style={errorMessageStyle}>{errorMessage}</Text>
-          </View>
-        ) : (
-          <Carousel
-            width={CAROUSEL_WIDTH}
-            height={CAROUSEL_HEIGHT}
-            data={isLoading ? placeholderData : sortedPlans}
-            renderItem={isLoading ? renderSkeleton : renderPlan}
-            loop={shouldLoop}
-            autoPlay={false}
-            scrollAnimationDuration={500}
-            mode="parallax"
-            modeConfig={carouselModeConfig}
-          />
-        )}
-
-        <Text style={infoStyle}>{footer.title}</Text>
-        <Text style={cancelTextStyle}>{footer.subTitle}</Text>
-
-        {extraContentText && (
-          <View style={styles.extraContentTextWrapper}>
-            {React.isValidElement(extraContentText) ? (
-              extraContentText
-            ) : (
-              <Text style={extraContentTextStyle}>{extraContentText}</Text>
-            )}
-          </View>
-        )}
-
-        {/* Details Modal */}
-        <Modal
-          isVisible={isModalVisible}
-          onBackdropPress={closeDetailsModal}
-          onBackButtonPress={closeDetailsModal}
-          backdropOpacity={0.35}
-          useNativeDriver={true}
-          useNativeDriverForBackdrop={true}
-          onSwipeComplete={closeDetailsModal}
-          propagateSwipe
-          style={styles.modal}
-          hideModalContentWhileAnimating={true}
-          animationIn="slideInUp"
-          animationOut="slideOutDown"
-          animationInTiming={300}
-          animationOutTiming={300}
-        >
-          {selectedPlan && (
-            <PlanDetailsModalContent
-              plan={selectedPlan}
-              colors={modalColors}
-              onClose={closeDetailsModal}
-            />
-          )}
-        </Modal>
-      </View>
-    </View>
-  );
-};
-
-export default memo(SubscriptionSliderOne);
-
-namespace SubscriptionSliderOne {
-  export type Props = SubscriptionSliderOneProps;
-}
-
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  content: { flex: 1, paddingTop: verticalScale(16) },
-  heading: {
-    fontSize: RFValue(21),
-    fontWeight: '700',
-    textAlign: 'center',
-    marginBottom: verticalScale(12),
-    marginHorizontal: scale(16),
-  },
-  subText: {
-    textAlign: 'center',
-    fontSize: RFValue(12),
-    fontWeight: '400',
-    marginBottom: verticalScale(12),
-    marginHorizontal: scale(16),
-  },
-  errorMessage: {
-    height: CAROUSEL_HEIGHT,
-    fontSize: RFValue(13),
-    fontWeight: '600',
-    textAlign: 'center',
-    textAlignVertical: 'center',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginVertical: verticalScale(12),
-  },
-
-  cardContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  card: {
-    position: 'relative',
-    width: Display.fullWidth * 0.95,
-    aspectRatio: 1,
-    borderRadius: scale(20),
-    justifyContent: 'center',
-    alignItems: 'center',
-    alignSelf: 'center',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.2,
-    shadowRadius: 8,
-    elevation: 5,
-  },
-  cardTitle: {
-    fontSize: RFValue(17),
-    fontWeight: '700',
-    maxWidth: '50%',
-    marginHorizontal: 'auto',
-    marginBottom: verticalScale(8),
-    textAlign: 'center',
-  },
-  price: {
-    fontSize: RFValue(43),
-    fontWeight: 'bold',
-    marginBottom: verticalScale(4),
-  },
-  per: {
-    fontSize: RFValue(13),
-    textTransform: 'capitalize',
-    marginBottom: verticalScale(6),
-  },
-  platforms: {
-    fontSize: RFValue(13),
-    textTransform: 'capitalize',
-    textAlign: 'center',
-    marginBottom: verticalScale(8),
-  },
-  benefitsContainer: {
-    marginTop: verticalScale(8),
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-    width: '60%',
-    marginHorizontal: 'auto',
-  },
-  benefit: {
-    fontSize: RFValue(12),
-  },
-  subscribeButton: {
-    paddingVertical: verticalScale(10),
-    paddingHorizontal: scale(60),
-    borderRadius: scale(30),
-    alignItems: 'center',
-    marginTop: verticalScale(5),
-  },
-  subscribeText: {
-    fontSize: RFValue(14),
-    fontWeight: '700',
-  },
-  info: {
-    fontSize: RFValue(11),
-    textAlign: 'center',
-    fontWeight: '400',
-    marginVertical: verticalScale(8),
-    marginHorizontal: scale(16),
-  },
-  cancelText: {
-    fontSize: RFValue(11),
-    textAlign: 'center',
-    fontWeight: '400',
-    marginBottom: verticalScale(16),
-    marginHorizontal: scale(16),
-  },
-  extraContentTextWrapper: {
-    marginTop: verticalScale(18),
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: scale(16),
-  },
-  extraContentTextText: {
-    fontSize: RFValue(10),
-    marginHorizontal: scale(16),
-    fontWeight: '400',
-    textAlign: 'center',
-  },
-  popularBadge: {
-    position: 'absolute',
-    top: verticalScale(10),
-    right: scale(10),
-    paddingHorizontal: scale(6),
-    paddingVertical: verticalScale(3),
-    borderRadius: scale(12),
-    zIndex: 10,
-  },
-  popularText: {
-    fontSize: RFValue(9),
-    textTransform: 'uppercase',
-    fontWeight: '700',
-  },
-  viewDetailsButton: {
-    paddingVertical: verticalScale(6),
-    paddingHorizontal: scale(20),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  viewDetailsText: {
-    fontSize: RFValue(12),
-    fontWeight: '600',
-    textDecorationLine: 'underline',
-  },
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-end',
-    zIndex: 1000,
-  },
-
-  modalContent: {
-    borderTopLeftRadius: moderateScale(24),
-    borderTopRightRadius: moderateScale(24),
-    maxHeight: Dimensions.get('window').height * 0.85,
-    minHeight: Dimensions.get('window').height * 0.4,
-    paddingBottom: verticalScale(20),
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: -4 },
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
-    elevation: 8,
-    overflow: 'hidden',
-  },
-  modalHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: scale(20),
-    paddingTop: verticalScale(16),
-    paddingBottom: verticalScale(5),
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: 'rgba(0,0,0,0.08)',
-  },
-  modalTitle: {
-    fontSize: RFValue(17),
-    fontWeight: '700',
-    flex: 1,
-    letterSpacing: 0.2,
-  },
-  modalCloseButton: {
-    width: scale(30),
-    height: scale(30),
-    borderRadius: scale(20),
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginLeft: scale(12),
-  },
-  modalScrollView: {
-    paddingHorizontal: scale(20),
-    paddingTop: verticalScale(16),
-  },
-  modalScrollContent: {
-    paddingBottom: verticalScale(24),
-    flexGrow: 1,
-  },
-  modalSection: {
-    marginBottom: verticalScale(10),
-    paddingBottom: verticalScale(16),
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: 'rgba(0,0,0,0.06)',
-  },
-  modalFirstSection: {
-    marginTop: 0,
-  },
-  modalSectionTitle: {
-    fontSize: RFValue(15),
-    fontWeight: '700',
-    marginBottom: verticalScale(10),
-    letterSpacing: 0.3,
-    opacity: 0.9,
-  },
-  modalSectionValue: {
-    fontSize: RFValue(15),
-    lineHeight: RFValue(20),
-    letterSpacing: 0.2,
-    opacity: 0.85,
-  },
-  benefitRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: verticalScale(10),
-    paddingRight: scale(8),
-    paddingLeft: scale(4),
-  },
-  benefitBullet: {
-    fontSize: RFValue(16),
-    marginRight: scale(10),
-    fontWeight: '600',
-  },
-  benefitText: {
-    fontSize: RFValue(12),
-    flex: 1,
-    letterSpacing: 0.2,
-    textTransform: 'capitalize',
-    opacity: 0.85,
-  },
-  priceHighlightBox: {
-    borderRadius: scale(16),
-    padding: scale(20),
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  modalPriceLabel: {
-    fontSize: RFValue(12),
-    fontWeight: '700',
-    letterSpacing: 1.2,
-    marginBottom: verticalScale(8),
-    opacity: 0.7,
-  },
-  modalPriceValue: {
-    fontSize: RFValue(36),
-    fontWeight: '800',
-    marginBottom: verticalScale(4),
-    letterSpacing: -0.5,
-  },
-  modalPriceDuration: {
-    fontSize: RFValue(14),
-    fontWeight: '500',
-    opacity: 0.7,
-  },
-  platformBadge: {
-    alignSelf: 'flex-start',
-    paddingHorizontal: scale(12),
-    paddingVertical: verticalScale(8),
-    borderRadius: scale(12),
-    borderWidth: 1,
-    borderColor: 'rgba(0,0,0,0.08)',
-  },
-  platformBadgeText: {
-    fontSize: RFValue(12),
-    fontWeight: '600',
-    letterSpacing: 0.3,
-    textTransform: 'capitalize',
-  },
-});