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

const GOALS = [
  { name: 'Japan trip', icon: '🗾', saved: 2400, target: 4000, c: '#FF6B9D' },
  { name: 'New MacBook', icon: '💻', saved: 1650, target: 2200, c: '#7C5CFF' },
  { name: 'Emergency fund', icon: '🛟', saved: 5200, target: 6000, c: '#22C55E' },
  { name: 'Concert tickets', icon: '🎟️', saved: 120, target: 300, c: '#FFB020' },
];

export default function App() {
  const total = GOALS.reduce((a, g) => a + g.saved, 0);
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>SAVINGS</Text>
        <Text style={s.h1}>{'$' + total.toLocaleString()}</Text>
        <Text style={s.sub}>across {GOALS.length} pots</Text>
        {GOALS.map((g) => {
          const pct = Math.min(100, Math.round((g.saved / g.target) * 100));
          return (
            <View key={g.name} style={s.card}>
              <View style={s.cardTop}>
                <View style={[s.icon, { backgroundColor: g.c + '22' }]}><Text style={{ fontSize: 22 }}>{g.icon}</Text></View>
                <View style={{ flex: 1, marginLeft: 14 }}>
                  <Text style={s.name}>{g.name}</Text>
                  <Text style={s.amt}>{'$' + g.saved.toLocaleString()} of {'$' + g.target.toLocaleString()}</Text>
                </View>
                <Text style={[s.pct, { color: g.c }]}>{pct + '%'}</Text>
              </View>
              <View style={s.track}><View style={[s.fill, { width: pct + '%', backgroundColor: g.c }]} /></View>
            </View>
          );
        })}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0D0B10' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#FF6B9D', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 44, fontWeight: '800', marginTop: 6, letterSpacing: -1 },
  sub: { color: '#8A8A96', fontSize: 15, marginTop: 2, marginBottom: 20 },
  card: { backgroundColor: '#16131B', borderRadius: 20, padding: 18, marginBottom: 14 },
  cardTop: { flexDirection: 'row', alignItems: 'center', marginBottom: 14 },
  icon: { width: 48, height: 48, borderRadius: 15, alignItems: 'center', justifyContent: 'center' },
  name: { color: '#EDEDF2', fontSize: 16, fontWeight: '700' },
  amt: { color: '#8A8A96', fontSize: 13, marginTop: 3 },
  pct: { fontSize: 18, fontWeight: '800' },
  track: { height: 10, borderRadius: 5, backgroundColor: '#221E2A', overflow: 'hidden' },
  fill: { height: '100%', borderRadius: 5 },
});