---
import { Image } from "astro:assets";
import shotCoffee from "../assets/shots/shot-coffee.png";
import shotSaas from "../assets/shots/shot-saas.png";
import BgPhoto from "./BgPhoto.astro";
import type { Content } from "../i18n/content";

interface Props { c: Content["showcase"]; }
const { c } = Astro.props;
const shots = [shotCoffee, shotSaas];
---

{/* 레이아웃 패밀리: Z축 캐스케이드. 두 판이 서로 겹치고 각도가 다르다 */}
<section id="showcase" class="section showcase has-bg" aria-labelledby="showcase-h">
  <BgPhoto variant="split" mode="drift" depth={0.4} opacity={0.85} />
  <h2 id="showcase-h" class="reveal">{c.h2}</h2>
  <p class="lead showcase-lead reveal">{c.lead}</p>

  <div class="full cascade">
    {
      c.items.map((item, i) => (
        <figure class:list={["work", "reveal", i === 0 ? "par-slow" : "par-fast"]} style={`--reveal-delay:${i * 90}ms`}>
          <div class="frame zoom-in">
            <Image src={shots[i]!} alt={item.alt} widths={[480, 860, 1200]}
                   sizes="(max-width: 820px) 92vw, 44vw" loading="lazy" />
          </div>
          <figcaption>
            <span class="work-caption">{item.caption}</span>
            <span class="work-note muted">{item.note}</span>
          </figcaption>
        </figure>
      ))
    }
  </div>
</section>

<style>
  .showcase-lead { margin-block: var(--space-4) var(--space-6); }

  .cascade {
    display: grid;
    gap: var(--space-6) var(--space-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    align-items: start;
  }
  /* 두 번째 판이 아래로 내려가 계단을 만든다 */
  .work:nth-child(2) { margin-top: var(--space-7); }

  .work { margin: 0; }
  .work .frame { box-shadow: var(--glass-hi), var(--core-hi), var(--shadow-3); }
  .work:nth-child(1) .frame { transform: rotate(-0.5deg); }
  .work:nth-child(2) .frame { transform: rotate(0.7deg); }
  
  .work :global(img) {
    width: 100%; height: auto; display: block;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: top center;
  }

  figcaption {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-3);
    font-size: var(--step-0);
  }
  .work-caption { font-weight: var(--weight-medium); }

  @media (max-width: 820px) {
    .cascade { grid-template-columns: 1fr; }
    .work:nth-child(2) { margin-top: 0; }
    .work .frame { transform: none; }
  }
</style>
