picturethis.tsx

import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated, {
  Easing,
  interpolateColor,
  useAnimatedStyle,
  useReducedMotion,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import Svg, { Path, Rect } from 'react-native-svg';

import type { PaywallProps } from './types';
import { createActionPress } from './shared/actions';
import { ReplicaPressable } from './shared/pressable';
import { ReferenceCanvas } from './shared/reference-canvas';

const trialBackground = require('../../assets/paywalls/picturethis/trial-bg.png');
const comparisonMosaic = require('../../assets/paywalls/picturethis/mosaic.png');

type PictureThisVariant = 'trial' | 'comparison';
type TrialPlan = 'annual' | 'monthly';

const TRIAL_GREEN = '#01A261';
const BUTTON_GREEN = '#2EBF82';
const PLUS_GREEN = '#00A362';
const PRO_ORANGE = '#EF6D00';

function normalizeVariant(value?: string): PictureThisVariant {
  return value === 'comparison' || value === 'plus' || value === 'pro'
    ? 'comparison'
    : 'trial';
}

function CheckIcon({ color = '#FFFFFF', size = 18, strokeWidth = 2.4 }: {
  color?: string;
  size?: number;
  strokeWidth?: number;
}) {
  return (
    <Svg height={size} viewBox="0 0 20 20" width={size}>
      <Path
        d="m3.2 10.1 4.2 4.1 9.4-9.6"
        fill="none"
        stroke={color}
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={strokeWidth}
      />
    </Svg>
  );
}

function CloseIcon({ color = '#FFFFFF' }: { color?: string }) {
  return (
    <Svg height={22} viewBox="0 0 22 22" width={22}>
      <Path d="M4.5 4.5 17.5 17.5M17.5 4.5 4.5 17.5" stroke={color} strokeLinecap="round" strokeWidth={2.2} />
    </Svg>
  );
}

function LockIcon() {
  return (
    <Svg height={22} viewBox="0 0 22 22" width={22}>
      <Rect fill="none" height={11} rx={1.4} stroke="#8DD0AE" strokeWidth={1.8} width={14} x={4} y={9} />
      <Path d="M7.2 9V6.5a3.8 3.8 0 0 1 7.6 0V9" fill="none" stroke="#8DD0AE" strokeLinecap="round" strokeWidth={1.8} />
    </Svg>
  );
}

function TrialRadio({ selected }: { selected: boolean }) {
  return (
    <View style={[trialStyles.radio, selected ? trialStyles.radioSelected : trialStyles.radioIdle]}>
      {selected ? <CheckIcon size={14} strokeWidth={2.5} /> : null}
    </View>
  );
}

type ReminderToggleProps = {
  onValueChange: (value: boolean) => void;
  value: boolean;
};

function ReminderToggle({ onValueChange, value }: ReminderToggleProps) {
  const reducedMotion = useReducedMotion();
  const progress = useSharedValue(value ? 1 : 0);

  useEffect(() => {
    progress.value = reducedMotion
      ? (value ? 1 : 0)
      : withTiming(value ? 1 : 0, {
          duration: 190,
          easing: Easing.out(Easing.cubic),
        });
  }, [progress, reducedMotion, value]);

  const trackStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(
      progress.value,
      [0, 1],
      ['#484848', TRIAL_GREEN],
    ),
  }));
  const thumbStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: progress.value * 21.3 }],
  }));

  return (
    <ReplicaPressable
      accessibilityLabel="Remind me two days before trial ends"
      accessibilityRole="switch"
      accessibilityState={{ checked: value }}
      onPress={() => onValueChange(!value)}
      style={trialStyles.reminderSwitchPressable}
    >
      <Animated.View pointerEvents="none" style={[trialStyles.reminderSwitchTrack, trackStyle]}>
        <Animated.View style={[trialStyles.reminderSwitchThumb, thumbStyle]} />
      </Animated.View>
    </ReplicaPressable>
  );
}

