import { createFileRoute } from "@tanstack/react-router";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { PageHero } from "@/components/PageHero";
import heroBg from "@/assets/gallery-volunteers-2.jpg";
import { ArrowRight, HandHeart, Clock, Globe } from "lucide-react";
import volunteerImg from "@/assets/volunteer-hero.jpg";

export const Route = createFileRoute("/volunteer")({
  head: () => ({
    meta: [
      { title: "Volunteer with DSAG" },
      { name: "description", content: "Join the Down Syndrome Association of Ghana as a volunteer and help build a more inclusive Ghana." },
      { property: "og:title", content: "Volunteer with DSAG" },
      { property: "og:image", content: volunteerImg },
    ],
  }),
  component: VolunteerPage,
});

function VolunteerPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <PageHero eyebrow="Volunteer" title="Lend your time. Change a life." subtitle="Become part of the DSAG family — your skills, time and energy power our mission." bgImage={heroBg} />

        <section className="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-2 gap-12 items-center">
          <img src={volunteerImg} alt="DSAG volunteers" loading="lazy" className="rounded-2xl shadow-card w-full object-cover" />
          <div>
            <h2 className="font-display font-bold text-3xl md:text-4xl">Why volunteer with us?</h2>
            <ul className="mt-6 space-y-5">
              {[
                { icon: HandHeart, t: "Hands-on impact", d: "Work directly with families, children and advocacy programmes." },
                { icon: Clock, t: "Flexible commitment", d: "From event days to long-term programme leads — find your fit." },
                { icon: Globe, t: "Be part of something bigger", d: "Join a national movement creating real, lasting inclusion." },
              ].map((b) => (
                <li key={b.t} className="flex gap-4">
                  <div className="h-11 w-11 rounded-xl bg-primary text-primary-foreground flex items-center justify-center shrink-0">
                    <b.icon className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="font-display font-bold">{b.t}</div>
                    <div className="text-sm text-muted-foreground mt-1">{b.d}</div>
                  </div>
                </li>
              ))}
            </ul>
            <a
              href="https://docs.google.com/forms/d/e/1FAIpQLSdBMNJ8013ip9Ff_sW-_Zn8H39_MRAHBvgoh6unhZhgNMO1Cg/viewform"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 mt-8 rounded-full bg-accent text-accent-foreground font-semibold px-7 py-3.5 hover:scale-[1.03] transition"
            >
              Apply to volunteer <ArrowRight className="h-5 w-5" />
            </a>
          </div>
        </section>
      </main>
      <SiteFooter />
    </div>
  );
}
