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

const GOALS = [
  { name: 'Run a half marathon', icon: '🏃', pct: 72, milestone: '15km longest run' },
  { name: 'Ship the app', icon: '🚀', pct: 90, milestone: 'Beta with 50 users' },
  { name: 'Read 12 books', icon: '📚', pct: 50, milestone: '6 of 12 read' },
  { name: 'Learn Spanish', icon: '🇪🇸', pct: 34, milestone: '40 day streak' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>Q2 GOALS</Text>
        <Text style={s.h1}>Keep climbing</Text>
        <View style={s.summary}>
          <Text style={s.sumN}>62%</Text>
          <Text style={s.sumL}>average progress across 4 goals</Text>
        </View>
        {GOALS.map((g) => (
          <View key={g.name} style={s.card}>
            <View style={s.cardTop}>
              <Text style={s.icon}>{g.icon}</Text>
              <Text style={s.name}>{g.name}</Text>
              <Text style={s.pct}>{g.pct}%</Text>
            </View>
            <View style={s.track}><View style={[s.fill, { width: g.pct + '%' }]} /></View>
            <Text style={s.milestone}>◷ {g.milestone}</Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#06120F' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#14B8A6', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 32, fontWeight: '800', marginTop: 4 },
  summary: { backgroundColor: '#0A2019', borderRadius: 20, padding: 22, marginVertical: 22, alignItems: 'center' },
  sumN: { color: '#2DD4BF', fontSize: 44, fontWeight: '800' },
  sumL: { color: '#6FB5A8', fontSize: 14, marginTop: 4 },
  card: { backgroundColor: '#0B1A16', borderRadius: 18, padding: 18, marginBottom: 14 },
  cardTop: { flexDirection: 'row', alignItems: 'center', marginBottom: 14 },
  icon: { fontSize: 22, marginRight: 12 },
  name: { color: '#E6F2EF', fontSize: 16, fontWeight: '700', flex: 1 },
  pct: { color: '#2DD4BF', fontSize: 18, fontWeight: '800' },
  track: { height: 10, borderRadius: 5, backgroundColor: '#11271F', overflow: 'hidden' },
  fill: { height: '100%', backgroundColor: '#14B8A6', borderRadius: 5 },
  milestone: { color: '#6FB5A8', fontSize: 13, marginTop: 12 },
});