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

const RINGS = [
  { label: 'Move', val: '480', goal: '/ 600 kcal', c: '#F43F5E', pct: 80 },
  { label: 'Steps', val: '8.2k', goal: '/ 10k', c: '#A3E635', pct: 82 },
  { label: 'Stand', val: '10', goal: '/ 12 hr', c: '#38BDF8', pct: 83 },
];
const WEEK = [6.1, 9.4, 7.2, 11.0, 8.2, 5.5, 8.2];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>TODAY</Text>
        <Text style={s.h1}>Activity</Text>
        <View style={s.rings}>
          {RINGS.map((r) => (
            <View key={r.label} style={s.ringCol}>
              <View style={[s.ring, { borderColor: r.c }]}>
                <Text style={s.ringVal}>{r.val}</Text>
              </View>
              <Text style={s.ringLabel}>{r.label}</Text>
              <Text style={s.ringGoal}>{r.goal}</Text>
            </View>
          ))}
        </View>
        <Text style={s.section}>Steps this week</Text>
        <View style={s.chart}>
          {WEEK.map((v, i) => (
            <View key={i} style={s.barCol}>
              <View style={[s.bar, { height: v * 13 }]} />
              <Text style={s.barLabel}>{'SMTWTFS'[i]}</Text>
            </View>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0A0C06' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#A3E635', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 32, fontWeight: '800', marginTop: 4, marginBottom: 24 },
  rings: { flexDirection: 'row', justifyContent: 'space-around' },
  ringCol: { alignItems: 'center' },
  ring: { width: 92, height: 92, borderRadius: 46, borderWidth: 8, alignItems: 'center', justifyContent: 'center' },
  ringVal: { color: '#fff', fontSize: 20, fontWeight: '800' },
  ringLabel: { color: '#EDEDF2', fontSize: 14, fontWeight: '700', marginTop: 12 },
  ringGoal: { color: '#7A8A66', fontSize: 12, marginTop: 2 },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginTop: 34, marginBottom: 16 },
  chart: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end', height: 170, backgroundColor: '#0F1209', borderRadius: 18, padding: 18 },
  barCol: { alignItems: 'center', justifyContent: 'flex-end', flex: 1 },
  bar: { width: 22, borderRadius: 6, backgroundColor: '#A3E635' },
  barLabel: { color: '#7A8A66', fontSize: 12, marginTop: 8 },
});