function MainComponent() { const [language, setLanguage] = React.useState("fr"); const [formData, setFormData] = React.useState({ name: "", email: "", message: "" }); const [errors, setErrors] = React.useState({}); const [isSubmitting, setIsSubmitting] = React.useState(false); const [submitSuccess, setSubmitSuccess] = React.useState(false); const translations = { fr: { title: "Contactez-nous", subtitle: "Envoyez-nous un message et nous vous répondrons rapidement", nameLabel: "Nom", emailLabel: "Email", messageLabel: "Message", sendButton: "Envoyer", requiredField: "Ce champ est requis", invalidEmail: "Veuillez entrer une adresse email valide", successMessage: "Votre message a été envoyé avec succès!", errorMessage: "Une erreur s'est produite. Veuillez réessayer.", navHome: "Accueil", navHowItWorks: "Comment ça marche", navAbout: "À propos", navContact: "Contact", startSecureTransaction: "Démarrer une transaction sécurisée" }, en: { title: "Contact Us", subtitle: "Send us a message and we'll get back to you shortly", nameLabel: "Name", emailLabel: "Email", messageLabel: "Message", sendButton: "Send", requiredField: "This field is required", invalidEmail: "Please enter a valid email address", successMessage: "Your message has been sent successfully!", errorMessage: "An error occurred. Please try again.", navHome: "Home", navHowItWorks: "How It Works", navAbout: "About", navContact: "Contact", startSecureTransaction: "Start a secure transaction" } }; const toggleLanguage = ()=>{ setLanguage(language === "fr" ? "en" : "fr"); }; const handleChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); if (errors[name]) { setErrors({ ...errors, [name]: "" }); } }; const validateForm = ()=>{ const newErrors = {}; const t = translations[language]; if (!formData.name.trim()) { newErrors.name = t.requiredField; } if (!formData.email.trim()) { newErrors.email = t.requiredField; } else if (!/\S+@\S+\.\S+/.test(formData.email)) { newErrors.email = t.invalidEmail; } if (!formData.message.trim()) { newErrors.message = t.requiredField; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e)=>{ e.preventDefault(); if (validateForm()) { setIsSubmitting(true); // Simulate API call with timeout setTimeout(()=>{ setIsSubmitting(false); setSubmitSuccess(true); // Reset form after successful submission setFormData({ name: "", email: "", message: "" }); // Reset success message after 5 seconds setTimeout(()=>{ setSubmitSuccess(false); }, 5000); }, 1500); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-montserrat text-white min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "fixed w-full bg-[#202020] shadow-md z-50", __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-3 flex justify-between items-center", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#F9C846]", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "YOUCOIN.CA"))), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex space-x-6", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "hover:text-[#F9C846] transition-colors", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, translations[language].navHome), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#F9C846] transition-colors", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, translations[language].navHowItWorks), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "hover:text-[#F9C846] transition-colors", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, translations[language].navAbout), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "hover:text-[#F9C846] transition-colors", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, translations[language].navContact)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleLanguage, className: "px-3 py-1 border border-[#F9C846] rounded text-[#F9C846] hover:bg-[#F9C846] hover:text-[#202020] transition-colors", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, language === "fr" ? "EN" : "FR"), /*#__PURE__*/ React.createElement("a", { href: "/create-transaction", className: "bg-[#B60000] px-4 py-2 rounded hover:bg-[#900000] transition-colors", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, translations[language].startSecureTransaction)))), /*#__PURE__*/ React.createElement("main", { className: "pt-24 pb-16 px-4 bg-gradient-to-b from-[#111111] to-[#1f1f1f] min-h-[90vh] flex-grow", __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto max-w-3xl", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#202020] rounded-lg shadow-lg p-6 md:p-8", __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl md:text-3xl font-bold mb-2 text-center text-[#F9C846]", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, translations[language].title), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-400 mb-6", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, translations[language].subtitle), submitSuccess && /*#__PURE__*/ React.createElement("div", { className: "bg-green-600 text-white p-4 rounded-md mb-6 text-center", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, translations[language].successMessage), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-medium", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }, translations[language].nameLabel), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: formData.name, onChange: handleChange, className: "w-full px-4 py-2 bg-[#333] border border-[#444] rounded focus:outline-none focus:border-[#F9C846]", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }), errors.name && /*#__PURE__*/ React.createElement("p", { className: "text-[#ff6b6b] mt-1 text-sm", __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }, errors.name)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-medium", __source: { fileName: "", lineNumber: 194, columnNumber: 17 }, __self: this }, translations[language].emailLabel), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleChange, className: "w-full px-4 py-2 bg-[#333] border border-[#444] rounded focus:outline-none focus:border-[#F9C846]", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }), errors.email && /*#__PURE__*/ React.createElement("p", { className: "text-[#ff6b6b] mt-1 text-sm", __source: { fileName: "", lineNumber: 205, columnNumber: 19 }, __self: this }, errors.email)), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-medium", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, translations[language].messageLabel), /*#__PURE__*/ React.createElement("textarea", { name: "message", value: formData.message, onChange: handleChange, rows: "6", className: "w-full px-4 py-2 bg-[#333] border border-[#444] rounded focus:outline-none focus:border-[#F9C846]", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }), errors.message && /*#__PURE__*/ React.createElement("p", { className: "text-[#ff6b6b] mt-1 text-sm", __source: { fileName: "", lineNumber: 223, columnNumber: 19 }, __self: this }, errors.message)), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmitting, className: "bg-[#B60000] px-6 py-3 text-lg rounded-md hover:bg-[#900000] transition-colors shadow-lg disabled:opacity-70", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, isSubmitting ? /*#__PURE__*/ React.createElement("span", { className: "inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2", __source: { fileName: "", lineNumber: 236, columnNumber: 21 }, __self: this }) : null, translations[language].sendButton)))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#202020] py-8 px-4", __source: { fileName: "", lineNumber: 247, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 248, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 md:mb-0", __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-[#F9C846]", __source: { fileName: "", lineNumber: 251, columnNumber: 15 }, __self: this }, "YOUCOIN.CA"), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }, "© 2025 YOUCOIN. All rights reserved.")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#F9C846] transition-colors", __source: { fileName: "", lineNumber: 257, columnNumber: 15 }, __self: this }, "Terms"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#F9C846] transition-colors", __source: { fileName: "", lineNumber: 260, columnNumber: 15 }, __self: this }, "Privacy"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "hover:text-[#F9C846] transition-colors", __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, "Contact")))))); }