<?php
/**
 * FILE: public_html/reviewer-profile.php
 * Reviewer Detail / Profile Page — CommuneGlobal
 * Redesigned — inspired by Cureus profile UX analysis
 */
ini_set('display_errors', 0);
if (session_status() === PHP_SESSION_NONE) session_start();
include_once __DIR__ . '/config/db_new.php';

/* ── Fetch reviewer from DB ── */
$slug = trim($_GET['slug'] ?? '');
$reviewer = null;

if ($slug && $pdo) {
    try {
        $stmt = $pdo->prepare("SELECT * FROM reviewers WHERE slug = ? LIMIT 1");
        $stmt->execute([$slug]);
        $reviewer = $stmt->fetch(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {}
}

/* ── Fallback demo data ── */
if (!$reviewer) {
    $reviewer = [
        'name'              => 'Dr. Arvind Patil',
        'initials'          => 'AP',
        'verified'          => true,
        'role'              => 'Professor, Computer Science',
        'institution'       => 'Indian Institute of Technology, Mumbai',
        'country'           => 'India',
        'flag'              => '🇮🇳',
        'location'          => 'Mumbai, India',
        'experience_years'  => '15+',
        'total_reviews'     => 124,
        'acceptance_rate'   => 98,
        'journals_reviewed' => 32,
        'profile_views'     => 8420,
        'avg_turnaround'    => '4.2 days',
        'member_since'      => 'January 2010',
        'h_index'           => 34,
        'total_citations'   => 2840,
        'availability'      => true,
        'bio'               => 'Dr. Arvind Patil is a Professor in the Department of Computer Science and Engineering at IIT Bombay. His research interests include Machine Learning, Data Mining, and Artificial Intelligence. He has published extensively in top-tier journals and conferences and has over 15 years of experience in teaching and research. Dr. Patil serves as Associate Editor for IEEE Transactions on Neural Networks and has been recognised as a Top Reviewer by multiple international journals. He leads the AI & Data Science Lab at IIT Bombay and mentors doctoral candidates globally.',
        'areas'             => [
            ['name' => 'Machine Learning',      'pct' => 28],
            ['name' => 'Data Mining',           'pct' => 22],
            ['name' => 'Artificial Intelligence','pct' => 18],
            ['name' => 'Deep Learning',         'pct' => 15],
            ['name' => 'Pattern Recognition',   'pct' => 10],
            ['name' => 'Big Data Analytics',    'pct' => 7],
        ],
        'publications' => [
            ['title' => 'A Comparative Study of Deep Learning Models for Image Classification', 'journal' => 'IEEE Transactions on Neural Networks', 'year' => 2023, 'cites' => 142],
            ['title' => 'Efficient Data Mining Techniques for Large-Scale Datasets',             'journal' => 'Journal of Machine Learning Research', 'year' => 2022, 'cites' => 98],
            ['title' => 'Explainable AI for Medical Diagnosis using Graph Neural Networks',      'journal' => 'Nature Machine Intelligence',          'year' => 2021, 'cites' => 213],
            ['title' => 'Transfer Learning Approaches in Low-Resource NLP Tasks',               'journal' => 'ACL Proceedings',                      'year' => 2020, 'cites' => 176],
        ],
        'journals' => [
            ['name' => 'IEEE Transactions on Neural Networks and Learning Systems', 'short' => 'IEEE'],
            ['name' => 'Springer Machine Learning',                                 'short' => 'Springer'],
            ['name' => 'Elsevier Expert Systems with Applications',                 'short' => 'Elsevier'],
            ['name' => 'ACM Transactions on Intelligent Systems',                   'short' => 'ACM'],
            ['name' => 'Nature Scientific Reports',                                 'short' => 'Nature'],
        ],
        'societies' => [
            'Association for Computing Machinery (ACM)',
            'IEEE Computer Society',
            'International Machine Learning Society',
        ],
        'education' => [
            ['degree' => 'Ph.D. in Computer Science',      'institution' => 'IIT Bombay',         'year' => 2008],
            ['degree' => 'M.Tech. in Computer Engineering', 'institution' => 'IIT Delhi',          'year' => 2004],
            ['degree' => 'B.E. in Computer Science',        'institution' => 'University of Pune', 'year' => 2002],
        ],
        'affil_name' => 'Indian Institute of Technology Bombay',
        'affil_loc'  => 'Mumbai, India',
        'affil_url'  => 'https://www.iitb.ac.in',
        'badges'     => ['Top Reviewer 2024', 'Outstanding Reviewer', 'Trusted Expert'],
        'contact_web'=> 'arvind.iitb.ac.in',
        'color'      => '#1a3a8f',
        'level'      => 'Laureate',
    ];
}

$pageTitle = htmlspecialchars($reviewer['name']) . ' — Reviewer Profile — CommuneGlobal';
include __DIR__ . '/include/header.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= $pageTitle ?></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap" rel="stylesheet">

<style>
/* ═══════════════════════════════════════
   TOKENS
═══════════════════════════════════════ */
:root {
  --navy:     #0c1f3f;
  --cobalt:   #1a3a8f;
  --sky:      #2563eb;
  --sky-mid:  #3b82f6;
  --sky-lt:   #eff6ff;
  --sky-pale: #f0f7ff;
  --gold:     #d4a017;
  --gold-lt:  #fef9ec;
  --green:    #059669;
  --green-lt: #ecfdf5;
  --muted:    #64748b;
  --border:   #e2e8f0;
  --surface:  #f8fafc;
  --white:    #ffffff;
  --text:     #1e293b;
  --text-sm:  #475569;
  --radius:   12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 16px rgba(12,31,63,.08);
  --shadow-lg: 0 12px 40px rgba(12,31,63,.14);
}

/* ═══════════════════════════════════════
   BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
a { color: var(--sky); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.profile-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 60px; }

/* ═══════════════════════════════════════
   TOP BANNER (slim, journal-like)
═══════════════════════════════════════ */
.top-banner {
  background: var(--navy);
  padding: 10px 0;
  border-bottom: 3px solid var(--sky);
}
.top-banner .container-fluid {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; gap: 12px;
}
.top-banner-brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem; color: #fff; letter-spacing: .01em;
}
.top-banner-brand span { color: #93c5fd; }
.top-banner-breadcrumb {
  font-size: .78rem; color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: 6px;
}
.top-banner-breadcrumb a { color: rgba(255,255,255,.7); }
.top-banner-breadcrumb .sep { opacity: .35; }
.top-banner-actions { display: flex; gap: 8px; }
.top-banner-actions .btn {
  font-size: .75rem; border-radius: 6px;
  border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.8);
  padding: 4px 10px;
}
.top-banner-actions .btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ═══════════════════════════════════════
   PROFILE HEADER CARD
═══════════════════════════════════════ */
.profile-header-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 28px;
  overflow: hidden;
}
.profile-header-stripe {
  height: 6px;
  background: linear-gradient(90deg, var(--cobalt) 0%, var(--sky-mid) 60%, #60a5fa 100%);
}
.profile-header-body {
  padding: 28px 32px 24px;
  display: flex; gap: 24px; align-items: flex-start;
  flex-wrap: wrap;
}

/* Avatar */
.profile-avatar {
  width: 96px; height: 96px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--cobalt), var(--sky-mid));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem; font-weight: 700; color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,.3);
  position: relative;
}
.avatar-level-badge {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #fff; font-size: .6rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 2px 6px rgba(212,160,23,.4);
}

