/**
 * 소개 · 사진 옆 글 — 왼쪽 세로 사진, 오른쪽 문단 + 특징 목록.
 * 사진과 설명을 같은 눈높이에서 함께 읽히고 싶을 때.
 */
import {EmptyStateNotice, SectionBody, SectionFrame, SectionHeading} from '../../primitives';
import type {SectionRenderProps} from '../../types';
import {primaryPhoto, introParagraph, introSummary} from '../common';

export function IntroSideBySide(props: SectionRenderProps) {
  const intro =
    props.section.body?.trim() ||
    introSummary(props.industryId, props.infoFields) ||
    introParagraph(props.industryId, props.infoFields);
  const {section, isSelected, onSelect, storeName, template, photos} = props;
  const shot = photos[1] ?? primaryPhoto(photos);
  // 사진이 없으면 회색 판만 남기고 <img> 는 렌더하지 않는다.
  const shotUrl = shot?.url;

  return (
    <SectionFrame section={section} isSelected={isSelected} onSelect={onSelect} tone="paper">
      <SectionBody>
        <SectionHeading
          variant="eyebrow"
          eyebrow="ABOUT"
          title={section.name}
          subtitle={section.description}
        />

        <div className="grid grid-cols-1 items-center gap-6 md:grid-cols-12">
          <div className="md:col-span-5">
            <div className="relative aspect-3/4 overflow-hidden rounded-2xl border border-stone-200/80 bg-stone-100">
              {shotUrl && (
                <img src={shotUrl} alt={`${storeName} 공간`} className="size-full object-cover" />
              )}
            </div>
          </div>

          <div className="space-y-4 md:col-span-7">
            {intro ? (
              <p className="text-xs leading-relaxed text-stone-700 sm:text-sm">{intro}</p>
            ) : (
              <EmptyStateNotice>
                아직 소개문이 없습니다 — 확인된 정보만 근거로 씁니다.
              </EmptyStateNotice>
            )}
          </div>
        </div>
      </SectionBody>
    </SectionFrame>
  );
}