<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Education Finder — Karachi</title>

<!-- ════════════════════════════════════════════
     STEP 1 ➜ Replace the 8 values below with
     YOUR Firebase config (from Firebase Console
     ➜ Project Settings ➜ Your Apps ➜ Web App)
     ════════════════════════════════════════════ -->
<script type="module">
import { initializeApp }       from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
import { getFirestore, collection, doc, getDocs, addDoc, setDoc, deleteDoc, onSnapshot, query, orderBy }
  from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";

const firebaseConfig = {
  apiKey:            "AIzaSyC1afS9SIYADPj4SNbN7deC4DJx2kPD66E",
  authDomain:        "education-finder-a2b66.firebaseapp.com",
  projectId:         "education-finder-a2b66",
  storageBucket:     "education-finder-a2b66.firebasestorage.app",
  messagingSenderId: "722597598266",
  appId:             "1:722597598266:web:b8c0d86c1bc1039e1a1103"
};

const app = initializeApp(firebaseConfig);
const db  = getFirestore(app);

// ── expose helpers globally so the rest of the page can use them ──
window._db = db;
window._col      = (name) => collection(db, name);
window._doc      = (col, id) => doc(db, col, id);
window._getDocs  = getDocs;
window._addDoc   = addDoc;
window._setDoc   = setDoc;
window._deleteDoc= deleteDoc;
window._onSnapshot = onSnapshot;
window._query    = query;
window._orderBy  = orderBy;
window._fbReady  = true;
document.dispatchEvent(new Event("fb-ready"));
</script>