/* Identity block */
.profile-identity { flex: 1; min-width: 240px; }
.profile-name-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.profile-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; font-weight: 700; color: var(--navy); line-height: 1.2;
}
.verified-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--green-lt); color: var(--green);
  border: 1px solid #a7f3d0; border-radius: 20px;
  font-size: .7rem; font-weight: 600; padding: 2px 9px;
}
.availability-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px rgba(5,150,105,.2);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 2px rgba(5,150,105,.2); }
  50%      { box-shadow: 0 0 0 5px rgba(5,150,105,.08); }
}
.profile-role { font-size: .95rem; color: var(--text-sm); font-weight: 500; margin-bottom: 4px; }
.profile-inst {
  font-size: .85rem; color: var(--muted); margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.profile-inst i { font-size: .75rem; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.p-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; color: var(--text-sm); font-weight: 500;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px;
}
.p-tag i { color: var(--sky); font-size: .72rem; }

/* CTA cluster */
.profile-cta { display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
.btn-request {
  background: var(--sky); color: #fff; border: none; border-radius: 8px;
  font-size: .85rem; font-weight: 600; padding: 10px 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.btn-request:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.4); }
.btn-secondary {
  background: transparent; color: var(--text-sm); border: 1px solid var(--border);
  border-radius: 8px; font-size: .8rem; padding: 7px 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, border-color .15s;
}
.btn-secondary:hover { background: var(--surface); border-color: #94a3b8; color: var(--text); }
.avail-row {
  display: flex; align-items: center; gap: 6px;
  font-size: .73rem; color: var(--green); font-weight: 500;
  justify-content: center;
}

/* ═══════════════════════════════════════
   CONTRIBUTION STATS ROW  (Cureus-inspired)
═══════════════════════════════════════ */
.contrib-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border);
  background: var(--sky-pale);
}
.contrib-cell {
  text-align: center; padding: 16px 8px;
  border-right: 1px solid var(--border);
  position: relative;
}
.contrib-cell:last-child { border-right: none; }
.contrib-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 700; color: var(--navy); line-height: 1;
  display: block;
}
.contrib-num.blue  { color: var(--sky); }
.contrib-num.green { color: var(--green); }
.contrib-num.gold  { color: var(--gold); }
.contrib-lbl {
  font-size: .68rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; margin-top: 4px; display: block; line-height: 1.3;
}

