import {useSite} from '@site/lib/site-context';
import {factualSummary} from '@site/seo/meta';
import {essentialRows} from '@site/lib/derive';
import {formatKoreanDate} from '@site/lib/format';

/**
 * 핵심 정보 요약 — AEO 의 핵심 블록.
 *
 * AI 검색은 페이지 전체를 요약하지 않는다. "답이 될 만한 문장"을 찾아 그대로 인용한다.
 * 그래서 상단에 단정문을 둔다: "체크인은 16:00입니다." 형태.
 * 표(dl)로 두는 이유는 label-value 관계가 마크업으로 드러나야 기계가 짝을 짓기 때문이다.
 *
 * ★ 여기 나오는 값은 전부 확인된 fact 다. essentialRows() 가 걸러 준다.
 * ★ 히어로 바로 아래라 섹션 여백을 통째로 쓰지 않는다(Section 을 안 쓰는 유일한 섹션).
 *   첫 화면과 이 블록 사이가 벌어지면 "답"이 접힌 화면 밖으로 밀린다.
 */
export function AnswerBlock() {
  const payload = useSite();
  const rows = essentialRows(payload).slice(0, 6);
  const summary = payload.narrative.summary ?? factualSummary(payload);

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

  return (
    <section
      id="summary"
      aria-labelledby="summary-heading"
      className="border-line w-full border-b py-10 sm:py-14"
      style={{backgroundColor: 'var(--tpl-surface-alt, #f5f5f4)'}}
    >
      <div className="shell">
        <div className="grid gap-8 lg:grid-cols-12 lg:gap-12">
          <div className="lg:col-span-5">
            {/* ★ "한눈에 보는 ○○" 같은 문구를 걷어냈다 — 국내 사이트가 안 쓰는 말투다. */}
            <h2 id="summary-heading" className="h3">
              예약 전 확인
            </h2>
            {/* 단정문 한 덩어리 — 인용되기 좋은 형태. */}
            {summary && (
              <p className="measure mt-3 text-[length:var(--fs-body)] leading-relaxed">{summary}</p>
            )}
            <p className="text-muted mt-3 text-[length:var(--fs-xs)]">
              {formatKoreanDate(payload.site.updatedAt)} 기준, 사업자가 확인한 정보입니다.
            </p>
          </div>

          {rows.length > 0 && (
            <dl className="grid grid-cols-1 gap-x-10 lg:col-span-7 xl:grid-cols-2">
              {/*
                ★ 값을 오른쪽에 붙이지 않는다. 긴 문장(환불 규정)이 오면 라벨과 멀어진 채
                  세 줄로 감겨서, 어느 값이 어느 항목인지 눈이 짝을 못 짓는다.
                  라벨 폭을 고정하고 값은 왼쪽에서 시작한다.
              */}
              {rows.map((row) => (
                <div
                  key={row.label}
                  className="border-line flex flex-col gap-0.5 py-2.5 sm:flex-row sm:gap-4 sm:border-b"
                >
                  <dt className="text-muted shrink-0 text-[length:var(--fs-sm)] sm:w-28">
                    {row.label}
                  </dt>
                  <dd className="text-[length:var(--fs-sm)] font-semibold">{row.value}</dd>
                </div>
              ))}
            </dl>
          )}
        </div>
      </div>
    </section>
  );
}