---
import type { Content } from "../i18n/content";

interface Props { c: Content["metrics"]; }
const { c } = Astro.props;
const feature = c.items.filter((m) => m.feature);
const rest = c.items.filter((m) => !m.feature);
---

{/*
  레이아웃 패밀리: 수치 조판.
  카드에 담지 않는다. 숫자가 크기와 정렬선으로 스스로 위계를 만든다.
  카드는 elevation 이 진짜 위계를 나를 때만 쓴다는 규칙을 여기서 지킨다.
*/}
{/*
  이 섹션에는 패럴랙스를 넣지 않는다. 빠뜨린 것이 아니라 결정이다.

  여기가 이 페이지의 수치를 공개하는 자리다. 숫자가 스크롤에 따라
  흔들리면 그 값도 흔들리는 것처럼 읽힌다. 계기판의 바늘은 떨지 않는다.
  움직임이 의미를 만드는 자리가 있으면, 움직이지 않는 것이 의미인 자리도 있다.
*/}
<section id="metrics" class="section metrics" aria-labelledby="metrics-h">
  <div class="head">
    <p class="eyebrow reveal">{c.eyebrow}</p>
    <h2 id="metrics-h" class="reveal">{c.h2}</h2>
  </div>
  <p class="lead metrics-lead reveal">{c.lead}</p>

  <div class="full figures">
    {
      feature.map((m, i) => (
        <div class="fig fig-lead reveal" style={`--reveal-delay:${i * 80}ms`}>
          <span class="fig-value nums">{m.value}</span>
          <span class="fig-label">{m.label}</span>
          <span class="fig-note muted">{m.note}</span>
        </div>
      ))
    }

    <dl class="fig-rest">
      {
        rest.map((m, i) => (
          <div class="row reveal" style={`--reveal-delay:${(i + 2) * 50}ms`}>
            <dt>{m.label}</dt>
            <dd class="nums">{m.value}</dd>
            <dd class="row-note muted">{m.note}</dd>
          </div>
        ))
      }
    </dl>
  </div>

  <p class="caveat muted reveal">{c.caveat}</p>
</section>

<style>
  .metrics-lead { margin-block: var(--space-4) var(--space-7); max-width: 30em; }

  .figures {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    /* 비대칭. 큰 수치 둘이 왼쪽을 차지하고 나머지는 오른쪽 여백에 흐른다 */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: var(--space-7);
    row-gap: var(--space-6);
    align-items: start;
  }

  .fig-lead { display: grid; gap: var(--space-1); }
  .fig-lead:nth-child(2) {
    /* 두 번째 큰 수치는 한 칸 내려앉는다 */
    margin-top: var(--space-6);
  }
  .fig-value {
    font-size: clamp(3.4rem, 2rem + 5vw, 6rem);
    line-height: 0.92;
    font-weight: var(--weight-strong);
    letter-spacing: -0.04em;
    color: var(--accent);
  }
  .fig-label { font-size: var(--step-1); font-weight: var(--weight-medium); margin-top: var(--space-2); }
  .fig-note { font-size: var(--step-0); max-width: 22em; }

  /* 나머지 수치는 오른쪽 열에서 두 칸을 세로로 이어 쓴다 */
  .fig-rest {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    display: grid;
    align-content: start;
  }
  .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-4);
    align-items: baseline;
    padding-block: var(--space-3);
    border-top: 1px solid var(--line);
  }
  .row:last-child { border-bottom: 1px solid var(--line); }
  dt { font-weight: var(--weight-medium); }
  dd { margin: 0; }
  dd.nums { font-size: var(--step-1); color: var(--accent); justify-self: end; }
  .row-note {
    grid-column: 1 / -1;
    font-size: var(--step-0);
    margin-top: var(--space-1);
    max-width: 32em;
  }

  .caveat { margin-top: var(--space-6); font-size: var(--step-0); max-width: 34em; }

  @media (max-width: 860px) {
    .figures { grid-template-columns: 1fr; }
    .fig-rest { grid-column: 1; grid-row: auto; }
    .fig-lead:nth-child(2) { margin-top: 0; }
  }
</style>