/* ═══════════════════════════════════════
   BODY GRID
═══════════════════════════════════════ */
.body-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
@media (max-width: 860px) { .body-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════
   SECTION CARD
═══════════════════════════════════════ */
.sec {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.sec-title {
  font-size: .82rem; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: .08em;
  display: flex; align-items: center; gap: 8px;
}
.sec-title i { color: var(--sky); font-size: .85rem; }
.sec-link { font-size: .78rem; color: var(--sky); font-weight: 500; }
.sec-body { padding: 20px; }

/* ═══════════════════════════════════════
   ABOUT / BIO
═══════════════════════════════════════ */
.bio-text {
  font-size: .88rem; color: var(--text-sm); line-height: 1.85;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; transition: -webkit-line-clamp .3s;
}
.bio-text.expanded { -webkit-line-clamp: unset; }
.bio-toggle {
  background: none; border: none; color: var(--sky); font-size: .8rem;
  font-weight: 500; padding: 8px 0 0; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
}

/* ═══════════════════════════════════════
   RESEARCH AREAS
═══════════════════════════════════════ */
.area-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.area-chip {
  font-size: .78rem; font-weight: 500;
  background: var(--sky-lt); color: var(--sky);
  border: 1px solid #bfdbfe; border-radius: 20px;
  padding: 5px 13px;
}
.area-bar-row { margin-bottom: 10px; }
.area-bar-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; color: var(--text-sm); margin-bottom: 5px;
}
.area-bar-label span:last-child { color: var(--muted); font-size: .75rem; }
.area-track {
  height: 5px; background: #e2e8f0; border-radius: 10px; overflow: hidden;
}
.area-fill {
  height: 100%; background: linear-gradient(90deg, var(--sky) 0%, var(--sky-mid) 100%);
  border-radius: 10px;
  transition: width 1s ease;
}

/* ═══════════════════════════════════════
   PUBLICATIONS
═══════════════════════════════════════ */
.pub-item {
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.pub-item:last-child { border-bottom: none; padding-bottom: 0; }
.pub-item:first-child { padding-top: 0; }
.pub-title-text {
  font-size: .88rem; font-weight: 600; color: var(--navy);
  line-height: 1.45; margin-bottom: 5px;
}
.pub-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pub-journal { font-size: .76rem; color: var(--muted); }
.pub-badge {
  font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.pub-badge.year  { background: #e0e7ff; color: #3730a3; }
.pub-badge.cite  { background: var(--sky-lt); color: var(--sky); }

/* ═══════════════════════════════════════
   JOURNALS TABLE
═══════════════════════════════════════ */
.journal-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .83rem;
}
.journal-row:last-child { border-bottom: none; padding-bottom: 0; }
.journal-row:first-child { padding-top: 0; }
.journal-icon {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  background: var(--sky-lt); border: 1px solid #bfdbfe;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800; color: var(--sky); line-height: 1.1;
  text-align: center;
}
.journal-name { color: var(--text-sm); flex: 1; line-height: 1.35; }
.journal-check { color: var(--green); font-size: .8rem; flex-shrink: 0; }

/* ═══════════════════════════════════════
   SIDEBAR CARDS
═══════════════════════════════════════ */
.side-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  overflow: hidden;
}
.side-head {
  font-size: .75rem; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 7px;
}
.side-head i { color: var(--sky); }
.side-body { padding: 14px 16px; }

/* Contact / info rows */
.info-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .8rem; color: var(--text-sm); margin-bottom: 10px;
}
.info-row:last-child { margin-bottom: 0; }
.info-row i { color: var(--sky); font-size: .8rem; margin-top: 2px; flex-shrink: 0; width: 14px; text-align: center; }
.info-row a { color: var(--sky); }

/* Affiliation block */
.affil-block {
  display: flex; gap: 12px; align-items: flex-start;
}
.affil-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background: var(--sky-lt); border: 1px solid #bfdbfe;
  display: flex; align-items: center; justify-content: center;
}
.affil-icon i { color: var(--sky); font-size: 1rem; }
.affil-name { font-size: .83rem; font-weight: 600; color: var(--navy); line-height: 1.3; }
.affil-loc  { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.affil-link { font-size: .73rem; color: var(--sky); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }

/* Reviewer rating dial */
.rating-wrap { text-align: center; padding: 6px 0 10px; }
.rating-dial-svg { display: block; margin: 0 auto 8px; }
.rating-score { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--navy); }
.rating-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rating-stars { color: var(--gold); font-size: .85rem; margin: 6px 0 2px; }
.rating-count { font-size: .73rem; color: var(--muted); }

