---
import type { ImageMetadata } from 'astro';
import Base from '../layouts/Base.astro';
import PageHero from '../components/PageHero.astro';
import Timeline from '../components/about/Timeline.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="/programs">{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>

  <Timeline />

  <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 section--alt">
    <div class="container">
      <div class="section-heading">
        <T tag="about.metodo.title" as="h2" />
        <T tag="about.metodo.body" as="p" />
      </div>
      <div class="about-img-row">
        <div class="about-img-row__text section-heading">
          <T tag="about.metodo.closing" as="p" />
        </div>
        {imgOf('about-team-group') && (
          <div class="round-img">
            <TImg tag="about.metodo.image" src={imgOf('about-team-group')!} alt="Il team InsanityLab" widths={[360, 720]} sizes="360px" />
          </div>
        )}
      </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>

  <section class="section section--alt">
    <div class="container">
      <div class="about-img-row">
        {imgOf('about-vision') && (
          <div class="round-img">
            <TImg tag="about.vision.image" src={imgOf('about-vision')!} alt="La comunità InsanityLab" widths={[360, 720]} sizes="360px" />
          </div>
        )}
        <div class="about-img-row__text section-heading">
          <T tag="about.vision.title" as="h2" />
          <T tag="about.vision.body1" as="p" />
          <T tag="about.vision.body2" as="p" />
        </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%; }
  .tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .tcard img { aspect-ratio: 3/4; object-fit: cover; 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,
    .tgrid,
    .about-img-row { grid-template-columns: 1fr; }
    .about-img-row--reverse { direction: ltr; }
  }
</style>