o2o-site-AEO/solution/site/src/sections/BookingSection.tsx

import {ArrowUpRight, CalendarCheck, Phone} from 'lucide-react';
import {useSite} from '@/lib/site-context';
import {bookingLinks, bookingRows, channelLabel, sectionName} from '@/lib/derive';

/**
 * 예약 안내.
 *
 * ★ 무엇을 근거로 그리나
 *   1) `payload.links` 중 예약을 실제로 받는 확정 채널(야놀자·여기어때·네이버 플레이스).
 *   2) 예약 관련 확인 fact(예약 필수 / 예약 방법) — 음식점·관광체험 스키마에 있다.
 *   3) `place.phone` — 국내 소규모 사업장에서 전화는 여전히 1순위 예약 창구다.
 *
 * ★ 예약 링크를 지어내지 않는다
 *   관리자 캔버스는 채널 URL 이 안 흘러와서 상호 검색으로 떨어뜨리지만(`bookingHref`),
 *   발행본에는 확정된 채널 URL 이 실려 온다. 그러니 여기서는 검색으로 떨어뜨리지 않는다 —
 *   "예약하기"를 눌렀는데 검색 결과가 뜨면 손님은 예약을 포기한다.
 *   근거가 하나도 없으면 섹션째 그리지 않는다.
 */
export function BookingSection() {
  const payload = useSite();
  const links = bookingLinks(payload);
  const rows = bookingRows(payload);
  const phone = payload.place.phone;

  if (links.length === 0 && rows.length === 0 && !phone) return null;

  return (
    <section
      id="booking"
      aria-labelledby="booking-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">
          <CalendarCheck className="size-4" />
          <span>Booking</span>
        </p>

        <h2 id="booking-heading" className="serif mb-2 text-2xl font-bold tracking-tight sm:text-3xl lg:text-4xl">
          {sectionName(payload, 'booking', '예약 안내')}
        </h2>
        <p className="mb-8 max-w-xl text-xs opacity-60 sm:text-sm">
          {payload.place.name} 예약은 아래 경로로 받습니다.
        </p>

        <div
          className="max-w-3xl overflow-hidden rounded-2xl border border-black/8"
          style={{backgroundColor: 'var(--color-surface)'}}
        >
          {rows.length > 0 && (
            <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 className="flex flex-wrap items-center gap-2 border-t border-black/8 p-4 sm:p-5">
            {phone && (
              <a
                href={`tel:${phone}`}
                className="inline-flex items-center gap-1.5 rounded-xl px-4 py-2.5 text-xs font-semibold text-white transition-opacity hover:opacity-90"
                style={{backgroundColor: 'var(--color-brand)'}}
              >
                <Phone className="size-3.5" />
                <span>전화 예약 {phone}</span>
              </a>
            )}

            {/* 확정된 채널만 나간다 — 확정 전 URL 은 동명 업소의 예약 페이지일 수 있다. */}
            {links.map((link) => (
              <a
                key={link.url}
                href={link.url}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 rounded-xl border border-black/10 px-4 py-2.5 text-xs font-semibold transition-colors hover:bg-black/5"
                style={{backgroundColor: 'var(--color-surface-alt)'}}
              >
                <span>{channelLabel(link)}</span>
                <ArrowUpRight className="size-3.5" />
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}