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

const LESSONS = [
  { name: 'Greetings', icon: '👋', state: 'done' },
  { name: 'Café orders', icon: '☕', state: 'done' },
  { name: 'Directions', icon: '🧭', state: 'active' },
  { name: 'Numbers', icon: '🔢', state: 'locked' },
  { name: 'Past tense', icon: '⏳', state: 'locked' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <View style={s.head}>
        <View style={s.pill}><Text style={s.pillText}>🔥 24</Text></View>
        <View style={s.pill}><Text style={s.pillText}>💎 1,250</Text></View>
        <View style={s.pill}><Text style={s.pillText}>❤️ 5</Text></View>
      </View>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>SPANISH · UNIT 2</Text>
        <Text style={s.h1}>Getting around</Text>
        {LESSONS.map((l, i) => {
          const done = l.state === 'done';
          const active = l.state === 'active';
          return (
            <View key={i} style={[s.node, i % 2 === 1 && { marginLeft: 60 }]}>
              <View style={[s.circle, done && s.circleDone, active && s.circleActive]}>
                <Text style={s.circleIcon}>{l.state === 'locked' ? '🔒' : l.icon}</Text>
              </View>
              <Text style={[s.nodeLabel, active && { color: '#22C55E' }]}>{l.name}</Text>
            </View>
          );
        })}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#081209' },
  head: { flexDirection: 'row', justifyContent: 'space-around', paddingTop: 56, paddingBottom: 16 },
  pill: { backgroundColor: '#0E2012', borderRadius: 18, paddingVertical: 8, paddingHorizontal: 18, borderWidth: 1, borderColor: '#1A3A20' },
  pillText: { color: '#fff', fontSize: 15, fontWeight: '700' },
  scroll: { padding: 22, paddingTop: 10, alignItems: 'flex-start' },
  kicker: { color: '#22C55E', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 28, fontWeight: '800', marginTop: 4, marginBottom: 24 },
  node: { alignItems: 'center', marginBottom: 22 },
  circle: { width: 80, height: 80, borderRadius: 40, backgroundColor: '#15291A', alignItems: 'center', justifyContent: 'center', borderWidth: 3, borderColor: '#1E3A26' },
  circleDone: { backgroundColor: '#16361F', borderColor: '#22C55E' },
  circleActive: { backgroundColor: '#22C55E', borderColor: '#4ADE80', transform: [{ scale: 1.08 }] },
  circleIcon: { fontSize: 34 },
  nodeLabel: { color: '#9CC4A6', fontSize: 14, fontWeight: '700', marginTop: 10 },
});