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

interface Props { c: Content["preflight"]; }
const { c } = Astro.props;
---

{/*
  레이아웃 패밀리: 로그.
  걸린 것과 고친 것이 한 줄에서 이어진다. 상자에 담지 않는다.
  왼쪽 세로선이 로그라는 형식을 만든다.
*/}
<section class="section preflight" aria-labelledby="pf-h">
  <h2 id="pf-h" class="reveal">{c.h2}</h2>
  <p class="lead pf-lead reveal">{c.lead}</p>

  <div class="full log">
    {
      c.items.map((i, idx) => (
        <article class="entry reveal par-lag" style={`--reveal-delay:${idx * 45}ms; --par-lag:${6 + idx * 2}px`}>
          <p class="caught">{i.caught}</p>
          <p class="fixed muted">{i.fixed}</p>
        </article>
      ))
    }
  </div>

  <p class="pf-note muted reveal">{c.note}</p>
</section>

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

  .log {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
  }
  .entry {
    position: relative;
    padding: var(--space-4) 0 var(--space-4) var(--space-5);
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-5);
    align-items: start;
  }
  /* 로그를 관통하는 세로선. 항목마다 상자를 두르지 않는다 */
  .entry::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
  }
  .entry:first-child::before { top: var(--space-4); }
  .entry:last-child::before { bottom: var(--space-4); }
  /* 걸린 지점을 표시하는 짧은 획 */
  .entry::after {
    content: "";
    position: absolute;
    left: -2px;
    top: calc(var(--space-4) + 0.55em);
    width: 5px;
    height: 5px;
    border-radius: var(--radius-sm);
    background: var(--accent);
  }

  .caught { margin: 0; font-weight: var(--weight-medium); }
  .fixed { margin: 0; font-size: var(--step-0); }
  .pf-note { margin-top: var(--space-6); font-size: var(--step-0); max-width: 34em; }

  @media (max-width: 800px) {
    .entry { grid-template-columns: 1fr; gap: var(--space-2); }
  }
</style>