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

const EPS = [
  { show: 'The Long Game', title: 'Building in public', len: '52 min', emoji: '🎯', c: '#FB7185' },
  { show: 'Deep Work Daily', title: 'Focus in a noisy world', len: '38 min', emoji: '🧠', c: '#818CF8' },
  { show: 'Founders', title: 'The first ten hires', len: '1h 04m', emoji: '🚀', c: '#34D399' },
  { show: 'Night Owl', title: 'Stories after dark', len: '44 min', emoji: '🌃', c: '#FBBF24' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>FOR YOU</Text>
        <Text style={s.h1}>Listen now</Text>
        {EPS.map((e, i) => (
          <View key={i} style={s.row}>
            <View style={[s.cover, { backgroundColor: e.c + '22' }]}><Text style={{ fontSize: 28 }}>{e.emoji}</Text></View>
            <View style={{ flex: 1, marginLeft: 16 }}>
              <Text style={s.show}>{e.show}</Text>
              <Text style={s.title}>{e.title}</Text>
              <Text style={s.len}>▶ {e.len}</Text>
            </View>
          </View>
        ))}
      </ScrollView>
      <View style={s.player}>
        <Text style={{ fontSize: 26 }}>🎯</Text>
        <View style={{ flex: 1, marginLeft: 12 }}>
          <Text style={s.pTitle}>Building in public</Text>
          <Text style={s.pShow}>The Long Game</Text>
        </View>
        <Text style={s.pPlay}>⏸</Text>
      </View>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0E0A0C' },
  scroll: { padding: 22, paddingTop: 60, paddingBottom: 20 },
  kicker: { color: '#FB7185', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 32, fontWeight: '800', marginTop: 4, marginBottom: 18 },
  row: { flexDirection: 'row', alignItems: 'center', marginBottom: 20 },
  cover: { width: 72, height: 72, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
  show: { color: '#A88', fontSize: 13, fontWeight: '600' },
  title: { color: '#fff', fontSize: 17, fontWeight: '700', marginTop: 3 },
  len: { color: '#FB7185', fontSize: 13, marginTop: 5 },
  player: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#1A1216', margin: 16, borderRadius: 18, padding: 14 },
  pTitle: { color: '#fff', fontSize: 15, fontWeight: '700' },
  pShow: { color: '#A88', fontSize: 13, marginTop: 2 },
  pPlay: { fontSize: 26, color: '#fff' },
});