import React from 'react';
import { View, Text, ScrollView, StyleSheet, SafeAreaView } from 'react-native';

const ST = [
  { sym: 'AAPL', name: 'Apple', price: 214.32, chg: 1.2, bars: [40, 44, 42, 48, 52, 50, 58] },
  { sym: 'NVDA', name: 'NVIDIA', price: 1204.5, chg: 3.8, bars: [30, 36, 34, 42, 48, 56, 64] },
  { sym: 'TSLA', name: 'Tesla', price: 178.9, chg: -2.1, bars: [60, 56, 58, 50, 46, 44, 40] },
  { sym: 'MSFT', name: 'Microsoft', price: 441.1, chg: 0.6, bars: [44, 46, 45, 48, 47, 50, 52] },
  { sym: 'AMZN', name: 'Amazon', price: 186.4, chg: 1.9, bars: [38, 40, 44, 42, 48, 52, 55] },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>WATCHLIST</Text>
        <Text style={s.h1}>Markets</Text>
        <Text style={s.sub}>Open · updated 9:41 AM</Text>
        {ST.map((x) => {
          const up = x.chg >= 0;
          const col = up ? '#4ADE80' : '#FF5C5C';
          return (
            <View key={x.sym} style={s.row}>
              <View style={{ width: 78 }}>
                <Text style={s.sym}>{x.sym}</Text>
                <Text style={s.name}>{x.name}</Text>
              </View>
              <View style={s.chart}>
                {x.bars.map((b, i) => (<View key={i} style={[s.bar, { height: b * 0.7, backgroundColor: col }]} />))}
              </View>
              <View style={{ alignItems: 'flex-end', width: 96 }}>
                <Text style={s.price}>{'$' + x.price}</Text>
                <Text style={[s.chg, { color: col }]}>{(up ? '+' : '') + x.chg + '%'}</Text>
              </View>
            </View>
          );
        })}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#080A08' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#4ADE80', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 32, fontWeight: '800', marginTop: 4 },
  sub: { color: '#7A7A82', fontSize: 14, marginTop: 4, marginBottom: 18 },
  row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#10130F', borderRadius: 16, padding: 14, marginBottom: 12 },
  sym: { color: '#EDEDF2', fontSize: 16, fontWeight: '800' },
  name: { color: '#7A7A82', fontSize: 12, marginTop: 2 },
  chart: { flex: 1, flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'center', gap: 4, height: 44 },
  bar: { width: 6, borderRadius: 2 },
  price: { color: '#EDEDF2', fontSize: 16, fontWeight: '700' },
  chg: { fontSize: 14, fontWeight: '600', marginTop: 2 },
});