{/* Back button */} {t('back_to_support', 'Back to Help & Support')} {/* Form Card */}

{t('open_support_case', 'Open a Support Case')}

{t('open_support_case_desc', 'Please provide detailed info to help our engineering team solve it fast.')}

{/* Subject */}

{t('ticket_subject', 'Subject / Summary')} setData('subject', e.target.value)} className={`w-full p-3 border rounded-xl bg-slate-50/50 text-slate-800 outline-none focus:bg-white focus:border-[#185FA5] transition-all ${ errors.subject ? 'border-red-400 bg-red-50/20' : 'border-slate-200' }`} required /> {errors.subject && (

{errors.subject}

)}

{/* Priority */}

{t('ticket_priority', 'Severity / Priority')}

{/* Description */}

{t('ticket_description', 'Detailed Description')}

setData('description', e.target.value)}
                                className={`w-full p-3 border rounded-xl bg-slate-50/50 text-slate-800 outline-none focus:bg-white focus:border-[#185FA5] transition-all leading-relaxed ${
                                    errors.description ? 'border-red-400 bg-red-50/20' : 'border-slate-200'
                                }`}
                                required
                            />
                            {errors.description && (
                                <p className="text-[10px] text-red-500 font-semibold mt-1">{errors.description}</p>
                            )}
                        </div>

{/* Support notice */}
                        {data.priority === 'high' && (
                            <div className="bg-amber-50 border border-amber-200 rounded-2xl p-4 flex items-start space-x-3 text-amber-800 animate-pulse">
                                <AlertTriangle className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
                                <div>
                                    <h5 className="font-extrabold text-[11px]">{t('high_priority_alert', 'Priority High Selected')}</h5>
                                    <p className="text-[10px] font-semibold text-amber-700 mt-0.5 leading-relaxed">
                                        {t('high_priority_desc', 'Tickets marked high route directly to our standby on-call senior engineering queue. Response is initiated under 2 hours.')}
                                    </p>
                                </div>
                            </div>
                        )}

{/* Buttons */}
                        <div className="flex items-center justify-end space-x-3 pt-4 border-t border-slate-100">
                            <Link
                                href="/employer/support"
                                className="px-5 py-3 rounded-xl border border-slate-200 hover:bg-slate-50 text-slate-600 transition-colors"
                            >
                                {t('cancel', 'Cancel')}
                            </Link>
                            <button
                                type="submit"
                                disabled={processing}
                                className="px-6 py-3 rounded-xl bg-[#185FA5] hover:bg-[#144f8a] text-white transition-all shadow-md disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
                            >
                                {processing ? (
                                    <>
                                        <span className="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                                        <span>{t('submitting', 'Submitting...')}</span>
                                    </>
                                ) : (
                                    <span>{t('submit_ticket', 'Submit Support Ticket')}</span>
                                )}
                            </button>
                        </div>
                    </form>
                </div>

</div>
        </EmployerLayout>
    );
}