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

const PLAN = [
  { time: '09:00', title: 'Sagrada Família', note: 'Pre-booked tickets', icon: '⛪' },
  { time: '12:30', title: 'Lunch at La Boqueria', note: 'Tapas + market walk', icon: '🥘' },
  { time: '15:00', title: 'Park Güell', note: 'Golden hour photos', icon: '🌅' },
  { time: '20:00', title: 'Dinner in El Born', note: 'Reservation at 8', icon: '🍷' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <View style={s.hero}>
          <Text style={s.heroEmoji}>🇪🇸</Text>
          <Text style={s.heroTitle}>Barcelona</Text>
          <Text style={s.heroSub}>May 18 to 22 · Day 2 of 5</Text>
        </View>
        <Text style={s.section}>Today</Text>
        {PLAN.map((p, i) => (
          <View key={i} style={s.row}>
            <View style={s.timeCol}>
              <Text style={s.time}>{p.time}</Text>
              {i < PLAN.length - 1 && <View style={s.line} />}
            </View>
            <View style={s.card}>
              <Text style={s.cardIcon}>{p.icon}</Text>
              <View style={{ flex: 1 }}>
                <Text style={s.cardTitle}>{p.title}</Text>
                <Text style={s.cardNote}>{p.note}</Text>
              </View>
            </View>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#051018' },
  scroll: { padding: 22, paddingTop: 60 },
  hero: { backgroundColor: '#08263A', borderRadius: 24, padding: 26, marginBottom: 24 },
  heroEmoji: { fontSize: 44 },
  heroTitle: { color: '#fff', fontSize: 34, fontWeight: '800', marginTop: 10 },
  heroSub: { color: '#6FB8E0', fontSize: 15, marginTop: 6 },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginBottom: 16 },
  row: { flexDirection: 'row' },
  timeCol: { width: 58, alignItems: 'center' },
  time: { color: '#0EA5E9', fontSize: 13, fontWeight: '700' },
  line: { width: 2, flex: 1, backgroundColor: '#123349', marginTop: 6, marginBottom: -6 },
  card: { flex: 1, flexDirection: 'row', alignItems: 'center', backgroundColor: '#0A1C28', borderRadius: 16, padding: 16, marginBottom: 16 },
  cardIcon: { fontSize: 26, marginRight: 14 },
  cardTitle: { color: '#fff', fontSize: 16, fontWeight: '700' },
  cardNote: { color: '#6FA0BC', fontSize: 14, marginTop: 3 },
});