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

const BOOKS = [
  { title: 'The Overstory', author: 'R. Powers', pct: 64, c: '#3E6B4F' },
  { title: 'Project Hail Mary', author: 'A. Weir', pct: 28, c: '#2D4A7A' },
  { title: 'Klara and the Sun', author: 'K. Ishiguro', pct: 91, c: '#7A4A2D' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>2026 READING</Text>
        <Text style={s.h1}>Currently reading</Text>
        <View style={s.goal}>
          <Text style={s.goalN}>18 / 30</Text>
          <Text style={s.goalL}>books this year</Text>
          <View style={s.track}><View style={[s.fill, { width: '60%' }]} /></View>
        </View>
        {BOOKS.map((b) => (
          <View key={b.title} style={s.row}>
            <View style={[s.cover, { backgroundColor: b.c }]}><Text style={s.coverEmoji}>📖</Text></View>
            <View style={{ flex: 1, marginLeft: 16 }}>
              <Text style={s.title}>{b.title}</Text>
              <Text style={s.author}>{b.author}</Text>
              <View style={s.miniTrack}><View style={[s.miniFill, { width: b.pct + '%' }]} /></View>
              <Text style={s.pct}>{b.pct}%</Text>
            </View>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0F0D08' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#E8B04B', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 30, fontWeight: '800', marginTop: 4, marginBottom: 22 },
  goal: { backgroundColor: '#181308', borderRadius: 20, padding: 20, marginBottom: 24 },
  goalN: { color: '#fff', fontSize: 30, fontWeight: '800' },
  goalL: { color: '#A8915A', fontSize: 14, marginTop: 2, marginBottom: 14 },
  track: { height: 10, borderRadius: 5, backgroundColor: '#2A2110', overflow: 'hidden' },
  fill: { height: '100%', backgroundColor: '#E8B04B', borderRadius: 5 },
  row: { flexDirection: 'row', marginBottom: 20 },
  cover: { width: 64, height: 92, borderRadius: 10, alignItems: 'center', justifyContent: 'center' },
  coverEmoji: { fontSize: 30 },
  title: { color: '#F2E9D6', fontSize: 17, fontWeight: '700' },
  author: { color: '#A8915A', fontSize: 14, marginTop: 3, marginBottom: 10 },
  miniTrack: { height: 6, borderRadius: 3, backgroundColor: '#2A2110', overflow: 'hidden' },
  miniFill: { height: '100%', backgroundColor: '#E8B04B', borderRadius: 3 },
  pct: { color: '#A8915A', fontSize: 12, marginTop: 6 },
});