type TrialPlanCardProps = {
  detail: string;
  label: string;
  onPress: () => void;
  rightLabel: string;
  selected: boolean;
  top: number;
};

function TrialPlanCard({ detail, label, onPress, rightLabel, selected, top }: TrialPlanCardProps) {
  const reducedMotion = useReducedMotion();
  const selectedProgress = useSharedValue(selected ? 1 : 0);

  useEffect(() => {
    selectedProgress.value = reducedMotion
      ? (selected ? 1 : 0)
      : withTiming(selected ? 1 : 0, {
          duration: 180,
          easing: Easing.out(Easing.cubic),
        });
  }, [reducedMotion, selected, selectedProgress]);

  const selectedSurfaceStyle = useAnimatedStyle(() => ({ opacity: selectedProgress.value }));

  return (
    <ReplicaPressable
      accessibilityLabel={`${label}, ${detail}, ${rightLabel}`}
      accessibilityRole="radio"
      accessibilityState={{ checked: selected }}
      onPress={onPress}
      style={[trialStyles.planCard, { top }]}
    >
      <View pointerEvents="none" style={trialStyles.planIdleSurface} />
      <Animated.View pointerEvents="none" style={[trialStyles.planSelectedSurface, selectedSurfaceStyle]} />
      <View style={trialStyles.planRadioPosition}>
        <TrialRadio selected={selected} />
      </View>
      <Text style={[trialStyles.planLabel, !selected && trialStyles.planLabelIdle]}>{label}</Text>
      <Text style={[trialStyles.planDetail, !selected && trialStyles.planDetailIdle]}>{detail}</Text>
      <Text style={[trialStyles.planRightLabel, !selected && trialStyles.planLabelIdle]}>{rightLabel}</Text>
    </ReplicaPressable>
  );
}

function TrialLegalLinks({ onActionPress, onRestorePress }: Pick<PaywallProps, 'onActionPress' | 'onRestorePress'>) {
  return (
    <View style={trialStyles.legalRow}>
      <ReplicaPressable
        accessibilityLabel="PictureThis terms of use"
        accessibilityRole="link"
        onPress={createActionPress({ actionId: 'picturethis.terms', haptic: false, onActionPress })}
      >
        <Text style={trialStyles.legalText}>Terms of Use</Text>
      </ReplicaPressable>
      <Text style={trialStyles.legalDivider}> | </Text>
      <ReplicaPressable
        accessibilityLabel="PictureThis subscription terms"
        accessibilityRole="link"
        onPress={createActionPress({ actionId: 'picturethis.subscription-terms', haptic: false, onActionPress })}
      >
        <Text style={trialStyles.legalText}>Subscription Terms</Text>
      </ReplicaPressable>
      <Text style={trialStyles.legalDivider}> | </Text>
      <ReplicaPressable
        accessibilityLabel="PictureThis privacy policy"
        accessibilityRole="link"
        onPress={createActionPress({ actionId: 'picturethis.privacy', haptic: false, onActionPress })}
      >
        <Text style={trialStyles.legalText}>Privacy Policy</Text>
      </ReplicaPressable>
      <Text style={trialStyles.legalDivider}> | </Text>
      <ReplicaPressable
        accessibilityLabel="Restore PictureThis purchase"
        accessibilityRole="link"
        onPress={createActionPress({
          actionId: 'picturethis.restore',
          fallback: onRestorePress,
          onActionPress,
        })}
      >
        <Text style={trialStyles.legalText}>Restore</Text>
      </ReplicaPressable>
    </View>
  );
}

