---
import type { ImageMetadata } from 'astro';
import Base from '../layouts/Base.astro';
import PageHero from '../components/PageHero.astro';
import { team } from '../data/team';
import T from '../components/content/T.astro';
import TImg from '../components/content/TImg.astro';
import { t } from '../lib/content';
const images = import.meta.glob<{ default: ImageMetadata }>('../assets/img/*.{jpg,png}', { eager: true });
const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1]?.default;
const founders = team.filter((m) => m.founder);
const staff = team.filter((m) => !m.founder);
export const prerender = false;
---
<Base title={t('about.meta.title')} description={t('about.meta.description')}>
  <PageHero title={t('about.hero.title')} />

  <section class="section">
    <div class="container">
      <div class="about-img-row">
        <div class="about-img-row__text section-heading">
          <T tag="about.mission.title" as="h2" />
          <T tag="about.mission.body" as="p" />
        </div>
        {imgOf('about-training-group') && (
          <div class="about-img-row__img">
            <TImg tag="about.mission.image" src={imgOf('about-training-group')!} alt="Training group InsanityLab" widths={[600, 900]} sizes="(max-width:767px) 100vw, 50vw" />
          </div>
        )}
      </div>
    </div>
  </section>

  <section class="section section--alt">
    <div class="container about-2col">
      <div>
        <T tag="about.direzione.title" as="h2" />
        <T tag="about.direzione.body" as="p" />
        <a class="btn" href="/services">{t('about.direzione.cta')}</a>
      </div>
      <div>
        <T tag="about.approccio.title" as="h2" />
        <T tag="about.approccio.body" as="p" />
        <a class="btn btn--dark" href="/contact">{t('about.approccio.cta')}</a>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="about-img-row about-img-row--reverse">
        <div class="about-img-row__text section-heading">
          <T tag="about.about.title" as="h2" />
          <T tag="about.about.body" as="p" />
        </div>
        {imgOf('about-pushup') && (
          <div class="about-img-row__img about-img-row__img--native">
            <TImg tag="about.about.image" src={imgOf('about-pushup')!} alt="Allenamento InsanityLab" widths={[320, 640]} sizes="320px" />
          </div>
        )}
      </div>
    </div>
  </section>

  <section class="section section--dark">
    <div class="container">
      <div class="section-heading">
        <T tag="about.convenzioni.title" as="h2" />
        <T tag="about.convenzioni.body" as="p" />
      </div>
      <ul class="conv">
        <T tag="about.convenzioni.item1" as="li" />
        <T tag="about.convenzioni.item2" as="li" />
        <T tag="about.convenzioni.item3" as="li" />
      </ul>
      <p class="conv__cta">{t('about.convenzioni.cta-text')} {t('global.contact.email')} · {t('global.contact.phone')}</p>
      {imgOf('about-conventions') && (
        <div class="round-img">
          <TImg tag="about.convenzioni.image" src={imgOf('about-conventions')!} alt="Convenzioni aziendali" widths={[360, 720]} sizes="360px" />
        </div>
      )}
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="section-heading">
        <T tag="about.team.title" as="h2" />
        <T tag="about.team.body" as="p" />
      </div>
      <div class="tgrid tgrid--founders">
        {founders.map((m) => {
          const slug = m.shortName.toLowerCase();
          return (
            <article class="tcard">
              {m.imageAbout && imgOf(m.imageAbout) && <TImg tag={`team.${slug}.image-about`} src={imgOf(m.imageAbout)!} alt={m.name} widths={[300, 500]} sizes="(max-width:767px) 100vw, 33vw" />}
              <T tag={`team.${slug}.short-name`} as="h3" />
              <T tag={`team.${slug}.role`} as="p" class="tcard__role" />
              <T tag={`team.${slug}.bio`} as="p" />
            </article>
          );
        })}
      </div>
      <p class="section-heading" style="margin-top:60px">{t('about.team.staff-intro')}</p>
      <div class="tgrid">
        {staff.map((m) => {
          const slug = m.shortName.toLowerCase();
          return (
            <article class="tcard">
              {m.imageAbout && imgOf(m.imageAbout) && <TImg tag={`team.${slug}.image-about`} src={imgOf(m.imageAbout)!} alt={m.name} widths={[300, 500]} sizes="(max-width:767px) 100vw, 33vw" />}
              <T tag={`team.${slug}.short-name`} as="h3" />
              <T tag={`team.${slug}.role`} as="p" class="tcard__role" />
              <T tag={`team.${slug}.bio`} as="p" />
            </article>
          );
        })}
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="about-img-row">
        <div class="about-img-row__text section-heading">
          <T tag="about.studios.title" as="h2" />
          <T tag="about.studios.body1" as="p" />
          <T tag="about.studios.body2" as="p" />
          <T tag="about.studios.body3" as="p" />
        </div>
        {imgOf('about-studios') && (
          <div class="about-img-row__img">
            <TImg tag="about.studios.image" src={imgOf('about-studios')!} alt="In-Sanity Studios" widths={[600, 900]} sizes="(max-width:767px) 100vw, 50vw" />
          </div>
        )}
      </div>
    </div>
  </section>

</Base>

<style>
  .about-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
  .about-img-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .about-img-row--reverse { direction: rtl; }
  .about-img-row--reverse > * { direction: ltr; }
  .about-img-row__img img { width: 100%; height: auto; display: block; }
  .about-img-row__img--native { max-width: 320px; margin: 0 auto; }
  .conv { max-width: 760px; margin: 0 auto 30px; display: grid; gap: 18px; padding-left: 20px; }
  .conv__cta { text-align: center; font-family: var(--font-heading); letter-spacing: .06em; }
  .round-img { max-width: 380px; margin: 30px auto 0; }
  .round-img img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 100%; }
  /* pre-line preserva gli a-capo del testo (il <p> reso da <T> non eredita il cid → :global). */
  .about-img-row__text :global([data-tag="about.studios.body3"]) { white-space: pre-line; }
  /* flex + center così l'ultima riga incompleta (es. staff: 5 membri → 2 nell'ultima riga)
     resta centrata invece di appoggiarsi a sinistra. */
  .tgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
  .tcard { width: calc((100% - 80px) / 3); }
  /* :global(img) perché gli <img> di override resi da <TImg> non ereditano il cid. */
  .tcard :global(img) { aspect-ratio: 3/4; object-fit: cover; width: 100%; margin-bottom: 16px; }
  .tcard h3 { text-transform: lowercase; letter-spacing: .2em; }
  .tcard__role { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-accent-dark); }
  .tcard p { font-size: .9rem; }
  @media (max-width: 767px) {
    .about-2col,
    .about-img-row { grid-template-columns: 1fr; }
    .tcard { width: 100%; }
    .about-img-row--reverse { direction: ltr; }
  }
</style>
