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

const WORK = [
  { title: 'Aurora', tag: 'Branding', emoji: '🌌', c: '#E879F9' },
  { title: 'Tide', tag: 'Mobile', emoji: '🌊', c: '#38BDF8' },
  { title: 'Ember', tag: 'Web', emoji: '🔥', c: '#FB923C' },
  { title: 'Fern', tag: 'Identity', emoji: '🌿', c: '#34D399' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <View style={s.avatar}><Text style={{ fontSize: 40 }}>👩‍🎨</Text></View>
        <Text style={s.name}>Elena Ríos</Text>
        <Text style={s.role}>Product Designer · Lisbon</Text>
        <Text style={s.bio}>I design calm, useful products. Currently crafting interfaces for small teams who care about the details.</Text>
        <View style={s.links}>
          {['Dribbble', 'Read.cv', 'Email'].map((l) => (<View key={l} style={s.link}><Text style={s.linkText}>{l}</Text></View>))}
        </View>
        <Text style={s.section}>Selected work</Text>
        <View style={s.grid}>
          {WORK.map((w) => (
            <View key={w.title} style={s.tile}>
              <View style={[s.tileImg, { backgroundColor: w.c + '22' }]}><Text style={{ fontSize: 40 }}>{w.emoji}</Text></View>
              <Text style={s.tileTag}>{w.tag}</Text>
              <Text style={s.tileTitle}>{w.title}</Text>
            </View>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0C0A0E' },
  scroll: { padding: 24, paddingTop: 60 },
  avatar: { width: 80, height: 80, borderRadius: 40, backgroundColor: '#1C1622', alignItems: 'center', justifyContent: 'center' },
  name: { color: '#fff', fontSize: 30, fontWeight: '800', marginTop: 18 },
  role: { color: '#C77DD9', fontSize: 15, marginTop: 4, fontWeight: '600' },
  bio: { color: '#B6AEC2', fontSize: 16, lineHeight: 24, marginTop: 16 },
  links: { flexDirection: 'row', gap: 10, marginTop: 18 },
  link: { backgroundColor: '#181420', borderRadius: 14, paddingVertical: 10, paddingHorizontal: 16, borderWidth: 1, borderColor: '#2A2236' },
  linkText: { color: '#E879F9', fontSize: 14, fontWeight: '600' },
  section: { color: '#fff', fontSize: 19, fontWeight: '700', marginTop: 34, marginBottom: 16 },
  grid: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' },
  tile: { width: '48%', marginBottom: 20 },
  tileImg: { width: '100%', height: 140, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
  tileTag: { color: '#8A7E9C', fontSize: 11, fontWeight: '700', letterSpacing: 1, marginTop: 10, textTransform: 'uppercase' },
  tileTitle: { color: '#EDE6F2', fontSize: 17, fontWeight: '700', marginTop: 3 },
});