function TrialPaywall({
  onActionPress,
  onClosePress,
  onPurchasePress,
  onRestorePress,
  replayKey,
}: PaywallProps) {
  const [plan, setPlan] = useState<TrialPlan>('annual');
  const [reminderEnabled, setReminderEnabled] = useState(false);

  useEffect(() => {
    const frame = requestAnimationFrame(() => {
      setPlan('annual');
      setReminderEnabled(false);
    });

    return () => cancelAnimationFrame(frame);
  }, [replayKey]);

  const selectPlan = (next: TrialPlan) => {
    if (next === plan) return;
    setPlan(next);
    createActionPress({
      actionId: `picturethis.select-${next}`,
      onActionPress,
    })();
  };

  const toggleReminder = (next: boolean) => {
    setReminderEnabled(next);
    createActionPress({
      actionId: `picturethis.reminder-${next ? 'on' : 'off'}`,
      onActionPress,
    })();
  };

  const purchase = createActionPress({
    actionId: `picturethis.continue-${plan}`,
    fallback: onPurchasePress,
    haptic: 'light',
    onActionPress,
  });

  return (
    <ReferenceCanvas backgroundColor="#000000" testID="paywall-picturethis-trial">
      <StatusBar style="light" />
      <Image contentFit="cover" pointerEvents="none" source={trialBackground} style={trialStyles.background} />

      <ReplicaPressable
        accessibilityLabel="Cancel PictureThis trial"
        onPress={createActionPress({
          actionId: 'picturethis.cancel',
          fallback: onClosePress,
          haptic: 'light',
          onActionPress,
        })}
        style={trialStyles.cancel}
      >
        <Text style={trialStyles.cancelText}>Cancel</Text>
      </ReplicaPressable>

      <View pointerEvents="none" style={trialStyles.heading}>
        <Text style={trialStyles.headingLine}>Design Your</Text>
        <Text style={trialStyles.headingAccent}>Trial</Text>
      </View>

      <View pointerEvents="none" style={trialStyles.featureList}>
        {[
          "Enjoy your first 7 days, it's free",
          'Cancel from the app or your iCloud account',
          'Quick diagnosis & immediate solutions',
          'Detailed and insightful plant info',
        ].map((label) => (
          <View key={label} style={trialStyles.featureRow}>
            <View style={trialStyles.featureCheck}><CheckIcon color={TRIAL_GREEN} size={20} strokeWidth={2.8} /></View>
            <Text numberOfLines={1} style={trialStyles.featureText}>{label}</Text>
          </View>
        ))}
      </View>

      <View style={trialStyles.reminderPill}>
        <Text style={trialStyles.reminderText}>Remind me 2 days before trial ends</Text>
        <ReminderToggle onValueChange={toggleReminder} value={reminderEnabled} />
      </View>

      <TrialPlanCard
        detail="7 days"
        label="Free"
        onPress={() => selectPlan('annual')}
        rightLabel="No Payment Now"
        selected={plan === 'annual'}
        top={489.3}
      />
      <TrialPlanCard
        detail="$0.99"
        label="1 month"
        onPress={() => selectPlan('monthly')}
        rightLabel="Best Deal"
        selected={plan === 'monthly'}
        top={567.3}
      />

      <Text style={trialStyles.summary}>
        {plan === 'annual' ? (
          <>7 days free, then just <Text style={trialStyles.summaryStrong}>$39.99</Text>/yr(~$3.33/mo)</>
        ) : (
          <>1 month for just <Text style={trialStyles.summaryStrong}>$0.99</Text></>
        )}
      </Text>

      <ReplicaPressable accessibilityLabel="Continue with PictureThis" onPress={purchase} style={trialStyles.continueButton}>
        <Text style={trialStyles.continueText}>Continue</Text>
      </ReplicaPressable>

      <TrialLegalLinks onActionPress={onActionPress} onRestorePress={onRestorePress} />
    </ReferenceCanvas>
  );
}

const COMPARISON_FEATURES = [
  '7-Day Free Trial',
  'Weed ID',
  'Toxic ID',
  'Tree ID',
  'Insect ID',
  'Bird ID',
  '360 ID',
  'Tree-ring ID',
] as const;

