HomeScreen.tsx

import React from 'react';
import {
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import DeviceInfo from 'react-native-device-info';
import {SafeAreaView} from 'react-native-safe-area-context';

import {Destination, destinations} from './destinations';

type Props = {
  onOpen: (destination: Destination) => void;
};

function PlatformWarning(): React.JSX.Element | null {
  const isAndroid = Platform.OS === 'android';
  const isIOSSimulator = Platform.OS === 'ios' && DeviceInfo.isEmulatorSync();

  if (!isAndroid && !isIOSSimulator) {
    return null;
  }

  const title = isAndroid ? 'Android warning' : 'iOS Simulator limitation';
  const message = isAndroid
    ? 'Opening an ad link that redirects to Google Play can fail or crash on an Android emulator without Play Store support. Use a Play Store-enabled emulator or a physical Android device for redirect tests.'
    : 'App Store links do not open in the iOS Simulator. Use a physical iPhone or iPad to test store redirects; the Gamezop portal itself can still be opened.';

  return (
    <View
      accessibilityRole="alert"
      style={[styles.warning, isAndroid ? styles.androidWarning : null]}>
      <Text style={styles.warningIcon}>⚠</Text>
      <View style={styles.warningContent}>
        <Text style={styles.warningTitle}>{title}</Text>
        <Text style={styles.warningMessage}>{message}</Text>
      </View>
    </View>
  );
}

function DestinationCard({
  destination,
  onPress,
}: {
  destination: Destination;
  onPress: () => void;
}): React.JSX.Element {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={`${destination.title}. ${destination.description}`}
      accessibilityHint={`Opens ${destination.url}`}
      onPress={onPress}
      style={({pressed}) => [styles.card, pressed && styles.cardPressed]}>
      <View
        style={[
          styles.thumbnail,
          {backgroundColor: `${destination.color}1F`},
        ]}>
        <Text style={[styles.thumbnailText, {color: destination.color}]}>
          {destination.thumbnail}
        </Text>
      </View>
      <View style={styles.cardBody}>
        <Text style={styles.cardTitle}>{destination.title}</Text>
        <Text style={styles.cardDescription}>{destination.description}</Text>
        <View style={styles.cardAction}>
          <Text style={[styles.actionText, {color: destination.color}]}>
            {destination.callToAction}
          </Text>
          <Text style={[styles.actionArrow, {color: destination.color}]}>→</Text>
        </View>
      </View>
    </Pressable>
  );
}

/** Safe-area-aware launcher mirroring the Flutter sample. */
export function HomeScreen({onOpen}: Props): React.JSX.Element {
  return (
    <SafeAreaView style={styles.screen}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>GMA WebView Example</Text>
      </View>
      <ScrollView
        contentContainerStyle={styles.content}
        showsVerticalScrollIndicator={false}>
        <PlatformWarning />
        {destinations.map(destination => (
          <DestinationCard
            key={destination.key}
            destination={destination}
            onPress={() => onOpen(destination)}
          />
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  screen: {flex: 1, backgroundColor: '#FFFFFF'},
  header: {
    minHeight: 54,
    justifyContent: 'center',
    paddingHorizontal: 20,
    borderBottomColor: '#E8E8E8',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  headerTitle: {fontSize: 20, fontWeight: '700', color: '#111111'},
  content: {padding: 20, gap: 18},
  warning: {
    flexDirection: 'row',
    padding: 16,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: '#E9A11B55',
    backgroundColor: '#E9A11B18',
  },
  androidWarning: {
    borderColor: '#D9302555',
    backgroundColor: '#D9302518',
  },
  warningIcon: {fontSize: 22, marginRight: 12, color: '#BA7517'},
  warningContent: {flex: 1},
  warningTitle: {
    marginBottom: 5,
    color: '#181818',
    fontSize: 14,
    fontWeight: '700',
  },
  warningMessage: {color: '#626262', fontSize: 13, lineHeight: 18},
  card: {
    overflow: 'hidden',
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#00000014',
    backgroundColor: '#FFFFFF',
    shadowColor: '#000000',
    shadowOpacity: 0.15,
    shadowRadius: 6,
    shadowOffset: {width: 0, height: 3},
    elevation: 3,
  },
  cardPressed: {opacity: 0.78},
  thumbnail: {height: 118, alignItems: 'center', justifyContent: 'center'},
  thumbnailText: {fontSize: 52, fontWeight: '700'},
  cardBody: {padding: 18},
  cardTitle: {fontSize: 21, fontWeight: '700', color: '#151515'},
  cardDescription: {
    marginTop: 8,
    color: '#686868',
    fontSize: 15,
    lineHeight: 21,
  },
  cardAction: {
    marginTop: 14,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  actionText: {fontSize: 14, fontWeight: '700'},
  actionArrow: {fontSize: 25, fontWeight: '500'},
});