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

const PROFILES = [
  { name: 'Maya', age: 27, emoji: '🌸', city: '2 km away', bio: 'Coffee, climbing, and bad puns.', tags: ['Climbing', 'Film', 'Ramen'], c: '#FF4D67' },
  { name: 'Theo', age: 30, emoji: '🎸', city: '5 km away', bio: 'Plays guitar, collects vinyl.', tags: ['Music', 'Vinyl', 'Hiking'], c: '#7C5CFF' },
  { name: 'Iris', age: 25, emoji: '🎨', city: '1 km away', bio: 'Painter chasing good light.', tags: ['Art', 'Dogs', 'Yoga'], c: '#FFB020' },
];

export default function App() {
  const [i, setI] = useState(0);
  const p = PROFILES[i % PROFILES.length];
  const next = () => setI((x) => x + 1);
  return (
    <SafeAreaView style={s.safe}>
      <View style={s.head}><Text style={s.logo}>spark</Text><Text style={s.headIcon}>♥</Text></View>
      <View style={s.cardWrap}>
        <View style={[s.card, { borderColor: p.c + '55' }]}>
          <View style={[s.photo, { backgroundColor: p.c + '22' }]}><Text style={s.photoEmoji}>{p.emoji}</Text></View>
          <View style={s.info}>
            <Text style={s.name}>{p.name}, <Text style={s.age}>{p.age}</Text></Text>
            <Text style={s.city}>📍 {p.city}</Text>
            <Text style={s.bio}>{p.bio}</Text>
            <View style={s.tags}>{p.tags.map((t) => (<View key={t} style={s.tag}><Text style={s.tagText}>{t}</Text></View>))}</View>
          </View>
        </View>
      </View>
      <View style={s.actions}>
        <Pressable onPress={next} style={[s.act, s.pass]}><Text style={s.passIcon}>✕</Text></Pressable>
        <Pressable onPress={next} style={[s.act, s.star]}><Text style={s.starIcon}>★</Text></Pressable>
        <Pressable onPress={next} style={[s.act, s.like]}><Text style={s.likeIcon}>♥</Text></Pressable>
      </View>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#120A0D' },
  head: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingTop: 58, paddingHorizontal: 24 },
  logo: { color: '#FF4D67', fontSize: 26, fontWeight: '800', letterSpacing: -0.5 },
  headIcon: { color: '#FF4D67', fontSize: 22 },
  cardWrap: { flex: 1, paddingHorizontal: 22, paddingTop: 18, justifyContent: 'center' },
  card: { backgroundColor: '#1B1015', borderRadius: 28, borderWidth: 1, overflow: 'hidden' },
  photo: { height: 320, alignItems: 'center', justifyContent: 'center' },
  photoEmoji: { fontSize: 130 },
  info: { padding: 22 },
  name: { color: '#fff', fontSize: 28, fontWeight: '800' },
  age: { fontWeight: '400', color: '#E0CBD2' },
  city: { color: '#C08A98', fontSize: 14, marginTop: 6 },
  bio: { color: '#D8C2C9', fontSize: 16, marginTop: 14, lineHeight: 22 },
  tags: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 16 },
  tag: { backgroundColor: '#2A1820', borderRadius: 14, paddingVertical: 7, paddingHorizontal: 13 },
  tagText: { color: '#FF8FA0', fontSize: 13, fontWeight: '600' },
  actions: { flexDirection: 'row', justifyContent: 'center', gap: 22, paddingBottom: 40, paddingTop: 10 },
  act: { width: 66, height: 66, borderRadius: 33, alignItems: 'center', justifyContent: 'center' },
  pass: { backgroundColor: '#241016', borderWidth: 2, borderColor: '#5A2630' },
  passIcon: { color: '#FF7A8A', fontSize: 28, fontWeight: '800' },
  star: { backgroundColor: '#1A1530', borderWidth: 2, borderColor: '#3A2F66', width: 54, height: 54, borderRadius: 27 },
  starIcon: { color: '#8C7BFF', fontSize: 22 },
  like: { backgroundColor: '#FF4D67' },
  likeIcon: { color: '#fff', fontSize: 30 },
});