function ComparisonLegalLinks({ onActionPress, onRestorePress }: Pick<PaywallProps, 'onActionPress' | 'onRestorePress'>) {
  const terms = createActionPress({ actionId: 'picturethis.terms', haptic: false, onActionPress });
  const privacy = createActionPress({ actionId: 'picturethis.privacy', haptic: false, onActionPress });
  const subscription = createActionPress({ actionId: 'picturethis.subscription-terms', haptic: false, onActionPress });
  const restore = createActionPress({
    actionId: 'picturethis.restore',
    fallback: onRestorePress,
    onActionPress,
  });

  return (
    <View style={comparisonStyles.legalRow}>
      <ReplicaPressable accessibilityLabel="PictureThis terms of use" accessibilityRole="link" onPress={terms}>
        <Text style={comparisonStyles.legalText}>Terms of Use</Text>
      </ReplicaPressable>
      <Text style={comparisonStyles.legalText}> | </Text>
      <ReplicaPressable accessibilityLabel="PictureThis privacy policy" accessibilityRole="link" onPress={privacy}>
        <Text style={comparisonStyles.legalText}>Privacy Policy</Text>
      </ReplicaPressable>
      <Text style={comparisonStyles.legalText}> | </Text>
      <ReplicaPressable accessibilityLabel="PictureThis subscription terms" accessibilityRole="link" onPress={subscription}>
        <Text style={comparisonStyles.legalText}>Subscription Terms</Text>
      </ReplicaPressable>
      <Text style={comparisonStyles.legalText}> | </Text>
      <ReplicaPressable accessibilityLabel="Restore PictureThis purchase" accessibilityRole="link" onPress={restore}>
        <Text style={comparisonStyles.legalText}>Restore</Text>
      </ReplicaPressable>
    </View>
  );
}

function ComparisonPaywall({ onActionPress, onClosePress, onPurchasePress, onRestorePress }: PaywallProps) {
  const purchasePlus = createActionPress({
    actionId: 'picturethis.get-plus',
    fallback: onPurchasePress,
    haptic: 'light',
    onActionPress,
  });
  const purchasePro = createActionPress({
    actionId: 'picturethis.get-pro',
    fallback: onPurchasePress,
    haptic: 'light',
    onActionPress,
  });

  return (
    <ReferenceCanvas backgroundColor="#F5F5F5" testID="paywall-picturethis-comparison">
      <StatusBar style="dark" />
      <Image contentFit="cover" pointerEvents="none" source={comparisonMosaic} style={comparisonStyles.mosaic} />
      <LinearGradient
        colors={['rgba(0,0,0,0.04)', 'rgba(0,0,0,0.58)']}
        pointerEvents="none"
        style={comparisonStyles.mosaicShade}
      />

      <ReplicaPressable
        accessibilityLabel="Close PictureThis comparison"
        onPress={createActionPress({
          actionId: 'picturethis.close',
          fallback: onClosePress,
          haptic: 'light',
          onActionPress,
        })}
        style={comparisonStyles.close}
      >
        <CloseIcon />
      </ReplicaPressable>

      <Text style={comparisonStyles.heroTitle}>PictureThis</Text>
      <Text style={comparisonStyles.heroSubtitle}>Discover the full beauty of plants</Text>

      <View style={comparisonStyles.unlockBand}>
        <Text style={comparisonStyles.unlockText}>Unlock all features</Text>
      </View>

      <View style={comparisonStyles.tableHeader}>
        <Text style={comparisonStyles.featureCount}>19 Features</Text>
        <View style={[comparisonStyles.tierPill, comparisonStyles.plusPill]}>
          <Text style={[comparisonStyles.tierPillText, comparisonStyles.plusText]}>PLUS</Text>
        </View>
        <View style={[comparisonStyles.tierPill, comparisonStyles.proPill]}>
          <Text style={[comparisonStyles.tierPillText, comparisonStyles.proText]}>Pro</Text>
        </View>
      </View>

      <View style={comparisonStyles.featureRows}>
        {COMPARISON_FEATURES.map((feature) => (
          <View key={feature} style={comparisonStyles.featureRow}>
            <Text numberOfLines={1} style={comparisonStyles.featureName}>{feature}</Text>
            <View style={comparisonStyles.plusIcon}><LockIcon /></View>
            <View style={comparisonStyles.proIcon}><CheckIcon color={PRO_ORANGE} size={18.23} strokeWidth={2.6} /></View>
          </View>
        ))}
        <View style={[comparisonStyles.featureRow, comparisonStyles.adviceRow]}>
          <Text numberOfLines={1} style={comparisonStyles.featureName}>Personalized Advice</Text>
          <Text style={comparisonStyles.plusTimes}>1 time</Text>
          <Text style={comparisonStyles.proTimes}>2 times</Text>
        </View>
      </View>

      <View style={comparisonStyles.purchaseArea}>
        <Text style={comparisonStyles.plusHeading}>Best Value</Text>
        <Text style={comparisonStyles.proHeading}>7-Day Free Trial</Text>
        <ReplicaPressable accessibilityLabel="Get PictureThis Plus" onPress={purchasePlus} style={comparisonStyles.plusButton}>
          <Text style={comparisonStyles.productButtonText}>Get Plus</Text>
        </ReplicaPressable>
        <ReplicaPressable accessibilityLabel="Get PictureThis Pro" onPress={purchasePro} style={comparisonStyles.proButton}>
          <Text style={comparisonStyles.productButtonText}>Get Pro</Text>
        </ReplicaPressable>
        <Text style={comparisonStyles.plusPrice}>12 Months:$2.08/mo{`\n`}<Text style={comparisonStyles.totalPrice}>(Total: $24.99)</Text></Text>
        <Text style={comparisonStyles.proPrice}>12 Months:$3.33/mo{`\n`}<Text style={comparisonStyles.totalPrice}>(Total: $39.99)</Text></Text>
        <ComparisonLegalLinks onActionPress={onActionPress} onRestorePress={onRestorePress} />
      </View>
    </ReferenceCanvas>
  );
}

