<% var heroPhoto = country.portraits && country.portraits.length ? country.portraits[0] : null; %>
<% var secondPhoto = country.portraits && country.portraits.length > 1 ? country.portraits[1] : null; %>

<section class="post-hero">
  <div class="wrap">
    <div class="hero-with-media<%= heroPhoto ? '' : ' no-media' %>">
      <div class="hero-text-col">
        <p class="eyebrow">ZUCE Group in <%= country.name %></p>
        <h1><%= country.tagline || country.name %></h1>
        <% if (country.focus) { %><p class="post-date"><%= country.focus %></p><% } %>
        <div class="pill-row hero-badge-row" style="margin-top: 1rem;">
          <% if (country.flag) { %><span class="flag-badge"><img src="<%= country.flag %>" alt="<%= country.name %> flag"></span><% } %>
          <span class="pill"><%= country.hubType %></span>
        </div>
      </div>
      <% if (heroPhoto) { %>
        <div class="hero-media-col">
          <div class="hero-media-box">
            <img src="<%= heroPhoto %>" alt="<%= country.name %>" loading="lazy">
          </div>
        </div>
      <% } %>
    </div>
  </div>
  <div class="post-hero-pattern"></div>
</section>

<section class="block">
  <% var introParas = country.intro && country.intro.length ? country.intro.slice() : (country.status ? [country.status] : []); %>
  <div class="content-with-media<%= secondPhoto ? '' : ' no-media' %>">
    <div class="content-text-col">
      <% if (introParas.length) { %>
        <p class="lede-paragraph"><%= introParas[0] %></p>
      <% } %>

      <div class="fact-row">
        <div class="fact-card">
          <span class="fact-label">Reach</span>
          <p class="fact-value"><%= country.hubType %></p>
        </div>
        <% if (country.focus) { %>
          <div class="fact-card">
            <span class="fact-label">Best suited for</span>
            <p class="fact-value"><%= country.focus %></p>
          </div>
        <% } %>
      </div>

      <% introParas.slice(1).forEach(function(p) { %><p><%= p %></p><% }) %>

      <% if (capabilities && capabilities.length) { %>
        <div class="pill-row capability-pill-row">
          <% capabilities.forEach(function(cap) { %><span class="pill"><%= cap %></span><% }) %>
        </div>
      <% } %>
    </div>
    <% if (secondPhoto) { %>
      <div class="content-media-col">
        <div class="content-media-panel">
          <img src="<%= secondPhoto %>" alt="<%= country.name %>" loading="lazy">
        </div>
      </div>
    <% } %>
  </div>

  <% if (country.whyItWorks && country.whyItWorks.length) { %>
    <div class="section-head" style="margin-top: 2.5rem;">
      <p class="eyebrow">Why it works</p>
      <h2>Why it works for events and communications?</h2>
    </div>
    <div class="quote-callout">
      <% country.whyItWorks.forEach(function(p) { %><p><%= p %></p><% }) %>
    </div>
  <% } %>
</section>

<section class="block alt">
  <div class="inner">
    <div class="section-head">
      <p class="eyebrow">What we deliver here</p>
      <h2>Three divisions, on the ground</h2>
      <p>Wherever we operate, the same integrated team travels with the brief: events &amp; experiences, creative/PR &amp; media relations, and digital &amp; media.</p>
    </div>
    <ul class="divisions-list">
      <% divisions.forEach(function(div, i) { %>
        <li>
          <span class="idx"><%= String(i + 1).padStart(2, '0') %></span>
          <div class="division-row">
            <div class="division-text">
              <span class="tag"><%= div.tag %></span>
              <h3><%= div.name %></h3>
              <p><%= div.description %></p>
              <a href="/<%= div.slug %>">Learn more &rarr;</a>
            </div>
            <% if (div.portrait) { %>
              <div class="division-media">
                <img src="<%= div.portrait %>" alt="" loading="lazy">
              </div>
            <% } %>
          </div>
        </li>
      <% }) %>
    </ul>
  </div>
</section>

<div class="cta-band">
  <h2>Planning something in <%= country.name %>?</h2>
  <p>Tell us the brief and we'll scope the right team for it.</p>
  <a href="/contact" class="button button-primary">Talk to us</a>
</div>
