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

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

<section class="section band-inverse has-bg" aria-labelledby="type-h">
  <BgPhoto variant="paper" mode="drift" depth={0.25} opacity={1} />
  <p class="eyebrow reveal">{c.eyebrow}</p>
  <h2 id="type-h" class="reveal">{c.h2}</h2>
  <p class="lead type-lead reveal">{c.lead}</p>
  <p class="type-body reveal">{c.body}</p>

  {/* 주장을 글로 하지 않고 실물로 보여준다. 두 문단의 차이는 word-break 한 줄뿐이다 */}
  <div class="demo reveal">
    <div class="demo-col"><div class="demo-inner">
      <p class="demo-label muted mono">{c.demoLabels[0]}</p>
      <p lang="ko" class="demo-text demo-default">{c.demoText}</p>
    </div></div>
    <div class="demo-col"><div class="demo-inner">
      <p class="demo-label muted mono">{c.demoLabels[1]}</p>
      <p lang="ko" class="demo-text demo-keepall">{c.demoText}</p>
    </div></div>
  </div>

  <ul class="type-rules reveal">
    {c.rules.map((r) => (<li>{r}</li>))}
  </ul>
</section>

<style>
  .type-lead { margin-bottom: var(--space-4); }
  .type-body { margin-bottom: var(--space-5); }

  .demo {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    margin-bottom: var(--space-5);
  }
  .demo-inner { padding: var(--space-4); }
  .demo-label {
    font-size: var(--mono-size);
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--space-2);
  }
  .demo-text {
    margin: 0;
    /* 줄바꿈 차이가 드러나도록 폭을 좁게 고정한다 */
    max-width: 13em;
    line-height: 1.7;
  }
  /* 기본값 — 단어 중간에서 끊긴다 */
  .demo-default { word-break: break-all; }
  /* 우리 규칙 */
  .demo-keepall { word-break: keep-all; overflow-wrap: break-word; }

  .type-rules {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .type-rules li {
    padding-block: var(--space-2);
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
  }
  .type-rules li:last-child { border-bottom: 1px solid var(--line); }
</style>
