import { Link } from 'expo-router';
import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
import { CustomerFlowNav } from '../components/customer-flow-nav';

const favorites = ['Forno da Esquina', 'Sushi do Patio', 'Brasa Burger Club'];

export default function CustomerFavoritesScreen() {
  return (
    <SafeAreaView style={styles.safeArea}>
      <ScrollView contentContainerStyle={styles.content}>
        <CustomerFlowNav />
        <View style={styles.hero}>
          <Text style={styles.kicker}>Favoritos</Text>
          <Text style={styles.title}>Recompra acelerada com um toque.</Text>
          <Text style={styles.body}>Lista preparada para melhorar retenção, recompra e frequência dos melhores clientes.</Text>
        </View>
        {favorites.map((favorite) => (
          <Link key={favorite} href="/restaurant" style={styles.card}>
            <Text style={styles.cardTitle}>{favorite}</Text>
            <Text style={styles.cardMeta}>Abrir loja favorita</Text>
          </Link>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1, backgroundColor: '#F7F2EA' },
  content: { padding: 20, gap: 16 },
  hero: { borderRadius: 26, padding: 22, backgroundColor: '#FFF7ED' },
  kicker: { fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: '#C2410C', fontWeight: '700' },
  title: { marginTop: 12, fontSize: 28, lineHeight: 32, fontWeight: '800', color: '#7C2D12' },
  body: { marginTop: 12, fontSize: 14, lineHeight: 22, color: '#9A3412' },
  card: { borderRadius: 22, padding: 18, backgroundColor: '#FFFFFF' },
  cardTitle: { fontSize: 17, fontWeight: '800', color: '#0F172A' },
  cardMeta: { marginTop: 6, fontSize: 13, color: '#64748B' },
});