/**
 * 문의 · 연락 카드 — 전화 / 카카오 / 인스타로 바로 보낸다.
 * 폼을 받을 준비가 안 된 사장님에게는 이쪽이 사고가 없다.
 */
import {Phone} from 'lucide-react';
import {
  EmptyStateNotice,
  SectionBody,
  SectionFrame,
  SectionHeading,
} from '../../primitives';
import type {SectionRenderProps} from '../../types';

export function InquiryCta(props: SectionRenderProps) {
  const {section, isSelected, onSelect, storeName, template} = props;
  // ★ 연락처(place_links)는 SectionRenderProps 로 흘러오지 않는다. 값이 생기기 전까지
  //   버튼째 숨긴다 — 시연용 번호를 붙이면 남의 가게로 전화가 간다.
  const phone = props.infoFields.find((f) => f.id === 'phone')?.value?.trim();

  return (
    <SectionFrame section={section} isSelected={isSelected} onSelect={onSelect} tone="white">
      <SectionBody width="narrow">
        <SectionHeading variant="centered" title={section.name} subtitle={section.description} />

        <div className="flex flex-col items-center gap-3 rounded-2xl border border-stone-200/80 bg-stone-50/70 p-6 text-center">
          <p className="text-xs leading-relaxed text-stone-600">
            {section.body || `${storeName} 단체·대관 문의는 아래로 연락 주시면 담당자가 안내해 드립니다.`}
          </p>

          {phone ? (
            <div className="flex flex-wrap items-center justify-center gap-2">
              <a
                href={`tel:${phone}`}
                onClick={(e) => e.stopPropagation()}
                className="inline-flex items-center gap-1.5 rounded-xl px-5 py-2.5 text-xs font-semibold text-white shadow-xs transition-opacity hover:opacity-90"
                style={{backgroundColor: template.colors.primary}}
              >
                <Phone className="size-3.5" />
                <span>{phone}</span>
              </a>
            </div>
          ) : (
            <EmptyStateNotice>연락처는 아직 준비 중입니다.</EmptyStateNotice>
          )}
        </div>
      </SectionBody>
    </SectionFrame>
  );
}