import { StyleSheet } from 'react-native';
import { colors } from '@/assets/styles/colors';
import { fonts } from '@/assets/styles/fonts';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background_1,
  },
  scrollContent: {
    flexGrow: 1,
    paddingBottom: 40,
  },
  hero: {
    height: 380,
    justifyContent: 'flex-end',
  },
  heroImage: {
    width: '100%',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: colors.azul_escuro,
    opacity: 0.9,
  },
  heroContent: {
    zIndex: 1,
    alignItems: 'center',
    paddingHorizontal: 18,
    paddingBottom: 100,
  },
  logo: {
    width: 250,
    height: 50,
    marginBottom: 18,
  },
  title: {
    color: colors.branco,
    fontSize: 36,
    fontFamily: fonts.bold,
    marginBottom: 6,
  },
  subtitle: {
    color: colors.branco,
    fontSize: 18,
    lineHeight: 29,
    textAlign: 'center',
    fontFamily: fonts.regular,
  },
  formCard: {
    marginHorizontal: 24,
    marginTop: -62,
    backgroundColor: colors.branco,
    borderRadius: 18,
    paddingHorizontal: 18,
    paddingVertical: 20,
    shadowColor: '#000',
    shadowOpacity: 0.08,
    shadowRadius: 18,
    shadowOffset: { width: 0, height: 5 },
    elevation: 4,
  },
  label: {
    color: colors.azul_text,
    fontSize: 15,
    marginBottom: 8,
    fontFamily: fonts.semiBold,
  },
  required: {
    color: colors.vermelho,
  },
  input: {
    height: 52,
    borderWidth: 1,
    borderColor: '#D1D5DB',
    borderRadius: 12,
    paddingHorizontal: 14,
    marginBottom: 16,
    fontFamily: fonts.regular,
    color: '#1F2937',
  },
  errorText: {
    color: colors.vermelho,
    textAlign: 'center',
    fontSize: 13,
    marginBottom: 12,
    fontFamily: fonts.medium,
  },
  actionButton: {
    backgroundColor: colors.azul,
    height: 48,
    borderRadius: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
  actionButtonText: {
    color: colors.branco,
    fontFamily: fonts.medium,
    fontSize: 18,
  },
  actionButtonIcon: {
    width: 16,
    height: 16,
  },
  backLink: {
    color: colors.vermelho,
    textAlign: 'center',
    fontSize: 13,
    textDecorationLine: 'underline',
    marginTop: 16,
    fontFamily: fonts.medium,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 9, 25, 0.55)',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 24,
  },
  modalCard: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: colors.branco,
    borderRadius: 16,
    paddingVertical: 24,
    paddingHorizontal: 20,
    alignItems: 'center',
  },
  modalIconCircle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: colors.vermelho,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 16,
  },
  modalIcon: {
    color: colors.branco,
  },
  modalTitle: {
    color: colors.azul_text,
    fontSize: 30,
    fontFamily: fonts.bold,
    marginBottom: 8,
    textAlign: 'center',
  },
  modalMessage: {
    color: colors.azul_text,
    textAlign: 'center',
    fontSize: 16,
    lineHeight: 22,
    fontFamily: fonts.regular,
    marginBottom: 14,
  },
  modalCloseButton: {
    backgroundColor: colors.azul,
    borderRadius: 10,
    paddingHorizontal: 22,
    paddingVertical: 8,
  },
  modalCloseText: {
    color: colors.branco,
    fontFamily: fonts.medium,
    fontSize: 16,
  },
  passwordWrapper: {
    height: 52,
    borderWidth: 1,
    borderColor: '#D1D5DB',
    borderRadius: 12,
    paddingHorizontal: 14,
    marginBottom: 16,
    flexDirection: 'row',
    alignItems: 'center',
  },
  passwordInput: {
    flex: 1,
    fontFamily: fonts.regular,
    color: '#1F2937',
  },
  eyeIcon: {
    color: '#9098A3',
  },
  actionButtonDisabled: {
    opacity: 0.6,
  },
});