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

const SPLITS = [
  { km: 1, pace: '5:12' }, { km: 2, pace: '5:04' }, { km: 3, pace: '4:58' }, { km: 4, pace: '5:08' }, { km: 5, pace: '4:52' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>MORNING RUN · LIVE</Text>
        <Text style={s.distance}>5.24</Text>
        <Text style={s.unit}>kilometres</Text>
        <View style={s.stats}>
          <View style={s.stat}><Text style={s.statN}>5:03</Text><Text style={s.statL}>avg pace</Text></View>
          <View style={s.stat}><Text style={s.statN}>26:32</Text><Text style={s.statL}>time</Text></View>
          <View style={s.stat}><Text style={s.statN}>312</Text><Text style={s.statL}>kcal</Text></View>
        </View>
        <Text style={s.section}>Splits</Text>
        {SPLITS.map((sp) => (
          <View key={sp.km} style={s.row}>
            <Text style={s.km}>KM {sp.km}</Text>
            <View style={s.barTrack}><View style={[s.barFill, { width: (320 - parseFloat(sp.pace.replace(':', '.')) * 40) + '%' }]} /></View>
            <Text style={s.pace}>{sp.pace}</Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0F0A06' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#FB923C', fontSize: 12, fontWeight: '700', letterSpacing: 2, textAlign: 'center' },
  distance: { color: '#fff', fontSize: 92, fontWeight: '200', textAlign: 'center', marginTop: 6 },
  unit: { color: '#A8825C', fontSize: 16, textAlign: 'center', marginTop: -6 },
  stats: { flexDirection: 'row', justifyContent: 'space-around', backgroundColor: '#1A1109', borderRadius: 18, padding: 20, marginVertical: 26 },
  stat: { alignItems: 'center' },
  statN: { color: '#fff', fontSize: 22, fontWeight: '800' },
  statL: { color: '#A8825C', fontSize: 12, marginTop: 4 },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginBottom: 14 },
  row: { flexDirection: 'row', alignItems: 'center', marginBottom: 14 },
  km: { color: '#C9A988', fontSize: 14, fontWeight: '700', width: 54 },
  barTrack: { flex: 1, height: 8, borderRadius: 4, backgroundColor: '#221610', marginHorizontal: 12, overflow: 'hidden' },
  barFill: { height: '100%', backgroundColor: '#FB923C', borderRadius: 4 },
  pace: { color: '#fff', fontSize: 15, fontWeight: '700', width: 48, textAlign: 'right' },
});