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

const HOURLY = [
  { t: 'Now', i: '☀️', d: 24 }, { t: '1PM', i: '🌤️', d: 25 }, { t: '2PM', i: '⛅', d: 25 },
  { t: '3PM', i: '⛅', d: 24 }, { t: '4PM', i: '🌥️', d: 23 }, { t: '5PM', i: '🌧️', d: 21 },
];
const WEEK = [
  { d: 'Mon', i: '☀️', hi: 26, lo: 17 }, { d: 'Tue', i: '⛅', hi: 24, lo: 16 },
  { d: 'Wed', i: '🌧️', hi: 20, lo: 14 }, { d: 'Thu', i: '🌤️', hi: 23, lo: 15 }, { d: 'Fri', i: '☀️', hi: 27, lo: 18 },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <View style={s.now}>
          <Text style={s.city}>Lisbon</Text>
          <Text style={s.temp}>24°</Text>
          <Text style={s.cond}>Sunny · feels like 26°</Text>
          <Text style={s.range}>H:27°  L:17°</Text>
        </View>
        <View style={s.hourCard}>
          {HOURLY.map((h, i) => (
            <View key={i} style={s.hour}>
              <Text style={s.hourT}>{h.t}</Text>
              <Text style={s.hourI}>{h.i}</Text>
              <Text style={s.hourD}>{h.d}°</Text>
            </View>
          ))}
        </View>
        <View style={s.weekCard}>
          {WEEK.map((w, i) => (
            <View key={i} style={s.weekRow}>
              <Text style={s.weekD}>{w.d}</Text>
              <Text style={s.weekI}>{w.i}</Text>
              <View style={s.weekBarWrap}>
                <View style={[s.weekBar, { width: (w.hi - w.lo) * 8 + '%', marginLeft: (w.lo - 14) * 4 + '%' }]} />
              </View>
              <Text style={s.weekHi}>{w.hi}°</Text>
            </View>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0A2440' },
  scroll: { padding: 22, paddingTop: 64 },
  now: { alignItems: 'center', marginBottom: 30 },
  city: { color: '#fff', fontSize: 30, fontWeight: '600' },
  temp: { color: '#fff', fontSize: 96, fontWeight: '100', marginTop: 4 },
  cond: { color: '#9CCBEF', fontSize: 17, marginTop: -8 },
  range: { color: '#7FB4DC', fontSize: 15, marginTop: 8 },
  hourCard: { flexDirection: 'row', justifyContent: 'space-between', backgroundColor: 'rgba(255,255,255,0.07)', borderRadius: 22, padding: 18, marginBottom: 18 },
  hour: { alignItems: 'center', gap: 10 },
  hourT: { color: '#9CCBEF', fontSize: 13, fontWeight: '600' },
  hourI: { fontSize: 24 },
  hourD: { color: '#fff', fontSize: 16, fontWeight: '700' },
  weekCard: { backgroundColor: 'rgba(255,255,255,0.07)', borderRadius: 22, padding: 18 },
  weekRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12 },
  weekD: { color: '#fff', fontSize: 16, fontWeight: '600', width: 52 },
  weekI: { fontSize: 22, width: 40 },
  weekBarWrap: { flex: 1, height: 6, backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: 3, marginHorizontal: 12, overflow: 'hidden' },
  weekBar: { height: 6, borderRadius: 3, backgroundColor: '#FBBF24' },
  weekHi: { color: '#fff', fontSize: 16, fontWeight: '700', width: 40, textAlign: 'right' },
});