<!DOCTYPE html>
<html lang="ar" dir="rtl" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="theme-color" content="#047857">
<meta name="description" content="بيطري — منصة الرعاية البيطرية الرقمية في الجزائر. احجز طبيبك البيطري بضغطة واحدة.">
<title>VetNet — منصة الرعاية البيطرية في الجزائر</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap" rel="stylesheet">
<style>
/* ── TOKENS ── */
:root{
  --g1:#f0fdf4;--g2:#dcfce7;--g3:#86efac;--g4:#34d399;
  --g5:#10b981;--g6:#059669;--g7:#047857;--g8:#065f46;--g9:#064e3b;
  --red:#ef4444;--red2:#dc2626;
  --blue:#3b82f6;--amber:#f59e0b;
  --bg:#f0f7f3;--surface:#fff;--surface2:#f6faf8;--inp:#edf4f0;
  --br:rgba(6,95,70,.10);--br2:rgba(6,95,70,.18);
  --tp:#052e1c;--ts:#2d6a4f;--tm:#74a98a;
  --sh1:0 1px 3px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.07);
  --sh2:0 2px 8px rgba(0,0,0,.07),0 12px 40px rgba(0,0,0,.1);
  --sh3:0 8px 24px rgba(0,0,0,.1),0 32px 80px rgba(0,0,0,.14);
  --r1:8px;--r2:16px;--r3:24px;--r4:32px;
  --tr:.22s cubic-bezier(.4,0,.2,1);
}
[data-theme=dark]{
  --bg:#050f09;--surface:#0b1a10;--surface2:#0f2016;--inp:#0d1c13;
  --br:rgba(110,231,183,.07);--br2:rgba(110,231,183,.14);
  --tp:#d1fae5;--ts:#6ee7b7;--tm:#347860;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Tajawal',sans-serif;
  background:var(--bg);color:var(--tp);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:'Tajawal',sans-serif;border:none;background:none;}

.shell{max-width:480px;margin:0 auto;min-height:100dvh;background:var(--bg);position:relative;}
@media(min-width:640px){
  body{background:radial-gradient(ellipse at 20% 50%,rgba(6,95,70,.12),transparent 60%),#040d07;}
  .shell{box-shadow:0 0 0 1px rgba(110,231,183,.06),0 32px 80px rgba(0,0,0,.5);}
}

/* ── TOP BAR ── */
.topbar{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;
  z-index:1000;
  background:rgba(240,247,243,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--br);
  height:60px;
  display:flex;align-items:center;
  flex-direction:row !important;
  padding:0 18px;gap:10px;
  box-shadow:0 2px 16px rgba(0,0,0,.08);
  direction:ltr !important;
}
[data-theme=dark] .topbar{background:rgba(5,15,9,.95);}
.topbar .tb-logo{order:1;flex-shrink:0;}
.topbar .lang-bar{order:2;margin-left:auto;}
.topbar #tbtn{order:3;flex-shrink:0;}
.topbar .tb-btn.tb-login{order:4;flex-shrink:0;}
.topbar .tb-btn.tb-register{order:5;flex-shrink:0;}
/* Push content below fixed topbar */
.hero{margin-top:60px;}
.tb-logo{display:flex;align-items:center;gap:8px;}
.tb-mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--g8),var(--g5));
  display:flex;align-items:center;justify-content:center;
  font-size:17px;box-shadow:0 2px 10px rgba(4,120,87,.3);
}
.tb-name{font-size:19px;font-weight:900;color:var(--tp);}
.tb-right{margin-right:auto;display:flex;gap:8px;align-items:center;}
.tb-btn{
  padding:7px 16px;border-radius:20px;
  font-size:13px;font-weight:800;cursor:pointer;transition:var(--tr);
  font-family:'Tajawal',sans-serif;
}
.tb-login{background:var(--inp);border:1px solid var(--br2);color:var(--ts);}
.tb-login:hover{background:var(--surface2);}
.tb-register{
  background:var(--g7);color:#fff;
  box-shadow:0 2px 10px rgba(4,120,87,.3);
}
.tb-register:hover{background:var(--g6);}
.tb-theme{
  width:34px;height:34px;border-radius:50%;
  background:var(--inp);border:1px solid var(--br2);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;transition:var(--tr);
}
.tb-theme:hover{background:var(--surface2);}

/* ── HERO SECTION ── */
.hero{
  position:relative;height:480px;overflow:hidden;
}
.hero-img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 28%;
  transform:scale(1.05);
  transition:transform 10s cubic-bezier(.25,.46,.45,.94);
}
.hero.loaded .hero-img{transform:scale(1);}
.hero-ov{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg,var(--bg) 0%,rgba(5,15,9,0) 42%),
    linear-gradient(150deg,rgba(4,78,59,.78) 0%,rgba(4,78,59,.12) 55%,transparent 100%);
}
.hero-grain{
  position:absolute;inset:0;z-index:1;opacity:.035;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* Hero content */
.hero-body{
  position:absolute;bottom:0;left:0;right:0;z-index:5;
  padding:28px 22px 40px;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:20px;padding:5px 14px;
  font-size:12px;font-weight:800;color:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);margin-bottom:14px;
}
.hero-tag-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:lp 2s infinite;}
@keyframes lp{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5);}70%{box-shadow:0 0 0 7px rgba(74,222,128,0);}}

