<?php require_once 'config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Telemedicine – HealthLink+</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <style>
    * { box-sizing: border-box; }
    body { margin:0; font-family:Inter,Arial,sans-serif; background:linear-gradient(135deg,#1E63E9 0%,#0E3FAE 45%,#144CC8 100%); color:white; min-height:100vh; }
    .page-header { padding:32px 0 0; text-align:center; }
    .back-btn { display:inline-flex; align-items:center; gap:8px; color:#c084fc; text-decoration:none; font-size:14px; font-weight:600; margin-bottom:32px; }
    .back-btn:hover { color:#fff; }
    .sec-badge { background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.4); color:#60a5fa; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; padding:6px 18px; border-radius:20px; display:inline-block; margin-bottom:20px; }
    .page-title { font-size:48px; font-weight:800; letter-spacing:-2px; margin-bottom:14px; }
    .page-title span { background:linear-gradient(90deg,#3b82f6,#a855f7); -webkit-background-clip:text; color:transparent; }
    .page-sub { color:#94a3b8; font-size:16px; max-width:520px; margin:0 auto 60px; }
    .tele-section { padding:0 0 80px; }
    .feature-row { display:flex; gap:18px; align-items:flex-start; background:rgba(15,50,180,.2); border-radius:16px; padding:22px 24px; margin-bottom:16px; transition:transform .3s,box-shadow .3s; }
    .feature-row:hover { transform:translateX(8px); box-shadow:0 8px 30px rgba(168,85,247,.3); }
    .icon-wrap { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
    .cta-card { background:rgba(15,50,180,.25); border:1px solid rgba(168,85,247,.3); border-radius:24px; padding:48px 36px; text-align:center; }
    .stat-box { background:rgba(168,85,247,.15); border:1px solid rgba(168,85,247,.3); border-radius:12px; padding:12px 20px; text-align:center; display:inline-block; }
    .stat-box.blue { background:rgba(59,130,246,.15); border-color:rgba(59,130,246,.3); }
    .btn-start { background:linear-gradient(90deg,#a855f7,#3b82f6); border:none; color:#fff; padding:14px 36px; border-radius:30px; font-size:15px; font-weight:600; cursor:pointer; box-shadow:0 0 30px rgba(168,85,247,.4); width:100%; }
    .btn-start:hover { opacity:.9; }
  </style>
</head>
<body>
<div class="container">
  <div class="page-header">
    <a href="index.php" class="back-btn"><i class="fas fa-arrow-left"></i> Back to Home</a><br>
    <span class="sec-badge">Virtual Care</span>
    <h1 class="page-title">Telemedicine <span>Consultation</span></h1>
    <p class="page-sub">See a doctor from anywhere — your home, office or on the go. No waiting rooms.</p>
  </div>

  <div class="tele-section">
    <div class="row g-4 align-items-center">
      <div class="col-md-6">
        <?php
        $tele = [
          ['icon'=>'fa-wifi',             'color'=>'168,85,247','title'=>'Connect Instantly',     'desc'=>'Join your video consultation with one click. No downloads required — works in any browser.'],
          ['icon'=>'fa-lock',             'color'=>'59,130,246', 'title'=>'100% Private & Secure', 'desc'=>'End-to-end encrypted video calls. Your health data is fully protected under HIPAA standards.'],
          ['icon'=>'fa-file-prescription','color'=>'168,85,247','title'=>'Digital Prescription',  'desc'=>'Receive your prescription digitally right after the consultation. Share with any pharmacy.'],
          ['icon'=>'fa-history',          'color'=>'59,130,246', 'title'=>'Follow-up Reminders',  'desc'=>'Automated reminders for follow-up appointments and medication schedules.'],
        ];
        foreach($tele as $t): ?>
        <div class="feature-row" style="border:1px solid rgba(<?=$t['color']?>,.3);">
          <div class="icon-wrap" style="background:rgba(<?=$t['color']?>,.2);border:1px solid rgba(<?=$t['color']?>,.5);">
            <i class="fas <?=$t['icon']?>" style="font-size:20px;color:rgba(<?=$t['color']?>,1);"></i>
          </div>
          <div>
            <h5 style="font-size:16px;font-weight:700;margin:0 0 6px;"><?=$t['title']?></h5>
            <p style="color:#94a3b8;font-size:13px;line-height:1.6;margin:0;"><?=$t['desc']?></p>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
      <div class="col-md-6">
        <div class="cta-card">
          <div style="width:100px;height:100px;border-radius:50%;background:rgba(168,85,247,.2);border:2px solid #a855f7;display:grid;place-items:center;margin:0 auto 28px;box-shadow:0 0 30px rgba(168,85,247,.4);">
            <i class="fas fa-video" style="font-size:42px;color:#c084fc;"></i>
          </div>
          <h3 style="font-size:26px;font-weight:800;margin-bottom:12px;">Start a Consultation</h3>
          <p style="color:#94a3b8;font-size:14px;line-height:1.7;margin-bottom:28px;">Available 24/7 — connect with a certified doctor in under 5 minutes. No appointment needed for urgent care.</p>
          <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;">
            <div class="stat-box"><div style="font-size:22px;font-weight:800;">&lt;5 min</div><div style="color:#94a3b8;font-size:11px;">Wait Time</div></div>
            <div class="stat-box blue"><div style="font-size:22px;font-weight:800;">24/7</div><div style="color:#94a3b8;font-size:11px;">Available</div></div>
            <div class="stat-box"><div style="font-size:22px;font-weight:800;">PMC</div><div style="color:#94a3b8;font-size:11px;">Verified Doctors</div></div>
          </div>
          <?php if(!empty($_SESSION['patient_id'])): ?>
            <a href="patient/book-appointment.php" class="btn-start" style="display:block;text-decoration:none;">Start Video Consultation</a>
          <?php else: ?>
            <a href="index.php?open=patientLoginModal" class="btn-start" style="display:block;text-decoration:none;">Login to Start Consultation</a>
          <?php endif; ?>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
