{{template "head" .View}}
{{template "header" .View}}
<main id="main-content" class="page-canvas flex-1">
  {{template "page_header" (pageHeader .View .TitleKey .DescKey .ImagePath)}}

  <div class="page-container py-8 pb-16">
    <div class="about-layout">
      {{template "about_subnav" .}}

      <div class="about-layout__main min-w-0">
        {{if .Intro}}
        <div class="content-section reveal mb-6">
          <p class="text-sm leading-relaxed text-slate-600 dark:text-slate-300 sm:text-base">{{.Intro}}</p>
        </div>
        {{end}}

        {{if or .Split .Chart .YtdFacts .DashboardTitle}}
        <section class="stats-dashboard mb-10" aria-label="{{if .DashboardTitle}}{{.DashboardTitle}}{{else}}Statistics{{end}}">
          {{if or .DashboardTitle .Period}}
          <div class="section-heading reveal mb-5">
            {{if .Period}}
            <p class="section-kicker">{{.Period}}</p>
            {{end}}
            {{if .DashboardTitle}}
            <h2 class="section-title">{{.DashboardTitle}}</h2>
            {{end}}
          </div>
          {{end}}

          {{if .Facts}}
          <div class="reveal-stagger mb-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
            {{range .Facts}}
            <div class="stat-card stat-card--kpi">
              <p class="stat-card__kicker">{{index . "label"}}</p>
              <p class="stat-card__metric">{{index . "value"}}</p>
              {{if index . "hint"}}
              <p class="stat-card__hint">{{index . "hint"}}</p>
              {{end}}
            </div>
            {{end}}
          </div>
          {{end}}

          {{if .Split}}
          <div class="reveal-stagger mb-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {{range .Split}}
            <div class="stat-card">
              <p class="stat-card__kicker">{{index . "label"}}</p>
              <p class="stat-card__value">{{index . "value"}}</p>
            </div>
            {{end}}
          </div>
          {{end}}

          {{if .Chart}}
          <div class="content-section reveal mb-5 p-5 sm:p-6">
            {{if .ChartTitle}}
            <h3 class="font-display text-base font-bold text-slate-900 dark:text-white sm:text-lg">{{.ChartTitle}}</h3>
            {{end}}
            <div class="stats-chart mt-5" role="img" aria-label="{{.ChartTitle}}">
              {{range .Chart}}
              {{$pct := index . "pct"}}
              <div class="stats-chart__col">
                <div class="stats-chart__track">
                  <div class="stats-chart__bar" style="--bar-h: {{$pct}}%;" title="{{index . "year"}}: {{index . "value"}}"></div>
                </div>
                <p class="stats-chart__value">{{index . "value"}}</p>
                <p class="stats-chart__year">{{index . "year"}}</p>
              </div>
              {{end}}
            </div>
          </div>
          {{end}}

          {{if .YtdFacts}}
          <div class="content-section reveal p-5 sm:p-6">
            {{if .YtdTitle}}
            <h3 class="font-display text-base font-bold text-slate-900 dark:text-white sm:text-lg">{{.YtdTitle}}</h3>
            {{end}}
            <div class="reveal-stagger mt-4 grid gap-3 sm:grid-cols-3">
              {{range .YtdFacts}}
              <div class="stat-card stat-card--muted">
                <p class="stat-card__kicker">{{index . "label"}}</p>
                <p class="stat-card__metric stat-card__metric--sm">{{index . "value"}}</p>
                {{if index . "hint"}}
                <p class="stat-card__hint">{{index . "hint"}}</p>
                {{end}}
              </div>
              {{end}}
            </div>
          </div>
          {{end}}
        </section>
        {{else if .Facts}}
        <div class="reveal-stagger mb-6 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
          {{range .Facts}}
          <div class="stat-card">
            <p class="stat-card__kicker">{{index . "label"}}</p>
            <p class="stat-card__value">{{index . "value"}}</p>
          </div>
          {{end}}
        </div>
        {{end}}

        {{if .CMSPosts}}
        <div class="reveal-stagger mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {{range .CMSPosts}}
          <a href="/about/news/{{.ID}}" class="news-card news-card--link">
            <div class="news-card__banner">
              <img src="/logos/gaia-logo-white.svg" alt="" class="news-card__logo" width="120" height="36" />
              <span class="news-card__badge">GAIA News</span>
            </div>
            <div class="news-card__body">
              {{if .PublishedAt}}
              <p class="news-card__date">{{.PublishedAt}}</p>
              {{end}}
              <h2 class="news-card__title">{{.Title}}</h2>
              {{with .Teaser}}
              <p class="news-card__summary">{{.}}</p>
              {{end}}
              {{if .Tags}}
              <p class="news-card__tags">
                {{range .Tags}}
                <span class="news-card__tag">{{.}}</span>
                {{end}}
              </p>
              {{end}}
              <span class="news-card__link">Read full story →</span>
            </div>
          </a>
          {{end}}
        </div>
        {{end}}

        {{if .Cards}}
        {{if .ReportsTitle}}
        <div class="section-heading reveal mb-5">
          <h2 class="section-title">{{.ReportsTitle}}</h2>
        </div>
        {{end}}
        <div class="reveal-stagger mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {{range .Cards}}
          {{$href := index . "href"}}
          {{$external := index . "external"}}
          <a href="{{$href}}" {{if $external}}target="_blank" rel="noopener noreferrer"{{end}} class="content-section group block p-5 transition-shadow hover:shadow-md sm:p-6">
            {{if index . "kicker"}}
            <p class="section-kicker">{{index . "kicker"}}</p>
            {{end}}
            <h2 class="mt-2 font-display text-lg font-bold text-slate-900 group-hover:text-brand-700 dark:text-white dark:group-hover:text-brand-300">{{index . "title"}}</h2>
            {{if index . "body"}}
            <p class="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300">{{index . "body"}}</p>
            {{end}}
            {{if index . "meta"}}
            <p class="mt-3 text-xs font-semibold uppercase tracking-wider text-slate-400">{{index . "meta"}}</p>
            {{end}}
          </a>
          {{end}}
        </div>
        {{end}}

        {{if .Sections}}
        <div class="space-y-4">
          {{range .Sections}}
          <section class="content-section reveal p-5 sm:p-6">
            {{if index . "title"}}
            <h2 class="font-display text-lg font-bold text-slate-900 dark:text-white">{{index . "title"}}</h2>
            {{end}}
            {{if index . "body"}}
            <p class="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300 {{if index . "title"}}{{else}}mt-0{{end}}">{{index . "body"}}</p>
            {{end}}
            {{with asMaps (index . "items")}}
            <ul class="mt-4 space-y-2">
              {{range .}}
              <li class="flex gap-3 text-sm text-slate-600 dark:text-slate-300">
                <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-brand-500"></span>
                <span>{{index . "text"}}</span>
              </li>
              {{end}}
            </ul>
            {{end}}
          </section>
          {{end}}
        </div>
        {{end}}

        {{if .People}}
        {{if .OrgChart}}
        <div class="board-gallery mt-6 reveal" aria-label="Board of Directors">
          {{range .People}}
          {{if eq (printf "%v" (index . "tier")) "1"}}
          <section class="board-gallery__featured">
            <p class="board-gallery__label">Chairman</p>
            <article class="board-gallery__hero">
              {{$img := index . "image"}}
              <div class="board-gallery__hero-photo">
                <img
                  src="{{if $img}}{{$img}}{{else}}/static/images/about/board/placeholder.svg{{end}}"
                  alt=""
                  loading="eager"
                  onerror="this.onerror=null;this.src='/static/images/about/board/placeholder.svg';"
                />
              </div>
              <div class="board-gallery__hero-copy">
                <h2 class="board-gallery__hero-name">{{index . "name"}}</h2>
                {{if index . "role"}}
                <p class="board-gallery__hero-role">{{index . "role"}}</p>
                {{end}}
              </div>
            </article>
          </section>
          {{end}}
          {{end}}

          <section class="board-gallery__section">
            <p class="board-gallery__label">Leadership</p>
            <div class="board-gallery__row board-gallery__row--lead">
              {{range .People}}
              {{if eq (printf "%v" (index . "tier")) "2"}}
              {{template "board_gallery_person" .}}
              {{end}}
              {{end}}
            </div>
          </section>

          <section class="board-gallery__section">
            <p class="board-gallery__label">Directors</p>
            <div class="board-gallery__row board-gallery__row--directors">
              {{range .People}}
              {{if eq (printf "%v" (index . "tier")) "3"}}
              {{template "board_gallery_person" .}}
              {{end}}
              {{end}}
            </div>
          </section>
        </div>
        {{else}}
        <div class="mt-6 space-y-4">
          {{range .People}}
          <article class="content-section reveal overflow-hidden p-5 sm:p-6">
            {{$img := index . "image"}}
            <div class="flex flex-col gap-5 {{if $img}}sm:flex-row sm:items-start{{end}}">
              {{if $img}}
              <div class="mx-auto w-36 shrink-0 sm:mx-0 sm:w-40">
                <div class="aspect-[4/5] overflow-hidden rounded-2xl border border-brand-100 bg-brand-50 shadow-sm dark:border-brand-900/40 dark:bg-brand-950/40">
                  <img
                    src="{{$img}}"
                    alt=""
                    class="h-full w-full object-cover"
                    loading="lazy"
                    onerror="this.onerror=null;this.src='/static/images/about/executive/placeholder.svg';"
                  />
                </div>
              </div>
              {{end}}
              <div class="min-w-0 flex-1">
                <h2 class="font-display text-lg font-bold text-slate-900 dark:text-white">{{index . "name"}}</h2>
                {{if index . "role"}}
                <p class="mt-1 text-sm font-semibold text-brand-700 dark:text-brand-300">{{index . "role"}}</p>
                {{end}}
                {{if index . "bio"}}
                <p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-300 whitespace-pre-line">{{index . "bio"}}</p>
                {{end}}
              </div>
            </div>
          </article>
          {{end}}
        </div>
        {{end}}
        {{end}}

        {{if .Timeline}}
        <section class="content-section reveal mt-6 overflow-x-auto p-5 sm:p-6">
          <h2 class="font-display text-lg font-bold text-slate-900 dark:text-white">{{t .View "aboutContent.history.timelineTitle"}}</h2>
          <table class="mt-4 w-full min-w-[32rem] text-left text-sm">
            <thead>
              <tr class="border-b border-slate-200 text-xs uppercase tracking-wider text-slate-500 dark:border-slate-700">
                <th class="pb-3 pr-4 font-semibold">{{t .View "aboutContent.history.colEvent"}}</th>
                <th class="pb-3 pr-4 font-semibold">{{t .View "aboutContent.history.colDate"}}</th>
                <th class="pb-3 font-semibold">{{t .View "aboutContent.history.colYear"}}</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
              {{range .Timeline}}
              <tr>
                <td class="py-3 pr-4 text-slate-700 dark:text-slate-200">{{index . "event"}}</td>
                <td class="py-3 pr-4 text-slate-600 dark:text-slate-300">{{index . "date"}}</td>
                <td class="py-3 font-medium text-slate-900 dark:text-white">{{index . "year"}}</td>
              </tr>
              {{end}}
            </tbody>
          </table>
        </section>
        {{end}}

        {{if .Tables}}
        <div class="mt-6 space-y-6">
          {{range .Tables}}
          <section class="content-section reveal overflow-x-auto p-5 sm:p-6">
            <h2 class="font-display text-lg font-bold text-slate-900 dark:text-white">{{index . "title"}}</h2>
            {{if index . "note"}}
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">{{index . "note"}}</p>
            {{end}}
            <table class="mt-4 w-full min-w-[28rem] text-left text-sm">
              <thead>
                <tr class="border-b border-slate-200 text-xs uppercase tracking-wider text-slate-500 dark:border-slate-700">
                  {{range asMaps (index . "headers")}}
                  <th class="pb-3 pr-4 font-semibold last:pr-0">{{index . "text"}}</th>
                  {{end}}
                </tr>
              </thead>
              <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                {{range asMaps (index . "rows")}}
                <tr>
                  {{range asMaps (index . "cells")}}
                  <td class="py-3 pr-4 text-slate-700 last:pr-0 dark:text-slate-200">{{index . "text"}}</td>
                  {{end}}
                </tr>
                {{end}}
              </tbody>
            </table>
          </section>
          {{end}}
        </div>
        {{end}}

        {{if .Notice}}
        <div class="notice-banner mt-8">
          <div class="flex items-start gap-3">
            <svg class="mt-0.5 h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
            <p>{{.Notice}}</p>
          </div>
        </div>
        {{end}}
      </div>
    </div>
  </div>
</main>
{{template "footer" .View}}
{{template "scripts" .View}}