ipv6-sims/app/components/home/KeyInviteesSection.tsx

"use client";

type KeyInviteeItem = {
  no: number;
  name: string;
  designation: string;
  organization: string;
  category: string;
  country: string;
};

type Props = {
  data: {
    id: string;
    eyebrow: string;
    title: string;
    items: KeyInviteeItem[];
  };
};

const getFlagUrl = (country: string) => {
  const mapping: Record<string, string> = {
    Vietnam: "vn",
    Malaysia: "my",
    Indonesia: "id",
    Laos: "la",
    China: "cn",
    Japan: "jp",
  };
  const code = mapping[country];
  return code ? `https://flagcdn.com/w40/${code}.png` : null;
};

const CountryFlag = ({ country }: { country: string }) => {
  const url = getFlagUrl(country);
  if (url) {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        src={url}
        alt={country}
        className="w-5 h-3.5 object-cover rounded-sm shadow-sm border border-primary/20"
      />
    );
  }

  // Beautiful gold region globe SVG for APAC
  if (country === "APAC") {
    return (
      <svg className="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <circle cx="12" cy="12" r="10" />
        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
        <path d="M2 12h20" />
      </svg>
    );
  }

  // Global fallback SVG
  return (
    <svg className="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
      <circle cx="12" cy="12" r="10" />
      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
      <path d="M2 12h20" />
      <path d="M12 2v20" />
    </svg>
  );
};

export default function KeyInviteesSection({ data }: Props) {
  return (
    <section className="py-16 lg:py-24 max-w-hd mx-auto px-[var(--spacing-gutter)]" id={data.id}>
      {/* Section Header */}
      <div className="mb-12 lg:mb-20 text-center max-w-3xl mx-auto">
        <span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary block mb-3 lg:mb-4 tracking-[0.25em] uppercase">
          {data.eyebrow}
        </span>
        <h2 className="font-[var(--font-display-lg)] text-on-surface uppercase tracking-tight text-[clamp(1.75rem,3vw+1rem,3.5rem)] mb-4">
          {data.title}
        </h2>
        <div className="h-[2px] w-24 bg-primary/50 mx-auto rounded-full" />
      </div>

      {/* Cards Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
        {data.items.map((item) => (
          <div
            key={item.no}
            className="glass-panel p-6 lg:p-8 rounded-[2rem] relative overflow-hidden group hover:border-primary/60 transition-all duration-300 flex flex-col justify-between hover:scale-[1.02] hover:shadow-2xl hover:shadow-primary/5"
          >
            {/* Background glowing gradient decoration */}
            <div className="absolute inset-0 bg-radial-gradient from-primary/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />

            {/* Top Row: No & Category Badge */}
            <div className="flex justify-between items-center mb-6 relative z-10">
              <span className="font-[var(--font-display-lg)] text-xl lg:text-[24px] text-primary/30 group-hover:text-primary transition-colors duration-300">
                #{String(item.no).padStart(2, "0")}
              </span>
              <span className="px-3 py-1 text-[10px] font-bold tracking-wider rounded-full border border-primary/20 bg-primary/5 text-primary/80 uppercase">
                {item.category}
              </span>
            </div>

            {/* Middle: Invitee Name & Title */}
            <div className="mb-6 relative z-10 flex-grow">
              <h3 className="font-[var(--font-display-lg)] text-lg lg:text-[22px] text-on-surface group-hover:text-primary transition-colors duration-300 mb-2 leading-snug">
                {item.name}
              </h3>
              <p className="text-sm text-on-surface-variant/80 italic mb-2 min-h-[40px] leading-relaxed">
                {item.designation}
              </p>
              <p className="font-[var(--font-label-caps)] text-[11px] lg:text-xs text-primary/95 tracking-widest uppercase leading-normal">
                {item.organization}
              </p>
            </div>

            {/* Bottom Row: Country Info */}
            <div className="border-t border-primary/10 pt-4 mt-auto relative z-10 flex justify-between items-center">
              <div className="flex items-center gap-2 text-xs text-on-surface-variant/60 uppercase tracking-widest">
                <CountryFlag country={item.country} />
                <span>{item.country}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}