<?php
/**
 * VPN 앱 관리 메뉴 도움말 카드 공통 헬퍼
 * 사용법: vpn_help_card($cfg) — $cfg 배열 키:
 *   title, purpose, functions(array), results(array), target, warnings(array)
 */
if (!function_exists('vpn_help_card')) {
function vpn_help_card(array $cfg) {
    $id     = 'hc_' . md5($cfg['title'] ?? '');
    $title  = htmlspecialchars($cfg['title'] ?? '', ENT_QUOTES, 'UTF-8');
    ?>
<style>
.vpn-hc{border:1px solid #d0d7de;border-radius:8px;margin:0 0 22px;overflow:hidden;font-size:13px;line-height:1.65}
.vpn-hc-head{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:#f6f8fa;border-bottom:1px solid #d0d7de;cursor:pointer;user-select:none}
.vpn-hc-head:hover{background:#eaf0f6}
.vpn-hc-title{font-weight:bold;font-size:13.5px;color:#1a73e8;display:flex;align-items:center;gap:6px}
.vpn-hc-toggle{font-size:11px;color:#888;transition:transform .2s}
.vpn-hc-body{padding:14px 18px;display:flex;flex-wrap:wrap;gap:10px}
.vpn-hc-cell{flex:1 1 260px;min-width:220px;border-radius:6px;padding:10px 12px}
.vpn-hc-cell h4{margin:0 0 6px;font-size:12px;font-weight:bold;display:flex;align-items:center;gap:5px}
.vpn-hc-cell ul{margin:0;padding-left:16px}
.vpn-hc-cell li{margin-bottom:2px}
.vpn-hc-cell.c-purpose {background:#e8f4fd;border-left:4px solid #1a73e8}
.vpn-hc-cell.c-func    {background:#e8f5e9;border-left:4px solid #2e7d32}
.vpn-hc-cell.c-result  {background:#fff8e1;border-left:4px solid #f9a825}
.vpn-hc-cell.c-target  {background:#f3e5f5;border-left:4px solid #7b1fa2}
.vpn-hc-cell.c-warn    {background:#fdecea;border-left:4px solid #c62828}
.vpn-hc-cell.c-purpose h4{color:#1a73e8}
.vpn-hc-cell.c-func    h4{color:#2e7d32}
.vpn-hc-cell.c-result  h4{color:#e65100}
.vpn-hc-cell.c-target  h4{color:#7b1fa2}
.vpn-hc-cell.c-warn    h4{color:#c62828}
/* dark */
[data-theme=dark] .vpn-hc{border-color:#454545}
[data-theme=dark] .vpn-hc-head{background:#2d2d2d;border-color:#454545}
[data-theme=dark] .vpn-hc-head:hover{background:#353535}
[data-theme=dark] .vpn-hc-cell.c-purpose{background:#1a2c3d;border-color:#1a73e8}
[data-theme=dark] .vpn-hc-cell.c-func   {background:#1b2e1d;border-color:#4caf50}
[data-theme=dark] .vpn-hc-cell.c-result {background:#2e2610;border-color:#ffc107}
[data-theme=dark] .vpn-hc-cell.c-target {background:#261730;border-color:#ce93d8}
[data-theme=dark] .vpn-hc-cell.c-warn   {background:#2d1515;border-color:#ef5350}
[data-theme=dark] .vpn-hc-cell{color:#ccc}
[data-theme=dark] .vpn-hc-cell.c-purpose h4{color:#4da6ff}
[data-theme=dark] .vpn-hc-cell.c-func    h4{color:#81c784}
[data-theme=dark] .vpn-hc-cell.c-result  h4{color:#ffca28}
[data-theme=dark] .vpn-hc-cell.c-target  h4{color:#ce93d8}
[data-theme=dark] .vpn-hc-cell.c-warn    h4{color:#ef9a9a}
</style>
<div class="vpn-hc" id="<?= $id ?>">
  <div class="vpn-hc-head" onclick="vpnHcToggle('<?= $id ?>')">
    <span class="vpn-hc-title">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
      이 메뉴 안내 — <?= $title ?>
    </span>
    <span class="vpn-hc-toggle" id="<?= $id ?>_ico">▲ 접기</span>
  </div>
  <div class="vpn-hc-body" id="<?= $id ?>_body">

    <?php if (!empty($cfg['purpose'])): ?>
    <div class="vpn-hc-cell c-purpose">
      <h4>🎯 목적</h4>
      <p style="margin:0"><?= htmlspecialchars($cfg['purpose'], ENT_QUOTES, 'UTF-8') ?></p>
    </div>
    <?php endif; ?>

    <?php if (!empty($cfg['functions'])): ?>
    <div class="vpn-hc-cell c-func">
      <h4>⚙ 주요 기능</h4>
      <ul><?php foreach ((array)$cfg['functions'] as $f): ?><li><?= htmlspecialchars($f, ENT_QUOTES, 'UTF-8') ?></li><?php endforeach; ?></ul>
    </div>
    <?php endif; ?>

    <?php if (!empty($cfg['results'])): ?>
    <div class="vpn-hc-cell c-result">
      <h4>📋 작업 결과</h4>
      <ul><?php foreach ((array)$cfg['results'] as $r): ?><li><?= htmlspecialchars($r, ENT_QUOTES, 'UTF-8') ?></li><?php endforeach; ?></ul>
    </div>
    <?php endif; ?>

    <?php if (!empty($cfg['target'])): ?>
    <div class="vpn-hc-cell c-target">
      <h4>📱 영향 대상</h4>
      <p style="margin:0"><?= htmlspecialchars($cfg['target'], ENT_QUOTES, 'UTF-8') ?></p>
    </div>
    <?php endif; ?>

    <?php if (!empty($cfg['warnings'])): ?>
    <div class="vpn-hc-cell c-warn">
      <h4>⚠ 주의사항</h4>
      <ul><?php foreach ((array)$cfg['warnings'] as $w): ?><li><?= htmlspecialchars($w, ENT_QUOTES, 'UTF-8') ?></li><?php endforeach; ?></ul>
    </div>
    <?php endif; ?>

  </div>
</div>
<script>
(function(){
  var key = 'vpnHc_<?= $id ?>';
  if(localStorage.getItem(key) === 'closed') vpnHcClose('<?= $id ?>');
})();
function vpnHcToggle(id){
  var b = document.getElementById(id+'_body');
  if(b.style.display === 'none') { vpnHcOpen(id); } else { vpnHcClose(id); }
}
function vpnHcOpen(id){
  document.getElementById(id+'_body').style.display='';
  document.getElementById(id+'_ico').textContent='▲ 접기';
  localStorage.removeItem('vpnHc_'+id);
}
function vpnHcClose(id){
  document.getElementById(id+'_body').style.display='none';
  document.getElementById(id+'_ico').textContent='▼ 펼치기';
  localStorage.setItem('vpnHc_'+id,'closed');
}
</script>
    <?php
}
}
