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

const NOTES = [
  { title: 'Trip packing', body: 'Passport, charger, sunscreen, the good headphones', c: '#FBBF24', pin: true },
  { title: 'Book ideas', body: 'A novel told entirely through margin notes', c: '#F472B6', pin: true },
  { title: 'Groceries', body: 'Oat milk, eggs, basil, lemons, dark chocolate', c: '#34D399' },
  { title: 'Standup', body: 'Shipped auth, blocked on design review', c: '#60A5FA' },
  { title: 'Quote', body: 'Make it work, make it right, make it fast', c: '#A78BFA' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.h1}>Notes</Text>
        <Text style={s.sub}>5 notes · 2 pinned</Text>
        <View style={s.grid}>
          {NOTES.map((n, i) => (
            <View key={i} style={[s.note, { backgroundColor: n.c + '1F', borderColor: n.c + '55' }]}>
              {n.pin && <Text style={s.pin}>📌</Text>}
              <Text style={[s.noteTitle, { color: n.c }]}>{n.title}</Text>
              <Text style={s.noteBody}>{n.body}</Text>
            </View>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0C0C0E' },
  scroll: { padding: 22, paddingTop: 60 },
  h1: { color: '#fff', fontSize: 34, fontWeight: '800' },
  sub: { color: '#8A8A96', fontSize: 15, marginTop: 4, marginBottom: 22 },
  grid: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' },
  note: { width: '48%', borderRadius: 18, borderWidth: 1, padding: 16, marginBottom: 16, minHeight: 120 },
  pin: { position: 'absolute', top: 12, right: 12, fontSize: 14 },
  noteTitle: { fontSize: 16, fontWeight: '800', marginBottom: 8 },
  noteBody: { color: '#C8C8D0', fontSize: 14, lineHeight: 20 },
});