.hero-title{
  font-size:36px;font-weight:900;color:#fff;line-height:1.12;
  text-shadow:0 2px 20px rgba(0,0,0,.3);
  margin-bottom:10px;
}
.hero-title span{color:var(--g3);}
.hero-subtitle{
  font-size:15px;color:rgba(255,255,255,.78);font-weight:400;
  line-height:1.6;margin-bottom:22px;
  text-shadow:0 1px 8px rgba(0,0,0,.2);
}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;}
.cta-main{
  display:flex;align-items:center;gap:8px;
  background:var(--g5);color:#fff;
  border-radius:var(--r2);padding:13px 22px;
  font-size:15px;font-weight:900;cursor:pointer;
  box-shadow:0 4px 20px rgba(16,185,129,.35);
  transition:var(--tr);
  position:relative;overflow:hidden;
}
.cta-main::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.14),transparent);
  opacity:0;transition:opacity var(--tr);
}
.cta-main:hover{background:var(--g4);transform:translateY(-1px);box-shadow:0 8px 28px rgba(16,185,129,.45);}
.cta-main:hover::after{opacity:1;}
.cta-emg{
  display:flex;align-items:center;gap:8px;
  background:rgba(239,68,68,.9);color:#fff;
  border-radius:var(--r2);padding:13px 20px;
  font-size:15px;font-weight:900;cursor:pointer;
  box-shadow:0 4px 20px rgba(239,68,68,.35);
  transition:var(--tr);
  animation:emg-btn 2.5s ease infinite;
}
@keyframes emg-btn{
  0%,100%{box-shadow:0 4px 20px rgba(239,68,68,.35);}
  50%{box-shadow:0 4px 28px rgba(239,68,68,.55);}
}
.cta-emg:hover{background:var(--red2);animation:none;transform:translateY(-1px);}

/* ── STATS BAR ── */
.stats-bar{
  display:flex;
  background:var(--surface);
  border-bottom:1px solid var(--br);
  padding:0;
}
.stat-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:14px 8px;border-left:1px solid var(--br);
  cursor:default;transition:var(--tr);
}
.stat-item:last-child{border-left:none;}
[dir=ltr] .stat-item{border-left:none;border-right:1px solid var(--br);}
[dir=ltr] .stat-item:last-child{border-right:none;}
.stat-item:hover{background:var(--g1);}
.stat-num{font-size:22px;font-weight:900;color:var(--g7);line-height:1;}
.stat-lbl{font-size:10px;color:var(--tm);font-weight:700;margin-top:2px;text-align:center;}

/* ── SECTION ── */
.sec{padding:0 16px;margin-top:28px;}
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.sec-title{font-size:18px;font-weight:900;}
.sec-link{font-size:13px;color:var(--g5);font-weight:700;cursor:pointer;transition:var(--tr);}
.sec-link:hover{color:var(--g7);}

/* ── HOW IT WORKS ── */
.steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.step-card{
  background:var(--surface);border:1px solid var(--br);
  border-radius:var(--r3);padding:18px 14px;
  text-align:center;transition:var(--tr);
  position:relative;overflow:hidden;
}
.step-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;background:linear-gradient(90deg,var(--g5),var(--g3));
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--tr);
}
[dir=ltr] .step-card::before{transform-origin:left;}
.step-card:hover::before{transform:scaleX(1);}
.step-card:hover{box-shadow:var(--sh1);transform:translateY(-3px);}
.step-num{
  width:40px;height:40px;border-radius:50%;
  background:var(--g1);border:2px solid var(--g2);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:900;color:var(--g7);
  margin:0 auto 12px;
}
.step-icon{font-size:28px;margin-bottom:10px;}
.step-title{font-size:14px;font-weight:800;margin-bottom:4px;}
.step-desc{font-size:12px;color:var(--tm);line-height:1.5;}

