Contact Us

Whether you need support, want to partner with us, or just want to learn more, we're here. We respond within 24 hours.

{/* Main content */}

{/* Left — contact details */}

Reach us directly

Our team is based in Chitungwiza, Zimbabwe, with programme staff across Southern and East Africa.

{details.map(({ label, value, href, icon }) => ( {icon}

{label}

{href ? ( {value} ) : (

{value}

)}

))}

{/* Social media */}

{socials.map(({ label, href, icon }) => ( {icon} {label} ))}

{/* Right — contact form */}

Send us a message

We respond within 24 hours.

{wasSuccessful && (

Message sent! We'll get back to you within 24 hours.

)}

Your Name * setData("name", e.target.value)} placeholder="e.g. Tatenda Moyo" className="w-full rounded-xl border border-border bg-surface px-4 py-3 text-sm text-body placeholder:text-muted focus:border-amber focus:outline-none focus:ring-2 focus:ring-amber/20" /> {errors.name &&

{errors.name}

}

Your Email * setData("email", e.target.value)} placeholder="you@example.com" className="w-full rounded-xl border border-border bg-surface px-4 py-3 text-sm text-body placeholder:text-muted focus:border-amber focus:outline-none focus:ring-2 focus:ring-amber/20" /> {errors.email &&

{errors.email}

}

Message *

setData("message", e.target.value)}
                      placeholder="How can we help you?"
                      className="w-full resize-none rounded-xl border border-border bg-surface px-4 py-3 text-sm text-body placeholder:text-muted focus:border-amber focus:outline-none focus:ring-2 focus:ring-amber/20"
                    />
                    {errors.message && <p className="mt-1 text-xs text-red-600">{errors.message}</p>}
                  </div>

<button
                    type="submit"
                    disabled={processing}
                    className="rounded-xl bg-amber px-8 py-3.5 text-sm font-bold text-white transition-opacity hover:opacity-90 disabled:opacity-60"
                  >
                    {processing ? "Sending…" : "Send Message →"}
                  </button>
                </form>
              </div>
            </motion.div>
          </div>

{/* Full-width map */}
          <motion.div
            variants={fadeUp}
            initial="hidden"
            whileInView="visible"
            viewport={viewportOptions}
            className="mt-16 overflow-hidden rounded-2xl border border-border shadow-sm"
          >
            <iframe
              title="Youth Advocates location"
              src="https://maps.google.com/maps?q=-17.992336,31.073946&z=17&hl=en&gl=ZW&output=embed"
              width="100%"
              height="480"
              style={{ border: 0, display: "block" }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </motion.div>
        </div>
      </main>

<Footer />
    </>
  );
}