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

const sections = [
  {
    title: 'Conta e verificacao',
    fields: ['Nome completo', 'CPF', 'Email', 'Telefone com OTP'],
  },
  {
    title: 'Entrega e endereco',
    fields: ['Endereco principal', 'Complemento', 'Referencia', 'Favoritos'],
  },
  {
    title: 'Relacionamento',
    fields: ['Aceite LGPD', 'Opt-in push', 'Cupom de boas-vindas', 'Carteira'],
  },
];

export default function CustomerSignupScreen() {
  return (
    <SafeAreaView style={styles.safeArea}>
      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
        <CustomerFlowNav />
        <View style={styles.hero}>
          <Text style={styles.kicker}>Cadastro do cliente</Text>
          <Text style={styles.title}>Onboarding desenhado para converter sem friccao.</Text>
          <Text style={styles.body}>
            O fluxo prioriza Brasil real: CPF, telefone, endereco completo, consentimento de marketing, carteira e antifraude.
          </Text>
        </View>

        {sections.map((section) => (
          <View key={section.title} style={styles.card}>
            <Text style={styles.sectionTitle}>{section.title}</Text>
            <View style={styles.list}>
              {section.fields.map((field) => (
                <View key={field} style={styles.item}>
                  <Text style={styles.itemText}>{field}</Text>
                </View>
              ))}
            </View>
          </View>
        ))}

        <View style={styles.highlight}>
          <Text style={styles.highlightTitle}>Pronto para evoluir para formulario real</Text>
          <Text style={styles.highlightBody}>A proxima etapa liga persistencia, validacoes, OTP e profile API sem refazer a UX base.</Text>
          <Link href="/addresses" style={styles.primaryButton}>Gerenciar enderecos</Link>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1, backgroundColor: '#F8F4EC' },
  content: { padding: 20, gap: 16 },
  hero: { borderRadius: 28, padding: 22, backgroundColor: '#7C2D12' },
  kicker: { fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: '#FED7AA', fontWeight: '700' },
  title: { marginTop: 10, fontSize: 30, lineHeight: 34, fontWeight: '800', color: '#FFFFFF' },
  body: { marginTop: 12, fontSize: 14, lineHeight: 22, color: '#FFEDD5' },
  card: { borderRadius: 24, padding: 20, backgroundColor: '#FFFFFF' },
  sectionTitle: { fontSize: 20, fontWeight: '800', color: '#0F172A' },
  list: { marginTop: 14, gap: 10 },
  item: { borderRadius: 16, padding: 14, backgroundColor: '#FFF7ED' },
  itemText: { fontSize: 14, fontWeight: '700', color: '#9A3412' },
  highlight: { borderRadius: 24, padding: 20, backgroundColor: '#111827', marginBottom: 12 },
  highlightTitle: { fontSize: 24, lineHeight: 28, fontWeight: '800', color: '#FFFFFF' },
  highlightBody: { marginTop: 10, fontSize: 14, lineHeight: 22, color: '#CBD5E1' },
  primaryButton: { marginTop: 18, borderRadius: 999, backgroundColor: '#F97316', color: '#FFFFFF', textAlign: 'center', paddingHorizontal: 18, paddingVertical: 14, fontWeight: '800', overflow: 'hidden' },
});