---
import { Image } from "astro:assets";
import paper from "../assets/bg/bg-paper.webp";

/**
 * 필터 데모의 소재. 같은 소재를 두 번 그리고 한쪽에만 필터를 건다.
 * 변수를 하나만 바꿔야 데모가 무언가를 증명한다 — 소재가 다르면
 * 보이는 차이가 필터 때문인지 소재 때문인지 알 수 없다.
 */
interface Props {
  kind: "scrim" | "cvd" | "goo";
  on: boolean;
}
const { kind, on } = Astro.props;


---

{
  kind === "scrim" && (
    <div class="art art-photo">
      <Image src={paper} alt="" widths={[300, 600]} sizes="300px" loading="lazy" />
      <span class:list={["cap", { on }]}>산미 8.5 · 로스팅 2일차</span>
    </div>
  )
}

{
  kind === "cvd" && (
    <div class:list={["art art-badges", { on }]}>
      <span class="badge b-ok">통과</span>
      <span class="badge b-warn">주의</span>
      <span class="badge b-bad">실패</span>
    </div>
  )
}

{
  kind === "goo" && (
    <div class="art art-goo">
      {/* 같은 간격으로 놓인 세 덩어리. 왼쪽은 셋으로 보이고 오른쪽은 하나로 보인다.
          움직임으로 증명하려다 실패했다 — 지나가는 프레임은 방문자도 놓치고
          측정도 매번 다른 값을 준다. 정지된 두 장이 더 정확하게 말한다. */}
      <div class:list={["goo-track", { on }]}>
        <span class="goo-blob" /><span class="goo-blob" /><span class="goo-blob" />
      </div>
    </div>
  )
}

<style>
  .art {
    height: var(--art-h, 118px);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    background: var(--surface-2);
  }

  /* ---- 스크림 ------------------------------------------------
     밝은 종이 사진 위의 흰 캡션. 필터가 없으면 대비가 무너진다 */
  .art-photo :global(img) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cap {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    right: var(--space-3);
    color: #fff;
    font-weight: var(--weight-medium);
    font-size: var(--step-0);
    line-height: 1.3;
  }
  .cap.on { filter: url(#f-scrim); }

  /* ---- 색각 --------------------------------------------------
     상태를 색으로만 구분한 흔한 배지 묶음. 사이트 팔레트가 아니라
     "현장에서 그렇게 오는" 색이다 — 그게 이 데모의 소재다 */
  .art-badges {
    --art-h: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .art-badges.on { filter: url(#f-deuter); }
  .badge {
    padding: 0.4em 0.95em;
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    color: #08110f;
  }
  /* 적록색약에서 서로 무너지는 조합을 일부러 골랐다.
     현장에서 상태 배지가 실제로 이렇게 온다 */
  .b-ok { background: #3fb950; }
  .b-warn { background: #d29922; }
  .b-bad { background: #e5534b; }

  /* ---- 구이 ---------------------------------------------------
     필터는 트랙에만 건다. 라벨까지 걸면 글자가 녹는다 */
  .art-goo {
    --art-h: 96px;
    display: grid;
    align-content: center;
    gap: var(--space-2);
  }
  /* 간격이 이 데모의 유일한 변수다.
     붙는 조건은 눈대중이 아니라 산수다 — 두 원 사이 중간점의 블러 알파가
     alpha 램프의 문턱(offset/slope = 7/18 ≒ 0.39)을 넘어야 한다.
     간격 18px 에 stdDeviation 7 로는 중간점 알파가 0.2 근처라 못 넘었다.
     실측에서 필터를 켜고도 덩어리가 3개 그대로였다. 간격을 좁힌다. */
  .goo-track {
    display: flex;
    justify-content: center;
    gap: 12px;
  }
  .goo-track.on { filter: url(#f-goo); }
  .goo-blob {
    width: 46px;
    height: 46px;
    border-radius: 23px;
    background: var(--accent);
  }


  @media (prefers-reduced-transparency: reduce) {
    .cap { text-shadow: 0 1px 3px rgb(0 0 0 / 0.9); }
  }
</style>
