import type { CouncilGridBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { Mail, User } from "lucide-react";

export function CouncilGrid({ block }: { block: CouncilGridBlock }) {
  const { t } = useLocale();
  return (
    <section className="py-16 md:py-20 bg-band-cream">
      <div className="container">
        <h2 className="font-display italic text-3xl sm:text-4xl md:text-5xl text-primary text-balance text-center">
          {t(block.title)}
        </h2>
        {block.intro && (
          <div
            className="mt-4 max-w-3xl mx-auto text-center text-foreground/80 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: t(block.intro) }}
          />
        )}
        <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {block.members.map((m, i) => (
            <article
              key={i}
              className="bg-card rounded-sm border border-border/70 overflow-hidden flex flex-col items-center text-center transition-shadow hover:shadow-[0_20px_40px_-30px_hsl(var(--primary)/0.4)]"
            >
              <div className="w-full aspect-square bg-muted overflow-hidden">
                {m.photo ? (
                  <img
                    src={m.photo.src}
                    alt={t(m.photo.alt)}
                    loading="lazy"
                    className="w-full h-full object-cover"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-muted-foreground">
                    <User className="h-16 w-16" aria-hidden />
                  </div>
                )}
              </div>
              <div className="p-5 sm:p-6 w-full">
                <h3 className="font-display text-xl text-primary">{m.name}</h3>
                <p className="text-sm uppercase tracking-wider text-accent font-medium mt-1">
                  {t(m.role)}
                </p>
                {m.email && (
                  <a
                    href={`mailto:${m.email}`}
                    className="mt-3 inline-flex items-center gap-1.5 text-sm text-foreground/80 hover:text-primary break-all"
                  >
                    <Mail className="h-3.5 w-3.5 shrink-0" aria-hidden />
                    <span>{m.email}</span>
                  </a>
                )}
              </div>
            </article>
          ))}
        </div>
        {block.footnote && (
          <div
            className="mt-12 max-w-3xl mx-auto text-sm text-foreground/70 italic leading-relaxed text-center"
            dangerouslySetInnerHTML={{ __html: t(block.footnote) }}
          />
        )}
      </div>
    </section>
  );
}