/* 중앙 카드 클릭 시 핵심 서비스 안내 모달 */
function ServicePopup({ data, center, editing, onClose, onEdit }) {
  const E = (path, value, multiline) => onEdit(path, value);

  function Editable({ path, value, tag = "span", className = "", multiline = false }) {
    const Tag = tag;
    return (
      <Tag
        className={"editable " + className}
        contentEditable={editing}
        suppressContentEditableWarning
        onBlur={(e) => E(path, multiline ? e.target.innerText : e.target.textContent)}
      >{value}</Tag>
    );
  }

  return (
    <div className="overlay" onMouseDown={(e) => { if (e.target === e.currentTarget && !editing) onClose(); }}>
      <div className="modal" data-editing={editing}>
        <button className="modal-close" onClick={onClose}>×</button>
        {center.best && <div className="ribbon">BEST</div>}
        {center.recommended && <div className="badge-rec">추천</div>}
        <div className="top-rule"></div>

        <Editable path="popup.title" value={data.title} tag="p" className="svc-title" />

        <div className="svc-chips">
          {data.services.map((s, i) => (
            <div className="chip" key={i}>
              <span className="ico">{s.icon}</span>
              <Editable path={`popup.services.${i}.label`} value={s.label} />
            </div>
          ))}
        </div>

        <div className="svc-body">
          <div className="printer">제품 이미지<br/>(교체 가능)</div>
          <div className="svc-desc">
            <Editable path="popup.bubble" value={data.bubble} tag="div" className="bubble" multiline />
            <Editable path="popup.description" value={data.description} tag="p" className="txt" multiline />
          </div>
        </div>
      </div>
    </div>
  );
}
window.ServicePopup = ServicePopup;