/* ── VET CARDS SCROLL ── */
.vets-scroll{
  display:flex;gap:12px;overflow-x:auto;
  scrollbar-width:none;padding:2px 16px 6px;
}
.vets-scroll::-webkit-scrollbar{display:none;}
.vet-mini{
  flex:0 0 200px;
  background:var(--surface);border:1px solid var(--br);
  border-radius:var(--r3);padding:16px 14px;
  cursor:pointer;transition:var(--tr);
}
.vet-mini:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--br2);}
.vm-avatar{
  width:52px;height:52px;border-radius:16px;flex-shrink:0;
  background:linear-gradient(135deg,var(--g7),var(--g4));
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:10px;
}
.vm-name{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vm-spec{font-size:11px;color:var(--g5);font-weight:700;margin-top:2px;}
.vm-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.vm-rating{font-size:12px;color:var(--ts);font-weight:700;}
.vm-dist{font-size:11px;color:var(--tm);}
.vm-avail{
  display:flex;align-items:center;gap:5px;margin-top:8px;
  font-size:11px;font-weight:800;
}
.vm-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.vm-dot.on{background:#4ade80;box-shadow:0 0 0 2px rgba(74,222,128,.3);}
.vm-dot.off{background:var(--tm);}
.vm-avail.on{color:var(--g7);}
.vm-avail.off{color:var(--tm);}
.vm-book{
  margin-top:12px;width:100%;
  background:linear-gradient(135deg,var(--g7),var(--g5));
  color:#fff;border-radius:10px;padding:9px;
  font-size:13px;font-weight:800;text-align:center;
  transition:var(--tr);
}
.vm-book:hover{opacity:.9;}

/* ── FEATURES GRID ── */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.feat-card{
  background:var(--surface);border:1px solid var(--br);
  border-radius:var(--r3);padding:18px 14px;
  transition:var(--tr);cursor:default;
}
.feat-card:hover{box-shadow:var(--sh1);transform:translateY(-2px);}
.feat-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:12px;
}
.feat-title{font-size:14px;font-weight:800;margin-bottom:4px;}
.feat-desc{font-size:12px;color:var(--tm);line-height:1.5;}

/* ── TESTIMONIALS ── */
.testimonials-scroll{
  display:flex;gap:12px;overflow-x:auto;
  scrollbar-width:none;padding:2px 16px 6px;
}
.testimonials-scroll::-webkit-scrollbar{display:none;}
.testi-card{
  flex:0 0 240px;
  background:var(--surface);border:1px solid var(--br);
  border-radius:var(--r3);padding:16px;
}
.testi-stars{color:#f59e0b;font-size:14px;margin-bottom:8px;}
.testi-text{font-size:13px;color:var(--ts);line-height:1.6;font-style:italic;margin-bottom:12px;}
.testi-author{display:flex;align-items:center;gap:10px;}
.testi-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--g1);border:2px solid var(--g2);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.testi-name{font-size:13px;font-weight:800;}
.testi-role{font-size:11px;color:var(--tm);}

/* ── EMERGENCY BAND ── */
.emg-band{
  margin:28px 16px;
  background:linear-gradient(135deg,var(--red2),var(--red));
  border-radius:var(--r3);padding:22px 20px;
  display:flex;align-items:center;gap:16px;
  cursor:pointer;transition:var(--tr);
  box-shadow:0 4px 24px rgba(239,68,68,.3);
  position:relative;overflow:hidden;
}
.emg-band::before{
  content:'';position:absolute;top:-40px;left:-40px;
  width:160px;height:160px;
  background:rgba(255,255,255,.07);border-radius:50%;
}
.emg-band:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(239,68,68,.4);}
.emg-band-icon{
  width:54px;height:54px;border-radius:16px;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;flex-shrink:0;
}
.emg-band-text{flex:1;}
.emg-band-title{font-size:18px;font-weight:900;color:#fff;}
.emg-band-sub{font-size:13px;color:rgba(255,255,255,.8);margin-top:3px;}
.emg-band-arrow{color:rgba(255,255,255,.7);font-size:22px;}

/* ── APP DOWNLOAD ── */
.app-band{
  margin:0 16px 28px;
  background:linear-gradient(135deg,var(--g8),var(--g6));
  border-radius:var(--r3);padding:24px 20px;
  position:relative;overflow:hidden;
}
.app-band::before{
  content:'';position:absolute;bottom:-30px;left:-30px;
  width:140px;height:140px;
  background:rgba(255,255,255,.06);border-radius:50%;
}
.app-band-title{font-size:20px;font-weight:900;color:#fff;margin-bottom:6px;}
.app-band-sub{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:18px;}
.app-btns{display:flex;gap:10px;flex-wrap:wrap;}
.app-btn{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  border-radius:12px;padding:10px 16px;
  cursor:pointer;transition:var(--tr);
  color:#fff;
  backdrop-filter:blur(8px);
}
.app-btn:hover{background:rgba(255,255,255,.25);}
.app-btn-icon{font-size:24px;}
.app-btn-text{text-align:right;}
[dir=ltr] .app-btn-text{text-align:left;}
.app-btn-text small{font-size:10px;opacity:.8;display:block;}
.app-btn-text strong{font-size:14px;font-weight:800;}

/* ── FOOTER ── */
.footer{
  background:var(--surface);
  border-top:1px solid var(--br);
  padding:28px 20px 40px;
}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-name{font-size:20px;font-weight:900;}
.footer-desc{font-size:13px;color:var(--ts);line-height:1.6;margin-bottom:20px;}
.footer-links{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;}
.footer-link{
  font-size:13px;color:var(--ts);font-weight:600;cursor:pointer;
  padding:5px 12px;border-radius:20px;background:var(--inp);
  transition:var(--tr);
}
.footer-link:hover{background:var(--g1);color:var(--g7);}
.footer-copy{font-size:12px;color:var(--tm);}
.footer-social{display:flex;gap:10px;margin-bottom:16px;}
.soc-btn{
  width:38px;height:38px;border-radius:50%;
  background:var(--inp);border:1px solid var(--br2);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;transition:var(--tr);
}
.soc-btn:hover{background:var(--g1);border-color:var(--g3);}

/* ── LANG SWITCHER ── */
.lang-bar{
  display:flex;gap:4px;background:var(--inp);
  border-radius:20px;padding:3px;
}
.lp{
  padding:4px 12px;border-radius:16px;
  font-size:12px;font-weight:800;color:var(--tm);
  cursor:pointer;transition:var(--tr);
  font-family:'Tajawal',sans-serif;
}
.lp.on{background:var(--surface);color:var(--g7);box-shadow:var(--sh1);}
.lp:hover:not(.on){color:var(--ts);}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--surface);border:1px solid var(--br2);border-radius:var(--r2);
  padding:13px 20px;display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;color:var(--tp);
  box-shadow:var(--sh3);z-index:9999;
  opacity:0;pointer-events:none;
  transition:opacity .28s,transform .28s cubic-bezier(.22,1,.36,1);
  width:90%;max-width:380px;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
</style>
</head>
<body>

<div class="toast" id="toast"><span id="ti">✅</span> <span id="tmsg"></span></div>

<div class="shell">

  <!-- ══ TOP BAR ══ -->
  <nav class="topbar">
    <div class="tb-logo">
      <a href="home.php" style="display:flex;align-items:center;text-decoration:none;"><img src="assets/img/logo.png?v=3" alt="VetNet" style="height:50px;object-fit:contain;"></a>
    </div>
    <div class="tb-right">
      <div class="lang-bar">
        <button class="lp on" onclick="setLang('ar')">عر</button>
        <button class="lp" onclick="setLang('fr')">Fr</button>
        <button class="lp" onclick="setLang('en')">En</button>
      </div>
      <button class="tb-theme" id="tbtn" onclick="toggleTheme()">🌙</button>
      <button class="tb-btn tb-login" onclick="location.href='login.php'" data-i18n-btn="btn_signin">دخول</button>
      <button class="tb-btn tb-register" onclick="location.href='login.php'" data-i18n-btn="btn_register">ابدأ مجاناً</button>
    </div>
  </nav>

  <!-- ══ HERO ══ -->
  <section class="hero" id="hero">
    <img class="hero-img" src="assets/img/hero-bg.png" alt="بيطري"
      onload="this.closest('.hero').classList.add('loaded')">
    <div class="hero-ov"></div>
    <div class="hero-grain"></div>
    <div class="hero-body">
      <div class="hero-tag">
        <div class="hero-tag-dot"></div>
        <span id="tag-live">87 طبيب بيطري نشط الآن</span>
      </div>
      <h1 class="hero-title" id="hero-title">
        صحة حيوانك<br><span>همّنا الأول</span>
      </h1>
      <p class="hero-subtitle" id="hero-sub">
        المنصة الرقمية الأولى في الجزائر لربط أصحاب الحيوانات بالأطباء البيطريين. احجز، تابع، واطمئن.
      </p>
      <div class="hero-ctas">
        <button class="cta-main" onclick="location.href='login.php'">
          📅 <span id="cta1">احجز طبيباً الآن</span>
        </button>
        <button class="cta-emg" onclick="location.href='pages/emergency-map.php'">
          🚨 <span id="cta2">طوارئ</span>
        </button>
      </div>
    </div>
  </section>

  <!-- ══ STATS BAR ══ -->
  <div class="stats-bar">
    <div class="stat-item">
      <div class="stat-num">87+</div>
      <div class="stat-lbl" id="stat1">طبيب بيطري</div>
    </div>
    <div class="stat-item">
      <div class="stat-num">48</div>
      <div class="stat-lbl" id="stat2">ولاية مغطاة</div>
    </div>
    <div class="stat-item">
      <div class="stat-num">2K+</div>
      <div class="stat-lbl" id="stat3">مستخدم نشط</div>
    </div>
    <div class="stat-item">
      <div class="stat-num">4.8⭐</div>
      <div class="stat-lbl" id="stat4">تقييم المنصة</div>
    </div>
  </div>

  <!-- ══ HOW IT WORKS ══ -->
  <section class="sec">
    <div class="sec-hdr">
      <h2 class="sec-title" id="hw-title">كيف تعمل المنصة؟</h2>
    </div>
    <div class="steps-grid">
      <div class="step-card">
        <div class="step-icon">📱</div>
        <div class="step-num">1</div>
        <div class="step-title" id="step1-t">سجّل حسابك</div>
        <div class="step-desc" id="step1-d">صاحب حيوان أو مزرعة أو طبيب بيطري</div>
      </div>
      <div class="step-card">
        <div class="step-icon">🔍</div>
        <div class="step-num">2</div>
        <div class="step-title" id="step2-t">ابحث عن طبيب</div>
        <div class="step-desc" id="step2-d">حسب الموقع والتخصص والتقييم</div>
      </div>
      <div class="step-card">
        <div class="step-icon">📅</div>
        <div class="step-num">3</div>
        <div class="step-title" id="step3-t">احجز الموعد</div>
        <div class="step-desc" id="step3-d">عيادة أو زيارة منزلية في 3 خطوات</div>
      </div>
      <div class="step-card">
        <div class="step-icon">✅</div>
        <div class="step-num">4</div>
        <div class="step-title" id="step4-t">تابع صحته</div>
        <div class="step-desc" id="step4-d">تقارير طبية وتذكير بالتطعيمات</div>
      </div>
    </div>
  </section>

  <!-- ══ NEARBY VETS ══ -->
  <section style="margin-top:28px;">
    <div class="sec-hdr" style="padding:0 16px;">
      <h2 class="sec-title" id="vets-title">أطباء مميزون</h2>
      <span class="sec-link" onclick="location.href='login.php'" id="vets-link">عرض الكل</span>
    </div>
    <div class="vets-scroll" id="vets-container"></div>
  </section>

  <!-- ══ EMERGENCY BAND ══ -->
  <div class="emg-band" onclick="location.href='login.php'">
    <div class="emg-band-icon">🚨</div>
    <div class="emg-band-text">
      <div class="emg-band-title" id="emg-title">طوارئ بيطرية 24/7</div>
      <div class="emg-band-sub" id="emg-sub">تواصل فوري مع أقرب طبيب متاح</div>
    </div>
    <div class="emg-band-arrow">←</div>
  </div>

  <!-- ══ FEATURES ══ -->
  <section class="sec">
    <div class="sec-hdr">
      <h2 class="sec-title" id="feat-title">لماذا بيطري؟</h2>
    </div>
    <div class="feat-grid">
      <div class="feat-card">
        <div class="feat-icon" style="background:#f0fdf4;">📍</div>
        <div class="feat-title" id="f1t">أقرب طبيب إليك</div>
        <div class="feat-desc" id="f1d">نحدد موقعك ونعرض الأطباء الأقرب إليك فوراً</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon" style="background:#fef3c7;">⭐</div>
        <div class="feat-title" id="f2t">تقييمات حقيقية</div>
        <div class="feat-desc" id="f2d">آراء أصحاب الحيوانات الذين جربوا الخدمة</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon" style="background:#eff6ff;">📋</div>
        <div class="feat-title" id="f3t">سجل طبي رقمي</div>
        <div class="feat-desc" id="f3d">كل تاريخ علاج حيوانك في مكان واحد</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon" style="background:#fff1f2;">🚜</div>
        <div class="feat-title" id="f4t">للمزارع أيضاً</div>
        <div class="feat-desc" id="f4d">إدارة قطعانك ومتابعة صحتها بسهولة</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon" style="background:#faf5ff;">💉</div>
        <div class="feat-title" id="f5t">تذكير التطعيمات</div>
        <div class="feat-desc" id="f5d">لا تفوّت أي موعد تطعيم لحيوانك</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon" style="background:#fff7ed;">🏠</div>
        <div class="feat-title" id="f6t">زيارة منزلية</div>
        <div class="feat-desc" id="f6d">الطبيب يأتي إليك في منزلك أو مزرعتك</div>
      </div>
    </div>
  </section>

  <!-- ══ TESTIMONIALS ══ -->
  <section style="margin-top:28px;">
    <div class="sec-hdr" style="padding:0 16px;">
      <h2 class="sec-title" id="testi-title">ماذا يقولون عنا؟</h2>
    </div>
    <div class="testimonials-scroll" id="testi-container"></div>
  </section>

  <!-- ══ APP DOWNLOAD ══ -->
  <div class="app-band">
    <div class="app-band-title" id="app-title">حمّل التطبيق قريباً</div>
    <div class="app-band-sub" id="app-sub">تجربة أكثر سلاسة على هاتفك</div>
    <div class="app-btns">
      <div class="app-btn">
        <div class="app-btn-icon">🍎</div>
        <div class="app-btn-text">
          <small>قريباً على</small>
          <strong>App Store</strong>
        </div>
      </div>
      <div class="app-btn">
        <div class="app-btn-icon">🤖</div>
        <div class="app-btn-text">
          <small>قريباً على</small>
          <strong>Google Play</strong>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ FOOTER ══ -->
  <footer class="footer">
    <div class="footer-logo">
      <div class="tb-mark">🐾</div>
      <div class="footer-name">بيطري</div>
    </div>
    <p class="footer-desc" id="footer-desc">
      منصة الرعاية البيطرية الرقمية في الجزائر — نربط أصحاب الحيوانات بالأطباء البيطريين بسهولة وسرعة.
    </p>
    <div class="footer-social">
      <button class="soc-btn" onclick="showToast('info','Facebook')">📘</button>
      <button class="soc-btn" onclick="showToast('info','Instagram')">📸</button>
      <button class="soc-btn" onclick="showToast('info','WhatsApp')">💬</button>
    </div>
    <div class="footer-links">
      <span class="footer-link" onclick="location.href='login.php'">تسجيل الدخول</span>
      <span class="footer-link" onclick="location.href='login.php'">إنشاء حساب</span>
      <span class="footer-link" onclick="showToast('info','قريباً')">عن المنصة</span>
      <span class="footer-link" onclick="showToast('info','قريباً')">تواصل معنا</span>
      <span class="footer-link" onclick="showToast('info','قريباً')">شروط الاستخدام</span>
    </div>
    <div class="footer-copy">© 2025 بيطري — STORISMO. جميع الحقوق محفوظة.</div>
  </footer>

</div><!-- /shell -->

<script>
// ── MOCK DATA ──
var VETS = [
  {name:'د. كريم حداد', spec:'حيوانات أليفة', emoji:'👨‍⚕️', rating:4.9, reviews:128, dist:1.2, available:true},
  {name:'د. أمينة زروق', spec:'مواشي وأبقار',  emoji:'👩‍⚕️', rating:4.7, reviews:89,  dist:2.8, available:true},
  {name:'د. سليم بوعلام',spec:'خيول ومواشي',  emoji:'🧑‍⚕️', rating:4.5, reviews:54,  dist:5.1, available:false},
  {name:'د. نور الدين',  spec:'طب عام بيطري',  emoji:'👨‍⚕️', rating:4.8, reviews:203, dist:3.4, available:true},
];

var TESTIMONIALS = [
  {text:'أفضل تطبيق لأصحاب الحيوانات في الجزائر! حجزت موعداً في دقيقتين', name:'مستخدم VetNet', role:'صاحبة قط', emoji:'👩', stars:5},
  {text:'الطبيب جاء للمزرعة خلال ساعة وعالج قطيعي باحترافية تامة', name:'محمد فرحات', role:'مربي أبقار', emoji:'👨', stars:5},
  {text:'سجل طبي رقمي ممتاز، أتابع صحة حيواناتي بسهولة', name:'فاطمة حمدي', role:'صاحبة كلب', emoji:'👩‍🦱', stars:5},
];

// ── RENDER VETS ──
function renderVets() {
  var c = document.getElementById('vets-container');
  VETS.forEach(function(v) {
    var el = document.createElement('div');
    el.className = 'vet-mini';
    el.innerHTML =
      '<div class="vm-avatar">' + v.emoji + '</div>' +
      '<div class="vm-name">' + v.name + '</div>' +
      '<div class="vm-spec">' + v.spec + '</div>' +
      '<div class="vm-meta">' +
        '<span class="vm-rating">⭐ ' + v.rating + ' (' + v.reviews + ')</span>' +
        '<span class="vm-dist">📍 ' + v.dist + ' كم</span>' +
      '</div>' +
      '<div class="vm-avail ' + (v.available?'on':'off') + '">' +
        '<div class="vm-dot ' + (v.available?'on':'off') + '"></div>' +
        (v.available ? 'متاح الآن' : 'غير متاح') +
      '</div>' +
      '<div class="vm-book" onclick="location.href=\'login.php\'">📅 احجز</div>';
    c.appendChild(el);
  });
}

// ── RENDER TESTIMONIALS ──
function renderTestimonials() {
  var c = document.getElementById('testi-container');
  TESTIMONIALS.forEach(function(t) {
    var el = document.createElement('div');
    el.className = 'testi-card';
    el.innerHTML =
      '<div class="testi-stars">' + '⭐'.repeat(t.stars) + '</div>' +
      '<div class="testi-text">"' + t.text + '"</div>' +
      '<div class="testi-author">' +
        '<div class="testi-avatar">' + t.emoji + '</div>' +
        '<div>' +
          '<div class="testi-name">' + t.name + '</div>' +
          '<div class="testi-role">' + t.role + '</div>' +
        '</div>' +
      '</div>';
    c.appendChild(el);
  });
}

// ── LANG ──
var LANG_TEXT = {
  ar: {
    tag:'87 طبيب بيطري نشط الآن',
    hero_title:'صحة حيوانك<br><span style="color:#86efac">مع VetNet</span>',
    hero_sub:'المنصة الرقمية الأولى في الجزائر لربط أصحاب الحيوانات بالأطباء البيطريين.',
    cta1:'احجز طبيباً الآن', cta2:'طوارئ',
    stat1:'طبيب بيطري', stat2:'ولاية مغطاة', stat3:'مستخدم نشط', stat4:'تقييم المنصة',
    hw:'كيف تعمل المنصة؟',
    s1t:'سجّل حسابك', s1d:'صاحب حيوان أو مزرعة أو طبيب بيطري',
    s2t:'ابحث عن طبيب', s2d:'حسب الموقع والتخصص والتقييم',
    s3t:'احجز الموعد', s3d:'عيادة أو زيارة منزلية في 3 خطوات',
    s4t:'تابع صحته', s4d:'تقارير طبية وتذكير بالتطعيمات',
    vt:'أطباء مميزون', vl:'عرض الكل',
    et:'طوارئ بيطرية 24/7', es:'تواصل فوري مع أقرب طبيب متاح',
    ft:'لماذا بيطري؟',
    f1t:'أقرب طبيب إليك',f1d:'نحدد موقعك ونعرض الأطباء الأقرب إليك فوراً',
    f2t:'تقييمات حقيقية',f2d:'آراء أصحاب الحيوانات الذين جربوا الخدمة',
    f3t:'سجل طبي رقمي',f3d:'كل تاريخ علاج حيوانك في مكان واحد',
    f4t:'للمزارع أيضاً',f4d:'إدارة قطعانك ومتابعة صحتها بسهولة',
    f5t:'تذكير التطعيمات',f5d:'لا تفوّت أي موعد تطعيم لحيوانك',
    f6t:'زيارة منزلية',f6d:'الطبيب يأتي إليك في منزلك أو مزرعتك',
    tt:'ماذا يقولون عنا؟',
    at:'حمّل التطبيق قريباً', as:'تجربة أكثر سلاسة على هاتفك',
    fd:'منصة الرعاية البيطرية الرقمية في الجزائر — نربط أصحاب الحيوانات بالأطباء البيطريين.',
    signin:'دخول', register:'ابدأ مجاناً',
    dir:'rtl', lang:'ar',
  },
  fr: {
    tag:'87 vétérinaires actifs maintenant',
    hero_title:'La santé de votre animal,<br><span style="color:#86efac">notre priorité</span>',
    hero_sub:'La première plateforme numérique en Algérie reliant propriétaires et vétérinaires.',
    cta1:'Réserver maintenant', cta2:'Urgence',
    stat1:'Vétérinaires', stat2:'Wilayas couvertes', stat3:'Utilisateurs actifs', stat4:'Note',
    hw:'Comment ça marche ?',
    s1t:'Créez votre compte', s1d:'Propriétaire, éleveur ou vétérinaire',
    s2t:'Trouvez un vétérinaire', s2d:'Par localisation, spécialité et note',
    s3t:'Réservez', s3d:'En clinique ou à domicile en 3 étapes',
    s4t:'Suivez la santé', s4d:'Rapports médicaux et rappels vaccins',
    vt:'Vétérinaires vedettes', vl:'Voir tout',
    et:'Urgences 24/7', es:'Contact immédiat avec le vétérinaire le plus proche',
    ft:'Pourquoi Baitari ?',
    f1t:'Vétérinaire le plus proche',f1d:'Localisez les vétérinaires autour de vous instantanément',
    f2t:'Avis vérifiés',f2d:'Opinions de propriétaires ayant utilisé le service',
    f3t:'Dossier médical numérique',f3d:'Tout historique de votre animal en un endroit',
    f4t:'Pour les éleveurs aussi',f4d:'Gérez votre troupeau et suivez sa santé facilement',
    f5t:'Rappels vaccins',f5d:'Ne manquez aucun rendez-vous de vaccination',
    f6t:'Visites à domicile',f6d:'Le vétérinaire se déplace chez vous ou à la ferme',
    tt:'Avis de nos utilisateurs',
    at:'Application bientôt disponible', as:'Une expérience plus fluide sur votre téléphone',
    fd:'Plateforme vétérinaire numérique en Algérie — reliant propriétaires et vétérinaires.',
    signin:'Connexion', register:'Commencer',
    dir:'ltr', lang:'fr',
  },
  en: {
    tag:'87 active vets right now',
    hero_title:'Your pet\'s health,<br><span style="color:#86efac">our first priority</span>',
    hero_sub:'The first digital platform in Algeria connecting pet owners with veterinarians.',
    cta1:'Book a vet now', cta2:'Emergency',
    stat1:'Veterinarians', stat2:'Provinces covered', stat3:'Active users', stat4:'Rating',
    hw:'How it works',
    s1t:'Create your account', s1d:'Pet owner, farm or veterinarian',
    s2t:'Find a vet', s2d:'By location, specialty and rating',
    s3t:'Book appointment', s3d:'Clinic or home visit in 3 steps',
    s4t:'Track their health', s4d:'Medical reports and vaccination reminders',
    vt:'Featured vets', vl:'View all',
    et:'Veterinary emergencies 24/7', es:'Instant contact with the nearest available vet',
    ft:'Why Baitari?',
    f1t:'Nearest vet to you',f1d:'Find vets closest to your location instantly',
    f2t:'Verified reviews',f2d:'Real opinions from pet owners who tried the service',
    f3t:'Digital medical record',f3d:'All pet medical history in one place',
    f4t:'For farms too',f4d:'Manage your herd and track their health easily',
    f5t:'Vaccination reminders',f5d:'Never miss a vaccination appointment',
    f6t:'Home visits',f6d:'The vet comes to your home or farm',
    tt:'What they say about us',
    at:'App coming soon', as:'A smoother experience on your phone',
    fd:'Digital veterinary care platform in Algeria — connecting pet owners with vets.',
    signin:'Sign in', register:'Get started',
    dir:'ltr', lang:'en',
  },
};

var currentLang = localStorage.getItem('baitari_lang') || 'ar';

function setLang(l) {
  currentLang = l;
  localStorage.setItem('baitari_lang', l);
  document.cookie = 'baitari_lang='+l+';path=/;max-age='+(365*86400);
  applyLang(l);
  document.querySelectorAll('.lp').forEach(function(b){
    b.classList.toggle('on', b.getAttribute('onclick').includes("'"+l+"'"));
  });
}

function applyLang(l) {
  var T = LANG_TEXT[l] || LANG_TEXT.ar;
  document.documentElement.lang = T.lang;
  document.documentElement.dir  = T.dir;
  document.documentElement.setAttribute('data-lang', l);

  var set = function(id, v) { var e=document.getElementById(id); if(e&&v!==undefined) e.innerHTML=v; };
  set('tag-live',   T.tag);
  set('hero-title', T.hero_title);
  set('hero-sub',   T.hero_sub);
  set('cta1', T.cta1); set('cta2', T.cta2);
  set('stat1',T.stat1); set('stat2',T.stat2); set('stat3',T.stat3); set('stat4',T.stat4);
  set('hw-title', T.hw);
  set('step1-t',T.s1t); set('step1-d',T.s1d);
  set('step2-t',T.s2t); set('step2-d',T.s2d);
  set('step3-t',T.s3t); set('step3-d',T.s3d);
  set('step4-t',T.s4t); set('step4-d',T.s4d);
  set('vets-title',T.vt); set('vets-link',T.vl);
  set('emg-title',T.et); set('emg-sub',T.es);
  set('feat-title',T.ft);
  set('f1t',T.f1t); set('f1d',T.f1d); set('f2t',T.f2t); set('f2d',T.f2d);
  set('f3t',T.f3t); set('f3d',T.f3d); set('f4t',T.f4t); set('f4d',T.f4d);
  set('f5t',T.f5t); set('f5d',T.f5d); set('f6t',T.f6t); set('f6d',T.f6d);
  set('testi-title',T.tt);
  set('app-title',T.at); set('app-sub',T.as);
  set('footer-desc',T.fd);

  // Arrow direction
  var arr = document.querySelector('.emg-band-arrow');
  if (arr) arr.textContent = l==='ar' ? '←' : '→';

  // Topbar buttons
  var btnLogin    = document.querySelector('.tb-btn.tb-login');
  var btnRegister = document.querySelector('.tb-btn.tb-register');
  var labels = {
    ar: {login:'دخول', register:'ابدأ مجاناً'},
    fr: {login:'Connexion', register:'Commencer'},
    en: {login:'Sign in', register:'Get started'},
  };
  var lb = labels[l] || labels.ar;
  if (btnLogin)    btnLogin.textContent    = lb.login;
  if (btnRegister) btnRegister.textContent = lb.register;
}

// ── THEME ──
var savedTheme = localStorage.getItem('baitari_theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
if (savedTheme === 'dark') document.getElementById('tbtn').textContent = '☀️';

function toggleTheme() {
  var t = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', t);
  localStorage.setItem('baitari_theme', t);
  document.cookie = 'baitari_theme='+t+';path=/;max-age='+(365*86400);
  document.getElementById('tbtn').textContent = t==='dark' ? '☀️' : '🌙';
}

// ── TOAST ──
function showToast(type, msg) {
  var icons = {success:'✅',error:'❌',info:'ℹ️'};
  document.getElementById('ti').textContent  = icons[type]||'ℹ️';
  document.getElementById('tmsg').textContent = msg;
  var el = document.getElementById('toast');
  el.classList.add('on');
  setTimeout(function(){ el.classList.remove('on'); }, 3000);
}

// ── INIT ──
renderVets();
renderTestimonials();
applyLang(currentLang);
// set active lang button
document.querySelectorAll('.lp').forEach(function(b){
  b.classList.toggle('on', b.getAttribute('onclick').includes("'"+currentLang+"'"));
});
</script>
</body>
</html>
