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

/**
 * 전시 · 관람 안내.
 *
 * ★ payload 에 없는 것 — 전시 자체
 *   에디터의 `exhibition.gallery` 는 전시 사진 + 관람 시간 + 관람료를 그린다. 그런데
 *   SitePayload 에도, 관광체험 업종 스키마(tour_activity.json)에도 전시 목록(작품·기획전),
 *   전시 기간, 관람료(admission) 필드가 없다. 그래서 "○○ 기획전 · 3월 1일까지 · 성인 5,000원"
 *   같은 화면은 근거 없이는 못 만든다 — 전시 기간과 관람료는 틀리면 그대로 헛걸음이다.
 *   (요금은 프로그램 단위 fact(price_adult/price_child)로 들어와 프로그램 섹션이 낸다.)
 *   전시 모델이 스키마에 생기면 그때 사진·기간·관람료를 여기에 붙인다.
 *
 * ★ 지금 그릴 수 있는 것 — 관람 조건에 답하는 확인 fact
 *   운영시간 · 회차 시간 · 휴무일 · 연령 제한 · 안내 언어.
 *   "언제 가면 볼 수 있나"에 답하는 값만 고른다. 한 줄도 없으면 섹션째 그리지 않는다.
 */
export function ExhibitionSection() {
  const payload = useSite();
  const rows = exhibitionRows(payload);

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

  return (
    <section
      id="exhibition"
      aria-labelledby="exhibition-heading"
      className="w-full border-b border-black/8 py-16 sm:py-24"
      style={{backgroundColor: 'var(--color-surface-alt)'}}
    >
      <div className="shell">
        <p className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider opacity-50">
          <Ticket className="size-4" />
          <span>Exhibition</span>
        </p>

        <h2 id="exhibition-heading" className="serif mb-2 text-2xl font-bold tracking-tight sm:text-3xl lg:text-4xl">
          {sectionName(payload, 'exhibition', '관람 안내')}
        </h2>
        <p className="mb-8 max-w-xl text-xs opacity-60 sm:text-sm">
          방문 전 관람 조건을 확인해 주세요.
        </p>

        <div
          className="max-w-3xl overflow-hidden rounded-2xl border border-black/8"
          style={{backgroundColor: 'var(--color-surface)'}}
        >
          <dl className="divide-y divide-black/5">
            {rows.map((row) => (
              <div
                key={row.label}
                className="flex flex-col justify-between gap-1 p-4 sm:flex-row sm:items-start sm:gap-4 sm:p-5"
              >
                <dt className="shrink-0 text-xs font-bold sm:w-32 sm:text-sm">{row.label}</dt>
                <dd className="flex-1 text-left text-xs sm:text-right sm:text-sm">{row.value}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </section>
  );
}