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

import {ChevronDown, Phone} from 'lucide-react';
import {useSite} from '@/lib/site-context';
import {sectionName, unitSpec, unitViews} from '@/lib/derive';

/**
 * 객실 · 메뉴 · 프로그램 — 업종에 따라 이름만 달라진다.
 *
 * ★ 예전에는 카드가 상세 **페이지**로 넘어갔다. 사이트를 한 장으로 합치면서
 *   그 페이지의 내용(이용 정보 표 · 사진 전체 · 전화 문의)을 카드 안으로 들여왔다.
 *   빼고 합쳤으면 확인된 fact 가 화면에서 사라지고, JSON-LD 에는 남아 있어
 *   발행 게이트(화면 ↔ 구조화 데이터 대조)에 걸린다.
 *
 * ★ 펼침은 <details> 다. 자바스크립트 없이 동작하고, 크롤러는 접힌 내용도 읽는다 —
 *   조건부 렌더로 감추면 HTML 에 아예 없어서 AI 가 못 본다.
 */
export function UnitsSection() {
  const payload = useSite();
  const spec = unitSpec(payload);
  const units = unitViews(payload);

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

  return (
    <section
      id="units"
      aria-labelledby="units-heading"
      className="w-full border-b border-black/8 py-16 sm:py-24"
    >
      <div className="shell">
        <div className="mb-10 flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
          <div>
            <p className="mb-2 text-xs font-semibold uppercase tracking-wider opacity-50">
              {spec.label}
            </p>
            {/* 섹션 id 는 업종마다 다르다(rooms · menu · programs) — spec.path 가 그 id 다.
                사장님이 이름을 안 바꿨으면 지금까지 쓰던 "객실 3개 안내" 꼴로 떨어진다. */}
            <h2 id="units-heading" className="serif text-2xl font-bold tracking-tight sm:text-3xl lg:text-4xl">
              {sectionName(payload, spec.path, `${spec.label} ${units.length}개 안내`)}
            </h2>
          </div>
        </div>

        <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:gap-8">
          {units.map((unit) => (
            <li
              key={unit.unitId}
              className="flex flex-col justify-between overflow-hidden rounded-2xl border border-black/8"
              style={{backgroundColor: 'var(--color-surface-alt)'}}
            >
              <div>
                {unit.images[0] && (
                  <div className="relative aspect-16/10 overflow-hidden sm:aspect-16/9">
                    <img
                      src={unit.images[0].url}
                      alt={unit.images[0].alt}
                      loading="lazy"
                      decoding="async"
                      className="size-full object-cover"
                    />
                    {unit.priceText && (
                      <span
                        className="absolute bottom-3 right-3 rounded-lg px-2.5 py-1 text-xs font-bold"
                        style={{
                          backgroundColor: 'var(--color-surface)',
                          color: 'var(--color-ink)',
                        }}
                      >
                        {unit.priceText}
                      </span>
                    )}
                  </div>
                )}

                <div className="space-y-3 p-4 sm:space-y-4 sm:p-6">
                  <h3 className="serif text-base font-bold leading-snug sm:text-xl">
                    {unit.name}
                  </h3>

                  {unit.chips.length > 0 && (
                    <ul className="flex flex-wrap items-center gap-1.5 sm:gap-2">
                      {unit.chips.map((chip) => (
                        <li
                          key={chip.label}
                          className="rounded-lg border border-black/8 px-2.5 py-1 text-xs"
                          style={{backgroundColor: 'var(--color-surface)'}}
                        >
                          <span className="opacity-50">{chip.label} </span>
                          <span className="font-medium">{chip.value}</span>
                        </li>
                      ))}
                    </ul>
                  )}

                  {unit.intro && (
                    <p className="text-xs leading-relaxed opacity-70">{unit.intro}</p>
                  )}
                </div>
              </div>

              {(unit.rows.length > 0 || unit.images.length > 1) && (
                <details className="group border-t border-black/8">
                  <summary className="flex cursor-pointer list-none items-center justify-between gap-2 p-4 text-xs font-semibold sm:p-6">
                    <span>{unit.name} 자세히</span>
                    <ChevronDown className="size-4 transition-transform group-open:rotate-180" />
                  </summary>

                  <div className="space-y-5 px-4 pb-4 sm:px-6 sm:pb-6">
                    {unit.rows.length > 0 && (
                      <dl className="divide-y divide-black/5 border-t border-black/8">
                        {unit.rows.map((row) => (
                          <div
                            key={row.label}
                            className="flex items-start justify-between gap-4 py-2 text-xs"
                          >
                            <dt className="shrink-0 opacity-55">{row.label}</dt>
                            <dd className="text-right font-semibold">{row.value}</dd>
                          </div>
                        ))}
                      </dl>
                    )}

                    {unit.images.length > 1 && (
                      <ul className="grid grid-cols-2 gap-2">
                        {unit.images.slice(1).map((image) => (
                          <li
                            key={image.mediaId}
                            className="relative aspect-16/10 overflow-hidden rounded-xl"
                          >
                            <img
                              src={image.url}
                              alt={image.alt}
                              loading="lazy"
                              decoding="async"
                              className="size-full object-cover"
                            />
                          </li>
                        ))}
                      </ul>
                    )}

                    {payload.place.phone && (
                      <a
                        href={`tel:${payload.place.phone}`}
                        className="flex w-full items-center justify-center gap-1.5 rounded-xl px-3 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>{payload.place.phone} 문의</span>
                      </a>
                    )}
                  </div>
                </details>
              )}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}