import React from "react";
import Image, { StaticImageData } from "next/image";

interface OfficerCardProps {
  imagePath: string | StaticImageData;
  name: string;
  position: string;
  linkedIn: string;
}

function OfficerCard({ imagePath, name, position, linkedIn }: OfficerCardProps) {
  return (
    <a href={linkedIn} target="_blank" rel="noopener noreferrer" className="relative w-full rounded-3xl overflow-hidden bg-white shadow-lg group cursor-pointer select-none border-2 border-white transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl active:scale-95 block">
      {/* Image with zoom on hover */}
      <div className="relative w-full h-[320px] overflow-hidden">
        <Image
          src={imagePath}
          alt={name}
          fill
          className="object-cover object-top transition-transform duration-500 group-hover:scale-105"
          sizes="(max-width: 768px) 100vw, 33vw"
        />
        {/* Gradient overlay that fades in on hover */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
      </div>

      {/* Info bar */}
      <div
        className="absolute bottom-4 left-3 right-3 flex items-center justify-between gap-2 rounded-2xl px-4 py-3 transition-all duration-300 group-hover:bottom-5"
        style={{
          background: "rgba(100, 100, 100, 0.55)",
          backdropFilter: "blur(12px)",
          WebkitBackdropFilter: "blur(12px)",
          border: "2px solid rgba(150,150,150,0.6)",
        }}
      >
        <div className="flex flex-col min-w-0">
          <span className="text-white font-semibold text-sm leading-tight truncate">
            {name}
          </span>
          <span className="text-white/75 text-xs leading-tight truncate">
            {position}
          </span>
        </div>

        <div
          className="shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:bg-[#0077B5]"
          style={{
            background: "rgba(100, 100, 100, 0.6)",
            border: "2px solid rgba(150,150,150,0.6)",
          }}
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
          >
            <path
              d="M3 13L13 3M13 3H6M13 3V10"
              stroke="white"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </div>
      </div>
    </a>
  );
}

interface Officer {
  imagePath: string | StaticImageData;
  name: string;
  position: string;
  linkedIn: string;
}

interface OfficersSectionProps {
  officers: Officer[];
}

export default function OfficersSection({ officers }: OfficersSectionProps) {
  return (
    <section className="w-full bg-[#f0f0f0] py-16 px-6">
      {/* Header */}
      <div className="flex flex-col items-center mb-10">
        <div className="border border-[#292929] rounded-full px-6 py-2 w-max mb-5">
          <span className="italic tracking-wide text-sm text-[#292929]">
            Founding Officers
          </span>
        </div>

        <h2 className="font-orbitron font-black text-3xl md:text-4xl text-[#1a1a1a] uppercase text-center tracking-tight mb-3">
          Officers &amp; Board of Trustees
        </h2>

        <p className="text-gray-500 text-sm text-center">
          The individuals driving the Philippines' digital infrastructure
          forward
        </p>
      </div>

      <div className="w-full grid grid-cols-1 lg:grid-cols-3 gap-8 justify-items-center max-w-sm lg:max-w-6xl mx-auto">
        {officers.map((officer, index) => (
          <div key={index} className="w-full max-w-[300px]">
            <OfficerCard
              imagePath={officer.imagePath}
              name={officer.name}
              position={officer.position}
              linkedIn={officer.linkedIn}
            />
          </div>
        ))}
      </div>
    </section>
  );
}