{t('Contact Us')}

{t('Get in touch with our team. We\'d love to hear from you.')}

{t('Send us a message')}

{t('Name')} setData('name', e.target.value)} placeholder={t('Your full name')} />

{t('Email')} setData('email', e.target.value)} placeholder={t('your@email.com')} />

{t('Subject')} setData('subject', e.target.value)} placeholder={t('How can we help you?')} />

{t('Message')}

setData('message', e.target.value)}
                                        placeholder={t('Tell us more about your inquiry...')}
                                        className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                                    />
                                    <InputError message={errors.message} />
                                </div>

<Button type="submit" disabled={processing} className="w-full">
                                    {processing ? t('Sending...') : t('Send Message')}
                                </Button>
                            </form>
                        </div>
                    </div>

<div className="space-y-6">
                        <div className="rounded-xl border border-border bg-card p-6">
                            <h3 className="text-lg font-semibold mb-4">{t('Get in Touch')}</h3>
                            
                            <div className="space-y-4">
                                <div className="flex items-center gap-3">
                                    <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                                        <Mail className="h-4 w-4 text-white" />
                                    </div>
                                    <div>
                                        <p className="text-sm font-medium">{t('Email')}</p>
                                        <p className="text-sm text-muted-foreground">hello@smartsense.com</p>
                                    </div>
                                </div>

<div className="flex items-center gap-3">
                                    <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
                                        <Phone className="h-4 w-4 text-white" />
                                    </div>
                                    <div>
                                        <p className="text-sm font-medium">{t('Phone')}</p>
                                        <p className="text-sm text-muted-foreground">+1 (555) 123-4567</p>
                                    </div>
                                </div>

<div className="flex items-center gap-3">
                                    <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center">
                                        <MapPin className="h-4 w-4 text-white" />
                                    </div>
                                    <div>
                                        <p className="text-sm font-medium">{t('Address')}</p>
                                        <p className="text-sm text-muted-foreground">
                                            123 Tourism Street<br />
                                            Adventure City, AC 12345
                                        </p>
                                    </div>
                                </div>

<div className="flex items-center gap-3">
                                    <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
                                        <Clock className="h-4 w-4 text-white" />
                                    </div>
                                    <div>
                                        <p className="text-sm font-medium">{t('Office Hours')}</p>
                                        <p className="text-sm text-muted-foreground">
                                            Mon - Fri: 9:00 AM - 6:00 PM<br />
                                            Sat: 10:00 AM - 4:00 PM
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

<div className="rounded-xl border border-border bg-card p-6">
                            <h3 className="text-lg font-semibold mb-3">{t('Quick Support')}</h3>
                            <p className="text-sm text-muted-foreground mb-4">
                                {t('Need immediate assistance? Check out our FAQ section or reach out via live chat.')}
                            </p>
                            <div className="space-y-2">
                                <Button variant="outline" className="w-full justify-start">
                                    {t('View FAQ')}
                                </Button>
                                <Button variant="outline" className="w-full justify-start">
                                    {t('Live Chat')}
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AppLayout>
    );
}