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

const QUICK = [
  { label: 'Feed', icon: '🍼', c: '#86B6F6' },
  { label: 'Sleep', icon: '😴', c: '#B6A6F6' },
  { label: 'Diaper', icon: '🧷', c: '#F6C886' },
  { label: 'Note', icon: '📝', c: '#86E0C0' },
];
const LOG = [
  { time: '14:20', label: 'Feed · 120 ml', icon: '🍼' },
  { time: '12:45', label: 'Nap · 1h 10m', icon: '😴' },
  { time: '11:30', label: 'Diaper change', icon: '🧷' },
  { time: '09:15', label: 'Feed · 100 ml', icon: '🍼' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>DAY 42</Text>
        <Text style={s.h1}>Hi, baby Mira</Text>
        <View style={s.last}>
          <Text style={s.lastLabel}>Last feed</Text>
          <Text style={s.lastValue}>2h 14m ago</Text>
          <Text style={s.lastSub}>Next around 16:30</Text>
        </View>
        <View style={s.quick}>
          {QUICK.map((q) => (
            <View key={q.label} style={s.qcol}>
              <View style={[s.qbtn, { backgroundColor: q.c + '22', borderColor: q.c + '44' }]}><Text style={{ fontSize: 26 }}>{q.icon}</Text></View>
              <Text style={s.qlabel}>{q.label}</Text>
            </View>
          ))}
        </View>
        <Text style={s.section}>Today</Text>
        {LOG.map((l, i) => (
          <View key={i} style={s.row}>
            <Text style={s.rowTime}>{l.time}</Text>
            <Text style={s.rowIcon}>{l.icon}</Text>
            <Text style={s.rowLabel}>{l.label}</Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0A0E14' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#86B6F6', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 30, fontWeight: '800', marginTop: 4 },
  last: { backgroundColor: '#0F1622', borderRadius: 20, padding: 22, marginTop: 20, marginBottom: 22 },
  lastLabel: { color: '#86B6F6', fontSize: 13, fontWeight: '600' },
  lastValue: { color: '#fff', fontSize: 34, fontWeight: '800', marginTop: 6 },
  lastSub: { color: '#7E8DA6', fontSize: 14, marginTop: 4 },
  quick: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 26 },
  qcol: { alignItems: 'center' },
  qbtn: { width: 64, height: 64, borderRadius: 20, borderWidth: 1, alignItems: 'center', justifyContent: 'center' },
  qlabel: { color: '#C3CCDC', fontSize: 13, marginTop: 8, fontWeight: '600' },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginBottom: 12 },
  row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#0E1520', borderRadius: 14, padding: 14, marginBottom: 10 },
  rowTime: { color: '#7E8DA6', fontSize: 14, fontWeight: '700', width: 54 },
  rowIcon: { fontSize: 20, marginHorizontal: 12 },
  rowLabel: { color: '#DCE3EE', fontSize: 15, fontWeight: '500' },
});