<?php
require_once 'includes/config.php';
$successMsg = ''; $errorMsg = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $formType = $_POST['form_type'] ?? '';
    if ($formType === 'email') {
        $name    = trim($_POST['name'] ?? '');
        $email   = trim($_POST['email'] ?? '');
        $subject = trim($_POST['subject'] ?? '');
        $message = trim($_POST['message'] ?? '');
        if ($name && $email && $subject && $message && filter_var($email, FILTER_VALIDATE_EMAIL)) {
            require_once 'PHPMailer/src/PHPMailer.php';
            require_once 'PHPMailer/src/SMTP.php';
            require_once 'PHPMailer/src/Exception.php';
            try {
                $mail = new PHPMailer\PHPMailer\PHPMailer(true);
                require_once 'includes/mailer.php';
                $mail->setFrom(SMTP_FROM, $name);
                $mail->addReplyTo($email, $name);
                $mail->addAddress('support@edurx.icu', 'StudyTrack Support');
                $mail->Subject = '[Contact Form] ' . $subject;
                $mail->isHTML(true);
                $mail->Body = "<div style='font-family:Poppins,sans-serif;max-width:600px;margin:0 auto;background:#16161f;color:#f1f5f9;padding:32px;border-radius:16px;'>
                  <h2 style='color:#a78bfa;margin-bottom:16px;'>📬 New Support Message</h2>
                  <table style='width:100%;border-collapse:collapse;'>
                    <tr><td style='padding:8px 0;color:#94a3b8;width:100px;'>Name</td><td style='color:#f1f5f9;font-weight:600;'>".htmlspecialchars($name)."</td></tr>
                    <tr><td style='padding:8px 0;color:#94a3b8;'>Email</td><td>".htmlspecialchars($email)."</td></tr>
                    <tr><td style='padding:8px 0;color:#94a3b8;'>Subject</td><td>".htmlspecialchars($subject)."</td></tr>
                  </table>
                  <div style='margin-top:20px;padding:16px;background:#1a1a2e;border-radius:10px;'>".nl2br(htmlspecialchars($message))."</div>
                </div>";
                $mail->send();
                $successMsg = 'email';
            } catch(Exception $e) { $errorMsg = 'email'; }
        } else { $errorMsg = 'email_validation'; }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Contact & Support — <?= SITE_NAME ?></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?= SITE_URL ?>/assets/css/style.css">
<link rel="icon" type="image/png" href="https://studytrack.edurx.icu/studytrack/images/studytrack.png">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#08080f;color:#e2e8f0;font-family:'Poppins',sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
:root{--vi:#7c6af0;--vi2:#a78bfa;--cy:#22d3ee;--card:#13131f;--card2:#1a1a2e;--border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.12);--ink:#e2e8f0;--ink-dim:#94a3b8;--ink-ghost:#475569;--glow-vi:rgba(124,106,240,.35);--r:14px;--r2:20px}
.container{max-width:1100px;margin:0 auto;padding:0 24px}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:999;padding:0 24px;transition:background .3s}
.nav.scrolled{background:rgba(8,8,15,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo img{width:34px;height:34px;border-radius:9px}
.nav-logo-text{font-family:'Nunito',sans-serif;font-size:18px;font-weight:800;background:linear-gradient(135deg,#fff 30%,var(--vi2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-logo-by{font-size:9px;font-weight:500;color:var(--ink-ghost);letter-spacing:.5px;text-transform:uppercase;display:block;line-height:1}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:7px 14px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink-dim);transition:all .2s}
.nav-links a:hover,.nav-links a.act{color:var(--ink);background:rgba(255,255,255,.05)}
.nav-pill{background:linear-gradient(135deg,var(--vi),#9333ea)!important;color:#fff!important;box-shadow:0 0 24px var(--glow-vi);font-weight:600!important}
.nav-hamburger{display:none;cursor:pointer;width:38px;height:38px;border-radius:9px;background:var(--card);border:1px solid var(--border);align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:10px}
.nav-hamburger span{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px;transition:all .3s;transform-origin:center}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-drawer{display:none;position:fixed;top:68px;left:0;right:0;z-index:998;background:rgba(13,13,20,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:12px 16px 20px;flex-direction:column;gap:4px}
.nav-drawer.open{display:flex}
.nav-drawer a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink-dim);transition:all .15s}
.nav-drawer a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.nav-drawer .nd-pill{background:linear-gradient(135deg,var(--vi),#9333ea)!important;color:#fff!important;font-weight:700!important;margin-top:6px;justify-content:center;box-shadow:0 0 20px var(--glow-vi)}

/* HERO */
.pg-hero{padding:128px 0 80px;position:relative;overflow:hidden;text-align:center}
.pg-hero-bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(124,106,240,.14) 0%,transparent 55%)}
.pg-hero-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 20%,transparent 80%)}
.pg-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(124,106,240,.12);border:1px solid rgba(124,106,240,.28);border-radius:100px;padding:6px 16px;font-size:12px;font-weight:600;color:var(--vi2);margin-bottom:22px}
.pg-title{font-family:'Nunito',sans-serif;font-size:clamp(32px,5vw,52px);font-weight:900;color:var(--ink);letter-spacing:-.5px;margin-bottom:16px;position:relative}
.pg-title span{background:linear-gradient(110deg,var(--vi2),var(--cy));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pg-sub{font-size:16px;color:var(--ink-dim);line-height:1.75;max-width:520px;margin:0 auto;position:relative}

/* MAIN */
.contact-main{padding:20px 0 100px;position:relative}
.contact-wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* ALERT */
.site-alert{padding:14px 18px;border-radius:14px;font-size:14px;font-weight:500;display:flex;align-items:flex-start;gap:10px;margin-bottom:32px}
.site-alert.ok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);color:#6ee7b7}
.site-alert.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#fca5a5}

/* CARDS GRID */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:64px}

.ch-card{background:var(--card);border:1px solid var(--border2);border-radius:var(--r2);padding:30px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .2s,transform .25s,box-shadow .25s}
.ch-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r2) var(--r2) 0 0}
.ch-card:hover{border-color:rgba(124,106,240,.3);transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.3)}
.ch-card.email-card::before{background:linear-gradient(90deg,var(--vi),#9333ea)}
.ch-card.wa-card::before{background:linear-gradient(90deg,#25D366,#128C7E)}
.ch-card.tg-card::before{background:linear-gradient(90deg,#2AABEE,#229ED9)}

.ch-head{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.ch-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ch-icon.em{background:rgba(124,106,240,.12);border:1px solid rgba(124,106,240,.25)}
.ch-icon.wa{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.25)}
.ch-icon.tg{background:rgba(42,171,238,.12);border:1px solid rgba(42,171,238,.25)}
.ch-title{font-family:'Nunito',sans-serif;font-size:17px;font-weight:800;color:var(--ink)}
.ch-desc{font-size:12px;color:var(--ink-ghost);margin-top:2px}

/* form inputs */
.f-group{margin-bottom:14px}
.f-label{display:block;font-size:12px;font-weight:600;color:var(--ink-dim);margin-bottom:6px;letter-spacing:.3px}
.f-input,.f-select,.f-textarea{width:100%;padding:10px 12px;background:var(--card2);border:1px solid var(--border2);border-radius:10px;color:var(--ink);font-size:13px;font-family:'Poppins',sans-serif;outline:none;transition:all .2s}
.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:var(--vi);box-shadow:0 0 0 3px rgba(124,106,240,.12)}
.f-input::placeholder,.f-textarea::placeholder{color:var(--ink-ghost)}
.f-textarea{resize:vertical;min-height:100px;line-height:1.6}
.f-select option{background:var(--card2)}

.btn-ch{width:100%;padding:12px;border:none;border-radius:11px;font-size:14px;font-weight:600;font-family:'Poppins',sans-serif;cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto}
.btn-em{background:linear-gradient(135deg,var(--vi),#9333ea);color:#fff;box-shadow:0 6px 20px var(--glow-vi)}
.btn-em:hover{box-shadow:0 10px 28px var(--glow-vi);transform:translateY(-1px)}
.btn-wa{background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;box-shadow:0 6px 20px rgba(37,211,102,.3)}
.btn-wa:hover{box-shadow:0 10px 28px rgba(37,211,102,.45);transform:translateY(-1px)}
.btn-tg{background:linear-gradient(135deg,#2AABEE,#229ED9);color:#fff;box-shadow:0 6px 20px rgba(42,171,238,.3)}
.btn-tg:hover{box-shadow:0 10px 28px rgba(42,171,238,.45);transform:translateY(-1px)}

/* contact info rows */
.ch-info-body{flex:1;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.ch-info-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--card2);border:1px solid var(--border);border-radius:9px}
.ch-info-label{font-size:12px;color:var(--ink-ghost)}
.ch-info-val{font-size:12px;color:var(--ink-dim);font-weight:500}
.ch-info-desc{font-size:13px;color:var(--ink-dim);line-height:1.65;padding:10px 12px;background:var(--card2);border:1px solid var(--border);border-radius:9px}

/* QUICK LINKS */
.quick-sec{border-top:1px solid var(--border);padding-top:52px}
.quick-title{font-family:'Nunito',sans-serif;font-size:22px;font-weight:800;color:var(--ink);text-align:center;margin-bottom:8px}
.quick-sub{font-size:14px;color:var(--ink-ghost);text-align:center;margin-bottom:32px}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.quick-card{background:var(--card);border:1px solid var(--border2);border-radius:var(--r);padding:16px 18px;display:flex;align-items:center;gap:13px;transition:all .2s}
.quick-card:hover{border-color:rgba(124,106,240,.35);background:rgba(124,106,240,.06);transform:translateY(-2px)}
.quick-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--card2);border:1px solid var(--border);border-radius:11px;font-size:20px;flex-shrink:0}
.quick-card-title{font-size:14px;font-weight:600;color:var(--ink)}
.quick-card-sub{font-size:12px;color:var(--ink-ghost);margin-top:2px}

/* FOOTER */
.st-footer{background:#0f0f1a;border-top:1px solid var(--border);padding:48px 24px 24px}
.st-footer-inner{max-width:1100px;margin:0 auto}
.st-footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;margin-bottom:36px}
.st-footer-desc{font-size:13px;color:var(--ink-ghost);line-height:1.75;margin-top:12px;max-width:220px}
.st-footer-col h5{font-size:11px;font-weight:700;color:var(--ink-ghost);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:13px}
.st-footer-col a{display:block;font-size:13px;color:var(--ink-dim);margin-bottom:8px;transition:color .15s}
.st-footer-col a:hover{color:var(--vi2)}
.st-footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-ghost);flex-wrap:wrap;gap:8px}

@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:768px){.nav-links{display:none!important}.nav-hamburger{display:flex!important}.st-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.st-footer-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr 1fr}}
</style>
</head>
<body>

<!-- NAV -->
<nav class="nav" id="stNav">
  <div class="nav-inner">
    <a href="<?= SITE_URL ?>/home" class="nav-logo">
      <img src="https://studytrack.edurx.icu/studytrack/images/studytrack.png" alt="StudyTrack">
      <div><div class="nav-logo-text">StudyTrack</div><span class="nav-logo-by">by EduRx</span></div>
    </a>
    <div class="nav-links">
      <a href="<?= SITE_URL ?>/home">Home</a>
      <a href="<?= SITE_URL ?>/contact" class="act">Contact</a>
      <a href="<?= SITE_URL ?>/login">Sign In</a>
      <a href="<?= SITE_URL ?>/register" class="nav-pill">Get Started</a>
    </div>
    <button class="nav-hamburger" id="stHamburger" onclick="stNav()"><span></span><span></span><span></span></button>
  </div>
</nav>
<div class="nav-drawer" id="stDrawer">
  <a href="<?= SITE_URL ?>/home">🏠 Home</a>
  <a href="<?= SITE_URL ?>/contact" style="color:var(--vi2)">💬 Contact & Support</a>
  <a href="<?= SITE_URL ?>/login">🔑 Sign In</a>
  <a href="<?= SITE_URL ?>/register" class="nd-pill">🚀 Get Started — Free</a>
</div>

<!-- HERO -->
<div class="pg-hero">
  <div class="pg-hero-bg"></div>
  <div class="pg-hero-grid"></div>
  <div class="container" style="position:relative">
    <div class="pg-badge">💬 We're here to help</div>
    <h1 class="pg-title">Contact &amp; <span>Support</span></h1>
    <p class="pg-sub">Have a question, bug report or feedback? Reach us through any channel — we typically respond within 24 hours.</p>
  </div>
</div>

<!-- MAIN CONTENT -->
<div class="contact-main">
  <div class="contact-wrap">

    <?php if ($successMsg === 'email'): ?>
    <div class="site-alert ok">✅ Your message has been sent! We'll reply within 24 hours.</div>
    <?php elseif ($errorMsg === 'email'): ?>
    <div class="site-alert err">❌ Couldn't send your message right now. Please try WhatsApp or Telegram instead.</div>
    <?php elseif ($errorMsg === 'email_validation'): ?>
    <div class="site-alert err">⚠️ Please fill in all fields correctly before submitting.</div>
    <?php endif; ?>

    <div class="contact-grid">

      <!-- EMAIL -->
      <div class="ch-card email-card">
        <div class="ch-head">
          <div class="ch-icon em">✉️</div>
          <div><div class="ch-title">Send an Email</div><div class="ch-desc">Detailed support inquiries</div></div>
        </div>
        <form method="POST" action="<?= SITE_URL ?>/contact">
          <input type="hidden" name="form_type" value="email">
          <div class="f-group"><label class="f-label">Your Name</label><input type="text" name="name" class="f-input" placeholder="Kavindu Perera" required value="<?= htmlspecialchars($_POST['name'] ?? '') ?>"></div>
          <div class="f-group"><label class="f-label">Email Address</label><input type="email" name="email" class="f-input" placeholder="you@example.com" required value="<?= htmlspecialchars($_POST['email'] ?? '') ?>"></div>
          <div class="f-group">
            <label class="f-label">Subject</label>
            <select name="subject" class="f-select" required>
              <option value="" disabled <?= empty($_POST['subject'])?'selected':'' ?>>Select a topic…</option>
              <option value="Account Issue" <?= ($_POST['subject']??'')==='Account Issue'?'selected':'' ?>>🔐 Account Issue</option>
              <option value="Bug Report" <?= ($_POST['subject']??'')==='Bug Report'?'selected':'' ?>>🐛 Bug Report</option>
              <option value="Feature Request" <?= ($_POST['subject']??'')==='Feature Request'?'selected':'' ?>>💡 Feature Request</option>
              <option value="Data / Privacy" <?= ($_POST['subject']??'')==='Data / Privacy'?'selected':'' ?>>🔒 Data / Privacy</option>
              <option value="General Question" <?= ($_POST['subject']??'')==='General Question'?'selected':'' ?>>❓ General Question</option>
              <option value="Other" <?= ($_POST['subject']??'')==='Other'?'selected':'' ?>>📋 Other</option>
            </select>
          </div>
          <div class="f-group"><label class="f-label">Message</label><textarea name="message" class="f-textarea" placeholder="Describe your issue or question in detail…" required><?= htmlspecialchars($_POST['message'] ?? '') ?></textarea></div>
          <button type="submit" class="btn-ch btn-em">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
            Send Email
          </button>
        </form>
      </div>

      <!-- WHATSAPP -->
      <div class="ch-card wa-card">
        <div class="ch-head">
          <div class="ch-icon wa"><svg width="22" height="22" viewBox="0 0 24 24" fill="#25D366"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg></div>
          <div><div class="ch-title">WhatsApp</div><div class="ch-desc">Quick questions & fast replies</div></div>
        </div>
        <div class="ch-info-body">
          <p class="ch-info-desc">Chat with us directly on WhatsApp. We typically reply within a few hours during business hours.</p>
          <div class="ch-info-row"><span class="ch-info-label">Number</span><span class="ch-info-val">+94 70 431 3633</span></div>
          <div class="ch-info-row"><span class="ch-info-label">Hours</span><span class="ch-info-val">Mon–Sat, 9am–9pm SL</span></div>
          <div class="ch-info-row"><span class="ch-info-label">Response</span><span class="ch-info-val">Usually 2–4 hours</span></div>
        </div>
        <a href="https://wa.me/94704313633" target="_blank" rel="noopener" class="btn-ch btn-wa">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
          Chat on WhatsApp
        </a>
      </div>

      <!-- TELEGRAM -->
      <div class="ch-card tg-card">
        <div class="ch-head">
          <div class="ch-icon tg"><svg width="22" height="22" viewBox="0 0 24 24" fill="#2AABEE"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg></div>
          <div><div class="ch-title">Telegram</div><div class="ch-desc">Message our support account</div></div>
        </div>
        <div class="ch-info-body">
          <p class="ch-info-desc">Reach us on Telegram for fast support. Send your question and we'll get back to you quickly.</p>
          <div class="ch-info-row"><span class="ch-info-label">Username</span><span class="ch-info-val">@SuportEdurx</span></div>
          <div class="ch-info-row"><span class="ch-info-label">Hours</span><span class="ch-info-val">Mon–Sat, 9am–9pm SL</span></div>
          <div class="ch-info-row"><span class="ch-info-label">Response</span><span class="ch-info-val">Usually 2–4 hours</span></div>
        </div>
        <a href="https://t.me/SuportEdurx" target="_blank" rel="noopener" class="btn-ch btn-tg">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
          Message on Telegram
        </a>
      </div>

    </div><!-- /contact-grid -->

    <!-- QUICK LINKS -->
    <div class="quick-sec">
      <div class="quick-title">Quick Help</div>
      <p class="quick-sub">Common answers — find your solution instantly</p>
      <div class="quick-grid">
        <a href="<?= SITE_URL ?>/forgot-password" class="quick-card"><div class="quick-icon">🔑</div><div><div class="quick-card-title">Reset Password</div><div class="quick-card-sub">Forgot or locked out?</div></div></a>
        <a href="<?= SITE_URL ?>/register" class="quick-card"><div class="quick-icon">📝</div><div><div class="quick-card-title">Create Account</div><div class="quick-card-sub">Sign up for free</div></div></a>
        <a href="<?= SITE_URL ?>/privacy" class="quick-card"><div class="quick-icon">🔒</div><div><div class="quick-card-title">Privacy Policy</div><div class="quick-card-sub">How we handle your data</div></div></a>
        <a href="<?= SITE_URL ?>/terms" class="quick-card"><div class="quick-icon">📄</div><div><div class="quick-card-title">Terms & Conditions</div><div class="quick-card-sub">Usage guidelines</div></div></a>
      </div>
    </div>

  </div>
</div>

<!-- FOOTER -->
<footer class="st-footer">
  <div class="st-footer-inner">
    <div class="st-footer-grid">
      <div>
        <a href="<?= SITE_URL ?>/home" class="nav-logo"><img src="https://studytrack.edurx.icu/studytrack/images/studytrack.png" alt="" style="width:30px;height:30px;border-radius:8px"><div><div class="nav-logo-text" style="font-size:16px">StudyTrack</div><span class="nav-logo-by">by EduRx</span></div></a>
        <p class="st-footer-desc">Free study tracker for Sri Lankan A/L students.</p>
      </div>
      <div class="st-footer-col"><h5>Platform</h5><a href="<?= SITE_URL ?>/register">Register</a><a href="<?= SITE_URL ?>/login">Sign In</a><a href="<?= SITE_URL ?>/forgot-password">Forgot Password</a></div>
      <div class="st-footer-col"><h5>Legal</h5><a href="<?= SITE_URL ?>/terms">Terms & Conditions</a><a href="<?= SITE_URL ?>/privacy">Privacy Policy</a></div>
      <div class="st-footer-col"><h5>Support</h5><a href="<?= SITE_URL ?>/contact" style="color:var(--vi2)">Contact & Support</a><a href="https://wa.me/94704313633" target="_blank">WhatsApp</a><a href="https://t.me/SuportEdurx" target="_blank">Telegram</a></div>
    </div>
    <div class="st-footer-bottom"><span>© <?= date('Y') ?> <?= SITE_NAME ?>. All rights reserved.</span><span>Built with ❤️ for Sri Lankan A/L students</span></div>
  </div>
</footer>

<script>
const stNavEl = document.getElementById('stNav');
window.addEventListener('scroll', () => stNavEl.classList.toggle('scrolled', scrollY > 30));
function stNav() { document.getElementById('stDrawer').classList.toggle('open'); document.getElementById('stHamburger').classList.toggle('open'); }
document.addEventListener('click', e => { const d=document.getElementById('stDrawer'),b=document.getElementById('stHamburger'); if(!d.contains(e.target)&&!b.contains(e.target)){d.classList.remove('open');b.classList.remove('open');} });
</script>
</body>
</html>