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

const COLS = [
  { name: 'To do', c: '#8B5CF6', cards: [{ t: 'Auth flow', l: 'Backend' }, { t: 'Empty states', l: 'Design' }, { t: 'Onboarding copy', l: 'Content' }] },
  { name: 'In progress', c: '#F59E0B', cards: [{ t: 'Wall masonry', l: 'Frontend' }, { t: 'Capture worker', l: 'Infra' }] },
  { name: 'Done', c: '#22C55E', cards: [{ t: 'Manifest v1', l: 'Backend' }, { t: 'Dark theme', l: 'Design' }] },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <View style={s.head}>
        <Text style={s.kicker}>PROJECT</Text>
        <Text style={s.h1}>VP0 Launch</Text>
      </View>
      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.board}>
        {COLS.map((col) => (
          <View key={col.name} style={s.col}>
            <View style={s.colHead}>
              <View style={[s.colDot, { backgroundColor: col.c }]} />
              <Text style={s.colName}>{col.name}</Text>
              <Text style={s.colCount}>{col.cards.length}</Text>
            </View>
            {col.cards.map((card, i) => (
              <View key={i} style={s.card}>
                <View style={[s.label, { backgroundColor: col.c + '22' }]}><Text style={[s.labelT, { color: col.c }]}>{card.l}</Text></View>
                <Text style={s.cardTitle}>{card.t}</Text>
              </View>
            ))}
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0B0A10' },
  head: { paddingTop: 60, paddingHorizontal: 22, marginBottom: 18 },
  kicker: { color: '#A78BFA', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 30, fontWeight: '800', marginTop: 4 },
  board: { paddingHorizontal: 16, gap: 14 },
  col: { width: 240, backgroundColor: '#100E16', borderRadius: 18, padding: 14 },
  colHead: { flexDirection: 'row', alignItems: 'center', marginBottom: 14 },
  colDot: { width: 10, height: 10, borderRadius: 5, marginRight: 8 },
  colName: { color: '#EDEDF2', fontSize: 15, fontWeight: '700', flex: 1 },
  colCount: { color: '#6A6A78', fontSize: 14, fontWeight: '600' },
  card: { backgroundColor: '#17151F', borderRadius: 14, padding: 14, marginBottom: 10 },
  label: { alignSelf: 'flex-start', borderRadius: 8, paddingVertical: 4, paddingHorizontal: 10, marginBottom: 8 },
  labelT: { fontSize: 12, fontWeight: '700' },
  cardTitle: { color: '#EDEDF2', fontSize: 15, fontWeight: '600' },
});