import Image from "next/image";
import { getServerT, getServerLocale } from "@/lib/i18n/server";

interface LeadershipSectionProps {
  locale: string;
}

const leaderPhotos = [
  "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&q=80",
  "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80",
  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&q=80",
  "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=600&q=80",
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&q=80",
  "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=600&q=80",
  "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=600&q=80",
  "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=600&q=80",
];

function LeaderSocials() {
  return (
    <div className="socials">
      <a href="#">
        <svg viewBox="0 0 24 24"><path d="M4 4l16 16M20 4L4 20" /></svg>
      </a>
      <a href="#">
        <svg viewBox="0 0 24 24">
          <rect x="3" y="3" width="18" height="18" rx="5" />
          <circle cx="12" cy="12" r="4" />
          <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" />
        </svg>
      </a>
      <a href="#">
        <svg viewBox="0 0 24 24">
          <rect x="3" y="5" width="18" height="14" rx="2" />
          <path d="M3 7l9 7 9-7" />
        </svg>
      </a>
    </div>
  );
}

export async function LeadershipSection({ locale }: LeadershipSectionProps) {
  const t = await getServerT(locale, "about.leadership");

  const leaders = [
    { role: t("l1_role"), name: t("l1_name"), bio: t("l1_bio") },
    { role: t("l2_role"), name: t("l2_name"), bio: t("l2_bio") },
    { role: t("l3_role"), name: t("l3_name"), bio: t("l3_bio") },
    { role: t("l4_role"), name: t("l4_name"), bio: t("l4_bio") },
    { role: t("l5_role"), name: t("l5_name"), bio: t("l5_bio") },
    { role: t("l6_role"), name: t("l6_name"), bio: t("l6_bio") },
    { role: t("l7_role"), name: t("l7_name"), bio: t("l7_bio") },
    { role: t("l8_role"), name: t("l8_name"), bio: t("l8_bio") },
  ];

  return (
    <section className="wrap about-sec">
      <div className="about-head">
        <div>
          <div className="kicker">{t("kicker")}</div>
          <h2>{t("heading")}</h2>
        </div>
        <div className="right">
          <p>{t("right")}</p>
        </div>
      </div>
      <div className="leadership-grid">
        {leaders.map((leader, i) => (
          <article key={i} className="leader">
            <div className="photo">
              <Image
                src={leaderPhotos[i]}
                alt={leader.name}
                fill
                unoptimized
              />
              <span className="role">{leader.role}</span>
            </div>
            <div className="info">
              <h3>{leader.name}</h3>
              <p>{leader.bio}</p>
              <LeaderSocials />
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}