<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1B2F6E;--navy2:#152559;--gold:#B8952A;--gold2:#D4AA35;--gold-light:#FBF5E0;
  --bg:#F4F6FB;--surface:#fff;--surface2:#EEF1F9;--border:#DDE2F0;--border2:#C5CCDF;
  --text:#111827;--text2:#4B5563;--text3:#9CA3AF;
  --green:#15803D;--green-light:#F0FDF4;--red:#DC2626;--red-light:#FEF2F2;
  --amber:#B45309;--amber-light:#FFFBEB;
  --radius:10px;--radius-lg:14px;--radius-xl:20px;
  --shadow:0 2px 8px rgba(27,47,110,.08);--shadow-lg:0 8px 32px rgba(27,47,110,.18);
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:15px;}
.header{background:var(--navy);border-bottom:3px solid var(--gold);padding:0 1.5rem;position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:1rem;height:64px;box-shadow:0 2px 12px rgba(27,47,110,.3);}
.logo-wrap{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0;cursor:pointer;}
.logo-name{font-family:'Merriweather',serif;font-size:16px;color:#fff;}
.logo-name span{color:var(--gold2);}
.logo-tag{font-size:9px;color:var(--gold2);letter-spacing:.1em;text-transform:uppercase;}
.h-search{flex:1;max-width:320px;position:relative;}
.h-search input{width:100%;height:36px;border:2px solid rgba(184,149,42,.35);border-radius:var(--radius);padding:0 10px 0 32px;font-size:13px;font-family:'Inter',sans-serif;outline:none;color:#fff;background:rgba(255,255,255,.1);}
.h-search input::placeholder{color:rgba(255,255,255,.45);}
.h-search .si{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.45);}
.h-actions{margin-left:auto;display:flex;align-items:center;gap:6px;}
.h-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--radius);font-size:12px;font-weight:600;cursor:pointer;border:none;font-family:'Inter',sans-serif;white-space:nowrap;transition:all .15s;}
.h-btn-gold{background:var(--gold);color:var(--navy);}
.h-btn-gold:hover{background:var(--gold2);}
.h-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3);}
.h-btn-outline:hover{background:rgba(255,255,255,.1);}
.h-btn-ghost{background:transparent;color:rgba(255,255,255,.7);border:none;}
.nav-tabs{background:var(--surface);border-bottom:2px solid var(--border);padding:0 1.5rem;display:flex;overflow-x:auto;}
.nav-tab{padding:12px 14px;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all .15s;}
.nav-tab.active{color:var(--navy);border-bottom-color:var(--gold);}
.main{max-width:1320px;margin:0 auto;padding:1.5rem;}
.page{display:none;}
.page.active{display:block;}
.schools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.school-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,box-shadow .2s;}
.school-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.card-img{height:130px;background:linear-gradient(135deg,#EEF2FF,#DDE2F0);display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;overflow:hidden;}
.card-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.card-fav{position:absolute;top:7px;right:7px;background:rgba(255,255,255,.9);border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);}
.feat-ribbon{position:absolute;top:7px;left:7px;background:var(--gold);color:var(--navy);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;}
.card-strip{background:var(--navy);padding:9px 12px;display:flex;align-items:center;gap:9px;}
.s-avatar{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Merriweather',serif;font-size:13px;flex-shrink:0;border:2px solid var(--gold);}
.card-name{font-family:'Merriweather',serif;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-area-txt{font-size:11px;color:var(--gold2);}
.card-body{padding:10px 12px;}
.card-badges{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px;}
.badge{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;}
.b-navy{background:#EEF1F9;color:var(--navy);}
.b-gold{background:var(--gold-light);color:#7A6010;}
.b-green{background:var(--green-light);color:var(--green);}
.b-red{background:var(--red-light);color:var(--red);}
.b-amber{background:var(--amber-light);color:var(--amber);}
.b-ib{background:#F0FDF4;color:#065F46;}
.b-mont{background:#FFF7ED;color:#9A3412;}
.card-meta{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text2);border-top:1px solid var(--border);padding-top:8px;}
.cmr{display:flex;align-items:center;gap:6px;}
.cmi{font-size:12px;color:var(--gold);width:14px;text-align:center;}
.card-actions{display:flex;gap:5px;padding:0 12px 10px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--radius);font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:all .15s;font-family:'Inter',sans-serif;white-space:nowrap;}
.btn-primary{background:var(--gold);color:var(--navy);}
.btn-primary:hover{background:var(--gold2);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-sec{background:var(--surface);color:var(--text);border-color:var(--border2);}
.btn-ghost{background:transparent;color:var(--text2);}
.btn-danger{background:var(--red-light);color:var(--red);border-color:#fca5a5;}
.btn-sm{padding:4px 9px;font-size:11px;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:1.5rem;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;border-top:3px solid var(--gold);box-shadow:var(--shadow);}
.stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;font-weight:600;}
.stat-value{font-family:'Merriweather',serif;font-size:26px;color:var(--navy);}
.stat-sub{font-size:11px;color:var(--gold);font-weight:600;}
.featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:1.5rem;}
.featured-card{background:linear-gradient(135deg,var(--navy),#2D4A9E);border-radius:var(--radius-xl);padding:1.25rem;color:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s;border:2px solid var(--gold);}
.featured-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.filter-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.9rem 1.1rem;margin-bottom:1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:8px;box-shadow:var(--shadow);}
.filter-bar select,.sw input{height:36px;border:1.5px solid var(--border);border-radius:var(--radius);padding:0 10px;font-size:12px;font-family:'Inter',sans-serif;background:var(--surface);color:var(--text);outline:none;}
.filter-bar select:focus,.sw input:focus{border-color:var(--navy);}
.sw{position:relative;flex:1;min-width:180px;}
.sw input{width:100%;padding-left:32px;}
.sw .si2{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text3);}
.overlay{display:none;position:fixed;inset:0;background:rgba(11,20,50,.6);z-index:300;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(3px);}
.overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:var(--radius-xl);width:680px;max-width:100%;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);border-top:4px solid var(--gold);}
.modal-lg{width:860px;}
.modal-sm{width:420px;}
.modal-header{padding:1.1rem 1.4rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--navy);}
.modal-header h2{font-family:'Merriweather',serif;font-size:17px;color:#fff;}
.modal-body{padding:1.4rem;overflow-y:auto;flex:1;}
.modal-footer{padding:.9rem 1.4rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:7px;flex-shrink:0;}
.tabs{display:flex;gap:2px;background:var(--surface2);padding:3px;border-radius:var(--radius);margin-bottom:1.1rem;overflow-x:auto;}
.tab{flex:1;min-width:fit-content;padding:6px 9px;text-align:center;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;color:var(--text2);transition:all .15s;border:none;background:transparent;font-family:'Inter',sans-serif;white-space:nowrap;}
.tab.active{background:var(--navy);color:#fff;}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.fg1{grid-template-columns:1fr;}
.field{display:flex;flex-direction:column;gap:3px;}
.field label{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.field input,.field select,.field textarea{border:1.5px solid var(--border);border-radius:var(--radius);padding:8px 11px;font-size:13px;font-family:'Inter',sans-serif;background:var(--surface);color:var(--text);outline:none;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);}
.field textarea{resize:vertical;min-height:68px;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:.9rem;}
.info-item{background:var(--surface2);border-radius:var(--radius);padding:.8rem;border-left:3px solid var(--gold);}
.ii-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:3px;font-weight:600;}
.ii-value{font-size:13px;font-weight:500;color:var(--text);}
.adm-box{background:var(--surface2);border-radius:var(--radius-lg);padding:1rem;margin-bottom:.9rem;}
.review-card{background:var(--surface2);border-radius:var(--radius-lg);padding:.9rem;margin-bottom:8px;border-left:3px solid var(--gold);}
.star-rate{display:flex;gap:3px;margin-top:3px;}
.star-rate span{font-size:22px;cursor:pointer;color:#D1D5DB;}
.star-rate span.on{color:var(--gold2);}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px;}
.gal-item{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--surface2);}
.gal-item img{width:100%;height:100%;object-fit:cover;}
.gal-empty{text-align:center;padding:2rem;color:var(--text3);background:var(--surface2);border-radius:var(--radius-lg);border:2px dashed var(--border);}
.photo-drop{border:2px dashed var(--border);border-radius:var(--radius-lg);padding:1.25rem;text-align:center;color:var(--text3);cursor:pointer;}
.photo-thumbs{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;}
.photo-thumb{position:relative;width:72px;height:54px;border-radius:var(--radius);overflow:hidden;background:var(--surface2);}
.photo-thumb img{width:100%;height:100%;object-fit:cover;}
.ptd{position:absolute;top:1px;right:1px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:16px;height:16px;cursor:pointer;font-size:10px;}
.compare-bar{position:fixed;bottom:0;left:0;right:0;background:var(--navy);border-top:3px solid var(--gold);padding:10px 1.5rem;display:flex;align-items:center;gap:12px;z-index:200;transform:translateY(100%);transition:transform .3s;}
.compare-bar.show{transform:translateY(0);}
.compare-chip{background:rgba(255,255,255,.15);color:#fff;padding:4px 10px;border-radius:20px;font-size:12px;display:flex;align-items:center;gap:6px;}
.compare-chip button{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:14px;}
.compare-table{width:100%;border-collapse:collapse;font-size:13px;}
.compare-table th{background:var(--navy);color:#fff;padding:10px 12px;text-align:left;font-family:'Merriweather',serif;}
.compare-table td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
.compare-table tr:nth-child(even) td{background:var(--surface2);}
.compare-table .rl{font-weight:600;color:var(--navy);background:var(--gold-light)!important;}
.login-card{background:var(--surface);border-radius:var(--radius-xl);padding:2rem;max-width:400px;margin:2rem auto;box-shadow:var(--shadow-lg);border-top:4px solid var(--gold);}
.login-tabs{display:flex;gap:4px;background:var(--surface2);padding:4px;border-radius:var(--radius);margin-bottom:1.25rem;}
.login-tab{flex:1;padding:8px;text-align:center;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);transition:all .15s;border:none;background:transparent;font-family:'Inter',sans-serif;}
.login-tab.active{background:var(--navy);color:#fff;}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:1.5rem;}
.dash-card{background:var(--surface);border-radius:var(--radius-lg);padding:1.1rem;border-top:3px solid var(--gold);box-shadow:var(--shadow);text-align:center;}
.dash-val{font-family:'Merriweather',serif;font-size:24px;color:var(--navy);}
.dash-lbl{font-size:12px;color:var(--text3);}
.toast{position:fixed;bottom:80px;right:20px;background:var(--green);color:#fff;padding:10px 18px;border-radius:var(--radius-lg);font-size:13px;font-weight:600;z-index:999;display:none;box-shadow:var(--shadow-lg);}
.loading-screen{position:fixed;inset:0;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;color:#fff;}
.loading-screen.hide{display:none;}
.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--gold2);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px;}
@keyframes spin{to{transform:rotate(360deg);}}
@media(max-width:680px){
  .main{padding:1rem;}
  .schools-grid{grid-template-columns:1fr;}
  .fg{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr;}
}
</style>
</head>
<body>

<!-- LOADING SCREEN -->
<div class="loading-screen" id="loadingScreen">
  <div class="spinner"></div>
  <div style="font-family:'Merriweather',serif;font-size:22px;margin-bottom:8px;">EDUCATION <span style="color:var(--gold2);">FINDER</span></div>
  <div style="font-size:13px;color:rgba(255,255,255,.6);">Connecting to database…</div>
</div>

<div class="toast" id="toast"></div>

<!-- HEADER -->
<div class="header">
  <div class="logo-wrap" onclick="showPage('home')">
    <svg width="38" height="38" viewBox="0 0 44 44" style="background:#fff;border-radius:7px;padding:2px;flex-shrink:0;">
      <text x="3" y="30" font-family="Arial Black" font-weight="900" font-size="26" fill="#1B2F6E">E</text>
      <text x="20" y="30" font-family="Arial Black" font-weight="900" font-size="26" fill="#B8952A">F</text>
      <polygon points="22,3 32,8 22,13 12,8" fill="#1B2F6E"/>
      <rect x="30" y="8" width="2" height="6" fill="#1B2F6E"/>
      <circle cx="31" cy="14" r="1.5" fill="#B8952A"/>
    </svg>
    <div>
      <div class="logo-name">EDUCATION <span>FINDER</span></div>
      <div class="logo-tag">Find · Compare · Succeed</div>
    </div>
  </div>
  <div class="h-search"><span class="si">🔍</span><input type="text" id="headerSearch" placeholder="Search schools…" oninput="applyFilters()"/></div>
  <div class="h-actions">
    <button id="adminAddBtn" class="h-btn h-btn-gold" onclick="openAddModal()" style="display:none;">+ Add School</button>
    <button class="h-btn h-btn-outline" onclick="showPage('favorites')">❤️ <span id="favBadge">0</span></button>
    <button id="loginBtn" class="h-btn h-btn-outline" onclick="showPage('login')">👤 Login</button>
    <div id="userMenuWrap" style="display:none;position:relative;">
      <button class="h-btn h-btn-outline" onclick="toggleUMenu()">👤 <span id="uNameDisp"></span> ▾</button>
      <div id="uDrop" style="display:none;position:absolute;right:0;top:44px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:180px;z-index:400;">
        <div style="padding:.4rem 0;">
          <div onclick="showPage('dashboard')" style="padding:9px 15px;cursor:pointer;font-size:13px;font-weight:600;color:var(--navy);">📊 Dashboard</div>
          <div onclick="showPage('favorites')" style="padding:9px 15px;cursor:pointer;font-size:13px;">❤️ My Favourites</div>
          <div onclick="openModal('changePwdOverlay')" style="padding:9px 15px;cursor:pointer;font-size:13px;">🔑 Change Password</div>
          <div onclick="doLogout()" style="padding:9px 15px;cursor:pointer;font-size:13px;color:var(--red);">🚪 Logout</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- NAV TABS -->
<div class="nav-tabs">
  <div class="nav-tab active" id="nt-home"     onclick="showPage('home')">🏠 Home</div>
  <div class="nav-tab"        id="nt-schools"  onclick="showPage('schools')">🏫 All Schools</div>
  <div class="nav-tab"        id="nt-favorites"onclick="showPage('favorites')">❤️ Favourites</div>
  <div class="nav-tab"        id="nt-compare"  onclick="showPage('compare')">⚖️ Compare</div>
  <div class="nav-tab"        id="nt-qa"       onclick="showPage('qa')">❓ Q&A</div>
  <div class="nav-tab"        id="nt-login"    onclick="showPage('login')">👤 Login</div>
</div>

<div class="main">

  <!-- HOME -->
  <div class="page active" id="page-home">
    <div class="stats-grid" id="statsGrid"></div>
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;">
      <div style="font-family:'Merriweather',serif;font-size:18px;color:var(--navy);">⭐ Featured Schools</div>
      <span style="font-size:12px;color:var(--gold);font-weight:600;cursor:pointer;" onclick="showPage('schools')">View All →</span>
    </div>
    <div class="featured-grid" id="featuredGrid"></div>
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;">
      <div style="font-family:'Merriweather',serif;font-size:18px;color:var(--navy);">🏫 Recently Added</div>
      <span style="font-size:12px;color:var(--gold);font-weight:600;cursor:pointer;" onclick="showPage('schools')">View All →</span>
    </div>
    <div id="recentGrid" class="schools-grid"></div>
  </div>

  <!-- ALL SCHOOLS -->
  <div class="page" id="page-schools">
    <div style="margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;">
      <h2 style="font-family:'Merriweather',serif;color:var(--navy);">🏫 All Schools</h2>
      <button id="pageAddBtn" class="btn btn-primary" onclick="openAddModal()" style="display:none;">+ Add School</button>
    </div>
    <div class="filter-bar">
      <div class="sw"><span class="si2">🔍</span><input type="text" id="searchInput" placeholder="Search…" oninput="applyFilters()"/></div>
      <select id="f_area" onchange="applyFilters()">
        <option value="">All Areas</option>
        <option>Bahria Town</option><option>Clifton</option><option>Defence (DHA)</option><option>F.B Area</option>
        <option>Gulistan-e-Johar</option><option>Gulshan-e-Iqbal</option><option>Gulzar-e-Hijri (Scheme 33)</option>
        <option>Jamshed Town</option><option>Korangi Town</option><option>Landhi</option><option>Malir Town</option>
        <option>Nazimabad</option><option>North Karachi</option><option>North Nazimabad</option>
        <option>Orangi Town</option><option>PECHS</option><option>P.I.B Colony</option>
        <option>Saddar Town</option><option>South Karachi</option>
      </select>
      <select id="f_curric" onchange="applyFilters()">
        <option value="">All Curricula</option>
        <option>Matric</option><option>Cambridge (CIE)</option><option>Edexcel</option>
        <option>IB (International Baccalaureate)</option><option>Montessori</option>
        <option>Agha Khan Board (AKU-EB)</option><option>Ziauddin Board</option><option>Multiple</option>
      </select>
      <select id="f_fee" onchange="applyFilters()">
        <option value="">All Fees</option>
        <option>Under 5,000</option><option>5,000–10,000</option><option>10,000–15,000</option>
        <option>15,000–20,000</option><option>20,000–25,000</option><option>25,000–30,000</option><option>Above 30,000</option>
      </select>
      <select id="f_adm" onchange="applyFilters()">
        <option value="">Admission</option><option>Open</option><option>Closed</option><option>Upcoming</option>
      </select>
      <select id="f_trans" onchange="applyFilters()">
        <option value="">Transport</option><option value="Yes">Available</option><option value="No">Not Available</option>
      </select>
      <button class="btn btn-ghost btn-sm" onclick="clearFilters()">✕ Clear</button>
    </div>
    <div id="schoolsGrid" class="schools-grid"></div>
    <div id="emptyState" class="empty-state" style="display:none;text-align:center;padding:4rem 2rem;">
      <div style="font-size:48px;margin-bottom:12px;">🏫</div>
      <h3 style="font-family:'Merriweather',serif;color:var(--navy);">No schools found</h3>
    </div>
  </div>

  <!-- FAVOURITES -->
  <div class="page" id="page-favorites">
    <h2 style="font-family:'Merriweather',serif;color:var(--navy);margin-bottom:1rem;">❤️ My Favourite Schools</h2>
    <div id="favGrid" class="schools-grid"></div>
    <div id="favEmpty" style="display:none;text-align:center;padding:4rem 2rem;color:var(--text2);">
      <div style="font-size:48px;margin-bottom:12px;">❤️</div>
      <h3 style="font-family:'Merriweather',serif;color:var(--navy);">No favourites yet</h3>
      <p>Click ❤️ on any school card</p>
      <button class="btn btn-primary" style="margin-top:1rem;" onclick="showPage('schools')">Browse Schools</button>
    </div>
  </div>

  <!-- COMPARE -->
  <div class="page" id="page-compare">
    <h2 style="font-family:'Merriweather',serif;color:var(--navy);margin-bottom:.5rem;">⚖️ Compare Schools</h2>
    <p style="font-size:13px;color:var(--text2);margin-bottom:1.25rem;">Click ⚖️ on school cards to compare (max 3).</p>
    <div id="compareContent"></div>
  </div>

  <!-- Q&A -->
  <div class="page" id="page-qa">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
      <h2 style="font-family:'Merriweather',serif;color:var(--navy);">❓ Questions & Answers</h2>
      <button class="btn btn-primary" onclick="openModal('askOverlay')">+ Ask Question</button>
    </div>
    <div id="qaList"></div>
  </div>

  <!-- LOGIN -->
  <div class="page" id="page-login">
    <div class="login-card">
      <div style="text-align:center;margin-bottom:1.25rem;">
        <div style="font-size:36px;margin-bottom:6px;">🎓</div>
        <h2 style="font-family:'Merriweather',serif;color:var(--navy);">Welcome to Education Finder</h2>
      </div>
      <div class="login-tabs">
        <button class="login-tab active" onclick="setLT('parent',this)">👨‍👩‍👧 Parent</button>
        <button class="login-tab" onclick="setLT('school',this)">🏫 School</button>
        <button class="login-tab" onclick="setLT('admin',this)">🔑 Admin</button>
      </div>
      <div class="fg1" style="display:grid;gap:.75rem;">
        <div class="field"><label>Email</label><input id="loginEmail" type="text" placeholder="your@email.com"/></div>
        <div class="field"><label>Password</label><input id="loginPass" type="password" placeholder="Password"/></div>
      </div>
      <p id="loginErr" style="color:var(--red);font-size:12px;margin-top:8px;display:none;"></p>
      <button class="btn btn-primary" style="width:100%;margin-top:1rem;justify-content:center;" onclick="doLogin()">🔐 Sign In</button>
      <div style="text-align:center;margin-top:.75rem;font-size:12px;color:var(--text2);">No account? <span style="color:var(--navy);font-weight:600;cursor:pointer;" onclick="openModal('registerOverlay')">Register</span></div>
      <div style="margin-top:1rem;background:var(--gold-light);border-radius:var(--radius);padding:.75rem;font-size:11px;color:#7A6010;">
        <strong>Admin Login:</strong> admin@ef.com / admin123
      </div>
    </div>
  </div>

  <!-- DASHBOARD -->
  <div class="page" id="page-dashboard"><div id="dashContent"></div></div>

</div>

<!-- COMPARE BAR -->
<div class="compare-bar" id="compareBar">
  <div style="color:#fff;font-size:13px;font-weight:600;">⚖️ Compare:</div>
  <div id="compareItems" style="display:flex;gap:8px;flex:1;flex-wrap:wrap;"></div>
  <button class="btn btn-primary btn-sm" onclick="openCompareModal()">Compare Now</button>
  <button class="btn btn-ghost btn-sm" style="color:rgba(255,255,255,.6);" onclick="clearCompare()">Clear</button>
</div>

<!-- MODALS -->
<!-- DETAIL -->
<div class="overlay" id="detailOverlay">
  <div class="modal modal-lg">
    <div class="modal-header">
      <h2 id="detailTitle">School Profile</h2>
      <div style="display:flex;gap:5px;">
        <button class="btn btn-primary btn-sm" id="dEditBtn" onclick="editFromDetail()" style="display:none;">✏️ Edit</button>
        <button class="h-btn h-btn-ghost" onclick="closeModal('detailOverlay')">✕</button>
      </div>
    </div>
    <div class="modal-body">
      <div class="tabs" id="dTabsEl">
        <button class="tab active" onclick="switchDTab(0,this)">📋 Overview</button>
        <button class="tab" onclick="switchDTab(1,this)">📚 Curriculum</button>
        <button class="tab" onclick="switchDTab(2,this)">🎓 Admission</button>
        <button class="tab" onclick="switchDTab(3,this)">🚌 Transport</button>
        <button class="tab" onclick="switchDTab(4,this)">🖼️ Gallery</button>
        <button class="tab" onclick="switchDTab(5,this)">⭐ Reviews</button>
        <button class="tab" onclick="switchDTab(6,this)">❓ Q&A</button>
      </div>
      <div id="dt0"></div><div id="dt1" style="display:none;"></div>
      <div id="dt2" style="display:none;"></div><div id="dt3" style="display:none;"></div>
      <div id="dt4" style="display:none;"></div><div id="dt5" style="display:none;"></div>
      <div id="dt6" style="display:none;"></div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-danger btn-sm" id="dDelBtn" onclick="deleteFromDetail()" style="display:none;">🗑 Delete</button>
      <button class="btn btn-ghost" onclick="closeModal('detailOverlay')">Close</button>
    </div>
  </div>
</div>

<!-- ADD/EDIT SCHOOL -->
<div class="overlay" id="editOverlay">
  <div class="modal">
    <div class="modal-header">
      <h2 id="editTitle">Add School</h2>
      <button class="h-btn h-btn-ghost" onclick="closeModal('editOverlay')">✕</button>
    </div>
    <div class="modal-body">
      <div class="tabs" id="editTabs">
        <button class="tab active" onclick="switchETab(0,this)">🏫 Basic</button>
        <button class="tab" onclick="switchETab(1,this)">📚 Curriculum</button>
        <button class="tab" onclick="switchETab(2,this)">🎓 Admission</button>
        <button class="tab" onclick="switchETab(3,this)">🚌 Extra</button>
        <button class="tab" onclick="switchETab(4,this)">🖼️ Photos</button>
        <button class="tab" onclick="switchETab(5,this)">⭐ Featured</button>
      </div>
      <div id="et0">
        <div class="fg">
          <div class="field" style="grid-column:1/-1"><label>School Name *</label><input id="e_name" type="text" placeholder="e.g. Karachi Grammar School"/></div>
          <div class="field"><label>Area *</label>
            <select id="e_area">
              <option value="">Select area</option>
              <option>Bahria Town</option><option>Clifton</option><option>Defence (DHA)</option><option>F.B Area</option>
              <option>Gulistan-e-Johar</option><option>Gulshan-e-Iqbal</option><option>Gulzar-e-Hijri (Scheme 33)</option>
              <option>Jamshed Town</option><option>Korangi Town</option><option>Landhi</option><option>Malir Town</option>
              <option>Nazimabad</option><option>North Karachi</option><option>North Nazimabad</option>
              <option>Orangi Town</option><option>PECHS</option><option>P.I.B Colony</option>
              <option>Saddar Town</option><option>South Karachi</option>
            </select>
          </div>
          <div class="field"><label>Fee Range *</label>
            <select id="e_fee">
              <option value="">Select</option>
              <option>Under 5,000</option><option>5,000–10,000</option><option>10,000–15,000</option>
              <option>15,000–20,000</option><option>20,000–25,000</option><option>25,000–30,000</option><option>Above 30,000</option>
            </select>
          </div>
          <div class="field"><label>📞 Phone</label><input id="e_phone" type="text" placeholder="+92 21 XXXX XXXX"/></div>
          <div class="field"><label>👤 Contact Person</label><input id="e_contact" type="text"/></div>
          <div class="field"><label>✉️ Email</label><input id="e_email" type="email"/></div>
          <div class="field"><label>🌐 Website</label><input id="e_website" type="text" placeholder="https://..."/></div>
          <div class="field" style="grid-column:1/-1"><label>📍 Address</label><textarea id="e_address"></textarea></div>
        </div>
      </div>
      <div id="et1" style="display:none;">
        <div class="fg fg1">
          <div class="field"><label>Curriculum</label>
            <select id="e_curric">
              <option value="">Select</option>
              <option>Matric</option><option>Cambridge (CIE)</option><option>Edexcel</option>
              <option>IB (International Baccalaureate)</option><option>Montessori</option>
              <option>Agha Khan Board (AKU-EB)</option><option>Ziauddin Board</option><option>Multiple</option>
            </select>
          </div>
          <div class="field"><label>🎓 Classes Offered</label><input id="e_grades" type="text" placeholder="e.g. Nursery – A-Level"/></div>
          <div class="field"><label>Medium</label><select id="e_medium"><option value="">Select</option><option>English</option><option>Urdu</option><option>Both</option></select></div>
          <div class="field"><label>Board / Affiliation</label><input id="e_board" type="text"/></div>
          <div class="field"><label>Extra-Curricular</label><textarea id="e_extra"></textarea></div>
          <div class="field"><label>Facilities</label><textarea id="e_facilities"></textarea></div>
        </div>
      </div>
      <div id="et2" style="display:none;">
        <div class="fg fg1">
          <div class="field"><label>Admission Status</label><select id="e_adm_status"><option value="">Not specified</option><option>Open</option><option>Closed</option><option>Upcoming</option></select></div>
          <div class="field"><label>Open Date</label><input id="e_adm_open" type="date"/></div>
          <div class="field"><label>Close Date</label><input id="e_adm_close" type="date"/></div>
          <div class="field"><label>Entry Test</label><select id="e_adm_test"><option value="">N/A</option><option>Yes</option><option>No</option></select></div>
          <div class="field"><label>Registration Fee (PKR)</label><input id="e_adm_regfee" type="text"/></div>
          <div class="field"><label>Admission Helpline</label><input id="e_adm_contact" type="text"/></div>
          <div class="field"><label>Documents Required</label><textarea id="e_adm_docs"></textarea></div>
          <div class="field"><label>Notes</label><textarea id="e_adm_notes"></textarea></div>
        </div>
      </div>
      <div id="et3" style="display:none;">
        <div class="fg fg1">
          <div class="field"><label>🚌 Transport</label><select id="e_transport"><option value="">Not specified</option><option>Yes</option><option>No</option></select></div>
          <div class="field"><label>Routes / Coverage</label><textarea id="e_transport_routes"></textarea></div>
          <div class="field"><label>Transport Fee (PKR/month)</label><input id="e_transport_fee" type="text"/></div>
          <div class="field"><label>Total Students</label><input id="e_students" type="text"/></div>
          <div class="field"><label>Total Teachers</label><input id="e_teachers" type="text"/></div>
          <div class="field"><label>Founded Year</label><input id="e_founded" type="text"/></div>
          <div class="field"><label>Facebook / Social</label><input id="e_social" type="text"/></div>
        </div>
      </div>
      <div id="et4" style="display:none;">
        <div class="photo-drop" onclick="document.getElementById('photoInput').click()">
          <div style="font-size:32px;margin-bottom:6px;">🖼️</div>
          <p style="font-weight:600;font-size:13px;">Click to upload photos</p>
          <input type="file" id="photoInput" accept="image/*" multiple style="display:none;" onchange="handlePhotoUpload(event)"/>
        </div>
        <div class="photo-thumbs" id="photoThumbs"></div>
      </div>
      <div id="et5" style="display:none;">
        <div class="fg fg1">
          <div class="field"><label>Featured Status</label><select id="e_featured"><option value="0">Not Featured</option><option value="1">⭐ Featured</option></select></div>
          <div class="field"><label>Featured Tagline</label><input id="e_featured_tag" type="text"/></div>
        </div>
      </div>
      <p id="editErr" style="color:var(--red);font-size:12px;margin-top:8px;display:none;"></p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost" onclick="closeModal('editOverlay')">Cancel</button>
      <button class="btn btn-primary" id="editSaveBtn" onclick="saveSchool()">💾 Save School</button>
    </div>
  </div>
</div>

<!-- ASK QUESTION -->
<div class="overlay" id="askOverlay">
  <div class="modal modal-sm">
    <div class="modal-header"><h2>❓ Ask a Question</h2><button class="h-btn h-btn-ghost" onclick="closeModal('askOverlay')">✕</button></div>
    <div class="modal-body">
      <div class="fg fg1" style="display:grid;gap:.75rem;">
        <div class="field"><label>About School</label><select id="q_school"><option value="">General Question</option></select></div>
        <div class="field"><label>Your Name</label><input id="q_name" type="text" placeholder="Your name"/></div>
        <div class="field"><label>Question *</label><textarea id="q_text" placeholder="Type your question…"></textarea></div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost" onclick="closeModal('askOverlay')">Cancel</button>
      <button class="btn btn-primary" onclick="submitQuestion()">Submit</button>
    </div>
  </div>
</div>

<!-- COMPARE MODAL -->
<div class="overlay" id="compareOverlay">
  <div class="modal modal-lg">
    <div class="modal-header"><h2>⚖️ School Comparison</h2><button class="h-btn h-btn-ghost" onclick="closeModal('compareOverlay')">✕</button></div>
    <div class="modal-body"><div id="compareTableWrap"></div></div>
    <div class="modal-footer"><button class="btn btn-ghost" onclick="closeModal('compareOverlay')">Close</button></div>
  </div>
</div>

<!-- REGISTER -->
<div class="overlay" id="registerOverlay">
  <div class="modal modal-sm">
    <div class="modal-header"><h2>📝 Create Account</h2><button class="h-btn h-btn-ghost" onclick="closeModal('registerOverlay')">✕</button></div>
    <div class="modal-body">
      <div class="fg fg1" style="display:grid;gap:.75rem;">
        <div class="field"><label>Account Type</label><select id="reg_type"><option value="parent">👨‍👩‍👧 Parent</option><option value="school">🏫 School Admin</option></select></div>
        <div class="field"><label>Full Name *</label><input id="reg_name" type="text"/></div>
        <div class="field"><label>Email *</label><input id="reg_email" type="email"/></div>
        <div class="field"><label>Password *</label><input id="reg_pass" type="password" placeholder="Min 6 characters"/></div>
      </div>
      <p id="regErr" style="color:var(--red);font-size:12px;margin-top:8px;display:none;"></p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost" onclick="closeModal('registerOverlay')">Cancel</button>
      <button class="btn btn-primary" onclick="doRegister()">Create Account</button>
    </div>
  </div>
</div>

<!-- CHANGE PASSWORD -->
<div class="overlay" id="changePwdOverlay">
  <div class="modal modal-sm">
    <div class="modal-header"><h2>🔑 Change Password</h2><button class="h-btn h-btn-ghost" onclick="closeModal('changePwdOverlay')">✕</button></div>
    <div class="modal-body">
      <div class="fg fg1" style="display:grid;gap:.75rem;">
        <div class="field"><label>Current Password</label><input id="pwd_current" type="password"/></div>
        <div class="field"><label>New Password</label><input id="pwd_new" type="password" placeholder="Min 6 characters"/></div>
        <div class="field"><label>Confirm New Password</label><input id="pwd_confirm" type="password"/></div>
      </div>
      <p id="pwdErr" style="color:var(--red);font-size:12px;margin-top:8px;display:none;"></p>
      <p id="pwdOk"  style="color:var(--green);font-size:12px;margin-top:8px;display:none;">✅ Password changed!</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost" onclick="closeModal('changePwdOverlay')">Cancel</button>
      <button class="btn btn-primary" onclick="changePassword()">Update Password</button>
    </div>
  </div>
</div>

<script>
// ═══════════════════════════════════════════════
//  WAIT FOR FIREBASE TO LOAD
// ═══════════════════════════════════════════════
let schools=[], questions=[], users=[];
let favorites=JSON.parse(localStorage.getItem('ef_favs')||'[]');
let compareList=[], currentUser=null, editingId=null, detailId=null;
let editPhotos=[], cRating=0, loginType='parent';

document.addEventListener('fb-ready', async ()=>{
  await loadAll();
  document.getElementById('loadingScreen').classList.add('hide');
  renderAll();
  showPage('home');
});

// ─── DB HELPERS ───
async function loadAll(){
  try{
    const snap = await window._getDocs(window._col('schools'));
    schools = snap.docs.map(d=>({id:d.id,...d.data()}));
  }catch(e){schools=[];}
  try{
    const snap = await window._getDocs(window._col('questions'));
    questions = snap.docs.map(d=>({id:d.id,...d.data()}));
  }catch(e){questions=[];}
  try{
    const snap = await window._getDocs(window._col('users'));
    users = snap.docs.map(d=>({id:d.id,...d.data()}));
    // ensure admin always exists
    if(!users.find(u=>u.email==='admin@ef.com')){
      const ref = await window._addDoc(window._col('users'),{name:'Super Admin',email:'admin@ef.com',pass:'admin123',type:'admin'});
      users.push({id:ref.id,name:'Super Admin',email:'admin@ef.com',pass:'admin123',type:'admin'});
    }
  }catch(e){}
}

async function dbSaveSchool(data, id){
  if(id){
    await window._setDoc(window._doc('schools',id), data);
  }else{
    const ref = await window._addDoc(window._col('schools'), data);
    return ref.id;
  }
}
async function dbDeleteSchool(id){ await window._deleteDoc(window._doc('schools',id)); }
async function dbSaveQuestion(data){ const r=await window._addDoc(window._col('questions'),data); return r.id; }
async function dbUpdateQuestion(id, data){ await window._setDoc(window._doc('questions',id),data); }
async function dbSaveUser(data, id){
  if(id) await window._setDoc(window._doc('users',id),data);
  else{ const r=await window._addDoc(window._col('users'),data); return r.id; }
}

// ─── TOAST ───
function showToast(msg){
  const t=document.getElementById('toast');
  t.textContent=msg;t.style.display='block';
  setTimeout(()=>t.style.display='none',2500);
}

// ─── HELPERS ───
function initials(n){return(n||'?').split(' ').filter(Boolean).slice(0,2).map(w=>w[0].toUpperCase()).join('');}
function avatarC(n){const s=[['#EEF1F9','#1B2F6E'],['#FBF5E0','#7A6010'],['#F0FDF4','#065F46'],['#FEF2F2','#7F1D1D']];return s[(n||'').charCodeAt(0)%s.length];}
function avgR(rv){if(!rv||!rv.length)return 0;return rv.reduce((a,r)=>a+r.rating,0)/rv.length;}
function stars(r){const f=Math.round(r);return'★'.repeat(f)+'☆'.repeat(5-f);}
function fmtDate(d){if(!d)return'';try{return new Date(d).toLocaleDateString('en-PK',{day:'numeric',month:'short',year:'numeric'});}catch(e){return d;}}
function curricBadge(c){
  const m={'Matric':'b-navy','Cambridge (CIE)':'b-gold','Edexcel':'b-gold','IB (International Baccalaureate)':'b-ib','Montessori':'b-mont','Agha Khan Board (AKU-EB)':'b-green','Ziauddin Board':'b-amber','Multiple':'b-amber'};
  return`<span class="badge ${m[c]||'b-navy'}">📚 ${c||'—'}</span>`;
}
function admBadge(s){
  if(s==='Open')return`<span class="badge b-green">✅ Open</span>`;
  if(s==='Closed')return`<span class="badge b-red">🔒 Closed</span>`;
  if(s==='Upcoming')return`<span class="badge b-amber">📅 Upcoming</span>`;
  return'';
}
function isFav(id){return favorites.includes(id);}
function saveFavs(){localStorage.setItem('ef_favs',JSON.stringify(favorites));}
function toggleFav(id,e){
  if(e)e.stopPropagation();
  if(favorites.includes(id))favorites=favorites.filter(x=>x!==id);
  else favorites.push(id);
  saveFavs();renderAll();updateFavCount();
}
function updateFavCount(){document.getElementById('favBadge').textContent=favorites.length;}
function isCmp(id){return compareList.includes(id);}
function toggleCompare(id,e){
  if(e)e.stopPropagation();
  if(compareList.includes(id)){compareList=compareList.filter(x=>x!==id);}
  else if(compareList.length<3){compareList.push(id);}
  else{alert('Max 3 schools to compare.');return;}
  updateCmpBar();renderAll();
}
function updateCmpBar(){
  const bar=document.getElementById('compareBar');
  const items=document.getElementById('compareItems');
  if(!compareList.length){bar.classList.remove('show');return;}
  bar.classList.add('show');
  items.innerHTML=compareList.map(id=>{
    const s=schools.find(x=>x.id===id);
    return`<div class="compare-chip">${s?s.name:'?'}<button onclick="toggleCompare('${id}')">×</button></div>`;
  }).join('');
}
function clearCompare(){compareList=[];updateCmpBar();renderAll();}

// ─── PAGES ───
function showPage(name){
  document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
  document.querySelectorAll('.nav-tab').forEach(t=>t.classList.remove('active'));
  const pg=document.getElementById('page-'+name);if(pg)pg.classList.add('active');
  const nt=document.getElementById('nt-'+name);if(nt)nt.classList.add('active');
  closeUMenu();
  if(name==='home')renderHome();
  if(name==='schools')renderCards(filterData());
  if(name==='favorites')renderFavs();
  if(name==='compare')renderCmpPage();
  if(name==='qa'){populateQSchools();renderQA();}
  if(name==='dashboard')renderDash();
}

// ─── HOME ───
function renderHome(){
  renderStats();
  const feat=schools.filter(s=>s.featured==='1');
  document.getElementById('featuredGrid').innerHTML=feat.length
    ?feat.map(s=>`<div class="featured-card" onclick="openDetailById('${s.id}')">
        <div style="background:var(--gold);color:var(--navy);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;display:inline-block;margin-bottom:8px;">⭐ FEATURED</div>
        <div style="font-family:'Merriweather',serif;font-size:15px;margin-bottom:4px;">${s.name}</div>
        <div style="font-size:12px;color:rgba(255,255,255,.7);">📍 ${s.area} · 📚 ${s.curric||'—'}</div>
        ${s.featured_tag?`<div style="margin-top:5px;font-size:11px;color:var(--gold2);font-weight:600;">${s.featured_tag}</div>`:''}
        <div style="margin-top:8px;display:flex;gap:5px;">${admBadge(s.adm_status)}${s.transport==='Yes'?`<span class="badge b-green">🚌</span>`:''}</div>
      </div>`).join('')
    :`<p style="color:var(--text3);font-size:13px;">No featured schools yet.</p>`;
  document.getElementById('recentGrid').innerHTML=buildCards(schools.slice(-4).reverse());
}
function renderStats(){
  const el=document.getElementById('statsGrid');if(!el)return;
  el.innerHTML=`
    <div class="stat-card"><div class="stat-label">Total Schools</div><div class="stat-value">${schools.length}</div><div class="stat-sub">Listed</div></div>
    <div class="stat-card"><div class="stat-label">Admissions Open</div><div class="stat-value" style="color:var(--green)">${schools.filter(s=>s.adm_status==='Open').length}</div><div class="stat-sub">Apply Now</div></div>
    <div class="stat-card"><div class="stat-label">With Transport</div><div class="stat-value">${schools.filter(s=>s.transport==='Yes').length}</div><div class="stat-sub">Schools</div></div>
    <div class="stat-card"><div class="stat-label">Featured</div><div class="stat-value" style="color:var(--gold)">${schools.filter(s=>s.featured==='1').length}</div><div class="stat-sub">Sponsored</div></div>
    <div class="stat-card"><div class="stat-label">Reviews</div><div class="stat-value">${schools.reduce((a,s)=>a+(s.reviews||[]).length,0)}</div><div class="stat-sub">From Parents</div></div>
    <div class="stat-card"><div class="stat-label">Q&A</div><div class="stat-value">${questions.length}</div><div class="stat-sub">Questions</div></div>`;
}

// ─── CARDS ───
function buildCards(list){
  return list.map(s=>{
    const[abg,afg]=avatarC(s.name);
    const avg=avgR(s.reviews||[]);
    const fav=isFav(s.id);const cmp=isCmp(s.id);
    const canEdit=currentUser&&(currentUser.type==='admin'||(currentUser.type==='school'&&currentUser.schoolId===s.id));
    return`<div class="school-card">
      <div class="card-img">
        ${s.photos&&s.photos.length?`<img src="${s.photos[0]}" alt="${s.name}"/>`:'🏫'}
        <button class="card-fav" onclick="toggleFav('${s.id}',event)">${fav?'❤️':'🤍'}</button>
        ${s.featured==='1'?`<span class="feat-ribbon">⭐ Featured</span>`:''}
      </div>
      <div class="card-strip">
        <div class="s-avatar" style="background:${abg};color:${afg};">${initials(s.name)}</div>
        <div style="flex:1;min-width:0;">
          <div class="card-name">${s.name}</div>
          <div class="card-area-txt">📍 ${s.area}</div>
        </div>
        ${avg>0?`<div style="color:var(--gold2);font-size:11px;text-align:right;">${stars(avg)}<br><span style="color:rgba(255,255,255,.55);font-size:9px;">(${(s.reviews||[]).length})</span></div>`:''}
      </div>
      <div class="card-body">
        <div class="card-badges">
          ${s.curric?curricBadge(s.curric):''}${s.adm_status?admBadge(s.adm_status):''}
          ${s.transport==='Yes'?`<span class="badge b-green">🚌</span>`:''}
          ${s.fee?`<span class="badge b-navy">💰 ${s.fee}</span>`:''}
        </div>
        <div class="card-meta">
          <div class="cmr"><span class="cmi">📞</span><span>${s.phone||'—'}</span></div>
          <div class="cmr"><span class="cmi">🎓</span><span>${s.grades||'—'}</span></div>
          ${s.website?`<div class="cmr"><span class="cmi">🌐</span><a href="${s.website}" target="_blank" onclick="event.stopPropagation()" style="color:var(--navy);font-weight:600;">Visit Website</a></div>`:''}
        </div>
      </div>
      <div class="card-actions">
        <button class="btn btn-navy btn-sm" onclick="openDetailById('${s.id}')">👁 View</button>
        <button class="btn btn-sec btn-sm ${cmp?'btn-navy':''}" onclick="toggleCompare('${s.id}',event)">⚖️${cmp?' ✓':''}</button>
        <button class="btn btn-sec btn-sm" onclick="toggleFav('${s.id}',event)">${fav?'❤️':'🤍'}</button>
        ${canEdit?`<button class="btn btn-sec btn-sm" onclick="openEditById('${s.id}');event.stopPropagation()">✏️</button>`:''}
        ${currentUser&&currentUser.type==='admin'?`<button class="btn btn-danger btn-sm" onclick="doDelete('${s.id}');event.stopPropagation()">🗑</button>`:''}
      </div>
    </div>`;
  }).join('');
}
function filterData(){
  const q=((document.getElementById('searchInput')||{}).value||'').toLowerCase()||
           ((document.getElementById('headerSearch')||{}).value||'').toLowerCase();
  const area=((document.getElementById('f_area')||{}).value||'');
  const curric=((document.getElementById('f_curric')||{}).value||'');
  const fee=((document.getElementById('f_fee')||{}).value||'');
  const adm=((document.getElementById('f_adm')||{}).value||'');
  const trans=((document.getElementById('f_trans')||{}).value||'');
  return schools.filter(s=>{
    if(q&&![s.name,s.area,s.contact,s.curric,s.board,s.grades].join(' ').toLowerCase().includes(q))return false;
    if(area&&s.area!==area)return false;
    if(curric&&s.curric!==curric)return false;
    if(fee&&s.fee!==fee)return false;
    if(adm&&s.adm_status!==adm)return false;
    if(trans&&s.transport!==trans)return false;
    return true;
  });
}
function applyFilters(){renderCards(filterData());}
function clearFilters(){
  ['searchInput','headerSearch','f_area','f_curric','f_fee','f_adm','f_trans'].forEach(id=>{const el=document.getElementById(id);if(el)el.value='';});
  renderCards(schools);
}
function renderCards(list){
  const grid=document.getElementById('schoolsGrid');
  const empty=document.getElementById('emptyState');
  if(!grid)return;
  if(!list.length){grid.innerHTML='';if(empty)empty.style.display='block';return;}
  if(empty)empty.style.display='none';
  grid.innerHTML=buildCards(list);
}
function renderFavs(){
  const list=schools.filter(s=>favorites.includes(s.id));
  const grid=document.getElementById('favGrid');
  const empty=document.getElementById('favEmpty');
  if(!list.length){grid.innerHTML='';if(empty)empty.style.display='block';return;}
  if(empty)empty.style.display='none';
  grid.innerHTML=buildCards(list);
}

// ─── COMPARE ───
function renderCmpPage(){
  const el=document.getElementById('compareContent');
  if(!compareList.length){
    el.innerHTML=`<div style="text-align:center;padding:4rem 2rem;color:var(--text2);">
      <div style="font-size:48px;">⚖️</div>
      <h3 style="font-family:'Merriweather',serif;color:var(--navy);margin:.75rem 0 .5rem;">No schools selected</h3>
      <p style="margin-bottom:1rem;">Click ⚖️ on school cards to add</p>
      <button class="btn btn-primary" onclick="showPage('schools')">Browse Schools</button></div>`;
    return;
  }
  el.innerHTML=buildCmpTable(compareList.map(id=>schools.find(x=>x.id===id)).filter(Boolean));
}
function openCompareModal(){
  document.getElementById('compareTableWrap').innerHTML=buildCmpTable(compareList.map(id=>schools.find(x=>x.id===id)).filter(Boolean));
  openModal('compareOverlay');
}
function buildCmpTable(list){
  if(!list.length)return'';
  const rows=[['📍 Area','area'],['💰 Fee','fee'],['📚 Curriculum','curric'],['🎓 Classes','grades'],['🗣️ Medium','medium'],['🏛️ Board','board'],['📝 Admission','adm_status'],['🚌 Transport','transport'],['👨‍👩‍👧 Students','students'],['👩‍🏫 Teachers','teachers'],['📅 Founded','founded']];
  return`<div style="overflow-x:auto;"><table class="compare-table">
    <tr><th>Feature</th>${list.map(s=>`<th>${s.name}<br><span style="font-size:11px;color:var(--gold2);">📍 ${s.area}</span></th>`).join('')}</tr>
    ${rows.map(([l,k])=>`<tr><td class="rl">${l}</td>${list.map(s=>`<td>${s[k]||'—'}</td>`).join('')}</tr>`).join('')}
    <tr><td class="rl">⭐ Rating</td>${list.map(s=>{const a=avgR(s.reviews||[]);return`<td>${a>0?stars(a)+' ('+a.toFixed(1)+')':'No reviews'}</td>`;}).join('')}</tr>
  </table></div>`;
}

// ─── Q&A ───
function populateQSchools(){
  const sel=document.getElementById('q_school');if(!sel)return;
  sel.innerHTML=`<option value="">General Question</option>`+schools.map(s=>`<option value="${s.id}">${s.name}</option>`).join('');
}
function renderQA(){
  const el=document.getElementById('qaList');if(!el)return;
  if(!questions.length){el.innerHTML=`<div style="text-align:center;padding:4rem 2rem;color:var(--text2);"><div style="font-size:48px;">❓</div><h3 style="font-family:'Merriweather',serif;color:var(--navy);">No questions yet</h3></div>`;return;}
  el.innerHTML=questions.map(q=>{
    const sch=q.schoolId?schools.find(s=>s.id===q.schoolId):null;
    const canAnswer=currentUser&&(currentUser.type==='admin'||(currentUser.type==='school'&&sch&&currentUser.schoolId===sch.id));
    return`<div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;margin-bottom:10px;box-shadow:var(--shadow);">
      <div style="font-weight:600;color:var(--navy);margin-bottom:4px;">❓ ${q.text}</div>
      <div style="font-size:11px;color:var(--text3);margin-bottom:6px;">👤 ${q.name} · ${q.date}${sch?` · 🏫 ${sch.name}`:''}</div>
      ${(q.answers||[]).map(a=>`<div style="background:var(--surface2);border-radius:var(--radius);padding:.75rem;font-size:13px;border-left:3px solid var(--gold);margin-top:8px;">${a.isAdmin?'<span style="color:var(--navy);font-weight:700;">🏫 Reply: </span>':''}${a.text}<br><span style="font-size:10px;color:var(--text3);">${a.name} · ${a.date}</span></div>`).join('')}
      ${canAnswer?`<div style="display:flex;gap:6px;margin-top:8px;">
        <input type="text" id="ans_${q.id}" placeholder="Type your reply…" style="flex:1;border:1.5px solid var(--border);border-radius:var(--radius);padding:6px 10px;font-size:13px;outline:none;font-family:'Inter',sans-serif;"/>
        <button class="btn btn-navy btn-sm" onclick="submitAnswer('${q.id}')">Reply</button>
      </div>`:''}
    </div>`;
  }).join('');
}
async function submitQuestion(){
  const text=document.getElementById('q_text').value.trim();
  const name=document.getElementById('q_name').value.trim()||'Anonymous';
  const sid=document.getElementById('q_school').value;
  if(!text){alert('Please enter your question.');return;}
  const data={schoolId:sid||null,name,text,date:new Date().toISOString().slice(0,10),answers:[]};
  const id=await dbSaveQuestion(data);
  questions.unshift({id,...data});
  closeModal('askOverlay');renderQA();showToast('✅ Question Submitted!');
}
async function submitAnswer(qid){
  const inp=document.getElementById('ans_'+qid);
  if(!inp||!inp.value.trim())return;
  const q=questions.find(x=>x.id===qid);if(!q)return;
  q.answers=q.answers||[];
  q.answers.push({name:currentUser.name,text:inp.value.trim(),date:new Date().toISOString().slice(0,10),isAdmin:true});
  await dbUpdateQuestion(qid,q);
  renderQA();showToast('✅ Reply Posted!');
}

// ─── LOGIN / AUTH ───
function setLT(t,el){loginType=t;document.querySelectorAll('.login-tab').forEach(x=>x.classList.remove('active'));el.classList.add('active');}
function doLogin(){
  const email=document.getElementById('loginEmail').value.trim();
  const pass=document.getElementById('loginPass').value;
  const err=document.getElementById('loginErr');
  const u=users.find(x=>x.email===email&&x.pass===pass&&x.type===loginType);
  if(!u){err.textContent='Wrong credentials or account type.';err.style.display='block';return;}
  err.style.display='none';currentUser=u;
  document.getElementById('loginBtn').style.display='none';
  document.getElementById('userMenuWrap').style.display='block';
  document.getElementById('uNameDisp').textContent=u.name.split(' ')[0];
  const canAdd=u.type==='admin'||u.type==='school';
  document.getElementById('adminAddBtn').style.display=canAdd?'':'none';
  document.getElementById('pageAddBtn').style.display=canAdd?'':'none';
  showPage('dashboard');showToast('✅ Welcome, '+u.name+'!');
}
function doLogout(){
  currentUser=null;
  document.getElementById('loginBtn').style.display='';
  document.getElementById('userMenuWrap').style.display='none';
  document.getElementById('adminAddBtn').style.display='none';
  document.getElementById('pageAddBtn').style.display='none';
  showPage('home');
}
async function doRegister(){
  const name=document.getElementById('reg_name').value.trim();
  const email=document.getElementById('reg_email').value.trim();
  const pass=document.getElementById('reg_pass').value;
  const type=document.getElementById('reg_type').value;
  const err=document.getElementById('regErr');
  if(!name||!email||!pass){err.textContent='Fill all required fields.';err.style.display='block';return;}
  if(pass.length<6){err.textContent='Password min 6 characters.';err.style.display='block';return;}
  if(users.find(u=>u.email===email)){err.textContent='Email already registered.';err.style.display='block';return;}
  const data={name,email,pass,type};
  const id=await dbSaveUser(data);
  users.push({id,...data});
  closeModal('registerOverlay');alert('Account created! You can now login.');
}
async function changePassword(){
  const current=document.getElementById('pwd_current').value;
  const nw=document.getElementById('pwd_new').value;
  const confirm=document.getElementById('pwd_confirm').value;
  const err=document.getElementById('pwdErr');const ok=document.getElementById('pwdOk');
  err.style.display='none';ok.style.display='none';
  if(!currentUser){err.textContent='Not logged in.';err.style.display='block';return;}
  if(current!==currentUser.pass){err.textContent='Current password incorrect.';err.style.display='block';return;}
  if(nw.length<6){err.textContent='Min 6 characters.';err.style.display='block';return;}
  if(nw!==confirm){err.textContent='Passwords do not match.';err.style.display='block';return;}
  const u=users.find(x=>x.id===currentUser.id);
  if(u){u.pass=nw;currentUser.pass=nw;await dbSaveUser(u,u.id);}
  ok.style.display='block';
  document.getElementById('pwd_current').value='';
  document.getElementById('pwd_new').value='';
  document.getElementById('pwd_confirm').value='';
  setTimeout(()=>{ok.style.display='none';closeModal('changePwdOverlay');},1500);
}
function toggleUMenu(){const d=document.getElementById('uDrop');d.style.display=d.style.display==='none'?'block':'none';}
function closeUMenu(){const d=document.getElementById('uDrop');if(d)d.style.display='none';}

// ─── DASHBOARD ───
function renderDash(){
  const el=document.getElementById('dashContent');if(!el)return;
  if(!currentUser){el.innerHTML=`<div style="text-align:center;padding:4rem;"><h3>Please login first</h3><button class="btn btn-primary" style="margin-top:1rem;" onclick="showPage('login')">Login</button></div>`;return;}
  const u=currentUser;
  if(u.type==='admin'){
    el.innerHTML=`<h2 style="font-family:'Merriweather',serif;color:var(--navy);margin-bottom:1.25rem;">📊 Admin Dashboard</h2>
      <div class="dash-grid">
        <div class="dash-card"><div style="font-size:28px;margin-bottom:6px;">🏫</div><div class="dash-val">${schools.length}</div><div class="dash-lbl">Schools</div></div>
        <div class="dash-card"><div style="font-size:28px;margin-bottom:6px;">👥</div><div class="dash-val">${users.length}</div><div class="dash-lbl">Users</div></div>
        <div class="dash-card"><div style="font-size:28px;margin-bottom:6px;">⭐</div><div class="dash-val">${schools.filter(s=>s.featured==='1').length}</div><div class="dash-lbl">Featured</div></div>
        <div class="dash-card"><div style="font-size:28px;margin-bottom:6px;">❓</div><div class="dash-val">${questions.length}</div><div class="dash-lbl">Questions</div></div>
        <div class="dash-card"><div style="font-size:28px;margin-bottom:6px;">✅</div><div class="dash-val">${schools.filter(s=>s.adm_status==='Open').length}</div><div class="dash-lbl">Open Admissions</div></div>
        <div class="dash-card"><div style="font-size:28px;margin-bottom:6px;">⭐</div><div class="dash-val">${schools.reduce((a,s)=>a+(s.reviews||[]).length,0)}</div><div class="dash-lbl">Reviews</div></div>
      </div>
      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem;">
        <button class="btn btn-primary" onclick="openAddModal()">+ Add School</button>
        <button class="btn btn-navy" onclick="showPage('schools')">🏫 All Schools</button>
        <button class="btn btn-sec" onclick="showPage('qa')">❓ Manage Q&A</button>
      </div>`;
  }else{
    el.innerHTML=`<h2 style="font-family:'Merriweather',serif;color:var(--navy);margin-bottom:1.25rem;">👨‍👩‍👧 Welcome, ${u.name}!</h2>
      <div class="dash-grid">
        <div class="dash-card"><div style="font-size:28px;margin-bottom:6px;">❤️</div><div class="dash-val">${favorites.length}</div><div class="dash-lbl">Favourites</div></div>
        <div class="dash-card"><div style="font-size:28px;margin-bottom:6px;">✅</div><div class="dash-val">${schools.filter(s=>s.adm_status==='Open').length}</div><div class="dash-lbl">Open Admissions</div></div>
      </div>
      <div style="display:flex;gap:8px;flex-wrap:wrap;">
        <button class="btn btn-primary" onclick="showPage('favorites')">❤️ My Favourites</button>
        <button class="btn btn-navy" onclick="showPage('schools')">🏫 Browse Schools</button>
      </div>`;
  }
}

// ─── DETAIL ───
function openDetailById(id){
  detailId=id;
  const s=schools.find(x=>x.id===id);if(!s)return;
  document.getElementById('detailTitle').textContent=s.name;
  const canEdit=currentUser&&(currentUser.type==='admin'||(currentUser.type==='school'&&currentUser.schoolId===id));
  document.getElementById('dEditBtn').style.display=canEdit?'':'none';
  document.getElementById('dDelBtn').style.display=currentUser&&currentUser.type==='admin'?'':'none';
  renderDTabs(s);
  switchDTab(0,document.querySelectorAll('#dTabsEl .tab')[0]);
  openModal('detailOverlay');
}
function editFromDetail(){closeModal('detailOverlay');openEditById(detailId);}
function deleteFromDetail(){doDelete(detailId);closeModal('detailOverlay');}
function switchDTab(idx,el){
  for(let i=0;i<7;i++)document.getElementById('dt'+i).style.display=i===idx?'':'none';
  document.querySelectorAll('#dTabsEl .tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
}
function renderDTabs(s){
  const avg=avgR(s.reviews||[]);const[abg,afg]=avatarC(s.name);const fav=isFav(s.id);
  document.getElementById('dt0').innerHTML=`
    <div style="display:flex;align-items:center;gap:12px;margin-bottom:1rem;padding:1rem;background:var(--navy);border-radius:var(--radius-lg);">
      <div style="width:46px;height:46px;border-radius:10px;background:${abg};color:${afg};display:flex;align-items:center;justify-content:center;font-family:'Merriweather',serif;font-size:16px;font-weight:700;border:2px solid var(--gold);flex-shrink:0;">${initials(s.name)}</div>
      <div style="flex:1;"><div style="font-family:'Merriweather',serif;font-size:16px;color:#fff;">${s.name}</div>
      <div style="font-size:12px;color:var(--gold2);">📍 ${s.area}${avg>0?' · '+stars(avg)+' ('+((s.reviews||[]).length)+')':''}</div></div>
      <button onclick="toggleFav('${s.id}')" style="background:none;border:none;font-size:22px;cursor:pointer;">${fav?'❤️':'🤍'}</button>
    </div>
    <div class="info-grid">
      <div class="info-item"><div class="ii-label">📞 Phone</div><div class="ii-value">${s.phone||'—'}</div></div>
      <div class="info-item"><div class="ii-label">👤 Contact</div><div class="ii-value">${s.contact||'—'}</div></div>
      <div class="info-item"><div class="ii-label">✉️ Email</div><div class="ii-value" style="word-break:break-all;">${s.email||'—'}</div></div>
      <div class="info-item"><div class="ii-label">🌐 Website</div><div class="ii-value">${s.website?`<a href="${s.website}" target="_blank" style="color:var(--navy);font-weight:600;">Visit →</a>`:'—'}</div></div>
      <div class="info-item"><div class="ii-label">💰 Fee/month</div><div class="ii-value">PKR ${s.fee||'—'}</div></div>
      <div class="info-item"><div class="ii-label">📅 Founded</div><div class="ii-value">${s.founded||'—'}</div></div>
      <div class="info-item"><div class="ii-label">👨‍👩‍👧 Students</div><div class="ii-value">${s.students||'—'}</div></div>
      <div class="info-item"><div class="ii-label">👩‍🏫 Teachers</div><div class="ii-value">${s.teachers||'—'}</div></div>
    </div>
    ${s.address?`<div class="adm-box"><div class="ii-label" style="margin-bottom:5px;">📍 Address</div><div style="font-size:13px;">${s.address}</div></div>`:''}`;
  document.getElementById('dt1').innerHTML=`
    <div class="info-grid">
      <div class="info-item"><div class="ii-label">📚 Curriculum</div><div class="ii-value">${s.curric?curricBadge(s.curric):'—'}</div></div>
      <div class="info-item"><div class="ii-label">🗣️ Medium</div><div class="ii-value">${s.medium||'—'}</div></div>
      <div class="info-item" style="grid-column:1/-1"><div class="ii-label">🎓 Classes</div><div class="ii-value">${s.grades||'—'}</div></div>
      <div class="info-item" style="grid-column:1/-1"><div class="ii-label">🏛️ Board</div><div class="ii-value">${s.board||'—'}</div></div>
    </div>
    ${s.extra?`<div class="adm-box"><div class="ii-label" style="margin-bottom:5px;">🏆 Extra-Curricular</div><div style="font-size:13px;">${s.extra}</div></div>`:''}
    ${s.facilities?`<div class="adm-box"><div class="ii-label" style="margin-bottom:5px;">🏗️ Facilities</div><div style="font-size:13px;">${s.facilities}</div></div>`:''}`;
  const ac=s.adm_status==='Open'?'var(--green)':s.adm_status==='Closed'?'var(--red)':'var(--amber)';
  document.getElementById('dt2').innerHTML=`
    <div class="adm-box" style="border-left:4px solid ${ac};">
      <div style="display:flex;align-items:center;gap:10px;">
        <span style="font-size:26px;">${s.adm_status==='Open'?'✅':s.adm_status==='Closed'?'🔒':'📅'}</span>
        <div><div style="font-weight:700;font-size:15px;font-family:'Merriweather',serif;">Admissions ${s.adm_status||'—'}</div>
        ${s.adm_open||s.adm_close?`<div style="font-size:12px;color:var(--text2);">${s.adm_open?'Opens: '+fmtDate(s.adm_open):''}${s.adm_open&&s.adm_close?' — ':''}${s.adm_close?'Closes: '+fmtDate(s.adm_close):''}</div>`:''}
        </div></div>
    </div>
    <div class="info-grid">
      <div class="info-item"><div class="ii-label">Entry Test</div><div class="ii-value">${s.adm_test==='Yes'?'✅ Required':s.adm_test==='No'?'❌ Not Required':'—'}</div></div>
      <div class="info-item"><div class="ii-label">Reg. Fee</div><div class="ii-value">PKR ${s.adm_regfee||'—'}</div></div>
    </div>
    ${s.adm_docs?`<div class="adm-box"><div class="ii-label" style="margin-bottom:5px;">📄 Documents</div><div style="font-size:13px;">${s.adm_docs}</div></div>`:''}
    ${s.adm_notes?`<div class="adm-box"><div class="ii-label" style="margin-bottom:5px;">📌 Notes</div><div style="font-size:13px;">${s.adm_notes}</div></div>`:''}`;
  const ta=s.transport==='Yes';
  document.getElementById('dt3').innerHTML=`
    <div class="adm-box" style="border-left:4px solid ${ta?'var(--green)':'var(--red)'};">
      <div style="display:flex;align-items:center;gap:12px;">
        <span style="font-size:32px;">🚌</span>
        <div><div style="font-family:'Merriweather',serif;font-size:15px;font-weight:700;">Transport ${ta?'Available':'Not Available'}</div>
        ${ta&&s.transport_fee?`<div style="font-size:12px;color:var(--text2);">PKR ${s.transport_fee}/month</div>`:''}
        </div></div>
    </div>
    ${ta&&s.transport_routes?`<div class="adm-box"><div class="ii-label" style="margin-bottom:5px;">🗺️ Routes</div><div style="font-size:13px;">${s.transport_routes}</div></div>`:''}`;
  const photos=s.photos||[];
  document.getElementById('dt4').innerHTML=photos.length
    ?`<div class="gal-grid">${photos.map((p,i)=>`<div class="gal-item"><img src="${p}" alt="${i}"/></div>`).join('')}</div>`
    :`<div class="gal-empty"><div style="font-size:40px;margin-bottom:8px;">🖼️</div><p>No photos yet</p></div>`;
  const revs=s.reviews||[];
  document.getElementById('dt5').innerHTML=`
    ${revs.length?`<div style="display:flex;align-items:center;gap:10px;margin-bottom:1rem;padding:.75rem 1rem;background:var(--navy);border-radius:var(--radius-lg);">
      <span style="font-size:26px;color:var(--gold2);">${stars(avgR(revs))}</span>
      <div style="color:#fff;"><div style="font-family:'Merriweather',serif;font-size:15px;">${avgR(revs).toFixed(1)} / 5.0</div>
      <div style="font-size:11px;color:rgba(255,255,255,.6);">${revs.length} review(s)</div></div></div>`:''}
    ${revs.map(r=>`<div class="review-card">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
        <strong style="font-size:13px;">👤 ${r.name}</strong>
        <span style="color:var(--gold2);font-size:13px;">${stars(r.rating)} <span style="font-size:10px;color:var(--text3);">${r.date}</span></span>
      </div>
      <p style="font-size:13px;color:var(--text2);">"${r.comment}"</p>
    </div>`).join('')}
    <div style="background:var(--surface2);border-radius:var(--radius-lg);padding:1rem;margin-top:1rem;border:1px solid var(--border);">
      <div style="font-family:'Merriweather',serif;font-size:14px;color:var(--navy);margin-bottom:.75rem;">✍️ Write a Review</div>
      <div class="field" style="margin-bottom:.65rem;"><label>Your Name</label><input id="rev_name" type="text" placeholder="Your name"/></div>
      <div class="field" style="margin-bottom:.65rem;"><label>Rating</label>
        <div class="star-rate" id="starRate">
          <span onclick="setRating(1)" data-v="1">★</span><span onclick="setRating(2)" data-v="2">★</span>
          <span onclick="setRating(3)" data-v="3">★</span><span onclick="setRating(4)" data-v="4">★</span>
          <span onclick="setRating(5)" data-v="5">★</span>
        </div>
      </div>
      <div class="field" style="margin-bottom:.65rem;"><label>Comment</label><textarea id="rev_comment" style="min-height:56px;" placeholder="Share your experience…"></textarea></div>
      <button class="btn btn-primary btn-sm" onclick="submitReview()">Submit Review</button>
    </div>`;
  cRating=0;
  const sqas=questions.filter(q=>q.schoolId===s.id);
  const canAnswer=currentUser&&(currentUser.type==='admin'||(currentUser.type==='school'&&currentUser.schoolId===s.id));
  document.getElementById('dt6').innerHTML=`
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;">
      <div style="font-family:'Merriweather',serif;font-size:14px;color:var(--navy);">Questions about ${s.name}</div>
      <button class="btn btn-primary btn-sm" onclick="openAskFor('${s.id}')">+ Ask</button>
    </div>
    ${sqas.length?sqas.map(q=>`<div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;margin-bottom:8px;">
      <div style="font-weight:600;color:var(--navy);margin-bottom:4px;">❓ ${q.text}</div>
      <div style="font-size:11px;color:var(--text3);margin-bottom:6px;">👤 ${q.name} · ${q.date}</div>
      ${(q.answers||[]).map(a=>`<div style="background:var(--surface2);border-radius:var(--radius);padding:.75rem;font-size:13px;border-left:3px solid var(--gold);margin-top:6px;">${a.isAdmin?'<span style="color:var(--navy);font-weight:700;">🏫 Reply: </span>':''}${a.text}</div>`).join('')}
      ${canAnswer?`<div style="display:flex;gap:5px;margin-top:6px;">
        <input type="text" id="dans_${q.id}" placeholder="Reply…" style="flex:1;border:1.5px solid var(--border);border-radius:var(--radius);padding:5px 9px;font-size:12px;outline:none;font-family:'Inter',sans-serif;"/>
        <button class="btn btn-navy btn-sm" onclick="submitAnswer('${q.id}');openDetailById('${s.id}')">Reply</button>
      </div>`:''}
    </div>`).join('')
    :`<div class="gal-empty"><p>No questions yet. Be the first!</p></div>`}`;
}
function openAskFor(sid){
  populateQSchools();
  const sel=document.getElementById('q_school');if(sel)sel.value=sid;
  document.getElementById('q_name').value='';
  document.getElementById('q_text').value='';
  closeModal('detailOverlay');openModal('askOverlay');
}
function setRating(v){cRating=v;document.querySelectorAll('.star-rate span').forEach(s=>s.classList.toggle('on',parseInt(s.dataset.v)<=v));}
async function submitReview(){
  const s=schools.find(x=>x.id===detailId);if(!s)return;
  const name=document.getElementById('rev_name').value.trim();
  const comment=document.getElementById('rev_comment').value.trim();
  if(!name||!comment||!cRating){alert('Please fill name, comment and rating.');return;}
  if(!s.reviews)s.reviews=[];
  s.reviews.push({name,rating:cRating,comment,date:new Date().toISOString().slice(0,10)});
  await dbSaveSchool(s,s.id);
  renderDTabs(s);switchDTab(5,document.querySelectorAll('#dTabsEl .tab')[5]);
  renderAll();showToast('✅ Review Submitted!');
}

// ─── ADD / EDIT ───
function openAddModal(){
  if(!currentUser||!(currentUser.type==='admin'||currentUser.type==='school')){
    alert('🔐 Please login as Admin to add schools.\n\nAdmin: admin@ef.com / admin123');
    showPage('login');return;
  }
  editingId=null;editPhotos=[];
  document.getElementById('editTitle').textContent='Add New School';
  document.getElementById('editSaveBtn').textContent='💾 Save School';
  ['e_name','e_area','e_fee','e_phone','e_contact','e_email','e_website','e_address',
   'e_curric','e_grades','e_medium','e_board','e_extra','e_facilities',
   'e_adm_status','e_adm_open','e_adm_close','e_adm_test','e_adm_regfee','e_adm_docs','e_adm_contact','e_adm_notes',
   'e_transport','e_transport_routes','e_transport_fee','e_students','e_teachers','e_founded','e_social',
   'e_featured','e_featured_tag'].forEach(id=>{const el=document.getElementById(id);if(el)el.value='';});
  document.getElementById('e_featured').value='0';
  renderPhotoThumbs();
  switchETab(0,document.querySelectorAll('#editTabs .tab')[0]);
  document.getElementById('editErr').style.display='none';
  openModal('editOverlay');
}
function openEditById(id){
  const s=schools.find(x=>x.id===id);if(!s)return;
  editingId=id;editPhotos=[...(s.photos||[])];
  document.getElementById('editTitle').textContent='Edit School';
  document.getElementById('editSaveBtn').textContent='💾 Update';
  const map={e_name:'name',e_area:'area',e_fee:'fee',e_phone:'phone',e_contact:'contact',e_email:'email',e_website:'website',e_address:'address',e_curric:'curric',e_grades:'grades',e_medium:'medium',e_board:'board',e_extra:'extra',e_facilities:'facilities',e_adm_status:'adm_status',e_adm_open:'adm_open',e_adm_close:'adm_close',e_adm_test:'adm_test',e_adm_regfee:'adm_regfee',e_adm_docs:'adm_docs',e_adm_contact:'adm_contact',e_adm_notes:'adm_notes',e_transport:'transport',e_transport_routes:'transport_routes',e_transport_fee:'transport_fee',e_students:'students',e_teachers:'teachers',e_founded:'founded',e_social:'social',e_featured:'featured',e_featured_tag:'featured_tag'};
  Object.entries(map).forEach(([fid,key])=>{const el=document.getElementById(fid);if(el)el.value=s[key]||'';});
  renderPhotoThumbs();
  switchETab(0,document.querySelectorAll('#editTabs .tab')[0]);
  document.getElementById('editErr').style.display='none';
  openModal('editOverlay');
}
function switchETab(idx,el){
  for(let i=0;i<6;i++)document.getElementById('et'+i).style.display=i===idx?'':'none';
  document.querySelectorAll('#editTabs .tab').forEach((t,i)=>t.classList.toggle('active',i===idx));
}
async function saveSchool(){
  const name=document.getElementById('e_name').value.trim();
  const area=document.getElementById('e_area').value;
  const fee=document.getElementById('e_fee').value;
  if(!name||!area||!fee){
    const err=document.getElementById('editErr');
    err.textContent='⚠️ School Name, Area and Fee are required.';
    err.style.display='block';return;
  }
  const g=id=>(document.getElementById(id)||{}).value||'';
  const data={name,area,fee,phone:g('e_phone'),contact:g('e_contact'),email:g('e_email'),website:g('e_website'),address:g('e_address'),curric:g('e_curric'),grades:g('e_grades'),medium:g('e_medium'),board:g('e_board'),extra:g('e_extra'),facilities:g('e_facilities'),adm_status:g('e_adm_status'),adm_open:g('e_adm_open'),adm_close:g('e_adm_close'),adm_test:g('e_adm_test'),adm_regfee:g('e_adm_regfee'),adm_docs:g('e_adm_docs'),adm_contact:g('e_adm_contact'),adm_notes:g('e_adm_notes'),transport:g('e_transport'),transport_routes:g('e_transport_routes'),transport_fee:g('e_transport_fee'),students:g('e_students'),teachers:g('e_teachers'),founded:g('e_founded'),social:g('e_social'),featured:g('e_featured'),featured_tag:g('e_featured_tag'),photos:editPhotos};
  if(editingId){
    const ex=schools.find(x=>x.id===editingId);
    data.reviews=ex.reviews||[];
    Object.assign(ex,data);
    await dbSaveSchool(data,editingId);
  }else{
    const newId=await dbSaveSchool(data);
    schools.push({id:newId,...data,reviews:[]});
  }
  closeModal('editOverlay');
  showToast('✅ School Saved to Firebase!');
  renderAll();
}

// ─── PHOTOS ───
function handlePhotoUpload(e){
  [...e.target.files].forEach(f=>{const r=new FileReader();r.onload=ev=>{editPhotos.push(ev.target.result);renderPhotoThumbs();};r.readAsDataURL(f);});
  e.target.value='';
}
function renderPhotoThumbs(){
  document.getElementById('photoThumbs').innerHTML=editPhotos.map((p,i)=>
    `<div class="photo-thumb"><img src="${p}"/><button class="ptd" onclick="removePhoto(${i})">×</button></div>`
  ).join('');
}
function removePhoto(i){editPhotos.splice(i,1);renderPhotoThumbs();}

// ─── DELETE ───
async function doDelete(id){
  const s=schools.find(x=>x.id===id);
  if(confirm(`Remove "${s?.name}" permanently from Education Finder?`)){
    await dbDeleteSchool(id);
    schools=schools.filter(x=>x.id!==id);
    favorites=favorites.filter(x=>x!==id);
    compareList=compareList.filter(x=>x!==id);
    saveFavs();updateCmpBar();renderAll();
    showToast('🗑 School Removed from Firebase');
  }
}

// ─── MODALS ───
function openModal(id){document.getElementById(id).classList.add('open');}
function closeModal(id){document.getElementById(id).classList.remove('open');}

function renderAll(){
  renderStats();updateFavCount();updateCmpBar();
  const pg=document.querySelector('.page.active');
  if(!pg)return;
  const id=pg.id.replace('page-','');
  if(id==='home')renderHome();
  if(id==='schools')renderCards(filterData());
  if(id==='favorites')renderFavs();
  if(id==='compare')renderCmpPage();
  if(id==='qa')renderQA();
  if(id==='dashboard')renderDash();
}

document.addEventListener('click',e=>{if(!e.target.closest('#userMenuWrap'))closeUMenu();});
</script>
</body>
</html>