<?php
require __DIR__ . '/lib/i18n.php';
crm_lang_apply();
?>
<!DOCTYPE html>
<html lang="<?= crm_lang() ?>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= t('sup_title') ?> — <?= t('brand') ?></title>
<link rel="stylesheet" href="/style.css">
<style>
.page{max-width:640px;margin:0 auto;padding:56px 24px 80px;text-align:center}
.page-title{font-size:28px;font-weight:800;color:#fff;margin-bottom:12px}
.page-sub{font-size:16px;color:#64748b;line-height:1.65;margin-bottom:48px}
.contact-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:32px 28px;margin-bottom:16px;text-align:left}
.contact-card.primary{border-color:#7c3aed;background:rgba(124,58,237,.06)}
.contact-icon{font-size:28px;margin-bottom:14px}
.contact-title{font-size:16px;font-weight:700;color:#e2e8f0;margin-bottom:8px}
.contact-desc{font-size:14px;color:#64748b;line-height:1.65;margin-bottom:20px}
.contact-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;padding:12px 24px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none}
.contact-badge{display:inline-block;background:rgba(34,197,94,.15);color:#4ade80;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:14px;letter-spacing:.3px}
.faq-mini{margin-top:56px;text-align:left}
.faq-mini h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:24px;text-align:center}
.faq-item{border-bottom:1px solid rgba(255,255,255,.06);padding:18px 0}
.faq-q{font-size:15px;font-weight:600;color:#e2e8f0;margin-bottom:6px}
.faq-a{font-size:14px;color:#64748b;line-height:1.65}
.faq-a a{color:#a78bfa}
</style>
</head>
<body>

<nav>
  <a class="nav-logo" href="/">
    <div class="nav-icon">✨</div>
    <div class="nav-name"><?= t('brand') ?></div>
  </a>
  <div class="nav-right">
    <?= crm_lang_switcher() ?>
    <a class="nav-back" href="/"><?= t('nav_home') ?></a>
  </div>
</nav>

<div class="page">
  <div class="page-title"><?= t('sup_title') ?></div>
  <p class="page-sub"><?= t('sup_sub') ?></p>

  <div class="contact-card primary">
    <div class="contact-badge"><?= t('sup_badge') ?></div>
    <div class="contact-icon">💬</div>
    <div class="contact-title"><?= t('sup_tg_h') ?></div>
    <div class="contact-desc"><?= t('sup_tg_p') ?></div>
    <a class="contact-btn" href="https://t.me/nowserioushelp_bot" target="_blank" rel="noopener"><?= t('sup_tg_btn') ?></a>
  </div>

  <div class="contact-card">
    <div class="contact-icon">📧</div>
    <div class="contact-title"><?= t('sup_mail_h') ?></div>
    <div class="contact-desc"><?= t('sup_mail_p') ?></div>
    <a class="contact-btn" href="mailto:hello@clickai24.com"><?= t('sup_mail_btn') ?></a>
  </div>

  <div class="faq-mini">
    <h3><?= t('sup_faq_h') ?></h3>
    <?php for ($i = 1; $i <= 4; $i++): ?>
    <div class="faq-item">
      <div class="faq-q"><?= t("sup_f{$i}_q") ?></div>
      <div class="faq-a"><?= t("sup_f{$i}_a") ?></div>
    </div>
    <?php endfor; ?>
  </div>
</div>

<footer>
  <div class="footer-logo"><?= t('brand') ?> &copy; <?= date('Y') ?></div>
  <div class="footer-links">
    <a href="/privacy"><?= t('footer_privacy') ?></a>
    <a href="/terms"><?= t('footer_terms') ?></a>
    <a href="/support"><?= t('footer_support') ?></a>
  </div>
  <div class="footer-copy"><?= crm_host_label() ?> | hello@clickai24.com</div>
</footer>

</body>
</html>
