import { createFileRoute } from "@tanstack/react-router";
import founder from "@/assets/founder.jpg";
import chairmanImg from "@/assets/people/chairman.jpg";
import ceoImg from "@/assets/people/ceo.jpg";
import ambassadorImg from "@/assets/people/ambassador.jpg";
import commercialImg from "@/assets/people/commercial-director.jpg";
import managingImg from "@/assets/people/managing-director.jpg";
import residentImg from "@/assets/people/resident-director.jpg";
import hrImg from "@/assets/people/hr-manager.jpg";
import legalImg from "@/assets/people/legal-manager.jpg";
import ictImg from "@/assets/people/ict-manager.jpg";
import logisticsImg from "@/assets/people/logistics-manager.jpg";
import auditImg from "@/assets/people/audit-manager.jpg";
import bizDevImg from "@/assets/people/business-development-manager.jpg";

export const Route = createFileRoute("/leadership")({
  head: () => ({
    meta: [
      { title: "Leadership — Vigor Group of Companies" },
      { name: "description", content: "The leaders guiding Vigor Group of Companies across sectors — from the founder to today's executive team." },
      { property: "og:title", content: "Leadership — Vigor Group of Companies" },
      { property: "og:description", content: "Meet the leadership of Vigor Group of Companies." },
    ],
  }),
  component: Leadership,
});

const board = [
  { name: "Late Salim Turky", role: "Founder", img: founder, bio: "Visionary entrepreneur whose leadership built a diverse business empire dedicated to growth and community." },
  { name: "Taufiq Salim Turky", role: "Chairman", img: chairmanImg, bio: "Provides strategic leadership and governance, guiding the group's vision, growth and long-term success." },
  { name: "Abdallah Salim Turky", role: "Chief Executive Officer", img: ceoImg, bio: "Leads overall operations and strategic execution, driving business growth, performance and innovation." },
  { name: "Khaytham Salim Turky", role: "Ambassador", img: ambassadorImg, bio: "Represents and promotes the group's vision, values and partnerships locally and internationally." },
];

const directors = [
  { name: "Zahra Mkhtar", role: "Commercial Director", img: commercialImg },
  { name: "Martin", role: "Managing Director", img: managingImg },
  { name: "Oloo Dickson", role: "Resident Director, China", img: residentImg },
];

const heads = [
  { name: "Bushiri Mosi", role: "HR Manager", img: hrImg },
  { name: "Sins Mwangi", role: "Legal Manager", img: legalImg },
  { name: "Iddi Said", role: "ICT Manager", img: ictImg },
  { name: "Azhad Hassan", role: "Logistics Manager", img: logisticsImg },
  { name: "Kelvin Danson", role: "Internal Audit Manager", img: auditImg },
  { name: "Juma Mnaro", role: "Business Development Manager", img: bizDevImg },
];

type Person = { name: string; role: string; img: string; bio?: string };

function PersonCard({ p, compact = false }: { p: Person; compact?: boolean }) {
  return (
    <article className="h-full flex flex-col border border-border bg-background hover:shadow-lg transition-shadow">
      <div className={`w-full ${compact ? "aspect-[4/5]" : "aspect-[4/5]"} overflow-hidden bg-secondary`}>
        <img
          src={p.img}
          alt={`${p.name}, ${p.role}`}
          loading="lazy"
          width={768}
          height={960}
          className="w-full h-full object-cover object-top"
        />
      </div>
      <div className={compact ? "p-5" : "p-6"}>
        <p className="text-xs text-primary uppercase tracking-[0.18em] font-semibold">{p.role}</p>
        <h3 className={`mt-2 ${compact ? "text-lg" : "text-xl md:text-2xl"}`}>{p.name}</h3>
        {p.bio && (
          <p className="mt-3 text-sm text-muted-foreground leading-relaxed">{p.bio}</p>
        )}
      </div>
    </article>
  );
}

function Leadership() {
  return (
    <>
      <section className="container-x pt-16 md:pt-20 pb-12 border-b border-border">
        <p className="eyebrow">Leadership</p>
        <h1 className="mt-6 text-5xl md:text-7xl max-w-4xl leading-[1]">
          The people <span className="italic text-primary">guiding</span> the group.
        </h1>
      </section>

      <section className="container-x py-16 md:py-20">
        <h2 className="text-3xl md:text-4xl mb-12">Board & Executive</h2>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {board.map((p) => (
            <PersonCard key={p.name} p={p} />
          ))}
        </div>
      </section>

      <section className="bg-secondary/50 border-y border-border">
        <div className="container-x py-16 md:py-20">
          <h2 className="text-3xl md:text-4xl mb-12">Directors</h2>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {directors.map((p) => (
              <PersonCard key={p.name} p={p} />
            ))}
          </div>
        </div>
      </section>

      <section className="container-x py-16 md:py-20">
        <h2 className="text-3xl md:text-4xl mb-12">Heads of Departments</h2>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {heads.map((p) => (
            <PersonCard key={p.name} p={p} compact />
          ))}
        </div>
      </section>
    </>
  );
}
