{{include "header.html"}}
{{include "nav.html"}}

{{$projects := ColumnContents "projects" 9}}
{{$news := Latest}}
{{$people := ColumnContents "people" 4}}
{{$slides := HomeSlides}}

<main class="tt-main tt-main--home">
  <section class="tt-hero">
    {{if $slides}}
      {{$first := index $slides 0}}
      <img class="tt-hero__img" src="{{$first.Img}}" alt="{{$first.Title}}">
    {{else}}
      <img class="tt-hero__img" src="{{index .ThemesExt "hero_image"}}" alt="STARTT">
    {{end}}
    <div class="tt-hero__shade"></div>
    <div class="tt-hero__content">
      <h1>{{index .ThemesExt "hero_title"}}</h1>
      <p>{{index .ThemesExt "hero_subtitle"}}</p>
      <a class="tt-hero__cta" href="/projects">View projects ↘</a>
    </div>
    <a class="tt-hero__cue" href="#below">Scroll</a>
  </section>

  <section id="below" class="tt-section tt-news">
    <div class="tt-section__head">
      <span class="tt-eyebrow">Journal</span>
      <div class="tt-news__tabs">
        <a class="tt-news__tab is-active" href="/news">All</a>
        <a class="tt-news__tab" href="/articles">Articles</a>
        <a class="tt-news__tab" href="/project-news">Project News</a>
        <a class="tt-news__tab" href="/publications">Publications</a>
        <a class="tt-news__tab" href="/awards">Awards</a>
        <a class="tt-news__tab" href="/events">Events</a>
      </div>
    </div>

    <div class="tt-news__layout">
      {{if $news}}
        {{$lead := index $news 0}}
        <a class="tt-news__lead" href="{{$lead.URL}}">
          <div class="tt-news__lead-img">
            {{if $lead.Img}}<img src="{{$lead.Img}}" alt="{{$lead.Title}}">{{end}}
            {{if $lead.ColumnName}}<span class="tt-news__lead-tag">{{$lead.ColumnName}}</span>{{end}}
          </div>
          <div class="tt-news__lead-body">
            <time>{{ParseTime $lead.CreatedAt "Mon, 02 Jan 2006"}}</time>
            <h3>{{$lead.Title}}</h3>
            <p>{{StrSub $lead.Description 180}}</p>
            <span class="tt-text-link">Read note ↘</span>
          </div>
        </a>

        <ol class="tt-news__list">
          {{range $i, $n := $news}}{{if and (gt $i 0) (lt $i 6)}}
          <li>
            <a href="{{$n.URL}}">
              <time>{{ParseTime $n.CreatedAt "02.01.2006"}}</time>
              {{if $n.ColumnName}}<span class="tt-news__cat">{{$n.ColumnName}}</span>{{end}}
              <h4>{{$n.Title}}</h4>
              <p>{{StrSub $n.Description 96}}</p>
            </a>
          </li>
          {{end}}{{end}}
        </ol>
      {{else}}
        <div class="tt-empty">No journal entries yet.</div>
      {{end}}
    </div>

    <div class="tt-news__foot">
      <a class="tt-text-link" href="/news">Browse the full journal →</a>
    </div>
  </section>

  <section class="tt-section tt-intro">
    <div class="tt-intro__copy">
      <span class="tt-eyebrow">{{index .ThemesExt "intro_eyebrow"}}</span>
      <h2>{{index .ThemesExt "intro_lead"}}</h2>
      <p>{{index .ThemesExt "intro_body"}}</p>
      <a class="tt-text-link" href="/office">Read the studio profile →</a>
    </div>
    <div class="tt-intro__stats">
      {{range (index .ThemesExt "stats")}}
      <div class="tt-stat">
        <strong>{{.value}}</strong>
        <span>{{.label}}</span>
      </div>
      {{end}}
    </div>
  </section>

  <section class="tt-section tt-projects-feature">
    <div class="tt-section__head">
      <span class="tt-eyebrow">Projects</span>
      <a class="tt-text-link" href="/projects">View all ↘</a>
    </div>
    <div class="tt-masonry">
      {{range $i, $p := $projects}}
      <a class="tt-mcard tt-mcard--{{Add $i 1}}" href="{{$p.URL}}">
        <img src="{{DefaultCover $p.Img}}" alt="{{$p.Title}}">
        <div class="tt-mcard__caption">
          <h3>{{$p.Title}}</h3>
          <p>
            {{$cat := index $p.Ext "category"}}{{if $cat}}{{$cat}}{{end}}
            {{$loc := index $p.Ext "location"}}{{if $loc}} · {{$loc}}{{end}}
            {{$yr := index $p.Ext "year"}}{{if $yr}} · {{$yr}}{{end}}
          </p>
        </div>
      </a>
      {{end}}
    </div>
  </section>

  <section class="tt-band">
    <div class="tt-band__copy">
      <span class="tt-eyebrow tt-eyebrow--light">Transformations</span>
      <h2>Architecture is treated as a public instrument: precise in construction, open in use, and attentive to the territorial stories already present on site.</h2>
    </div>
    <div class="tt-band__services">
      {{range (index .ThemesExt "services")}}
      <article>
        <h3>{{.title}}</h3>
        <p>{{.desc}}</p>
      </article>
      {{end}}
    </div>
  </section>

  <section class="tt-section tt-people-strip">
    <div class="tt-section__head">
      <span class="tt-eyebrow">People</span>
      <a class="tt-text-link" href="/people">Meet the team →</a>
    </div>
    <div class="tt-people-grid">
      {{range $people}}
      <a class="tt-person" href="{{.URL}}">
        <img src="{{DefaultCover .Img}}" alt="{{.Title}}">
        <div class="tt-person__caption">
          <h4>{{.Title}}</h4>
          <span>{{index .Ext "role"}}{{$city := index .Ext "city"}}{{if $city}} · {{$city}}{{end}}</span>
        </div>
      </a>
      {{end}}
    </div>
  </section>

  <section class="tt-section tt-partners">
    <span class="tt-eyebrow">Partners & networks</span>
    <div class="tt-partners__row">
      {{range (index .ThemesExt "partners")}}<span class="tt-partner">{{.name}}</span>{{end}}
    </div>
  </section>

  <section class="tt-cta">
    <h2>Tell us about a place, a public ambition or a territorial question.</h2>
    <a class="tt-cta__btn" href="/contacts">Contacts →</a>
  </section>
</main>

{{include "footer.html"}}
{{include "js.html"}}