/* Badges */
.badges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.badge-cell {
  text-align: center; padding: 12px 6px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
}
.badge-ico {
  width: 38px; height: 38px; border-radius: 50%;
  margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.badge-name { font-size: .65rem; color: var(--muted); font-weight: 500; line-height: 1.3; }

/* Societies */
.society-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .8rem; color: var(--text-sm);
  padding: 7px 0; border-bottom: 1px solid var(--border);
  line-height: 1.4;
}
.society-item:last-child { border-bottom: none; padding-bottom: 0; }
.society-item:first-child { padding-top: 0; }
.society-item i { color: var(--sky-mid); font-size: .72rem; margin-top: 3px; flex-shrink: 0; }

/* Education timeline */
.edu-item {
  display: flex; gap: 12px; padding-bottom: 16px;
  position: relative;
}
.edu-item:last-child { padding-bottom: 0; }
.edu-item::before {
  content: ''; position: absolute; left: 15px; top: 26px; bottom: 0;
  width: 1px; background: var(--border);
}
.edu-item:last-child::before { display: none; }
.edu-dot {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--sky-lt); border: 2px solid var(--sky-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; color: var(--sky); z-index: 1;
}
.edu-degree { font-size: .83rem; font-weight: 600; color: var(--navy); }
.edu-inst   { font-size: .77rem; color: var(--muted); }
.edu-year   {
  font-size: .68rem; font-weight: 700; color: var(--sky);
  background: var(--sky-lt); border: 1px solid #bfdbfe;
  border-radius: 4px; padding: 1px 6px; margin-top: 3px; display: inline-block;
}