export function PictureThisPaywall(props: PaywallProps) {
  return normalizeVariant(props.initialVariant) === 'comparison'
    ? <ComparisonPaywall {...props} />
    : <TrialPaywall {...props} />;
}

const trialStyles = StyleSheet.create({
  background: {
    height: 844,
    left: 0,
    position: 'absolute',
    top: -22,
    width: 390,
  },
  cancel: {
    alignItems: 'center',
    height: 44,
    justifyContent: 'center',
    left: 314,
    position: 'absolute',
    top: 37.75,
    width: 68,
  },
  cancelText: {
    color: '#989898',
    fontFamily: 'System',
    fontSize: 16.5,
    fontWeight: '400',
    letterSpacing: 0,
    lineHeight: 22,
  },
  heading: {
    left: 17.3,
    position: 'absolute',
    top: 200,
  },
  headingLine: {
    color: '#FFFFFF',
    fontFamily: 'System',
    fontSize: 26.75,
    fontWeight: '700',
    letterSpacing: -0.25,
    lineHeight: 40,
  },
  headingAccent: {
    color: TRIAL_GREEN,
    fontFamily: 'System',
    fontSize: 26.75,
    fontWeight: '700',
    letterSpacing: -0.25,
    lineHeight: 40,
  },
  featureList: {
    left: 17.3,
    position: 'absolute',
    top: 287.7,
    width: 360,
  },
  featureRow: {
    alignItems: 'center',
    flexDirection: 'row',
    height: 32,
  },
  featureCheck: {
    alignItems: 'center',
    height: 22,
    justifyContent: 'center',
    transform: [{ translateX: -3.7 }],
    width: 22,
  },
  featureText: {
    color: '#E1E1E1',
    fontFamily: 'System',
    fontSize: 13.48,
    fontWeight: '400',
    letterSpacing: 0,
    lineHeight: 20,
    marginLeft: 2.8,
  },
  reminderPill: {
    alignItems: 'center',
    borderColor: '#4A4A4A',
    borderRadius: 21.4,
    borderWidth: 1,
    flexDirection: 'row',
    height: 42.7,
    justifyContent: 'space-between',
    left: 16.7,
    paddingLeft: 16.5,
    paddingRight: 8,
    position: 'absolute',
    top: 434.7,
    width: 356.7,
  },
  reminderText: {
    color: '#E1E1E1',
    fontFamily: 'System',
    fontSize: 13.47,
    fontWeight: '400',
    letterSpacing: 0,
    lineHeight: 20,
  },
  reminderSwitchPressable: {
    borderRadius: 15,
    height: 30,
    width: 51.3,
  },
  reminderSwitchTrack: {
    borderRadius: 15,
    height: 30,
    overflow: 'hidden',
    position: 'relative',
    width: 51.3,
  },
  reminderSwitchThumb: {
    backgroundColor: '#FFFFFF',
    borderRadius: 13,
    height: 26,
    left: 2,
    position: 'absolute',
    shadowColor: '#000000',
    shadowOffset: { height: 0.5, width: 0 },
    shadowOpacity: 0.18,
    shadowRadius: 1.2,
    top: 2,
    width: 26,
  },
  planCard: {
    height: 66.7,
    left: 16.7,
    overflow: 'hidden',
    position: 'absolute',
    width: 356.7,
  },
  planIdleSurface: {
    ...StyleSheet.absoluteFill,
    backgroundColor: '#000000',
    borderColor: '#464646',
    borderRadius: 33.4,
    borderWidth: 1,
  },
  planSelectedSurface: {
    ...StyleSheet.absoluteFill,
    backgroundColor: '#001006',
    borderColor: BUTTON_GREEN,
    borderRadius: 33.4,
    borderWidth: 1,
  },
  planRadioPosition: {
    alignItems: 'center',
    height: 22,
    justifyContent: 'center',
    left: 18.5,
    position: 'absolute',
    top: 22.3,
    width: 22,
  },
  radio: {
    alignItems: 'center',
    borderRadius: 11,
    height: 20,
    justifyContent: 'center',
    width: 20,
  },
  radioSelected: {
    backgroundColor: TRIAL_GREEN,
  },
  radioIdle: {
    borderColor: '#B8B8B8',
    borderWidth: 1.4,
  },
  planLabel: {
    color: '#FFFFFF',
    fontFamily: 'System',
    fontSize: 16,
    fontWeight: '700',
    left: 52,
    letterSpacing: -0.3,
    lineHeight: 22,
    position: 'absolute',
    top: 14.5,
  },
  planDetail: {
    color: '#B3B8B5',
    fontFamily: 'System',
    fontSize: 10.72,
    fontWeight: '400',
    left: 52,
    lineHeight: 18,
    position: 'absolute',
    top: 37.8,
  },
  planRightLabel: {
    color: '#FFFFFF',
    fontFamily: 'System',
    fontSize: 11.04,
    fontWeight: '400',
    letterSpacing: -0.25,
    lineHeight: 20,
    position: 'absolute',
    right: 30,
    top: 23.7,
  },
  planLabelIdle: {
    color: '#B8B8B8',
  },
  planDetailIdle: {
    color: '#818181',
  },
  summary: {
    color: '#E1E1E1',
    fontFamily: 'System',
    fontSize: 13.93,
    fontWeight: '400',
    left: 18,
    letterSpacing: -0.35,
    lineHeight: 21,
    position: 'absolute',
    textAlign: 'center',
    top: 671.4,
    width: 354,
  },
  summaryStrong: {
    fontFamily: 'System',
    fontSize: 14.79,
    fontWeight: '700',
  },
  continueButton: {
    alignItems: 'center',
    backgroundColor: BUTTON_GREEN,
    borderRadius: 29,
    height: 58,
    justifyContent: 'center',
    left: 16.7,
    position: 'absolute',
    top: 702.7,
    width: 356.7,
  },
  continueText: {
    color: '#FFFFFF',
    fontFamily: 'System',
    fontSize: 20.51,
    fontWeight: '600',
    letterSpacing: -0.5,
    lineHeight: 28,
  },
  legalRow: {
    alignItems: 'center',
    flexDirection: 'row',
    height: 22,
    justifyContent: 'center',
    left: 10,
    position: 'absolute',
    top: 798.5,
    width: 370,
  },
  legalText: {
    color: '#949494',
    fontFamily: 'System',
    fontSize: 11.32,
    fontWeight: '400',
    letterSpacing: 0,
    lineHeight: 16,
  },
  legalDivider: {
    color: '#949494',
    fontFamily: 'System',
    fontSize: 11.32,
    fontWeight: '400',
    lineHeight: 16,
  },
});

