import { StyleSheet, Text, View } from 'react-native';
import { Link } from 'expo-router';
import { DriverShell } from '../components/driver-shell';
import { driverShadow, driverTheme } from '../src/lib/driver-ui';

const sections = [
  {
    title: 'Identidade',
    body: 'Nome, CPF, telefone e selfie operacional para liberar o cadastro com menos friccao.',
  },
  {
    title: 'Moto e documentos',
    body: 'CNH, CRLV, placa e modelo do veiculo para evitar bloqueios na primeira corrida.',
  },
  {
    title: 'Repasse',
    body: 'Chave PIX valida, status da conta e readiness operacional em uma trilha unica.',
  },
];

export default function DriverSignupScreen() {
  return (
    <DriverShell
      eyebrow="Onboarding"
      title="Entrada rapida para correr"
      subtitle="O foco aqui e deixar o entregador pronto para operar, sem formulario confuso e sem etapas soltas."
    >
      <View style={styles.grid}>
        {sections.map((section, index) => (
          <View key={section.title} style={styles.card}>
            <View style={styles.stepRow}>
              <View style={styles.stepDot}>
                <Text style={styles.stepDotText}>{index + 1}</Text>
              </View>
              <Text style={styles.cardTitle}>{section.title}</Text>
            </View>
            <Text style={styles.cardBody}>{section.body}</Text>
          </View>
        ))}
      </View>

      <Link href="/" style={styles.primaryButton}>
        Voltar para o painel
      </Link>
    </DriverShell>
  );
}

const styles = StyleSheet.create({
  grid: { gap: 12 },
  card: {
    borderRadius: 24,
    padding: 18,
    backgroundColor: driverTheme.card,
    ...driverShadow,
  },
  stepRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  stepDot: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: driverTheme.accentSoft,
    alignItems: 'center',
    justifyContent: 'center',
  },
  stepDotText: {
    color: driverTheme.accentDark,
    fontWeight: '900',
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: '900',
    color: driverTheme.textDark,
  },
  cardBody: {
    marginTop: 10,
    fontSize: 13,
    lineHeight: 20,
    color: '#475569',
    fontWeight: '600',
  },
  primaryButton: {
    borderRadius: 999,
    backgroundColor: driverTheme.accent,
    color: '#FFFFFF',
    textAlign: 'center',
    paddingHorizontal: 18,
    paddingVertical: 14,
    fontWeight: '900',
    overflow: 'hidden',
  },
});