import {Armchair} from 'lucide-react';
import {useSite} from '@/lib/site-context';
import {sectionName, spaceRows} from '@/lib/derive';

/**
 * 공간 안내.
 *
 * ★ payload 에 없는 것 — 구역(zone) 모델
 *   에디터의 기본 배리에이션 `space.zones` 는 "1층 창가석 / 루프탑" 처럼 자리별 카드를
 *   그린다. 그러려면 구역 이름 · 구역 설명 · 구역별 사진이라는 데이터가 있어야 하는데,
 *   SitePayload 에는 그런 필드가 없다. `media.category`("좌석", "테라스", "음료" …)가
 *   비슷해 보이지만 그건 사진 분류이지 좌석 구역이 아니다 — 그걸 구역 이름으로 쓰면
 *   "음료"라는 이름의 자리가 생긴다. 그래서 사진 구역 카드는 그리지 않는다.
 *   백엔드에 구역 모델이 생기면 그때 여기에 붙인다.
 *
 * ★ 지금 그릴 수 있는 것 — 공간을 설명하는 확인 fact
 *   좌석 수 · 테라스 · 룸/별실 · 단체석 최대 인원 · 콘센트 · 장시간 이용 · 휠체어 접근.
 *   "자리가 어떻게 생겼고 얼마나 앉을 수 있나"에 답하는 값만 고른다.
 *   한 줄도 없으면 섹션째 그리지 않는다.
 */
export function SpaceSection() {
  const payload = useSite();
  const rows = spaceRows(payload);

  if (rows.length === 0) return null;

  return (
    <section
      id="space"
      aria-labelledby="space-heading"
      className="w-full border-b border-black/8 py-16 sm:py-24"
    >
      <div className="shell">
        <p className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider opacity-50">
          <Armchair className="size-4" />
          <span>Space</span>
        </p>

        <h2 id="space-heading" className="serif mb-2 text-2xl font-bold tracking-tight sm:text-3xl lg:text-4xl">
          {sectionName(payload, 'space', '공간 안내')}
        </h2>
        <p className="mb-8 max-w-xl text-xs opacity-60 sm:text-sm">
          좌석과 이용 환경 안내입니다.
        </p>

        <dl className="grid max-w-4xl grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {rows.map((row) => (
            <div
              key={row.label}
              className="rounded-2xl border border-black/8 p-4 sm:p-5"
              style={{backgroundColor: 'var(--color-surface-alt)'}}
            >
              <dt className="mb-1 text-xs font-medium opacity-60">{row.label}</dt>
              <dd className="text-sm font-bold sm:text-base">{row.value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}