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

const WEEK = [
  { d: 'M', n: 12 }, { d: 'T', n: 13 }, { d: 'W', n: 14 }, { d: 'T', n: 15 }, { d: 'F', n: 16 }, { d: 'S', n: 17 }, { d: 'S', n: 18 },
];
const AGENDA = [
  { time: '09:30', title: 'Design sync', tag: 'Work', c: '#EC4899' },
  { time: '11:00', title: 'Dentist', tag: 'Personal', c: '#60A5FA' },
  { time: '13:00', title: 'Lunch with Sam', tag: 'Social', c: '#34D399' },
  { time: '16:30', title: 'Gym session', tag: 'Health', c: '#FBBF24' },
];

export default function App() {
  const [sel, setSel] = useState(14);
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>MAY 2026</Text>
        <Text style={s.h1}>Wednesday</Text>
        <View style={s.week}>
          {WEEK.map((w) => {
            const on = w.n === sel;
            return (
              <Pressable key={w.n} onPress={() => setSel(w.n)} style={[s.day, on && s.dayOn]}>
                <Text style={[s.dayL, on && { color: '#fff' }]}>{w.d}</Text>
                <Text style={[s.dayN, on && { color: '#fff' }]}>{w.n}</Text>
              </Pressable>
            );
          })}
        </View>
        <Text style={s.section}>Agenda</Text>
        {AGENDA.map((a, i) => (
          <View key={i} style={s.row}>
            <Text style={s.time}>{a.time}</Text>
            <View style={[s.bar, { backgroundColor: a.c }]} />
            <View style={{ flex: 1 }}>
              <Text style={s.title}>{a.title}</Text>
              <Text style={[s.tag, { color: a.c }]}>{a.tag}</Text>
            </View>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0D0A0C' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#EC4899', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 32, fontWeight: '800', marginTop: 4, marginBottom: 22 },
  week: { flexDirection: 'row', justifyContent: 'space-between' },
  day: { width: 42, paddingVertical: 12, borderRadius: 16, alignItems: 'center', backgroundColor: '#161214' },
  dayOn: { backgroundColor: '#EC4899' },
  dayL: { color: '#9A8090', fontSize: 12, fontWeight: '600' },
  dayN: { color: '#EDEDF2', fontSize: 17, fontWeight: '700', marginTop: 4 },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginTop: 30, marginBottom: 14 },
  row: { flexDirection: 'row', alignItems: 'center', marginBottom: 18 },
  time: { color: '#9A8090', fontSize: 14, fontWeight: '600', width: 52 },
  bar: { width: 4, height: 40, borderRadius: 2, marginRight: 14 },
  title: { color: '#fff', fontSize: 16, fontWeight: '600' },
  tag: { fontSize: 13, marginTop: 3, fontWeight: '600' },
});