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

const TILES = [
  { label: 'Mood', value: 'Calm', icon: '😌', c: '#5EC9A8' },
  { label: 'Water', value: '6 / 8', icon: '💧', c: '#4FB0E0' },
  { label: 'Sleep', value: '7h 40m', icon: '🌙', c: '#7C8BFF' },
  { label: 'Breath', value: '2 sessions', icon: '🫧', c: '#9B8CFF' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>SUNDAY MORNING</Text>
        <Text style={s.h1}>Take it slow</Text>
        <View style={s.intention}>
          <Text style={s.intentionLabel}>TODAY'S INTENTION</Text>
          <Text style={s.intentionText}>Be present and kind to yourself.</Text>
        </View>
        <View style={s.grid}>
          {TILES.map((t) => (
            <View key={t.label} style={[s.tile, { borderColor: t.c + '40' }]}>
              <Text style={s.tileIcon}>{t.icon}</Text>
              <Text style={[s.tileValue, { color: t.c }]}>{t.value}</Text>
              <Text style={s.tileLabel}>{t.label}</Text>
            </View>
          ))}
        </View>
        <View style={s.cta}>
          <Text style={s.ctaIcon}>🧘</Text>
          <View style={{ flex: 1 }}>
            <Text style={s.ctaTitle}>5-minute reset</Text>
            <Text style={s.ctaSub}>A short guided breathing break</Text>
          </View>
          <Text style={s.ctaGo}>▶</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#08130F' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#5EC9A8', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 32, fontWeight: '800', marginTop: 4 },
  intention: { backgroundColor: '#0E2019', borderRadius: 20, padding: 22, marginTop: 22, borderWidth: 1, borderColor: '#163328' },
  intentionLabel: { color: '#5EC9A8', fontSize: 11, fontWeight: '700', letterSpacing: 1.5 },
  intentionText: { color: '#E6F4EF', fontSize: 20, fontWeight: '600', marginTop: 10, lineHeight: 27 },
  grid: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', marginTop: 22 },
  tile: { width: '48%', backgroundColor: '#0D1B16', borderRadius: 18, borderWidth: 1, padding: 18, marginBottom: 14 },
  tileIcon: { fontSize: 26 },
  tileValue: { fontSize: 22, fontWeight: '800', marginTop: 12 },
  tileLabel: { color: '#7FA89A', fontSize: 13, marginTop: 3 },
  cta: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#0E2019', borderRadius: 18, padding: 18, marginTop: 10 },
  ctaIcon: { fontSize: 30, marginRight: 16 },
  ctaTitle: { color: '#fff', fontSize: 17, fontWeight: '700' },
  ctaSub: { color: '#7FA89A', fontSize: 14, marginTop: 3 },
  ctaGo: { color: '#5EC9A8', fontSize: 22 },
});