import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, ExternalLink, GraduationCap, HeartPulse, Users, Sprout, HandHeart, Building2 } from "lucide-react";
import people from "@/assets/story-people.jpg";
import founder from "@/assets/founder.jpg";
import { Reveal } from "@/components/site/Reveal";

export const Route = createFileRoute("/foundation")({
  head: () => ({
    meta: [
      { title: "Salim Turky Foundation — Vigor Group of Companies" },
      {
        name: "description",
        content:
          "The Salim Turky Foundation invests in education, healthcare, community empowerment and youth development to improve lives throughout Tanzania.",
      },
      { property: "og:title", content: "Salim Turky Foundation — Vigor Group of Companies" },
      {
        property: "og:description",
        content: "Education, healthcare, youth development and community empowerment across Tanzania.",
      },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "/foundation" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
    links: [{ rel: "canonical", href: "/foundation" }],
  }),
  component: Foundation,
});

const FOUNDATION_URL = "https://www.instagram.com/salimturkyfoundation/?hl=en";

const pillars = [
  {
    Icon: GraduationCap,
    k: "Education",
    v: "Scholarships, school support and learning materials that keep Tanzanian children in classrooms and open doors that would otherwise stay closed.",
  },
  {
    Icon: HeartPulse,
    k: "Healthcare",
    v: "Medical camps, subsidised treatment and support through the group's hospital network, so quality care reaches families who need it most.",
  },
  {
    Icon: Users,
    k: "Community Empowerment",
    v: "Practical support for local initiatives — from small enterprise to neighbourhood infrastructure — designed with the communities they serve.",
  },
  {
    Icon: Sprout,
    k: "Youth Development",
    v: "Skills training, mentorship, sport and internships that prepare young Tanzanians for real opportunity in a growing economy.",
  },
  {
    Icon: HandHeart,
    k: "Social Responsibility",
    v: "Emergency relief, food support and welfare programmes delivered quietly and consistently, in the spirit of our founder.",
  },
  {
    Icon: Building2,
    k: "Improving Lives Nationwide",
    v: "Work that reaches beyond Zanzibar into mainland Tanzania, guided by one measure: are people genuinely better off?",
  },
];

function Foundation() {
  return (
    <>
      <section className="container-x pt-16 md:pt-20 pb-12 border-b border-border">
        <p className="eyebrow">Salim Turky Foundation</p>
        <h1 className="mt-6 text-5xl md:text-7xl max-w-4xl leading-[1.02]">
          Giving Back Is Part of the <span className="italic text-crimson">Business</span>.
        </h1>
        <p className="mt-8 max-w-2xl text-lg text-ink-soft leading-relaxed">
          The Salim Turky Foundation carries our founder's belief that a business is only
          as successful as the community around it. It invests in education, healthcare,
          youth and community empowerment to improve lives throughout Tanzania.
        </p>
        <div className="mt-10">
          <a href={FOUNDATION_URL} target="_blank" rel="noreferrer" className="btn-accent">
            Visit Salim Turky Foundation <ExternalLink size={16} />
          </a>
        </div>
      </section>

      <section className="container-x py-16 md:py-20 grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
        <Reveal className="lg:col-span-5">
          <img
            src={founder}
            alt="The late Salim Turky, founder of Vigor Group of Companies"
            loading="lazy"
            className="w-full aspect-4/5 object-cover"
          />
        </Reveal>
        <Reveal delay={100} className="lg:col-span-7">
          <p className="eyebrow">Our founder's legacy</p>
          <h2 className="mt-4 text-4xl md:text-5xl leading-tight">
            A foundation built on a lifetime of quiet generosity.
          </h2>
          <p className="mt-6 text-lg text-ink-soft leading-relaxed">
            Long before it carried his name, Salim Turky's giving was personal — school
            fees paid, treatment covered, families supported without announcement. The
            Foundation formalises that instinct so it can continue at scale, funded by
            the group he built and run with the same standards of care and accountability.
          </p>
          <p className="mt-5 text-lg text-ink-soft leading-relaxed">
            Every programme is designed with local partners, measured by real outcomes,
            and delivered where the need is greatest.
          </p>
        </Reveal>
      </section>

      <section className="bg-secondary/60 border-y border-border">
        <div className="container-x py-16 md:py-20">
          <div className="max-w-2xl">
            <p className="eyebrow">What we support</p>
            <h2 className="mt-4 text-4xl md:text-5xl leading-tight">Where the Foundation works.</h2>
          </div>
          <div className="mt-14 grid md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-14">
            {pillars.map((p, i) => (
              <Reveal key={p.k} delay={i * 70}>
                <div className="border-t-2 border-crimson pt-6">
                  <p.Icon size={28} strokeWidth={1.4} className="text-crimson" />
                  <h3 className="mt-5 text-2xl">{p.k}</h3>
                  <p className="mt-3 text-muted-foreground leading-relaxed">{p.v}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="relative">
        <div className="relative min-h-[440px] h-[58vh]">
          <img
            src={people}
            alt="Communities supported by the Salim Turky Foundation"
            loading="lazy"
            className="absolute inset-0 w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-navy-deep/75" />
          <div className="relative container-x h-full flex items-center text-white">
            <div className="max-w-2xl">
              <p className="eyebrow text-white/70">Get involved</p>
              <h2 className="mt-4 text-4xl md:text-5xl leading-tight">
                Follow the work. Support the <span className="italic">mission</span>.
              </h2>
              <p className="mt-6 text-white/75 leading-relaxed">
                See the Foundation's latest programmes, community visits and partnerships,
                or reach out to work with us on an initiative in your community.
              </p>
              <div className="mt-8 flex flex-wrap gap-3">
                <a href={FOUNDATION_URL} target="_blank" rel="noreferrer" className="btn-accent">
                  Visit Salim Turky Foundation <ExternalLink size={16} />
                </a>
                <Link to="/contact" className="btn-outline-light">
                  Partner with us <ArrowRight size={16} />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
