function MainComponent() { const [isMenuOpen, setIsMenuOpen] = useState(false); const [servicesDropdownOpen, setServicesDropdownOpen] = useState(false); const [formData, setFormData] = useState({ name: "", email: "", phone: "", subject: "", message: "" }); const [formErrors, setFormErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); const [submitSuccess, setSubmitSuccess] = useState(false); const [submitError, setSubmitError] = useState(""); // Preload images and resources useEffect(()=>{ // Preload logo with priority const logoImg = new Image(); logoImg.src = "https://ucarecdn.com/68fbc4da-c907-477a-a615-85017e8d5835/-/format/auto/-/quality/lightest/"; // Preload font awesome if not already loaded if (!document.getElementById("font-awesome-preload")) { const link = document.createElement("link"); link.id = "font-awesome-preload"; link.rel = "preload"; link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"; link.as = "style"; document.head.appendChild(link); } // Add prefetch for other pages const pagesToPrefetch = [ "/", "/about", "/services" ]; pagesToPrefetch.forEach((page)=>{ if (!document.querySelector(`link[rel="prefetch"][href="${page}"]`)) { const link = document.createElement("link"); link.rel = "prefetch"; link.href = page; document.head.appendChild(link); } }); }, []); const toggleMenu = ()=>{ setIsMenuOpen(!isMenuOpen); }; const toggleServicesDropdown = ()=>{ setServicesDropdownOpen(!servicesDropdownOpen); }; const handleChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); // Clear error when user starts typing if (formErrors[name]) { setFormErrors({ ...formErrors, [name]: "" }); } }; const validateForm = ()=>{ const errors = {}; if (!formData.name.trim()) errors.name = "Name is required"; if (!formData.email.trim()) { errors.email = "Email is required"; } else if (!/\S+@\S+\.\S+/.test(formData.email)) { errors.email = "Email is invalid"; } if (!formData.message.trim()) errors.message = "Message is required"; return errors; }; const handleSubmit = async (e)=>{ e.preventDefault(); const errors = validateForm(); setFormErrors(errors); if (Object.keys(errors).length === 0) { setIsSubmitting(true); setSubmitError(""); try { // Directly open email client with form data const mailtoLink = `mailto:info@zebranet.co.bw?subject=${encodeURIComponent(formData.subject || "Website Inquiry")}&body=${encodeURIComponent(`Name: ${formData.name}\nEmail: ${formData.email}\nPhone: ${formData.phone || "Not provided"}\n\nMessage:\n${formData.message}`)}`; // Create and click a hidden link to open the email client const link = document.createElement("a"); link.href = mailtoLink; document.body.appendChild(link); link.click(); document.body.removeChild(link); // Simulate form submission await new Promise((resolve)=>setTimeout(resolve, 1500)); setSubmitSuccess(true); setFormData({ name: "", email: "", phone: "", subject: "", message: "" }); } catch (error) { console.error("Form submission error:", error); setSubmitError("There was a problem submitting your form. Please try again."); } finally{ setIsSubmitting(false); } } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen font-poppins", __source: { fileName: "", lineNumber: 123, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css", integrity: "sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==", crossOrigin: "anonymous", referrerPolicy: "no-referrer", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 py-2 fixed w-full z-20", __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone-alt mr-2", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }), "+267 395 9000")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://web.facebook.com/ZebraNet20/", className: "text-gray-600 hover:text-[#0B3D91]", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.instagram.com/zebranet20", className: "text-gray-600 hover:text-[#0B3D91]", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md fixed w-full z-10 top-[40px]", __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-3 flex justify-between items-center", __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/68fbc4da-c907-477a-a615-85017e8d5835/-/format/auto/-/quality/lightest/", alt: "ZebraNet Logo", className: "h-16", loading: "eager", width: "160", height: "64", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-6", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-gray-700 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-gray-700 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-gray-700 hover:text-[#0B3D91] flex items-center", onClick: toggleServicesDropdown, __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, "Services", /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down ml-1 text-xs", __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this })), servicesDropdownOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 mt-2 w-56 bg-white shadow-lg rounded-lg py-2 z-20", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/services", className: "block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 190, columnNumber: 19 }, __self: this }, "All Services"), /*#__PURE__*/ React.createElement("a", { href: "/services#ftth", className: "block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 196, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 200, columnNumber: 21 }, __self: this }), "Fiber to the Home"), /*#__PURE__*/ React.createElement("a", { href: "/services#fttb", className: "block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-building mr-2", __source: { fileName: "", lineNumber: 206, columnNumber: 21 }, __self: this }), "Fiber to the Business"), /*#__PURE__*/ React.createElement("a", { href: "/services#support", className: "block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-headset mr-2", __source: { fileName: "", lineNumber: 213, columnNumber: 21 }, __self: this }), "IT Support"), /*#__PURE__*/ React.createElement("a", { href: "/services#products", className: "block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-box mr-2", __source: { fileName: "", lineNumber: 219, columnNumber: 21 }, __self: this }), "Products"))), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-[#0B3D91] font-semibold", __source: { fileName: "", lineNumber: 224, columnNumber: 13 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-gray-700", onClick: toggleMenu, __source: { fileName: "", lineNumber: 229, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"} text-xl`, __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden bg-white py-2 px-4", __source: { fileName: "", lineNumber: 237, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block py-2 text-gray-700 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "block py-2 text-gray-700 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex justify-between items-center w-full py-2 text-gray-700 hover:text-[#0B3D91]", onClick: toggleServicesDropdown, __source: { fileName: "", lineNumber: 251, columnNumber: 15 }, __self: this }, "Services", /*#__PURE__*/ React.createElement("i", { className: `fas ${servicesDropdownOpen ? "fa-chevron-up" : "fa-chevron-down"} text-xs`, __source: { fileName: "", lineNumber: 256, columnNumber: 17 }, __self: this })), servicesDropdownOpen && /*#__PURE__*/ React.createElement("div", { className: "pl-4 py-2", __source: { fileName: "", lineNumber: 261, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/services", className: "block py-2 text-gray-700 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 262, columnNumber: 19 }, __self: this }, "All Services"), /*#__PURE__*/ React.createElement("a", { href: "/services#ftth", className: "block py-2 text-gray-700 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 268, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-2", __source: { fileName: "", lineNumber: 272, columnNumber: 21 }, __self: this }), "Fiber to the Home"), /*#__PURE__*/ React.createElement("a", { href: "/services#fttb", className: "block py-2 text-gray-700 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 274, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-building mr-2", __source: { fileName: "", lineNumber: 278, columnNumber: 21 }, __self: this }), "Fiber to the Business"), /*#__PURE__*/ React.createElement("a", { href: "/services#support", className: "block py-2 text-gray-700 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 281, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-headset mr-2", __source: { fileName: "", lineNumber: 285, columnNumber: 21 }, __self: this }), "IT Support"), /*#__PURE__*/ React.createElement("a", { href: "/services#products", className: "block py-2 text-gray-700 hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 287, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-box mr-2", __source: { fileName: "", lineNumber: 291, columnNumber: 21 }, __self: this }), "Products"))), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "block py-2 text-[#0B3D91] font-semibold", __source: { fileName: "", lineNumber: 296, columnNumber: 13 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("section", { className: "pt-40 pb-12 md:pt-48 md:pb-16 bg-gradient-to-r from-[#0B3D91] to-[#0077CC] text-white", __source: { fileName: "", lineNumber: 306, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 text-center", __source: { fileName: "", lineNumber: 307, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold mb-4", __source: { fileName: "", lineNumber: 308, columnNumber: 11 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("p", { className: "text-xl max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 309, columnNumber: 11 }, __self: this }, "Get in touch with our team for inquiries, support, or to learn more about our services."))), /*#__PURE__*/ React.createElement("section", { className: "py-16 bg-white", __source: { fileName: "", lineNumber: 316, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 317, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2 mb-10 md:mb-0 md:pr-8", __source: { fileName: "", lineNumber: 319, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-6 text-gray-800", __source: { fileName: "", lineNumber: 320, columnNumber: 15 }, __self: this }, "Get In Touch"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-8", __source: { fileName: "", lineNumber: 323, columnNumber: 15 }, __self: this }, "We'd love to hear from you. Please fill out the form or use the contact information provided to reach out to our team."), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-6 rounded-lg shadow-sm mb-8", __source: { fileName: "", lineNumber: 328, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4 text-gray-800", __source: { fileName: "", lineNumber: 329, columnNumber: 17 }, __self: this }, "Contact Methods"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 332, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2 flex items-center", __source: { fileName: "", lineNumber: 333, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope text-[#0B3D91] mr-3 w-6 text-center", __source: { fileName: "", lineNumber: 334, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "mailto:info@zebranet.co.bw", className: "hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 335, columnNumber: 21 }, __self: this }, "info@zebranet.co.bw")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-2 flex items-center", __source: { fileName: "", lineNumber: 342, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone-alt text-[#0B3D91] mr-3 w-6 text-center", __source: { fileName: "", lineNumber: 343, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "tel:+2673959000", className: "hover:text-[#0B3D91]", __source: { fileName: "", lineNumber: 344, columnNumber: 21 }, __self: this }, "+267 395 9000")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 flex items-start", __source: { fileName: "", lineNumber: 348, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-[#0B3D91] mr-3 w-6 text-center mt-1", __source: { fileName: "", lineNumber: 349, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 350, columnNumber: 21 }, __self: this }, "Plot 75783, Unit 5, Ist Floor", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 352, columnNumber: 23 }, __self: this }), "Setlhoa Office Park, Block 10", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 354, columnNumber: 23 }, __self: this }), "Gaborone, Botswana")))), /*#__PURE__*/ React.createElement("div", { className: "rounded-lg overflow-hidden h-64 mb-8", __source: { fileName: "", lineNumber: 361, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d232169.760131817!2d25.645642386718738!3d-24.6011861!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ebb4542a47224a1%3A0xeb08a7408720c62e!2sSetlhoa%20Office%20Park!5e0!3m2!1sen!2sbw!4v1755044189053!5m2!1sen!2sbw", width: "100%", height: "100%", style: { border: 0 }, allowFullScreen: "", loading: "lazy", referrerPolicy: "no-referrer-when-downgrade", title: "ZebraNet Office Location", __source: { fileName: "", lineNumber: 362, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2 md:pl-8", __source: { fileName: "", lineNumber: 375, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-8 mb-8", __source: { fileName: "", lineNumber: 376, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-6 text-gray-800", __source: { fileName: "", lineNumber: 377, columnNumber: 17 }, __self: this }, "Send Us a Message"), submitSuccess ? /*#__PURE__*/ React.createElement("div", { className: "bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 382, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 383, columnNumber: 21 }, __self: this }, "Thank you for your message! We'll get back to you soon.")) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 388, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 389, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 390, columnNumber: 23 }, __self: this }, "Name *"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", value: formData.name, onChange: handleChange, className: `w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0B3D91] ${formErrors.name ? "border-red-500" : "border-gray-300"}`, __source: { fileName: "", lineNumber: 396, columnNumber: 23 }, __self: this }), formErrors.name && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 407, columnNumber: 25 }, __self: this }, formErrors.name)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 413, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 414, columnNumber: 23 }, __self: this }, "Email *"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", value: formData.email, onChange: handleChange, className: `w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0B3D91] ${formErrors.email ? "border-red-500" : "border-gray-300"}`, __source: { fileName: "", lineNumber: 420, columnNumber: 23 }, __self: this }), formErrors.email && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 433, columnNumber: 25 }, __self: this }, formErrors.email)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 439, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phone", className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 440, columnNumber: 23 }, __self: this }, "Phone"), /*#__PURE__*/ React.createElement("input", { type: "tel", id: "phone", name: "phone", value: formData.phone, onChange: handleChange, className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0B3D91]", __source: { fileName: "", lineNumber: 446, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 456, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "subject", className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 457, columnNumber: 23 }, __self: this }, "Subject"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "subject", name: "subject", value: formData.subject, onChange: handleChange, className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0B3D91]", __source: { fileName: "", lineNumber: 463, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 473, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 474, columnNumber: 23 }, __self: this }, "Message *"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", value: formData.message, onChange: handleChange, rows: "5", className: `w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0B3D91] ${formErrors.message ? "border-red-500" : "border-gray-300"}`, __source: { fileName: "", lineNumber: 480, columnNumber: 23 }, __self: this }), formErrors.message && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 493, columnNumber: 25 }, __self: this }, formErrors.message)), submitError && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 500, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 501, columnNumber: 25 }, __self: this }, submitError)), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmitting, className: "bg-[#0B3D91] text-white font-bold py-3 px-6 rounded-lg hover:bg-[#0077CC] transition-colors w-full md:w-auto disabled:opacity-70", __source: { fileName: "", lineNumber: 505, columnNumber: 21 }, __self: this }, isSubmitting ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 511, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 512, columnNumber: 27 }, __self: this }), " ", "Sending...") : "Send Message"))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white py-12", __source: { fileName: "", lineNumber: 527, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 528, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 529, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 530, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 531, columnNumber: 15 }, __self: this }, "ZebraNet"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 532, columnNumber: 15 }, __self: this }, "Connecting Botswana to the future.")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 537, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold mb-4", __source: { fileName: "", lineNumber: 538, columnNumber: 15 }, __self: this }, "Quick Links"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 539, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 540, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 541, columnNumber: 19 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 545, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/services", className: "text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 546, columnNumber: 19 }, __self: this }, "Services")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 553, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 554, columnNumber: 19 }, __self: this }, "About Us")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 558, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 559, columnNumber: 19 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 566, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold mb-4", __source: { fileName: "", lineNumber: 567, columnNumber: 15 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("address", { className: "text-gray-400 not-italic", __source: { fileName: "", lineNumber: 568, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 569, columnNumber: 17 }, __self: this }, "Plot 75783, Unit 5, Ist Floor"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 570, columnNumber: 17 }, __self: this }, "Setlhoa Office Park, Block 10"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 571, columnNumber: 17 }, __self: this }, "Gaborone, Botswana"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 572, columnNumber: 17 }, __self: this }, "+267 395 9000"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 573, columnNumber: 17 }, __self: this }, "info@zebranet.co.bw"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 577, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold mb-4", __source: { fileName: "", lineNumber: 578, columnNumber: 15 }, __self: this }, "Follow Us"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 579, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://web.facebook.com/ZebraNet20/", className: "text-gray-400 hover:text-white text-xl", target: "_blank", rel: "noopener noreferrer", "aria-label": "Facebook", __source: { fileName: "", lineNumber: 580, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook", __source: { fileName: "", lineNumber: 587, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.instagram.com/zebranet20", className: "text-gray-400 hover:text-white text-xl", target: "_blank", rel: "noopener noreferrer", "aria-label": "Instagram", __source: { fileName: "", lineNumber: 589, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 596, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-700 mt-8 pt-8 text-center text-gray-400", __source: { fileName: "", lineNumber: 602, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 603, columnNumber: 13 }, __self: this }, "© 2025 ZebraNet. All rights reserved."))))); }