perplexity.tsx

import { BlurView } from 'expo-blur';
import { LinearGradient } from 'expo-linear-gradient';
import { StatusBar } from 'expo-status-bar';
import { useEffect, useRef, useState } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import Animated, {
  Easing,
  interpolate,
  useAnimatedStyle,
  useReducedMotion,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import Svg, {
  Circle,
  Defs,
  Line,
  Path,
  RadialGradient,
  Rect,
  Stop,
} 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';

type Tier = 'pro' | 'max';
type ProPlan = 'yearly' | 'monthly';

type Feature = {
  label: string;
};

const ACCENT = '#1F808D';
const INK = '#12343B';
const MUTED = '#626B71';

const PRO_FEATURES: readonly Feature[] = [
  { label: 'Basic search' },
  { label: 'Access to top AI models' },
  { label: 'Access to Computer' },
  { label: 'Access to deep research' },
  { label: 'Premium app connectors' },
  { label: 'More usage and memory' },
];

const MAX_FEATURES: readonly Feature[] = [
  { label: 'Basic search' },
  { label: 'Everything in Pro' },
  { label: 'Monthly Computer credits' },
  { label: 'Early access to new features' },
  { label: 'Access to Claude Opus 4.7' },
  { label: 'Highest deep research limits' },
];

function normalizeTier(value?: string): Tier {
  return value === 'max' || value === 'maximum' ? 'max' : 'pro';
}

function CloseIcon() {
  return (
    <Svg height={19} viewBox="0 0 19 19" width={19}>
      <Line stroke={INK} strokeLinecap="round" strokeWidth={1.8} x1={3.4} x2={15.6} y1={3.4} y2={15.6} />
      <Line stroke={INK} strokeLinecap="round" strokeWidth={1.8} x1={15.6} x2={3.4} y1={3.4} y2={15.6} />
    </Svg>
  );
}

function Tick({ color = ACCENT, size = 14 }: { color?: string; size?: number }) {
  return (
    <Svg height={size} viewBox="0 0 16 14" width={size + 2}>
      <Path
        d="M1.4 7.2 5.8 11.4 14.6 1.9"
        fill="none"
        stroke={color}
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={1.8}
      />
    </Svg>
  );
}

function SelectedCheck() {
  return (
    <View style={styles.selectedCheck}>
      <Tick color="#FFFFFF" size={12} />
    </View>
  );
}

function ClaudeIcon({ muted = false }: { muted?: boolean }) {
  const stroke = muted ? '#CAD4D2' : INK;
  const lines = Array.from({ length: 12 }, (_, index) => {
    const angle = (index * Math.PI) / 6;
    const x1 = 10 + Math.cos(angle) * 3.2;
    const y1 = 10 + Math.sin(angle) * 3.2;
    const x2 = 10 + Math.cos(angle) * 8.3;
    const y2 = 10 + Math.sin(angle) * 8.3;
    return <Line key={index} stroke={stroke} strokeLinecap="round" strokeWidth={1.45} x1={x1} x2={x2} y1={y1} y2={y2} />;
  });

  return (
    <Svg height={20} viewBox="0 0 20 20" width={20}>
      {lines}
      <Circle cx={10} cy={10} fill={stroke} r={2.2} />
    </Svg>
  );
}

function SonarIcon() {
  return (
    <Svg height={20} viewBox="0 0 20 20" width={20}>
      <Path d="M10 1.7v16.6M2.8 5.8l14.4 8.4M2.8 14.2l14.4-8.4M5.8 2.8l8.4 14.4M14.2 2.8 5.8 17.2" fill="none" stroke={INK} strokeLinecap="round" strokeWidth={1.2} />
      <Path d="M4.7 4.8h10.6v10.4H4.7z" fill="none" stroke={INK} strokeWidth={1.05} />
    </Svg>
  );
}

function OpenAiIcon() {
  return (
    <Svg height={20} viewBox="0 0 24 24" width={20}>
      <Path
        d="M12 3.1a4.8 4.8 0 0 1 8 3.5 4.8 4.8 0 0 1 .1 8.7 4.8 4.8 0 0 1-7.7 5.1 4.8 4.8 0 0 1-8.1-3.5 4.8 4.8 0 0 1-.1-8.7A4.8 4.8 0 0 1 12 3.1Zm0 0 4.1 2.4v5.2L12 13.1 7.9 10.7V6m12.1.6-4 2.3v4.8l4.1 2.4m0-.8-4.2-2.4-4.2 2.4v4.8m.7.3v-4.8l-4.1-2.4-4.1 2.4m.1 1.3 4.1-2.4V9.7L4.2 7.3"
        fill="none"
        stroke={INK}
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={1.25}
      />
    </Svg>
  );
}

type ModelChipProps = {
  icon: 'claude' | 'kimi' | 'openai' | 'sonar';
  label: string;
  left: number;
  muted?: boolean;
  width: number;
};

function ModelChip({ icon, label, left, muted = false, width }: ModelChipProps) {
  return (
    <View style={[styles.modelChip, { left, width }]}>
      <View style={styles.modelIcon}>
        {icon === 'claude' ? <ClaudeIcon muted={muted} /> : null}
        {icon === 'sonar' ? <SonarIcon /> : null}
        {icon === 'openai' ? <OpenAiIcon /> : null}
        {icon === 'kimi' ? <Text style={[styles.kimiIcon, muted && styles.modelMuted]}>K’</Text> : null}
      </View>
      <Text numberOfLines={1} style={[styles.modelLabel, muted && styles.modelMuted]}>{label}</Text>
    </View>
  );
}

function ModelStrip({
  initialOffset,
  onBeginDrag,
  scrollRef,
}: {
  initialOffset: number;
  onBeginDrag: () => void;
  scrollRef: React.RefObject<ScrollView | null>;
}) {
  return (
    <View style={styles.modelViewport}>
      <ScrollView
        bounces={false}
        contentOffset={{ x: initialOffset, y: 0 }}
        decelerationRate="fast"
        horizontal
        onScrollBeginDrag={onBeginDrag}
        ref={scrollRef}
        scrollEventThrottle={16}
        showsHorizontalScrollIndicator={false}
        style={styles.modelScroll}
      >
        <View style={styles.modelTrack}>
          <ModelChip icon="claude" label="Claude Sonnet 4.6" left={0} muted width={175} />
          <ModelChip icon="kimi" label="Kimi K2.6" left={191.5} width={78} />
          <ModelChip icon="claude" label="Claude Opus 4.7" left={283} width={126} />
          <ModelChip icon="sonar" label="Sonar" left={427} width={75} />
          <ModelChip icon="openai" label="GPT-5.5" left={499} width={100} />
          <ModelChip icon="claude" label="Claude Sonnet 4.6" left={616} muted width={175} />
        </View>
      </ScrollView>
      <LinearGradient colors={['#F4F7F5', 'rgba(244,247,245,0)']} pointerEvents="none" style={styles.modelFadeLeft} />
      <LinearGradient colors={['rgba(244,247,245,0)', '#F4F7F5']} pointerEvents="none" style={styles.modelFadeRight} />
    </View>
  );
}

function ComparisonContent({ tier }: { tier: Tier }) {
  const features = tier === 'pro' ? PRO_FEATURES : MAX_FEATURES;

  return (
    <View style={styles.comparisonContent}>
      <Text style={[styles.comparisonHeader, styles.featuresHeader]}>Features</Text>
      <Text style={[styles.comparisonHeader, styles.freeHeader]}>Free</Text>
      <Text style={[styles.comparisonHeader, styles.paidHeader]}>{tier === 'pro' ? 'Pro' : 'Max'}</Text>

      {features.map((feature, index) => (
        <View key={feature.label} style={[styles.featureRow, { top: 63 + index * 36.67 }]}>
          <Text numberOfLines={1} style={styles.featureLabel}>{feature.label}</Text>
          <View style={styles.freeFeatureValue}>
            {index === 0 ? <Tick color={MUTED} size={13} /> : <Text style={styles.dash}>–</Text>}
          </View>
          <View style={styles.paidFeatureValue}>
            <Tick size={13} />
          </View>
        </View>
      ))}
    </View>
  );
}

function ComparisonCard({
  maxStyle,
  proStyle,
  tier,
}: {
  maxStyle: object;
  proStyle: object;
  tier: Tier;
}) {
  return (
    <View style={styles.comparisonCard}>
      <BlurView intensity={46} pointerEvents="none" style={styles.comparisonBlur} tint="systemThinMaterialLight" />
      <View pointerEvents="none" style={styles.comparisonWash} />
      <Animated.View pointerEvents={tier === 'pro' ? 'auto' : 'none'} style={[styles.comparisonLayer, proStyle]}>
        <ComparisonContent tier="pro" />
      </Animated.View>
      <Animated.View pointerEvents={tier === 'max' ? 'auto' : 'none'} style={[styles.comparisonLayer, maxStyle]}>
        <ComparisonContent tier="max" />
      </Animated.View>
    </View>
  );
}

type PriceCardProps = {
  children: React.ReactNode;
  label: string;
  left: number;
  onPress: () => void;
  selected: boolean;
  width: number;
};

function PriceCard({ children, label, left, onPress, selected, width }: PriceCardProps) {
  return (
    <ReplicaPressable
      accessibilityLabel={label}
      accessibilityRole="radio"
      accessibilityState={{ checked: selected }}
      onPress={onPress}
      style={[
        styles.priceCard,
        { backgroundColor: selected ? '#F4F2EF' : '#FDFCF9', left, width },
      ]}
    >
      {children}
      {selected ? <SelectedCheck /> : null}
    </ReplicaPressable>
  );
}

function ProPricing({ onSelectPlan, plan }: { onSelectPlan: (plan: ProPlan) => void; plan: ProPlan }) {
  const yearlySelected = plan === 'yearly';
  const monthlySelected = plan === 'monthly';

  return (
    <>
      <PriceCard label="Perplexity Pro yearly plan" left={16} onPress={() => onSelectPlan('yearly')} selected={yearlySelected} width={171}>
        <View style={styles.planLabelRow}>
          <Text style={styles.planLabel}>Yearly</Text>
          <View style={styles.discountBadge}>
            <Text style={styles.discountText}>-17%</Text>
          </View>
        </View>
        <View style={styles.mainPriceRow}>
          <Text style={[styles.mainPrice, !yearlySelected && styles.mainPriceMuted]}>$200</Text>
          <Text style={styles.priceSuffix}> /yr</Text>
        </View>
        <Text style={styles.subPrice}>$17/mo</Text>
      </PriceCard>
      <PriceCard label="Perplexity Pro monthly plan" left={203} onPress={() => onSelectPlan('monthly')} selected={monthlySelected} width={171}>
        <Text style={styles.planLabel}>Monthly</Text>
        <View style={styles.mainPriceRow}>
          <Text style={[styles.mainPrice, !monthlySelected && styles.mainPriceMuted]}>$20</Text>
          <Text style={styles.priceSuffix}> /mo</Text>
        </View>
        <Text style={styles.subPrice}>$240/yr</Text>
      </PriceCard>
    </>
  );
}

function MaxPricing({ onPress }: { onPress: () => void }) {
  return (
    <PriceCard label="Perplexity Max monthly plan" left={16} onPress={onPress} selected width={358}>
      <Text style={styles.planLabel}>Monthly</Text>
      <View style={styles.mainPriceRow}>
        <Text style={styles.mainPrice}>$200</Text>
        <Text style={styles.priceSuffix}> /mo</Text>
      </View>
      <Text style={styles.subPrice}>$2,400/yr</Text>
    </PriceCard>
  );
}

export function PerplexityPaywall({
  initialVariant,
  onActionPress,
  onClosePress,
  onPurchasePress,
  onRestorePress,
  onVariantChange,
  replayKey,
}: PaywallProps) {
  const initialTier = normalizeTier(initialVariant);
  const reducedMotion = useReducedMotion();
  const [tier, setTier] = useState<Tier>(initialTier);
  const [proPlan, setProPlan] = useState<ProPlan>('yearly');
  const tierProgress = useSharedValue(initialTier === 'max' ? 1 : 0);
  const modelStripRef = useRef<ScrollView>(null);

  useEffect(() => {
    const next = normalizeTier(initialVariant);
    const frame = requestAnimationFrame(() => {
      setTier(next);
      setProPlan('yearly');
      tierProgress.set(next === 'max' ? 1 : 0);
    });
    return () => cancelAnimationFrame(frame);
  }, [initialVariant, replayKey, tierProgress]);

  useEffect(() => {
    const frame = requestAnimationFrame(() => {
      modelStripRef.current?.scrollTo({
        animated: !reducedMotion,
        x: tier === 'max' ? 232 : 58,
        y: 0,
      });
    });
    return () => cancelAnimationFrame(frame);
  }, [reducedMotion, replayKey, tier]);

  const selectTier = (next: Tier) => {
    if (next === tier) return;
    setTier(next);
    tierProgress.set(reducedMotion
      ? next === 'max' ? 1 : 0
      : withTiming(next === 'max' ? 1 : 0, {
        duration: 225,
        easing: Easing.out(Easing.cubic),
      }));
    onVariantChange?.(next);
    createActionPress({
      actionId: `perplexity.select-${next}`,
      onActionPress,
    })();
  };

  const selectProPlan = (next: ProPlan) => {
    if (next === proPlan) return;
    setProPlan(next);
    createActionPress({
      actionId: `perplexity.select-${next}`,
      onActionPress,
    })();
  };

  const selectedPillStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: interpolate(tierProgress.value, [0, 1], [0, 57.6]) }],
  }));
  const proStyle = useAnimatedStyle(() => ({ opacity: 1 - tierProgress.value }));
  const maxStyle = useAnimatedStyle(() => ({ opacity: tierProgress.value }));
  const close = createActionPress({
    actionId: 'perplexity.close',
    fallback: onClosePress,
    haptic: 'light',
    onActionPress,
  });
  const restore = createActionPress({
    actionId: 'perplexity.restore',
    fallback: onRestorePress,
    onActionPress,
  });
  const purchase = createActionPress({
    actionId: tier === 'max' ? 'perplexity.get-max' : `perplexity.get-pro-${proPlan}`,
    fallback: onPurchasePress,
    haptic: 'light',
    onActionPress,
  });
  const modelDrag = createActionPress({
    actionId: 'perplexity.scroll-models',
    haptic: false,
    onActionPress,
  });

  return (
    <ReferenceCanvas backgroundColor="#FDFCF9" testID={`paywall-perplexity-${tier}`}>
      <StatusBar style="dark" />
      <Svg height={844} pointerEvents="none" style={StyleSheet.absoluteFill} viewBox="0 0 390 844" width={390}>
        <Defs>
          <RadialGradient cx="50%" cy="17%" id="pageGlow" rx="72%" ry="43%">
            <Stop offset="0" stopColor="#E1ECEB" />
            <Stop offset="0.56" stopColor="#EFF4F1" />
            <Stop offset="1" stopColor="#FDFCF9" />
          </RadialGradient>
        </Defs>
        <Rect fill="#FDFCF9" height={844} width={390} />
        <Rect fill="url(#pageGlow)" height={844} width={390} />
      </Svg>

      <ReplicaPressable accessibilityLabel="Close Perplexity plans" onPress={close} style={styles.closeButton}>
        <BlurView intensity={42} pointerEvents="none" style={styles.controlBlur} tint="systemThinMaterialLight" />
        <CloseIcon />
      </ReplicaPressable>
      <ReplicaPressable accessibilityLabel="Restore Perplexity purchases" onPress={restore} style={styles.restoreButton}>
        <BlurView intensity={42} pointerEvents="none" style={styles.controlBlur} tint="systemThinMaterialLight" />
        <Text style={styles.restoreText}>Restore</Text>
      </ReplicaPressable>

      <Text style={styles.title}>Get the most{`\n`}accurate answers</Text>
      <ModelStrip
        initialOffset={initialTier === 'max' ? 232 : 58}
        onBeginDrag={modelDrag}
        scrollRef={modelStripRef}
      />

      <View style={styles.segmentedControl}>
        <Animated.View pointerEvents="none" style={[styles.selectedPill, selectedPillStyle]} />
        <ReplicaPressable
          accessibilityLabel="Perplexity Pro"
          accessibilityRole="tab"
          accessibilityState={{ selected: tier === 'pro' }}
          onPress={() => selectTier('pro')}
          style={styles.segmentHalf}
        >
          <Text style={[styles.segmentLabel, tier === 'pro' && styles.segmentLabelSelected]}>Pro</Text>
        </ReplicaPressable>
        <ReplicaPressable
          accessibilityLabel="Perplexity Max"
          accessibilityRole="tab"
          accessibilityState={{ selected: tier === 'max' }}
          onPress={() => selectTier('max')}
          style={[styles.segmentHalf, styles.segmentRight]}
        >
          <Text style={[styles.segmentLabel, tier === 'max' && styles.segmentLabelSelected]}>Max</Text>
        </ReplicaPressable>
      </View>

      <ComparisonCard maxStyle={maxStyle} proStyle={proStyle} tier={tier} />

      <Animated.View pointerEvents={tier === 'pro' ? 'auto' : 'none'} style={[styles.pricingLayer, proStyle]}>
        <ProPricing onSelectPlan={selectProPlan} plan={proPlan} />
      </Animated.View>
      <Animated.View pointerEvents={tier === 'max' ? 'auto' : 'none'} style={[styles.pricingLayer, maxStyle]}>
        <MaxPricing
          onPress={createActionPress({
            actionId: 'perplexity.select-max-monthly',
            onActionPress,
          })}
        />
      </Animated.View>

      <ReplicaPressable accessibilityLabel={tier === 'max' ? 'Get Perplexity Max' : 'Get Perplexity Pro'} onPress={purchase} style={styles.cta}>
        <Text style={styles.ctaText}>{tier === 'max' ? 'Get Max' : 'Get Pro'}</Text>
      </ReplicaPressable>
    </ReferenceCanvas>
  );
}

