// 문의 — 4채널 버튼. 순서는 cms_config.floating.order 와 동기화 (admin에서 변경)
import { ICONS } from './icons.js';

// 2026-04-29: 문의 인트로 멘트 CMS화 (사용자 요청)
export function renderInquiryIntro(cms) {
  const m = cms.inquiry || {};
  if (!m.intro) return;
  document.querySelectorAll('[data-cms="inquiry.intro"]').forEach(el => {
    el.textContent = m.intro;
  });
}

const DEFAULT_ORDER = ['telegram', 'line', 'instagram', 'kakao'];
const META = {
  telegram:  { label: 'Telegram',  sub: '실시간 응대', icon: ICONS.telegram,  cls: 'telegram'  },
  line:      { label: 'LINE',      sub: '공식 채널',   icon: ICONS.line,      cls: 'line'      },
  instagram: { label: 'Instagram', sub: '@officialDM', icon: ICONS.instagram, cls: 'instagram' },
  kakao:     { label: 'KakaoTalk', sub: '카톡 채널',   icon: ICONS.kakao,     cls: 'kakao'     }
};

export function renderContactChannels(cms) {
  const root = document.getElementById('contact-channels');
  if (!root) return;
  const cfg = cms.floating || {};

  const customOrder = Array.isArray(cfg.order) ? cfg.order.filter(k => META[k]) : DEFAULT_ORDER;
  const order = [...customOrder];
  for (const k of DEFAULT_ORDER) {
    if (!order.includes(k)) order.push(k);
  }

  root.innerHTML = order.map(key => {
    const m = META[key];
    if (!m) return '';
    const ch = cfg[key] || {};
    const enabled = ch.enabled !== false;
    const url = ch.url || '#';
    return `
      <a class="contact-channel ${m.cls} ${enabled ? '' : 'is-disabled'}"
         href="${enabled ? url : 'javascript:void(0)'}"
         target="_blank" rel="noopener"
         aria-label="${m.label} 문의">
        <span class="icon">${m.icon}</span>
        <span class="label">${m.label}</span>
        <span class="sub">${m.sub}</span>
      </a>
    `;
  }).join('');
}
