---
import type { ImageMetadata } from 'astro';
import { team, homeTeam } from '../../data/team';
import T from '../content/T.astro';
import TImg from '../content/TImg.astro';
import { t } from '../../lib/content';
const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/team-*.{jpg,png}', { eager: true });
const members = homeTeam.map((short) => team.find((m) => m.shortName === short)!).filter((m) => m.image);
const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(`${name}.`))?.[1].default;
---
<section class="section">
  <div class="container">
    <div class="tteam__head" data-reveal>
      <T tag="home.team.title" as="h2" />
      <a class="btn" href="/about"><T tag="home.team.cta" as="span" /></a>
    </div>
    <div class="tteam__grid">
      {members.map((m, i) => {
        const slug = m.shortName.toLowerCase();
        return (
          <figure class="tteam__card" data-reveal style={`--reveal-delay:${i * 0.12}s`}>
            <TImg tag={`team.${slug}.image`} src={imgOf(m.image!)!} alt={t(`team.${slug}.name`)} widths={[300, 500]} sizes="(max-width: 767px) 50vw, 25vw" />
            <T tag={`team.${slug}.short-name`} as="figcaption" />
          </figure>
        );
      })}
    </div>
  </div>
</section>

<style>
  .tteam__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
  .tteam__head h2 { text-transform: uppercase; letter-spacing: .1em; margin: 0; }
  .tteam__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .tteam__card { position: relative; margin: 0; overflow: hidden; }
  .tteam__card img { aspect-ratio: 3/4; object-fit: cover; width: 100%; transition: transform .5s ease; }
  .tteam__card:hover img { transform: scale(1.06); }
  .tteam__card figcaption { position: absolute; right: 10px; bottom: 14px; background: #fff; padding: 10px 6px; writing-mode: vertical-rl; font-family: var(--font-heading); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--c-accent-dark); }
  @media (max-width: 767px) { .tteam__grid { grid-template-columns: 1fr 1fr; } }
</style>
