import {Phone} from 'lucide-react';
import {useSite} from '@site/lib/site-context';
import {bookingLinks, bookingRows, bookingCtaLabel, sectionName} from '@site/lib/derive';
import {ActionLink, Field, Section} from '@site/lib/ui';

/**
 * 예약 안내.
 *
 * ★ 무엇을 근거로 그리나
 *   1) `payload.links` 중 예약을 실제로 받는 확정 채널(야놀자·여기어때·네이버 플레이스).
 *   2) 예약 관련 확인 fact(예약 필수 / 예약 방법).
 *   3) `place.phone` — 국내 소규모 사업장에서 전화는 여전히 1순위 예약 창구다.
 *
 * ★ 예약 링크를 지어내지 않는다
 *   "예약하기"를 눌렀는데 검색 결과가 뜨면 손님은 예약을 포기한다.
 *   근거가 하나도 없으면 섹션째 그리지 않는다.
 *
 * ★ 예약 버튼은 표 아래가 아니라 **오른쪽 기둥**에 세운다. 표가 길어지면 버튼이
 *   화면 밖으로 밀려, 정작 눌러야 할 것이 스크롤 두 번 뒤에 있었다.
 */
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"
      tone="alt"
      title={sectionName(payload, 'booking', '예약 안내')}
      lead={`${payload.place.name} 예약은 아래 경로로 받습니다.`}
    >
      <div className="grid gap-6 lg:grid-cols-12 lg:gap-10">
        {rows.length > 0 && (
          <dl className="panel divide-line divide-y overflow-hidden px-5 lg:col-span-7">
            {rows.map((row) => (
              <Field key={row.label} label={row.label} value={row.value} />
            ))}
          </dl>
        )}

        <div className={rows.length > 0 ? 'lg:col-span-5' : 'lg:col-span-12'}>
          {/* 표가 있을 때만 세로 기둥이다. 표가 없는데 세로로 세우면 버튼 하나가
              1200px 폭을 가로지르는 띠가 된다. */}
          <div
            className={
              rows.length > 0
                ? 'flex flex-col gap-2.5 sm:flex-row sm:flex-wrap lg:flex-col'
                : 'flex flex-col items-start gap-2.5 sm:flex-row sm:flex-wrap'
            }
          >
            {phone && (
              <ActionLink href={`tel:${phone}`} icon={<Phone className="size-4" />}>
                전화 예약 {phone}
              </ActionLink>
            )}

            {/* 확정된 채널만 나간다 — 확정 전 URL 은 동명 업소의 예약 페이지일 수 있다. */}
            {links.map((link) => (
              <ActionLink key={link.url} href={link.url} variant="outline" external>
                {bookingCtaLabel(link)}
              </ActionLink>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}