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

const EVENTS = [
  { title: 'Rooftop Jazz', when: 'Fri · 8 PM', where: 'Sky Bar', emoji: '🎷', c: '#F472B6' },
  { title: 'Indie Film Night', when: 'Sat · 7 PM', where: 'The Reel', emoji: '🎬', c: '#818CF8' },
  { title: 'Sunday Market', when: 'Sun · 10 AM', where: 'Old Town', emoji: '🧺', c: '#34D399' },
  { title: 'Vinyl & Wine', when: 'Sun · 6 PM', where: 'Cellar 9', emoji: '🍷', c: '#FBBF24' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>THIS WEEK</Text>
        <Text style={s.h1}>What is on</Text>
        <View style={s.featured}>
          <Text style={s.fEmoji}>🎷</Text>
          <Text style={s.fTag}>FEATURED</Text>
          <Text style={s.fTitle}>Rooftop Jazz Session</Text>
          <Text style={s.fMeta}>Friday · 8 PM · Sky Bar</Text>
        </View>
        {EVENTS.map((e, i) => (
          <View key={i} style={s.row}>
            <View style={[s.icon, { backgroundColor: e.c + '22' }]}><Text style={{ fontSize: 24 }}>{e.emoji}</Text></View>
            <View style={{ flex: 1, marginLeft: 14 }}>
              <Text style={s.title}>{e.title}</Text>
              <Text style={s.where}>{e.where}</Text>
            </View>
            <Text style={[s.when, { color: e.c }]}>{e.when}</Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0D0A0F' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#F472B6', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 32, fontWeight: '800', marginTop: 4, marginBottom: 20 },
  featured: { backgroundColor: '#1E1322', borderRadius: 24, padding: 24, marginBottom: 24, borderWidth: 1, borderColor: '#3A2440' },
  fEmoji: { fontSize: 52 },
  fTag: { color: '#F472B6', fontSize: 11, fontWeight: '800', letterSpacing: 1.5, marginTop: 14 },
  fTitle: { color: '#fff', fontSize: 24, fontWeight: '800', marginTop: 6 },
  fMeta: { color: '#B58AC0', fontSize: 15, marginTop: 6 },
  row: { flexDirection: 'row', alignItems: 'center', marginBottom: 18 },
  icon: { width: 52, height: 52, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
  title: { color: '#fff', fontSize: 16, fontWeight: '700' },
  where: { color: '#8A8A99', fontSize: 14, marginTop: 3 },
  when: { fontSize: 14, fontWeight: '700' },
});