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

const LISTINGS = [
  { title: 'Sunlit loft', price: '$2,400/mo', specs: '2 bed · 1 bath · 78 m²', emoji: '🌇', c: '#4FD1C5' },
  { title: 'Garden cottage', price: '$1,950/mo', specs: '1 bed · 1 bath · 54 m²', emoji: '🌿', c: '#9AE6B4' },
  { title: 'City studio', price: '$1,500/mo', specs: 'Studio · 1 bath · 38 m²', emoji: '🏙️', c: '#90CDF4' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>LISBON · FOR RENT</Text>
        <Text style={s.h1}>Find your haven</Text>
        <View style={s.hero}>
          <View style={s.heroImg}><Text style={{ fontSize: 64 }}>🏡</Text></View>
          <View style={s.heroBody}>
            <View style={s.badge}><Text style={s.badgeText}>FEATURED</Text></View>
            <Text style={s.heroTitle}>Hillside villa</Text>
            <Text style={s.heroSpecs}>3 bed · 2 bath · 140 m² · ocean view</Text>
            <Text style={s.heroPrice}>$3,800<Text style={s.mo}>/mo</Text></Text>
          </View>
        </View>
        <Text style={s.section}>Nearby</Text>
        {LISTINGS.map((l) => (
          <View key={l.title} style={s.row}>
            <View style={[s.thumb, { backgroundColor: l.c + '22' }]}><Text style={{ fontSize: 30 }}>{l.emoji}</Text></View>
            <View style={{ flex: 1, marginLeft: 16 }}>
              <Text style={s.rowTitle}>{l.title}</Text>
              <Text style={s.rowSpecs}>{l.specs}</Text>
            </View>
            <Text style={[s.rowPrice, { color: l.c }]}>{l.price}</Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#06120F' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#4FD1C5', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 30, fontWeight: '800', marginTop: 4, marginBottom: 20 },
  hero: { backgroundColor: '#0B1F1B', borderRadius: 24, overflow: 'hidden', borderWidth: 1, borderColor: '#143A33' },
  heroImg: { height: 160, backgroundColor: '#0E2A24', alignItems: 'center', justifyContent: 'center' },
  heroBody: { padding: 20 },
  badge: { alignSelf: 'flex-start', backgroundColor: '#4FD1C5', borderRadius: 8, paddingVertical: 4, paddingHorizontal: 10 },
  badgeText: { color: '#06231F', fontSize: 11, fontWeight: '800', letterSpacing: 1 },
  heroTitle: { color: '#fff', fontSize: 24, fontWeight: '800', marginTop: 12 },
  heroSpecs: { color: '#7FB8AE', fontSize: 14, marginTop: 6 },
  heroPrice: { color: '#4FD1C5', fontSize: 26, fontWeight: '800', marginTop: 12 },
  mo: { fontSize: 15, color: '#7FB8AE', fontWeight: '500' },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginTop: 28, marginBottom: 14 },
  row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#0A1B17', borderRadius: 18, padding: 14, marginBottom: 12 },
  thumb: { width: 60, height: 60, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
  rowTitle: { color: '#EAF6F3', fontSize: 16, fontWeight: '700' },
  rowSpecs: { color: '#6FA59B', fontSize: 13, marginTop: 4 },
  rowPrice: { fontSize: 15, fontWeight: '800' },
});