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

import {Info} from 'lucide-react';
import {useSite} from '@/lib/site-context';
import {essentialRows} from '@/lib/derive';
import {formatKoreanDate} from '@/lib/format';

/**
 * 이용 정보 표 전체.
 *
 * AnswerBlock 이 상위 6개만 보여준다면 여기는 확인된 것 전부를 낸다.
 * ★ "확인 안 된 항목이 N개 있다"를 숨기지 않는다 — 없는 척하면
 *   손님이 다른 데서 틀린 값을 찾아 온다. 있다고 말하고 문의로 보낸다.
 */
export function EssentialInfoSection() {
  const payload = useSite();
  const rows = essentialRows(payload);
  const hiddenCount = payload.facts.filter(
    (fact) => fact.scope === 'place' && !rows.some((row) => row.label === fact.label),
  ).length;

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

  const half = Math.ceil(rows.length / 2);

  return (
    <section
      id="info"
      aria-labelledby="info-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">
          <Info className="size-4" />
          <span>Essential Information</span>
        </p>

        <div className="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end">
          <div>
            <h2 id="info-heading" className="serif text-2xl font-bold tracking-tight sm:text-3xl">
              {'이용 및 예약 안내'}
            </h2>
            <p className="mt-1 text-xs opacity-60 sm:text-sm">
              방문 전 확인이 필요한 운영 규정과 시설 안내입니다.
            </p>
          </div>
        </div>

        <div
          className="overflow-hidden rounded-2xl border border-black/8"
          style={{backgroundColor: 'var(--color-surface)'}}
        >
          <div className="grid grid-cols-1 divide-y divide-black/8 md:grid-cols-2 md:divide-x md:divide-y-0">
            {[rows.slice(0, half), rows.slice(half)].map((column, columnIndex) => (
              <dl key={columnIndex} className="divide-y divide-black/5">
                {column.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 sm:text-right">
                      <p className="text-xs font-medium sm:text-sm">{row.value}</p>
                      {row.note && <p className="mt-0.5 text-[11px] opacity-50">{row.note}</p>}
                    </dd>
                  </div>
                ))}
              </dl>
            ))}
          </div>

          <div className="flex flex-col items-center justify-between gap-2 border-t border-black/8 px-4 py-3.5 text-xs opacity-60 sm:flex-row sm:px-6">
            <span>
              {hiddenCount > 0
                ? `확인 중인 항목 ${hiddenCount}개는 표시하지 않았습니다. 필요하시면 전화로 문의해 주세요.`
                : '모든 항목이 사업자 확인을 거쳤습니다.'}
            </span>
            <span className="font-medium">{formatKoreanDate(payload.site.updatedAt)} 기준</span>
          </div>
        </div>
      </div>
    </section>
  );
}