249 lines
8.3 KiB
TypeScript
249 lines
8.3 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { motion } from "framer-motion";
|
||
import { usePathname } from "next/navigation";
|
||
import { sendContactMessage } from "@/lib/api";
|
||
import { Phone, MessageSquare, MapPin } from "lucide-react";
|
||
import Image from "next/image";
|
||
import { useLanguage } from "@/context/language-context";
|
||
|
||
export function ContactForm() {
|
||
const {t} = useLanguage();
|
||
const pathname = usePathname();
|
||
const locale = (pathname.split("/")[1] || "uz") as "uz" | "ru";
|
||
|
||
const [formData, setFormData] = useState({
|
||
name: "",
|
||
phone: "",
|
||
message: "",
|
||
productSlug: "",
|
||
});
|
||
|
||
const [loading, setLoading] = useState(false);
|
||
const [message, setMessage] = useState<{
|
||
type: "success" | "error";
|
||
text: string;
|
||
} | null>(null);
|
||
|
||
const handleChange = (
|
||
e: React.ChangeEvent<
|
||
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
||
>
|
||
) => {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
[e.target.name]: e.target.value,
|
||
}));
|
||
};
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setLoading(true);
|
||
setMessage(null);
|
||
|
||
try {
|
||
const result = await sendContactMessage({
|
||
...formData,
|
||
lang: locale,
|
||
});
|
||
|
||
if (result.success) {
|
||
setMessage({ type: "success", text: t.contact.success });
|
||
setFormData({ name: "", phone: "", message: "", productSlug: "" });
|
||
} else {
|
||
setMessage({ type: "error", text: t.contact.error });
|
||
}
|
||
} catch {
|
||
setMessage({ type: "error", text: t.contact.error });
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<section id="contact" className="py-20 relative">
|
||
<div className="absolute -z-40 top-0 left-0 h-full w-full">
|
||
<Image
|
||
src="/images/hero4.jpg"
|
||
alt="hero image"
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
<div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40"/>
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
{/* Header */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
whileInView={{ opacity: 1 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-16 bg-white/80 backdrop-blur-md rounded-xl overflow-hidden p-2 max-w-[300px] w-full mx-auto"
|
||
>
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||
{t.contact.title}
|
||
</h2>
|
||
<div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
|
||
</motion.div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
{/* Contact Info */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -50 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-4 flex flex-col items-start justify-center max-h-[350px] h-full bg-white/80 backdrop-blur-md rounded-xl overflow-hidden p-4"
|
||
>
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-2">
|
||
{t.contact.title}
|
||
</h3>
|
||
<p className="text-gray-600 mb-8">
|
||
{t.contact.desc}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Contact Methods */}
|
||
{[
|
||
{
|
||
icon: Phone,
|
||
title: "phone_title",
|
||
value: "+998 (99) 869-74-70",
|
||
},
|
||
{
|
||
icon: MessageSquare,
|
||
title: "telegram_title",
|
||
value: "@firma_support",
|
||
},
|
||
{
|
||
icon: MapPin,
|
||
title: "addres_title",
|
||
value: "Tashkent, Сергели 6 а 179 кв",
|
||
},
|
||
].map((item, idx) => {
|
||
const Icon = item.icon;
|
||
return (
|
||
<motion.div
|
||
key={idx}
|
||
whileHover={{ x: 5 }}
|
||
className="flex gap-4"
|
||
>
|
||
<Icon className="text-blue-600 shrink-0" size={24} />
|
||
<div>
|
||
<h4 className="font-semibold text-gray-900">
|
||
{t.contact[item.title]}
|
||
</h4>
|
||
<p className="text-gray-600">{item.value}</p>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
{/* Form */}
|
||
<motion.form
|
||
initial={{ opacity: 0, x: 50 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
onSubmit={handleSubmit}
|
||
className="bg-white rounded-lg shadow-lg p-8"
|
||
>
|
||
{/* Name */}
|
||
<div className="mb-6">
|
||
<label className="block text-gray-700 font-medium mb-2">
|
||
{t.contact.name}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="name"
|
||
value={formData.name}
|
||
onChange={handleChange}
|
||
placeholder={t.contact.namePlaceholder}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
{/* Phone */}
|
||
<div className="mb-6">
|
||
<label className="block text-gray-700 font-medium mb-2">
|
||
{t.contact.phone} *
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
name="phone"
|
||
value={formData.phone}
|
||
onChange={handleChange}
|
||
placeholder={t.contact.phonePlaceholder}
|
||
required
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
{/* Message */}
|
||
<div className="mb-6">
|
||
<label className="block text-gray-700 font-medium mb-2">
|
||
{t.contact.message}
|
||
</label>
|
||
<textarea
|
||
name="message"
|
||
value={formData.message}
|
||
onChange={handleChange}
|
||
placeholder={t.contact.messagePlaceholder}
|
||
rows={4}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
||
/>
|
||
</div>
|
||
|
||
{/* Product Select */}
|
||
<div className="mb-6">
|
||
<label className="block text-gray-700 font-medium mb-2">
|
||
{t.contact.product}
|
||
</label>
|
||
<select
|
||
name="productSlug"
|
||
value={formData.productSlug}
|
||
onChange={handleChange}
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
>
|
||
<option value="">Select a product...</option>
|
||
<option value="schotchik-pump">Schotchik Pump</option>
|
||
<option value="agregat-pump">Agregat Pump</option>
|
||
<option value="ccl-20-24-pump">CCL 20/24 Pump</option>
|
||
</select>
|
||
</div>
|
||
|
||
{/* Message Alert */}
|
||
{message && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className={`mb-6 p-4 rounded-lg ${
|
||
message.type === "success"
|
||
? "bg-green-50 text-green-700 border border-green-200"
|
||
: "bg-red-50 text-red-700 border border-red-200"
|
||
}`}
|
||
>
|
||
{message.text}
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* Submit Button */}
|
||
<motion.button
|
||
whileHover={{ scale: 1.05 }}
|
||
whileTap={{ scale: 0.95 }}
|
||
type="submit"
|
||
disabled={loading}
|
||
className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{loading ? "Sending..." : t.contact.send}
|
||
</motion.button>
|
||
</motion.form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|