import Image from "next/image";
import Link from "next/link";
import type { Person } from "@/content/people";
import { ScrollReveal } from "@/components/motion/ScrollReveal";
type Props = {
  speaker: Person;
  className?: string;
  revealDelay?: number;
};

export function SpeakerCard({ speaker, className, revealDelay = 0 }: Props) {
  return (
    <ScrollReveal variant="card" delay={revealDelay} as="div" className={className}>
    <Link
      href="/speakers"
      className="topo-card-surface topo-card-layer group relative z-20 isolate block overflow-hidden rounded-2xl border border-border bg-white p-4 text-[#1a5c38] shadow-sm transition-all hover:border-[#1a5c38]/25 hover:shadow-md"
    >
      <div className="relative mx-auto aspect-[4/5] w-full max-h-[220px] overflow-hidden rounded-xl bg-muted/30">
        <Image
          src={speaker.image}
          alt={speaker.name}
          fill
          className="object-contain object-bottom transition-transform duration-300 group-hover:scale-[1.02]"
          sizes="(max-width: 768px) 50vw, 25vw"
        />
      </div>
      <h3 className="mt-4 text-lg font-bold leading-tight text-[#0d3d26] group-hover:text-[#1a5c38]">
        {speaker.name}
      </h3>
      <p className="mt-1 text-sm text-[#3d5248]">{speaker.title}</p>
      <p className="mt-0.5 text-sm font-medium text-[#1a5c38]/90">{speaker.company}</p>
      {speaker.panel && (
        <p className="mt-2 line-clamp-2 text-xs text-[#3d5248]">{speaker.panel}</p>
      )}
    </Link>
    </ScrollReveal>
  );
}