---

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

export default function App() {
  const [selected, setSelected] = useState('Горячая вода');

  const meters = [
    'Горячая вода',
    'Холодная вода',
    'Электричество',
  ];

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.content}>
        <Text style={styles.title}>Мои счётчики</Text>
        <Text style={styles.subtitle}>
          Учёт показаний коммунальных услуг
        </Text>

        <Text style={styles.heading}>Выбери счётчик</Text>

        {meters.map((meter) => (
          <TouchableOpacity
            key={meter}
            style={[
              styles.meter,
              selected === meter && styles.selectedMeter,
            ]}
            onPress={() => setSelected(meter)}
          >
            <Text style={styles.meterText}>{meter}</Text>
            <Text style={styles.arrow}>
              {selected === meter ? '✓' : '›'}
            </Text>
          </TouchableOpacity>
        ))}

        <View style={styles.info}>
          <Text style={styles.infoTitle}>Выбранный счётчик</Text>
          <Text style={styles.infoValue}>{selected}</Text>
        </View>

        <TouchableOpacity
          style={styles.button}
          onPress={() => alert('Камеру добавим следующим шагом!')}
        >
          <Text style={styles.buttonText}>Сфотографировать счётчик</Text>
        </TouchableOpacity>

        <Text style={styles.footer}>
          Скоро здесь появятся камера, распознавание показаний и сохранение в Google Таблицы.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#F3F6FA' },
  content: { padding: 22, paddingTop: 35 },
  title: { fontSize: 30, fontWeight: '800', color: '#172B4D' },
  subtitle: { fontSize: 15, color: '#697586', marginTop: 8, marginBottom: 30 },
  heading: { fontSize: 18, fontWeight: '700', color: '#172B4D', marginBottom: 14 },
  meter: {
    backgroundColor: '#FFFFFF',
    padding: 19,
    borderRadius: 14,
    marginBottom: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#E1E7EF',
  },
  selectedMeter: { borderColor: '#3977D5', backgroundColor: '#EAF2FF' },
  meterText: { fontSize: 16, fontWeight: '600', color: '#253858' },
  arrow: { fontSize: 21, color: '#3977D5', fontWeight: '700' },
  info: {
    backgroundColor: '#FFFFFF',
    padding: 19,
    borderRadius: 14,
    marginTop: 12,
    marginBottom: 20,
  },
  infoTitle: { fontSize: 13, color: '#697586' },
  infoValue: { fontSize: 19, fontWeight: '700', color: '#172B4D', marginTop: 6 },
  button: {
    backgroundColor: '#245CB5',
    padding: 18,
    borderRadius: 14,
    alignItems: 'center',
  },
  buttonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '700' },
  footer: {
    color: '#697586',
    fontSize: 13,
    lineHeight: 20,
    marginTop: 22,
    textAlign: 'center',
  },
});