/* ═══════════════════════════════════════
   STICKY NAV
═══════════════════════════════════════ */
.sticky-nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--white); border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.sticky-nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
  display: flex; overflow-x: auto; gap: 0;
  -ms-overflow-style: none; scrollbar-width: none;
}
.sticky-nav-inner::-webkit-scrollbar { display: none; }
.snav-link {
  font-size: .8rem; font-weight: 500; color: var(--muted);
  padding: 13px 16px; white-space: nowrap; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.snav-link:hover { color: var(--sky); }
.snav-link.active { color: var(--sky); border-bottom-color: var(--sky); }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 640px) {
  .contrib-row { grid-template-columns: repeat(3, 1fr); }
  .contrib-cell:nth-child(3) { border-right: none; }
  .contrib-cell:nth-child(4) { border-top: 1px solid var(--border); }
  .profile-header-body { padding: 20px 18px 18px; }
  .profile-name { font-size: 1.3rem; }
  .profile-cta { min-width: unset; width: 100%; }
}
@media (max-width: 479px) {
  .contrib-row { grid-template-columns: repeat(2, 1fr); }
  .contrib-cell:nth-child(2) { border-right: none; }
  .contrib-cell:nth-child(3) { border-top: 1px solid var(--border); }
}
</style>
</head>
<body>

<!-- ═══════════════════════════════════
     TOP BANNER
═══════════════════════════════════ -->
<div class="top-banner">
  <div class="container-fluid">
    <div class="top-banner-brand">Commune<span>Global</span></div>
    <nav class="top-banner-breadcrumb d-none d-sm-flex">
      <a href="/">Home</a><span class="sep">/</span>
      <a href="/reviewers">Reviewers</a><span class="sep">/</span>
      <span><?= htmlspecialchars($reviewer['name']) ?></span>
    </nav>
    <div class="top-banner-actions">
      <button class="btn btn-outline-light btn-sm"><i class="fas fa-share-nodes me-1"></i>Share</button>
      <button class="btn btn-outline-light btn-sm"><i class="fas fa-bookmark me-1"></i>Save</button>
    </div>
  </div>
</div>

<!-- ═══════════════════════════════════
     PROFILE HEADER CARD
═══════════════════════════════════ -->
<div class="profile-wrap" style="padding-top:24px;">
  <div class="profile-header-card" id="top">
    <div class="profile-header-stripe"></div>
    <div class="profile-header-body">

      <!-- Avatar -->
      <div class="profile-avatar">
        <?= htmlspecialchars($reviewer['initials']) ?>
        <?php if (!empty($reviewer['level'])): ?>
        <div class="avatar-level-badge"><?= htmlspecialchars($reviewer['level']) ?></div>
        <?php endif; ?>
      </div>

      <!-- Identity -->
      <div class="profile-identity">
        <div class="profile-name-row">
          <span class="profile-name"><?= htmlspecialchars($reviewer['name']) ?></span>
          <?php if (!empty($reviewer['verified'])): ?>
          <span class="verified-pill">
            <i class="fas fa-circle-check" style="font-size:.75rem;"></i> Verified Reviewer
          </span>
          <?php endif; ?>
        </div>
        <div class="profile-role"><?= htmlspecialchars($reviewer['role']) ?></div>
        <div class="profile-inst">
          <i class="fas fa-building-columns"></i>
          <?= htmlspecialchars($reviewer['institution']) ?>
          &nbsp;<?= $reviewer['flag'] ?>
        </div>
        <div class="profile-tags">
          <span class="p-tag"><i class="fas fa-location-dot"></i><?= htmlspecialchars($reviewer['location']) ?></span>
          <span class="p-tag"><i class="fas fa-calendar-days"></i>Member since <?= htmlspecialchars($reviewer['member_since']) ?></span>
          <span class="p-tag"><i class="fas fa-gauge-high"></i><?= htmlspecialchars($reviewer['avg_turnaround']) ?> avg. turnaround</span>
          <span class="p-tag"><i class="fas fa-clock-rotate-left"></i><?= htmlspecialchars($reviewer['experience_years']) ?> yrs experience</span>
        </div>
      </div>

      <!-- CTA -->
      <div class="profile-cta">
        <?php if (!empty($reviewer['availability'])): ?>
        <div class="avail-row">
          <div class="availability-dot"></div>
          <span>Available for review</span>
        </div>
        <?php endif; ?>
      </div>

    </div>

    <!-- Contribution stats row — Cureus-style -->
    <div class="contrib-row">
      <div class="contrib-cell">
        <span class="contrib-num blue"><?= htmlspecialchars($reviewer['total_reviews']) ?></span>
        <span class="contrib-lbl">Reviews<br>Completed</span>
      </div>
      <div class="contrib-cell">
        <span class="contrib-num"><?= count($reviewer['publications']) ?>+</span>
        <span class="contrib-lbl">Publications</span>
      </div>
      <div class="contrib-cell">
        <span class="contrib-num green"><?= htmlspecialchars($reviewer['acceptance_rate']) ?>%</span>
        <span class="contrib-lbl">Acceptance<br>Rate</span>
      </div>
      <div class="contrib-cell">
        <span class="contrib-num"><?= number_format($reviewer['profile_views']) ?></span>
        <span class="contrib-lbl">Profile<br>Views</span>
      </div>
      <div class="contrib-cell">
        <span class="contrib-num gold"><?= htmlspecialchars($reviewer['h_index']) ?></span>
        <span class="contrib-lbl">h-Index</span>
      </div>
    </div>
  </div>