const styles = StyleSheet.create({
  closeButton: {
    alignItems: 'center',
    borderRadius: 22,
    height: 44,
    justifyContent: 'center',
    left: 16,
    overflow: 'hidden',
    position: 'absolute',
    shadowColor: '#18383B',
    shadowOffset: { height: 8, width: 0 },
    shadowOpacity: 0.12,
    shadowRadius: 18,
    top: 47,
    width: 44,
  },
  restoreButton: {
    alignItems: 'center',
    borderRadius: 22,
    height: 44,
    justifyContent: 'center',
    left: 290,
    overflow: 'hidden',
    position: 'absolute',
    shadowColor: '#18383B',
    shadowOffset: { height: 8, width: 0 },
    shadowOpacity: 0.12,
    shadowRadius: 18,
    top: 47,
    width: 84,
  },
  controlBlur: {
    backgroundColor: 'rgba(255,255,255,0.64)',
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  },
  restoreText: {
    color: MUTED,
    fontFamily: 'Inter_600SemiBold',
    fontSize: 15.4,
    lineHeight: 20,
  },
  title: {
    color: INK,
    fontFamily: 'Inter_400Regular',
    fontSize: 25.5,
    left: 54,
    letterSpacing: -0.65,
    lineHeight: 33.3,
    position: 'absolute',
    textAlign: 'center',
    top: 126,
    width: 282,
  },
  modelViewport: {
    height: 34,
    left: 0,
    overflow: 'hidden',
    position: 'absolute',
    top: 211,
    width: 390,
  },
  modelScroll: {
    height: 34,
    width: 390,
  },
  modelTrack: {
    height: 34,
    position: 'relative',
    width: 791,
  },
  modelChip: {
    alignItems: 'center',
    flexDirection: 'row',
    height: 34,
    position: 'absolute',
    top: 0,
  },
  modelIcon: {
    alignItems: 'center',
    height: 24,
    justifyContent: 'center',
    width: 24,
  },
  modelLabel: {
    color: INK,
    fontFamily: 'Inter_600SemiBold',
    fontSize: 12.3,
    letterSpacing: -0.35,
    lineHeight: 16,
    marginLeft: 2.5,
  },
  modelMuted: {
    color: '#CAD4D2',
  },
  kimiIcon: {
    color: INK,
    fontFamily: 'Inter_800ExtraBold',
    fontSize: 19,
    letterSpacing: -2,
    lineHeight: 22,
  },
  modelFadeLeft: {
    height: 34,
    left: 0,
    position: 'absolute',
    top: 0,
    width: 28,
  },
  modelFadeRight: {
    height: 34,
    position: 'absolute',
    right: 0,
    top: 0,
    width: 28,
  },
  segmentedControl: {
    backgroundColor: 'rgba(237,243,241,0.9)',
    borderColor: '#DDDbd7',
    borderRadius: 19,
    borderWidth: 0.8,
    height: 38,
    left: 133.3,
    position: 'absolute',
    top: 260.3,
    width: 123.3,
  },
  selectedPill: {
    backgroundColor: ACCENT,
    borderRadius: 15,
    height: 30,
    left: 4,
    position: 'absolute',
    top: 4,
    width: 57.6,
  },
  segmentHalf: {
    alignItems: 'center',
    height: 38,
    justifyContent: 'center',
    left: 0,
    position: 'absolute',
    top: 0,
    width: 61.65,
  },
  segmentRight: {
    left: 61.65,
  },
  segmentLabel: {
    color: MUTED,
    fontFamily: 'Inter_400Regular',
    fontSize: 16,
    letterSpacing: -0.35,
    lineHeight: 21,
  },
  segmentLabelSelected: {
    color: '#FFFFFF',
  },
  comparisonCard: {
    borderColor: 'rgba(255,255,255,0.72)',
    borderRadius: 32,
    borderWidth: 0.7,
    height: 291.7,
    left: 16,
    overflow: 'hidden',
    position: 'absolute',
    shadowColor: '#243B3B',
    shadowOffset: { height: 12, width: 0 },
    shadowOpacity: 0.11,
    shadowRadius: 24,
    top: 319.7,
    width: 358,
  },
  comparisonBlur: {
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  },
  comparisonWash: {
    backgroundColor: 'rgba(249,249,247,0.79)',
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  },
  comparisonLayer: {
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  },
  comparisonContent: {
    flex: 1,
    position: 'relative',
  },
  comparisonHeader: {
    color: MUTED,
    fontFamily: 'Inter_400Regular',
    fontSize: 14.6,
    lineHeight: 20,
    position: 'absolute',
    top: 28.5,
  },
  featuresHeader: {
    left: 25,
  },
  freeHeader: {
    left: 258,
    textAlign: 'center',
    width: 42,
  },
  paidHeader: {
    color: ACCENT,
    left: 310,
    textAlign: 'center',
    width: 34,
  },
  featureRow: {
    height: 28,
    left: 25,
    position: 'absolute',
    width: 319,
  },
  featureLabel: {
    color: INK,
    fontFamily: 'Inter_400Regular',
    fontSize: 15.3,
    letterSpacing: -0.4,
    lineHeight: 20,
    width: 235,
  },
  freeFeatureValue: {
    alignItems: 'center',
    height: 24,
    justifyContent: 'center',
    left: 238,
    position: 'absolute',
    top: -2,
    width: 30,
  },
  paidFeatureValue: {
    alignItems: 'center',
    height: 24,
    justifyContent: 'center',
    left: 290,
    position: 'absolute',
    top: -2,
    width: 30,
  },
  dash: {
    color: '#999A97',
    fontFamily: 'Inter_400Regular',
    fontSize: 15,
    lineHeight: 20,
  },
  pricingLayer: {
    height: 93.3,
    left: 0,
    position: 'absolute',
    top: 632.7,
    width: 390,
  },
  priceCard: {
    borderColor: '#DDDbd7',
    borderRadius: 15,
    borderWidth: 0.85,
    height: 93.3,
    paddingHorizontal: 16,
    paddingTop: 14,
    position: 'absolute',
    top: 0,
  },
  selectedCheck: {
    alignItems: 'center',
    backgroundColor: ACCENT,
    borderRadius: 10,
    height: 20,
    justifyContent: 'center',
    position: 'absolute',
    right: -6,
    top: -6,
    width: 20,
  },
  planLabelRow: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  planLabel: {
    color: MUTED,
    fontFamily: 'Inter_400Regular',
    fontSize: 13.1,
    letterSpacing: -0.25,
    lineHeight: 17,
  },
  discountBadge: {
    alignItems: 'center',
    backgroundColor: '#CADBDB',
    borderRadius: 6,
    height: 20,
    justifyContent: 'center',
    marginLeft: 6,
    marginTop: -2,
    width: 36,
  },
  discountText: {
    color: ACCENT,
    fontFamily: 'Inter_600SemiBold',
    fontSize: 10.5,
    lineHeight: 14,
  },
  mainPriceRow: {
    alignItems: 'baseline',
    flexDirection: 'row',
    marginTop: 8,
  },
  mainPrice: {
    color: INK,
    fontFamily: 'Inter_500Medium',
    fontSize: 23.5,
    letterSpacing: -0.8,
    lineHeight: 28,
  },
  mainPriceMuted: {
    color: MUTED,
  },
  priceSuffix: {
    color: MUTED,
    fontFamily: 'Inter_400Regular',
    fontSize: 13.1,
    lineHeight: 17,
  },
  subPrice: {
    color: MUTED,
    fontFamily: 'Inter_400Regular',
    fontSize: 13.2,
    lineHeight: 17,
    marginTop: 1,
  },
  cta: {
    alignItems: 'center',
    backgroundColor: ACCENT,
    borderRadius: 26,
    height: 52,
    justifyContent: 'center',
    left: 16,
    position: 'absolute',
    top: 742,
    width: 358,
  },
  ctaText: {
    color: '#FFFFFF',
    fontFamily: 'Inter_600SemiBold',
    fontSize: 15.5,
    lineHeight: 20,
  },
});