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

const MACROS = [
  { name: 'Protein', g: 92, goal: 130, c: '#F43F5E' },
  { name: 'Carbs', g: 184, goal: 230, c: '#FBBF24' },
  { name: 'Fat', g: 48, goal: 70, c: '#38BDF8' },
];
const MEALS = [
  { name: 'Breakfast', kcal: 420, items: 'Oats, berries, almonds', icon: '🥣' },
  { name: 'Lunch', kcal: 640, items: 'Chicken bowl, avocado', icon: '🥗' },
  { name: 'Snack', kcal: 180, items: 'Greek yogurt', icon: '🍓' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>TODAY</Text>
        <View style={s.top}>
          <View style={s.ring}>
            <Text style={s.ringN}>1,240</Text>
            <Text style={s.ringL}>of 2,000 kcal</Text>
          </View>
          <View style={{ flex: 1, marginLeft: 22 }}>
            {MACROS.map((m) => (
              <View key={m.name} style={s.macro}>
                <Text style={s.macroName}>{m.name}</Text>
                <View style={s.macroTrack}><View style={[s.macroFill, { width: (m.g / m.goal * 100) + '%', backgroundColor: m.c }]} /></View>
                <Text style={s.macroG}>{m.g}g</Text>
              </View>
            ))}
          </View>
        </View>
        <Text style={s.section}>Meals</Text>
        {MEALS.map((m, i) => (
          <View key={i} style={s.meal}>
            <Text style={s.mealIcon}>{m.icon}</Text>
            <View style={{ flex: 1 }}>
              <Text style={s.mealName}>{m.name}</Text>
              <Text style={s.mealItems}>{m.items}</Text>
            </View>
            <Text style={s.mealKcal}>{m.kcal}</Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0A0C07' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#84CC16', fontSize: 12, fontWeight: '700', letterSpacing: 2, marginBottom: 18 },
  top: { flexDirection: 'row', alignItems: 'center' },
  ring: { width: 120, height: 120, borderRadius: 60, borderWidth: 9, borderColor: '#84CC16', alignItems: 'center', justifyContent: 'center' },
  ringN: { color: '#fff', fontSize: 26, fontWeight: '800' },
  ringL: { color: '#8AA15C', fontSize: 11, marginTop: 2 },
  macro: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
  macroName: { color: '#C5D6A8', fontSize: 13, width: 58, fontWeight: '600' },
  macroTrack: { flex: 1, height: 8, borderRadius: 4, backgroundColor: '#18200E', overflow: 'hidden' },
  macroFill: { height: '100%', borderRadius: 4 },
  macroG: { color: '#fff', fontSize: 13, fontWeight: '700', width: 40, textAlign: 'right' },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginTop: 30, marginBottom: 12 },
  meal: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#0F140A', borderRadius: 16, padding: 16, marginBottom: 12 },
  mealIcon: { fontSize: 26, marginRight: 14 },
  mealName: { color: '#EDEDF2', fontSize: 16, fontWeight: '700' },
  mealItems: { color: '#8AA15C', fontSize: 13, marginTop: 3 },
  mealKcal: { color: '#84CC16', fontSize: 16, fontWeight: '800' },
});