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

const MENU = [
  { name: 'Flat white', price: 4.2, icon: '☕' },
  { name: 'Cold brew', price: 4.8, icon: '🧊' },
  { name: 'Cortado', price: 3.9, icon: '☕' },
  { name: 'Matcha latte', price: 5.1, icon: '🍵' },
];

export default function App() {
  const stamps = 7;
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>GOOD MORNING</Text>
        <Text style={s.h1}>Foundry Coffee</Text>
        <View style={s.card}>
          <Text style={s.cardLabel}>Loyalty card</Text>
          <Text style={s.cardTitle}>{10 - stamps} more for a free cup</Text>
          <View style={s.stamps}>
            {Array.from({ length: 10 }).map((_, i) => (
              <View key={i} style={[s.stamp, i < stamps && s.stampOn]}><Text style={s.stampIcon}>{i < stamps ? '☕' : ''}</Text></View>
            ))}
          </View>
        </View>
        <Text style={s.section}>Order again</Text>
        {MENU.map((m) => (
          <View key={m.name} style={s.row}>
            <View style={s.rowIcon}><Text style={{ fontSize: 22 }}>{m.icon}</Text></View>
            <Text style={s.rowName}>{m.name}</Text>
            <Text style={s.rowPrice}>{'$' + m.price.toFixed(2)}</Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0F0B07' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#C08457', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 30, fontWeight: '800', marginTop: 4 },
  card: { backgroundColor: '#1A130C', borderRadius: 22, padding: 22, marginTop: 22, borderWidth: 1, borderColor: '#2E2114' },
  cardLabel: { color: '#C08457', fontSize: 13, fontWeight: '600' },
  cardTitle: { color: '#fff', fontSize: 20, fontWeight: '700', marginTop: 6, marginBottom: 18 },
  stamps: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 },
  stamp: { width: 50, height: 50, borderRadius: 25, borderWidth: 2, borderColor: '#3A2A1A', alignItems: 'center', justifyContent: 'center' },
  stampOn: { backgroundColor: '#C08457', borderColor: '#C08457' },
  stampIcon: { fontSize: 22 },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginTop: 30, marginBottom: 12 },
  row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#16100A', borderRadius: 16, padding: 14, marginBottom: 12 },
  rowIcon: { width: 46, height: 46, borderRadius: 14, backgroundColor: '#1F160D', alignItems: 'center', justifyContent: 'center', marginRight: 14 },
  rowName: { color: '#EDE3D8', fontSize: 16, fontWeight: '600', flex: 1 },
  rowPrice: { color: '#C08457', fontSize: 16, fontWeight: '700' },
});