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

const LOOKS = [
  { name: 'Linen set', tag: 'Summer', emoji: '👚', c: '#C9B89A' },
  { name: 'Tailored', tag: 'Work', emoji: '🧥', c: '#8A8A92' },
  { name: 'Knit layers', tag: 'Autumn', emoji: '🧶', c: '#B07B54' },
  { name: 'Monochrome', tag: 'Evening', emoji: '🖤', c: '#3A3A40' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>EDIT · SS26</Text>
        <Text style={s.h1}>The Lookbook</Text>
        <View style={s.grid}>
          {LOOKS.map((l) => (
            <View key={l.name} style={s.tile}>
              <View style={[s.img, { backgroundColor: l.c }]}><Text style={s.emoji}>{l.emoji}</Text></View>
              <Text style={s.tileTag}>{l.tag}</Text>
              <Text style={s.tileName}>{l.name}</Text>
            </View>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0C0B0A' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#D9C3A5', fontSize: 12, fontWeight: '700', letterSpacing: 3 },
  h1: { color: '#fff', fontSize: 32, fontWeight: '300', marginTop: 6, marginBottom: 22, letterSpacing: 0.5 },
  grid: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' },
  tile: { width: '48%', marginBottom: 22 },
  img: { width: '100%', height: 200, borderRadius: 6, alignItems: 'center', justifyContent: 'center' },
  emoji: { fontSize: 56 },
  tileTag: { color: '#9A8B73', fontSize: 11, fontWeight: '700', letterSpacing: 1.5, marginTop: 12 },
  tileName: { color: '#EDE6DA', fontSize: 16, fontWeight: '500', marginTop: 3 },
});