o2o-site-AEO/solution/site/src/layouts/paper/Rooms.tsx

import {Phone} from 'lucide-react';
import type {ChannelLink} from '@o2o/shared';
import {useSite} from '@site/lib/site-context';
import {bookingActionLabel, bookingLinks, sectionName, unitSpec, unitViews, type UnitView} from '@site/lib/derive';
import {Carousel, CarouselSlide} from '@site/lib/ui';
import {SectionHead} from './SectionHead';

export function Rooms() {
  const payload = useSite();
  const units = unitViews(payload);
  const spec = unitSpec(payload);
  const booking = bookingLinks(payload)[0];

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

  return (
    <section
      id="units"
      aria-labelledby="units-heading"
      className="border-line w-full border-b"
      style={{backgroundColor: 'var(--tpl-surface, #fff)', paddingBlock: 'var(--section-space)'}}
    >
      <div className="shell">
        <SectionHead
          id="units"
          title={sectionName(payload, spec.path, `${spec.label} ${units.length}개 안내`)}
        />
      </div>

      <div className="flex flex-col">
        {units.map((unit, i) => (
          <UnitPanel key={unit.unitId} unit={unit} no={i + 1} booking={booking} phone={payload.place.phone} />
        ))}
      </div>
    </section>
  );
}

function UnitPanel({
  unit,
  no,
  booking,
  phone,
}: {
  unit: UnitView;
  no: number;
  booking?: ChannelLink;
  phone?: string;
}) {
  return (
    <article className="border-line border-t">
      {unit.images.length > 0 && (
        <Carousel label={`${unit.name} 사진`} align="center" gap={0} arrows="overlay">
          {unit.images.map((image) => (
            <CarouselSlide key={image.mediaId} basis="basis-full">
              <div className="relative aspect-3/2 overflow-hidden">
                <img
                  src={image.url}
                  alt={image.alt}
                  loading="lazy"
                  decoding="async"
                  className="size-full object-cover"
                />
              </div>
            </CarouselSlide>
          ))}
        </Carousel>
      )}

      <div className="shell flex flex-col gap-3 py-6">
        <p
          className="text-[length:var(--fs-xs)] uppercase opacity-70"
          style={{letterSpacing: '0.24em'}}
        >
          {String(no).padStart(2, '0')}
        </p>
        <h3
          className="serif"
          style={{
            fontSize: 'clamp(1.1rem, 2.4vw, 1.4rem)',
            fontWeight: 'var(--tpl-heading-weight, 400)',
            letterSpacing: 'var(--tpl-heading-tracking, 0.03em)',
          }}
        >
          {unit.name}
        </h3>

        {unit.intro && (
          <p className="text-[length:var(--fs-sm)] leading-relaxed opacity-100">{unit.intro}</p>
        )}

        {unit.rows.length > 0 && (
          <dl className="border-line divide-line mt-2 divide-y border-t">
            {unit.rows.map((row) => (
              <div key={row.label} className="flex items-baseline justify-between gap-4 py-2 text-[length:var(--fs-sm)]">
                <dt className="text-muted shrink-0">{row.label}</dt>
                <dd className="text-right font-semibold">{row.value}</dd>
              </div>
            ))}
          </dl>
        )}

        {unit.chips.length > 0 && (
          <ul className="mt-1 flex flex-wrap gap-1.5">
            {unit.chips.map((chip) => (
              <li
                key={chip.label}
                className="border-line inline-flex items-center rounded-full border px-3 py-1 text-[length:var(--fs-xs)]"
              >
                {chip.value}
              </li>
            ))}
          </ul>
        )}

        {(booking || phone) && (
          <div className="mt-2 flex flex-wrap items-center gap-x-6 gap-y-1 text-[length:var(--fs-sm)] font-semibold">
            {booking && (
              <a
                href={booking.url}
                target="_blank"
                rel="noopener noreferrer"
                className="tap inline-flex items-center underline underline-offset-4"
              >
                {bookingActionLabel(booking)}
              </a>
            )}
            {phone && (
              <a href={`tel:${phone}`} className="tap inline-flex items-center gap-1.5 underline underline-offset-4">
                <Phone className="size-4" />
                <span>{phone}</span>
              </a>
            )}
          </div>
        )}
      </div>
    </article>
  );
}