import {useSite} from '@site/lib/site-context';
import {galleryImages, sectionBody} from '@site/lib/derive';
import {Section} from '@site/lib/ui';

/**
 * 소개.
 *
 * ★ 제목을 섹션 머리가 아니라 **글 칸 안**에 둔다(Section bare).
 *   소개문이 한두 줄뿐인 가게가 대부분이라, 제목을 위에 따로 세우면 사진 옆 칸에
 *   문장 한 줄만 떠 있었다. 제목이 그 칸으로 내려오면 두 칸의 무게가 맞는다.
 * ★ 사진과 글은 7:5. 남는 자리는 여백이 아니라 사진이 가져간다.
 */
export function AboutSection() {
  const payload = useSite();
  const {narrative, place} = payload;
  // 직접 입력한 소개가 있으면 그 문장이 이긴다. 없을 때만 수집·승인된 intro fact 로 떨어진다.
  // ★ 에디터 본문을 계수만 하고 화면에 안 내면 빈 페이지가 발행 게이트를 통과한다.
  const paragraphs = sectionBody(payload, 'intro');
  const about = paragraphs.length > 0 ? paragraphs : narrative.about;
  if (about.length === 0) return null;

  // 대표가 아닌 사진 중 첫 장. 히어로와 같은 사진이 두 번 나오지 않게.
  const image = galleryImages(payload).find((m) => !m.isPrimary);
  const title = narrative.heroSubline ?? `${place.name} 소개`;

  return (
    <Section id="about" bare title={title}>
      <div className="grid grid-cols-1 items-center gap-8 lg:grid-cols-12 lg:gap-14">
        {image && (
          <figure className="lg:col-span-7">
            {/* ★ 높이 상한을 둔다. 3:2 를 7칸 폭에 그대로 주면 사진 하나가 화면 하나를 먹고,
                옆 칸의 짧은 소개문이 그 높이만큼 비어 보인다. */}
            <div className="tpl-border border-line relative aspect-4/3 max-h-[26rem] overflow-hidden rounded-xl border lg:aspect-3/2">
              <img
                src={image.url}
                alt={image.alt}
                loading="lazy"
                decoding="async"
                width={image.width}
                height={image.height}
                className="size-full object-cover"
              />
            </div>
            {image.caption && (
              <figcaption className="text-muted mt-2 text-[length:var(--fs-xs)]">
                {image.caption}
              </figcaption>
            )}
          </figure>
        )}

        <div className={image ? 'lg:col-span-5' : 'lg:col-span-12'}>
          {/* 제목은 사장님이 붙인 섹션 이름이 먼저다. 없을 때만 "○○ 소개" 로 떨어진다. */}
          <h2 id="about-heading" className="h2 mb-6 flex items-center gap-2.5">
            <i aria-hidden className="h-[1em] w-[3px] shrink-0 bg-current opacity-25" />
            <span className="min-w-0">{title}</span>
          </h2>
          <div className="measure space-y-4 text-[length:var(--fs-lead)] leading-[1.8]">
            {about.map((paragraph, index) => (
              <p key={index}>{paragraph}</p>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}