</div>

<!-- ═══════════════════════════════════
     STICKY NAV
═══════════════════════════════════ -->
<div class="sticky-nav" id="stickyNav">
  <div class="sticky-nav-inner">
    <span class="snav-link active" data-target="sec-about">About</span>
    <span class="snav-link" data-target="sec-areas">Research Areas</span>
    <span class="snav-link" data-target="sec-pubs">Publications</span>
    <span class="snav-link" data-target="sec-journals">Journals</span>
    <span class="snav-link" data-target="sec-edu">Education</span>
  </div>
</div>

<!-- ═══════════════════════════════════
     BODY CONTENT
═══════════════════════════════════ -->
<div class="profile-wrap" style="padding-top:0;">
<div class="body-grid">

  <!-- ── MAIN COLUMN ── -->
  <div>

    <!-- About -->
    <div class="sec" id="sec-about">
      <div class="sec-head">
        <span class="sec-title"><i class="fas fa-user-pen"></i>About</span>
      </div>
      <div class="sec-body">
        <p class="bio-text" id="bioText"><?= htmlspecialchars($reviewer['bio']) ?></p>
        <button class="bio-toggle" onclick="toggleBio()" id="bioToggle">
          <span id="bioToggleTxt">Read more</span>
          <i class="fas fa-chevron-down" id="bioChevron"></i>
        </button>
      </div>
    </div>

    <!-- Research Areas -->
    <div class="sec" id="sec-areas">
      <div class="sec-head">
        <span class="sec-title"><i class="fas fa-flask-vial"></i>Research Areas</span>
        <span style="font-size:.75rem;color:var(--muted);"><?= count($reviewer['areas']) ?> areas</span>
      </div>
      <div class="sec-body">
        <div class="area-chips">
          <?php foreach ($reviewer['areas'] as $a): ?>
          <span class="area-chip"><?= htmlspecialchars($a['name']) ?></span>
          <?php endforeach; ?>
        </div>
        <div>
          <?php foreach ($reviewer['areas'] as $a): ?>
          <div class="area-bar-row">
            <div class="area-bar-label">
              <span><?= htmlspecialchars($a['name']) ?></span>
              <span><?= $a['pct'] ?>%</span>
            </div>
            <div class="area-track">
              <div class="area-fill" style="width:<?= $a['pct'] ?>%"></div>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>

    <!-- Publications -->
    <div class="sec" id="sec-pubs">
      <div class="sec-head">
        <span class="sec-title"><i class="fas fa-book-open"></i>Publications</span>
        <a href="#" class="sec-link">View all <i class="fas fa-arrow-right" style="font-size:.65rem;"></i></a>
      </div>
      <div class="sec-body">
        <?php foreach ($reviewer['publications'] as $pub): ?>
        <div class="pub-item">
          <div class="pub-title-text"><?= htmlspecialchars($pub['title']) ?></div>
          <div class="pub-meta-row">
            <span class="pub-journal"><?= htmlspecialchars($pub['journal']) ?></span>
            <span class="pub-badge year"><?= $pub['year'] ?></span>
            <span class="pub-badge cite"><i class="fas fa-quote-right" style="font-size:.6rem;"></i><?= $pub['cites'] ?> citations</span>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>

    <!-- Reviewer for Journals -->
    <div class="sec" id="sec-journals">
      <div class="sec-head">
        <span class="sec-title"><i class="fas fa-file-pen"></i>Reviewer for Journals</span>
        <a href="#" class="sec-link">View all <i class="fas fa-arrow-right" style="font-size:.65rem;"></i></a>
      </div>
      <div class="sec-body">
        <?php foreach ($reviewer['journals'] as $j): ?>
        <div class="journal-row">
          <div class="journal-icon"><?= htmlspecialchars($j['short']) ?></div>
          <span class="journal-name"><?= htmlspecialchars($j['name']) ?></span>
          <i class="fas fa-circle-check journal-check"></i>
        </div>
        <?php endforeach; ?>
      </div>
    </div>

    <!-- Education -->
    <div class="sec" id="sec-edu">
      <div class="sec-head">
        <span class="sec-title"><i class="fas fa-graduation-cap"></i>Education</span>
      </div>
      <div class="sec-body">
        <?php foreach ($reviewer['education'] as $edu): ?>
        <div class="edu-item">
          <div class="edu-dot">PhD</div>
          <div>
            <div class="edu-degree"><?= htmlspecialchars($edu['degree']) ?></div>
            <div class="edu-inst"><?= htmlspecialchars($edu['institution']) ?></div>
            <span class="edu-year"><?= $edu['year'] ?></span>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>

  </div><!-- /main col -->

  <!-- ── SIDEBAR ── -->
  <div>

    <!-- Reviewer Rating -->
    <div class="side-card">
      <div class="side-head"><i class="fas fa-star-half-stroke"></i>Reviewer Rating</div>
      <div class="side-body">
        <div class="rating-wrap">
          <!-- Simple SVG arc dial -->
          <svg class="rating-dial-svg" width="100" height="60" viewBox="0 0 100 60">
            <path d="M10 55 A40 40 0 0 1 90 55" fill="none" stroke="#e2e8f0" stroke-width="8" stroke-linecap="round"/>
            <path d="M10 55 A40 40 0 0 1 90 55" fill="none" stroke="#2563eb" stroke-width="8" stroke-linecap="round"
                  stroke-dasharray="126" stroke-dashoffset="12" opacity=".9"/>
            <circle cx="84" cy="28" r="5" fill="#2563eb" opacity=".15"/>
          </svg>
          <div class="rating-score">4.9</div>
          <div class="rating-stars">
            <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
            <i class="fas fa-star"></i><i class="fas fa-star-half-stroke"></i>
          </div>
          <div class="rating-count">Based on 48 editor evaluations</div>
        </div>
      </div>
    </div>

    <!-- Affiliation -->
    <div class="side-card">
      <div class="side-head"><i class="fas fa-building-columns"></i>Affiliation</div>
      <div class="side-body">
        <div class="affil-block">
          <div class="affil-icon"><i class="fas fa-university"></i></div>
          <div>
            <div class="affil-name"><?= htmlspecialchars($reviewer['affil_name']) ?></div>
            <div class="affil-loc"><i class="fas fa-location-dot" style="font-size:.7rem;margin-right:3px;color:var(--muted);"></i><?= htmlspecialchars($reviewer['affil_loc']) ?></div>
            <a href="<?= htmlspecialchars($reviewer['affil_url']) ?>" target="_blank" class="affil-link">
              Visit website <i class="fas fa-arrow-up-right-from-square" style="font-size:.6rem;"></i>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Contact -->
    <div class="side-card">
      <div class="side-head"><i class="fas fa-address-card"></i>Contact</div>
      <div class="side-body">
        <div class="info-row">
          <i class="fas fa-globe"></i>
          <a href="#"><?= htmlspecialchars($reviewer['contact_web'] ?? 'iitb.ac.in') ?></a>
        </div>
        <div class="info-row">
          <i class="fas fa-location-dot"></i>
          <span><?= htmlspecialchars($reviewer['location']) ?></span>
        </div>
        <div class="info-row">
          <i class="fas fa-calendar"></i>
          <span>Member since <?= htmlspecialchars($reviewer['member_since']) ?></span>
        </div>
        <div class="info-row">
          <i class="fas fa-quote-left"></i>
          <span><?= number_format($reviewer['total_citations']) ?> total citations</span>
        </div>
      </div>
    </div>

    <!-- Badges -->
    <div class="side-card">
      <div class="side-head"><i class="fas fa-trophy"></i>Badges &amp; Honours</div>
      <div class="side-body">
        <div class="badges-grid">
          <?php
          $bConfig = [
            ['bg'=>'#fef9c3','color'=>'#854d0e','icon'=>'fa-star'],
            ['bg'=>'#fce7f3','color'=>'#9d174d','icon'=>'fa-medal'],
            ['bg'=>'#e0f2fe','color'=>'#075985','icon'=>'fa-shield-halved'],
          ];
          foreach ($reviewer['badges'] as $bi => $b):
            $bc = $bConfig[$bi % count($bConfig)];
          ?>
          <div class="badge-cell">
            <div class="badge-ico" style="background:<?= $bc['bg'] ?>;color:<?= $bc['color'] ?>;">
              <i class="fas <?= $bc['icon'] ?>"></i>
            </div>
            <div class="badge-name"><?= htmlspecialchars($b) ?></div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>

  </div><!-- /sidebar -->
