<?php
/* views/pages/suporte.php — versão dinâmica via whitelabel.json */

// === Lê config da página de suporte do whitelabel.json ===
$wlPath = __DIR__ . '/../../public/whitelabel.json';
$support = [
    'enabled'    => true,
    'badge_text' => 'Central de Atendimento',
    'title'      => 'Como podemos ajudar?',
    'subtitle'   => 'Escolha o canal ideal para o seu momento.',
    'channels'   => [],
];

if (is_file($wlPath) && is_readable($wlPath)) {
    $raw = @file_get_contents($wlPath);
    $data = json_decode($raw, true);
    if (is_array($data) && is_array($data['support'] ?? null)) {
        $support = array_merge($support, $data['support']);
    }
}

// Paleta de cores predefinidas (mesma do editor)
$SUP_COLORS = [
    'purple'  => ['from' => '#7c3aed', 'to' => '#6366f1', 'light' => '#f0f4ff'],
    'green'   => ['from' => '#25d366', 'to' => '#128c7e', 'light' => '#f0fdf4'],
    'orange'  => ['from' => '#f59e0b', 'to' => '#ef4444', 'light' => '#fffbeb'],
    'blue'    => ['from' => '#3b82f6', 'to' => '#6366f1', 'light' => '#eff6ff'],
    'cyan'    => ['from' => '#6ee7ff', 'to' => '#06b6d4', 'light' => '#ecfeff'],
    'pink'    => ['from' => '#ec4899', 'to' => '#f43f5e', 'light' => '#fdf2f8'],
    'slate'   => ['from' => '#64748b', 'to' => '#475569', 'light' => '#f8fafc'],
    'emerald' => ['from' => '#10b981', 'to' => '#059669', 'light' => '#ecfdf5'],
];

// Se desabilitado: mostra apenas uma mensagem
if (empty($support['enabled'])) {
    ?>
    <div class="sup-wrap-disabled">
        <h2>Página indisponível</h2>
        <p>A página de suporte está temporariamente desativada.</p>
    </div>
    <style>
        .sup-wrap-disabled { max-width: 600px; margin: 80px auto; text-align: center; padding: 24px; color: #64748b; }
        .sup-wrap-disabled h2 { color: #0f172a; margin: 0 0 8px; }
    </style>
    <?php
    return;
}

// Filtra apenas canais ativos, ordena por position
$channels = array_filter(
    $support['channels'] ?? [],
    fn($c) => !empty($c['enabled']) && !empty($c['title']) && !empty($c['button_url'])
);
usort($channels, fn($a, $b) => ($a['position'] ?? 0) <=> ($b['position'] ?? 0));
?>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

  .sup-wrap {
    font-family: 'Plus Jakarta Sans', sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
    color: #1a1a2e;
  }

  .sup-header { margin-bottom: 3rem; }
  .sup-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #f0f4ff; color: #4f46e5;
    font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding: .3rem .85rem; border-radius: 999px; margin-bottom: 1rem;
    border: 1px solid #e0e7ff;
  }
  .sup-title { font-size: 2rem; font-weight: 700; color: #0f172a; margin: 0 0 .6rem; line-height: 1.2; }
  .sup-sub { color: #64748b; font-size: .975rem; line-height: 1.6; margin: 0; max-width: 560px; }

  .sup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

  .sup-card {
    background: #fff; border: 1px solid #e8edf5; border-radius: 20px;
    padding: 1.75rem; display: flex; flex-direction: column; gap: .85rem;
    position: relative; overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
  }
  .sup-card:hover {
    transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.08); border-color: #c7d2fe;
  }
  .sup-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 20px 20px 0 0; opacity: 0;
    transition: opacity .2s;
    background: linear-gradient(90deg, var(--card-from), var(--card-to));
  }
  .sup-card:hover::before { opacity: 1; }

  .sup-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
    background: var(--card-light);
  }
  .sup-card-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0; }
  .sup-card-desc { font-size: .9rem; color: #64748b; line-height: 1.6; margin: 0; flex: 1; }
  .sup-card-note {
    font-size: .8rem; color: #94a3b8; line-height: 1.55;
    background: #f8fafc; border-radius: 10px; padding: .65rem .85rem;
    border: 1px solid #f1f5f9; margin: 0;
  }
  .sup-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem 1.2rem; border-radius: 10px;
    font-size: .875rem; font-weight: 600; text-decoration: none;
    transition: filter .2s, transform .15s;
    align-self: flex-start; font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, var(--card-from), var(--card-to));
    box-shadow: 0 3px 12px color-mix(in srgb, var(--card-from) 30%, transparent);
  }
  .sup-btn:hover { filter: brightness(1.08); transform: translateX(2px); }

  .sup-empty {
    text-align: center; padding: 60px 20px; color: #94a3b8;
    background: #fff; border-radius: 16px; border: 1px solid #e8edf5;
  }

  @media (max-width: 700px) {
    .sup-grid { grid-template-columns: 1fr; }
    .sup-title { font-size: 1.5rem; }
  }
</style>

<div class="sup-wrap">

  <div class="sup-header">
    <?php if (!empty($support['badge_text'])): ?>
      <div class="sup-badge">⚡ <?= htmlspecialchars($support['badge_text']) ?></div>
    <?php endif; ?>
    <h1 class="sup-title"><?= htmlspecialchars($support['title']) ?></h1>
    <?php if (!empty($support['subtitle'])): ?>
      <p class="sup-sub"><?= htmlspecialchars($support['subtitle']) ?></p>
    <?php endif; ?>
  </div>

  <?php if (empty($channels)): ?>
    <div class="sup-empty">
      <p>Nenhum canal de atendimento configurado no momento.</p>
    </div>
  <?php else: ?>
    <div class="sup-grid">
      <?php foreach ($channels as $c):
        $palette = $SUP_COLORS[$c['color'] ?? 'purple'] ?? $SUP_COLORS['purple'];
        $styleVars = sprintf(
            '--card-from:%s;--card-to:%s;--card-light:%s',
            htmlspecialchars($palette['from'], ENT_QUOTES),
            htmlspecialchars($palette['to'],   ENT_QUOTES),
            htmlspecialchars($palette['light'],ENT_QUOTES)
        );
      ?>
        <div class="sup-card" style="<?= $styleVars ?>">
          <div class="sup-icon"><?= htmlspecialchars($c['icon'] ?? '💬') ?></div>
          <div>
            <h3 class="sup-card-title"><?= htmlspecialchars($c['title']) ?></h3>
            <?php if (!empty($c['description'])): ?>
              <p class="sup-card-desc"><?= htmlspecialchars($c['description']) ?></p>
            <?php endif; ?>
          </div>
          <?php if (!empty($c['note'])): ?>
            <p class="sup-card-note"><?= htmlspecialchars($c['note']) ?></p>
          <?php endif; ?>
          <a href="<?= htmlspecialchars($c['button_url'], ENT_QUOTES) ?>"
             target="_blank" rel="noopener noreferrer"
             class="sup-btn">
            <?= htmlspecialchars($c['button_label'] ?? 'Acessar →') ?>
          </a>
        </div>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</div>