const comparisonStyles = StyleSheet.create({
  mosaic: {
    height: 181,
    left: 0,
    position: 'absolute',
    top: 0,
    width: 390,
  },
  mosaicShade: {
    height: 181,
    left: 0,
    position: 'absolute',
    top: 0,
    width: 390,
  },
  close: {
    alignItems: 'center',
    height: 44,
    justifyContent: 'center',
    left: 3,
    position: 'absolute',
    top: 37,
    width: 44,
  },
  heroTitle: {
    color: '#FFFFFF',
    fontFamily: 'System',
    fontSize: 32.49,
    fontWeight: '700',
    left: 17.3,
    letterSpacing: 0,
    lineHeight: 40,
    position: 'absolute',
    top: 106,
  },
  heroSubtitle: {
    color: '#FFFFFF',
    fontFamily: 'System',
    fontSize: 16.06,
    fontWeight: '400',
    left: 17.3,
    letterSpacing: -0.2,
    lineHeight: 25,
    position: 'absolute',
    top: 140.22,
  },
  unlockBand: {
    backgroundColor: PLUS_GREEN,
    height: 37.7,
    justifyContent: 'center',
    left: 0,
    paddingLeft: 17.7,
    position: 'absolute',
    top: 181,
    width: 390,
  },
  unlockText: {
    color: '#FFFFFF',
    fontFamily: 'System',
    fontSize: 18,
    fontWeight: '700',
    letterSpacing: -0.08,
    lineHeight: 24,
  },
  tableHeader: {
    backgroundColor: '#F5F5F5',
    borderBottomColor: '#DFDFDF',
    borderBottomWidth: StyleSheet.hairlineWidth,
    height: 47,
    left: 0,
    position: 'absolute',
    top: 218.7,
    width: 390,
  },
  featureCount: {
    color: '#949494',
    fontFamily: 'System',
    fontSize: 16.85,
    fontWeight: '700',
    left: 16.7,
    letterSpacing: -0.35,
    lineHeight: 24,
    position: 'absolute',
    top: 14.3,
  },
  tierPill: {
    alignItems: 'center',
    borderRadius: 4.2,
    height: 26.3,
    justifyContent: 'center',
    position: 'absolute',
    top: 10.6,
    width: 50,
  },
  plusPill: {
    backgroundColor: '#C4E4D7',
    left: 262,
  },
  proPill: {
    backgroundColor: '#F4DAC4',
    left: 324,
  },
  tierPillText: {
    fontFamily: 'System',
    fontSize: 12.14,
    fontWeight: '700',
    lineHeight: 18,
  },
  plusText: { color: PLUS_GREEN },
  proText: { color: PRO_ORANGE },
  featureRows: {
    backgroundColor: '#F5F5F5',
    left: 0,
    position: 'absolute',
    top: 265.7,
    width: 390,
  },
  featureRow: {
    borderBottomColor: '#DFDFDF',
    borderBottomWidth: StyleSheet.hairlineWidth,
    height: 42.2,
    width: 390,
  },
  adviceRow: {
    height: 30.7,
  },
  featureName: {
    color: '#1A1A1A',
    fontFamily: 'System',
    fontSize: 13.48,
    fontWeight: '400',
    left: 16.7,
    letterSpacing: 0,
    lineHeight: 21,
    position: 'absolute',
    top: 10.4,
  },
  plusIcon: {
    alignItems: 'center',
    height: 26,
    justifyContent: 'center',
    left: 274,
    position: 'absolute',
    top: 8,
    width: 26,
  },
  proIcon: {
    alignItems: 'center',
    height: 26,
    justifyContent: 'center',
    left: 336.5,
    position: 'absolute',
    top: 8,
    width: 26,
  },
  plusTimes: {
    color: PLUS_GREEN,
    fontFamily: 'System',
    fontSize: 14.64,
    fontWeight: '600',
    left: 264.5,
    lineHeight: 20,
    position: 'absolute',
    top: 11.94,
  },
  proTimes: {
    color: PRO_ORANGE,
    fontFamily: 'System',
    fontSize: 14.64,
    fontWeight: '600',
    left: 324,
    lineHeight: 20,
    position: 'absolute',
    top: 11.94,
  },
  purchaseArea: {
    backgroundColor: '#F5F5F5',
    height: 210,
    left: 0,
    position: 'absolute',
    top: 634.7,
    width: 390,
  },
  plusHeading: {
    color: PLUS_GREEN,
    fontFamily: 'System',
    fontSize: 16.78,
    fontWeight: '700',
    left: 28,
    letterSpacing: -0.3,
    lineHeight: 23,
    position: 'absolute',
    textAlign: 'center',
    top: 13.5,
    width: 145,
  },
  proHeading: {
    color: PRO_ORANGE,
    fontFamily: 'System',
    fontSize: 16.78,
    fontWeight: '700',
    left: 211,
    letterSpacing: -0.3,
    lineHeight: 23,
    position: 'absolute',
    textAlign: 'center',
    top: 13.5,
    width: 163,
  },
  plusButton: {
    alignItems: 'center',
    backgroundColor: PLUS_GREEN,
    borderRadius: 24,
    height: 48,
    justifyContent: 'center',
    left: 16,
    position: 'absolute',
    top: 42.3,
    width: 171,
  },
  proButton: {
    alignItems: 'center',
    backgroundColor: PRO_ORANGE,
    borderRadius: 24,
    height: 48,
    justifyContent: 'center',
    left: 203,
    position: 'absolute',
    top: 42.3,
    width: 171,
  },
  productButtonText: {
    color: '#FFFFFF',
    fontFamily: 'System',
    fontSize: 20.5,
    fontWeight: '400',
    letterSpacing: -0.45,
    lineHeight: 26,
  },
  plusPrice: {
    color: '#6C6C6C',
    fontFamily: 'System',
    fontSize: 11.66,
    fontWeight: '400',
    left: 16,
    lineHeight: 20.26,
    position: 'absolute',
    textAlign: 'center',
    top: 97.49,
    width: 171,
  },
  proPrice: {
    color: '#6C6C6C',
    fontFamily: 'System',
    fontSize: 11.66,
    fontWeight: '400',
    left: 203,
    lineHeight: 20.26,
    position: 'absolute',
    textAlign: 'center',
    top: 97.49,
    width: 171,
  },
  totalPrice: {
    fontFamily: 'System',
    fontSize: 13.4,
    fontWeight: '700',
  },
  legalRow: {
    alignItems: 'center',
    flexDirection: 'row',
    height: 20,
    justifyContent: 'center',
    left: 10,
    position: 'absolute',
    top: 153,
    width: 370,
  },
  legalText: {
    color: '#949494',
    fontFamily: 'System',
    fontSize: 10.7,
    fontWeight: '400',
    letterSpacing: 0,
    lineHeight: 14,
  },
});