</div>
</div><!-- /profile-wrap -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
/* ── Bio toggle ── */
let bioOpen = false;
function toggleBio() {
  bioOpen = !bioOpen;
  document.getElementById('bioText').classList.toggle('expanded', bioOpen);
  document.getElementById('bioToggleTxt').textContent = bioOpen ? 'Show less' : 'Read more';
  document.getElementById('bioChevron').style.transform = bioOpen ? 'rotate(180deg)' : '';
}

/* ── Sticky nav active state ── */
const navLinks = document.querySelectorAll('.snav-link');
const sections = Array.from(navLinks).map(l => document.getElementById(l.dataset.target)).filter(Boolean);

function updateNav() {
  const stickyH = document.getElementById('stickyNav')?.offsetHeight || 56;
  let current = sections[0]?.id;
  sections.forEach(s => {
    if (window.scrollY >= s.offsetTop - stickyH - 20) current = s.id;
  });
  navLinks.forEach(l => l.classList.toggle('active', l.dataset.target === current));
}
window.addEventListener('scroll', updateNav, { passive: true });
updateNav();

navLinks.forEach(l => {
  l.addEventListener('click', () => {
    const sec = document.getElementById(l.dataset.target);
    if (!sec) return;
    const stickyH = document.getElementById('stickyNav')?.offsetHeight || 56;
    window.scrollTo({ top: sec.offsetTop - stickyH - 8, behavior: 'smooth' });
  });
});

/* ── Animate bars on load ── */
document.querySelectorAll('.area-fill').forEach(el => {
  const w = el.style.width;
  el.style.width = '0%';
  requestAnimationFrame(() => {
    setTimeout(() => { el.style.width = w; }, 200);
  });
});
</script>

<?php include __DIR__ . '/include/footer.php'; ?>
</body>
</html>