import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { MapPin, Phone, Mail, Clock } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
const ContactSection = () => {
const { toast } = useToast();
const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
// Simulate form submission
await new Promise(resolve => setTimeout(resolve, 1000));
toast({
title: "Message envoyé",
description: "Nous vous recontacterons dans les plus brefs délais.",
});
setIsSubmitting(false);
(e.target as HTMLFormElement).reset();
};
return (
<section id="contact" className="py-24 md:py-32 bg-secondary/30 relative overflow-hidden">
{/* Decorative line */}
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
<div className="container mx-auto px-6">
{/* Section Header */}
<div className="text-center max-w-3xl mx-auto mb-16 md:mb-24">
<span className="text-primary text-sm font-medium tracking-widest uppercase mb-4 block">
Contact
</span>
<h2 className="font-display text-4xl md:text-5xl lg:text-6xl font-light text-foreground mb-6">
Prenez rendez-vous pour une
<span className="text-gradient-gold italic font-semibold"> consultation privée</span>
</h2>
<p className="text-muted-foreground text-lg leading-relaxed">
Première consultation gratuite et strictement confidentielle.
Nous nous déplaçons sur la Côte d'Azur et dans toute la France.
</p>
</div>
<div className="grid lg:grid-cols-5 gap-12 max-w-6xl mx-auto">
{/* Contact Info */}
<div className="lg:col-span-2 space-y-8">
<div className="glass-card rounded-2xl p-8">
<h3 className="font-display text-xl font-semibold text-foreground mb-6">
Informations de contact
</h3>
<div className="space-y-6">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center flex-shrink-0">
<MapPin className="w-5 h-5 text-primary" />
</div>
<div>
<p className="text-sm font-medium text-foreground mb-1">Localisation</p>
<p className="text-sm text-muted-foreground">Côte d'Azur, France</p>
<p className="text-xs text-muted-foreground mt-1">Interventions France entière</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center flex-shrink-0">
<Phone className="w-5 h-5 text-primary" />
</div>
<div>
<p className="text-sm font-medium text-foreground mb-1">Téléphone</p>
<p className="text-sm text-muted-foreground">Sur demande</p>
<p className="text-xs text-muted-foreground mt-1">Ligne sécurisée</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center flex-shrink-0">
<Mail className="w-5 h-5 text-primary" />
</div>
<div>
<p className="text-sm font-medium text-foreground mb-1">Email</p>
<p className="text-sm text-muted-foreground">contact@azur-security.fr</p>
<p className="text-xs text-muted-foreground mt-1">Réponse sous 24h</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center flex-shrink-0">
<Clock className="w-5 h-5 text-primary" />
</div>
<div>
<p className="text-sm font-medium text-foreground mb-1">Disponibilité</p>
<p className="text-sm text-muted-foreground">Lun - Sam : 9h - 19h</p>
<p className="text-xs text-muted-foreground mt-1">Urgences 24/7</p>
</div>
</div>
</div>
</div>
{/* Confidentiality Note */}
<div className="p-6 rounded-2xl border border-primary/20 bg-primary/5">
<p className="text-sm text-muted-foreground italic">
<span className="text-primary font-medium">Confidentialité garantie.</span> Toutes nos
échanges sont strictement confidentiels. Aucune information personnelle n'est partagée
sans votre consentement explicite.
</p>
</div>
</div>
{/* Contact Form */}
<div className="lg:col-span-3">
<form onSubmit={handleSubmit} className="glass-card rounded-2xl p-8">
<h3 className="font-display text-xl font-semibold text-foreground mb-6">
Demande de consultation
</h3>
<div className="grid gap-6">
<div className="grid sm:grid-cols-2 gap-6">
<div>
<label htmlFor="firstName" className="text-sm font-medium text-foreground mb-2 block">
Prénom
</label>
<Input
id="firstName"
type="text"
required
placeholder="Votre prénom"
className="bg-secondary/50 border-border/50 focus:border-primary"
/>
</div>
<div>
<label htmlFor="lastName" className="text-sm font-medium text-foreground mb-2 block">
Nom
</label>
<Input
id="lastName"
type="text"
required
placeholder="Votre nom"
className="bg-secondary/50 border-border/50 focus:border-primary"
/>
</div>
</div>
<div className="grid sm:grid-cols-2 gap-6">
<div>
<label htmlFor="email" className="text-sm font-medium text-foreground mb-2 block">
Email
</label>
<Input
id="email"
type="email"
required
placeholder="votre@email.com"
className="bg-secondary/50 border-border/50 focus:border-primary"
/>
</div>
<div>
<label htmlFor="phone" className="text-sm font-medium text-foreground mb-2 block">
Téléphone
</label>
<Input
id="phone"
type="tel"
placeholder="+33 6 00 00 00 00"
className="bg-secondary/50 border-border/50 focus:border-primary"
/>
</div>
</div>
<div>
<label htmlFor="property" className="text-sm font-medium text-foreground mb-2 block">
Type de propriété
</label>
<Input
id="property"
type="text"
placeholder="Ex: Villa, Appartement, Domaine..."
className="bg-secondary/50 border-border/50 focus:border-primary"
/>
</div>
<div>
<label htmlFor="message" className="text-sm font-medium text-foreground mb-2 block">
Message
</label>
<Textarea
id="message"
required
placeholder="Décrivez brièvement votre besoin en sécurité..."
rows={5}
className="bg-secondary/50 border-border/50 focus:border-primary resize-none"
/>
</div>
<Button
type="submit"
variant="gold"
size="lg"
className="w-full"
disabled={isSubmitting}
>
{isSubmitting ? "Envoi en cours..." : "Envoyer ma demande"}
</Button>
<p className="text-xs text-muted-foreground text-center">
En soumettant ce formulaire, vous acceptez notre politique de confidentialité.
</p>
</div>
</form>
</div>
</div>
</div>
</section>
);
};
export default ContactSection;
