Spaces:

Alinabil1
/

Darak

Sleeping

File size: 62,656 Bytes

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Darak | مساعد العقارات الذكي</title>
<link rel="icon" type="image/png" href="logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Poppins:wght@500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root{
  --bg:#05070f;
  --panel:#0d1120;
  --panel-2:#11162a;
  --panel-3:#161c33;
  --border:rgba(255,255,255,0.07);
  --border-strong:rgba(212,167,44,0.35);
  --gold:#d4a72c;
  --gold-light:#f0cf6e;
  --gold-dark:#8a6a1a;
  --text:#f5f6fa;
  --muted:#8b91a7;
  --muted-2:#5c6178;
  --green:#22c55e;
  --blue:#3b82f6;
  --purple:#a855f7;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-gold:0 8px 30px rgba(212,167,44,0.15);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  font-family:'Cairo',sans-serif;background-color:var(--bg);color:var(--text);
  overflow-x:hidden;
  height:100vh;
  width:100vw;
  display:flex;
  flex-direction:column;
}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:rgba(212,167,44,0.25);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:rgba(212,167,44,0.5);}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input{font-family:inherit;color:var(--text);}
.eng{font-family:'Poppins',sans-serif;}
::selection{background:var(--gold);color:#14121a;}

.bg-glow{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(600px 400px at 15% 10%, rgba(212,167,44,0.06), transparent 60%),
    radial-gradient(700px 500px at 85% 20%, rgba(59,130,246,0.05), transparent 60%),
    radial-gradient(900px 600px at 50% 100%, rgba(212,167,44,0.04), transparent 60%);
}

@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(34,197,94,0.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(212,167,44,0.35)}70%{box-shadow:0 0 0 10px rgba(212,167,44,0)}100%{box-shadow:0 0 0 0 rgba(212,167,44,0)}}
@keyframes shimmerArc{0%{background-position:-200% 0}100%{background-position:200% 0}}

.reveal{opacity:0;animation:fadeInUp .5s ease forwards;}
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}.d4{animation-delay:.2s}.d5{animation-delay:.25s}

header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 36px;
  background:rgba(5,7,15,0.7);backdrop-filter:blur(25px) saturate(180%);
  border-bottom:1px solid rgba(212,167,44,0.15);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  height:55px;flex-shrink:0;z-index:50;
}
.logo-block{display:flex;flex-direction:row;align-items:center;gap:8px;line-height:1;}
.logo-ar{font-size:21px;font-weight:900;color:var(--gold);letter-spacing:.5px;}
.logo-en{font-size:9.5px;letter-spacing:4px;color:var(--muted);margin-top:2px;}
.main-nav{display:flex;align-items:center;gap:6px;background:rgba(13,17,32,0.7);backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,0.06);
  border-radius:50px;padding:4px;}
.main-nav a{color:var(--text);font-size:12px;font-weight:700;padding:8px 16px;border-radius:50px;transition:all .3s ease;position:relative;}
.main-nav a::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--gold);transition:width .3s ease;border-radius:2px;}
.main-nav a:hover::after{width:60%;}
.main-nav a:hover{color:var(--gold);background:rgba(212,167,44,0.08);}
.main-nav a.active{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#14121a;box-shadow:0 0 15px rgba(212,167,44,0.4);}
.main-nav a.active::after{display:none;}
.header-actions{display:flex;align-items:center;gap:10px;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--border);color:var(--muted);font-size:14px;
  transition:all .2s ease;
}
.icon-btn:hover{color:var(--gold);border-color:var(--border-strong);transform:translateY(-2px);}
.icon-btn.liked{color:#ef4444;}
.add-property-btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#14121a;font-weight:800;font-size:13.5px;
  box-shadow:var(--shadow-gold);transition:transform .2s ease,filter .2s ease;
  position:relative;overflow:hidden;
}
.add-property-btn::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  animation: shimmerSweep 3s infinite;
}
.add-property-btn:hover{transform:translateY(-2px);filter:brightness(1.06);}
@keyframes shimmerSweep { 0% { left: -100%; } 100% { left: 200%; } }

.hud-layout{
  max-width:1700px;width:100%;margin:0 auto;padding:24px 36px;
  display:grid;grid-template-columns:300px 1fr 300px;gap:24px;
  height:calc(100vh - 100px);overflow:hidden;
}
.col-label{
  display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--text);
  margin-bottom:8px;flex-shrink:0;
}
.col-label i{color:var(--gold);font-size:12px;}

.opportunities{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;
  display:flex;flex-direction:column;min-height:0;overflow-y:auto;
}
.opportunities::-webkit-scrollbar{display:none;}
.opportunities{-ms-overflow-style:none;scrollbar-width:none;}

.prop-card{
  background:linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.06);
  border-top:1px solid rgba(212,167,44,0.3);
  box-shadow:inset 0 1px 0 rgba(212,167,44,0.1);
  border-radius:16px;overflow:hidden;
  margin-bottom:8px;transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer;
  flex-shrink:0;
  position:relative;
}
.prop-card:hover{
  border-color:rgba(212,167,44,0.4);transform:translateY(-4px) scale(1.01);
  background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(212,167,44,0.08));
  box-shadow:0 15px 35px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(212,167,44,0.2);
}
.prop-media{position:relative;height:120px;display:flex;align-items:center;justify-content:center;font-size:30px;color:rgba(255,255,255,0.18);overflow:hidden;}
.prop-media img {width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(0.4,0,0.2,1);}
.prop-card:hover .prop-media img {transform:scale(1.08);}
.prop-media::after {
  content:'';position:absolute;bottom:0;left:0;width:100%;height:45%;
  background:linear-gradient(to top, rgba(13,17,32,1) 0%, transparent 100%);
  pointer-events:none;
}
.prop-badge{position:absolute;top:8px;right:8px;padding:4px 12px;border-radius:999px;font-size:10.5px;font-weight:900;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#14121a;box-shadow:var(--shadow-gold);z-index:2;}
.prop-fav{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(5,7,15,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;transition:color .2s ease,transform .2s cubic-bezier(0.4,0,0.2,1);z-index:2;}
.prop-fav:hover{transform:scale(1.15);}
.prop-fav.active{color:var(--gold);animation:heartPop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
@keyframes heartPop { 0% {transform:scale(1);} 50% {transform:scale(1.4);} 100% {transform:scale(1);} }
.prop-body{padding:8px 10px;}
.prop-title{font-size:13.5px;font-weight:800;margin-bottom:3px;}
.prop-loc{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:5px;}
.prop-loc i{color:var(--gold);font-size:10px;}
.prop-price{font-size:14.5px;font-weight:900;color:var(--gold);margin-bottom:6px;}
.prop-price small{font-size:10.5px;color:var(--muted);font-weight:500;}
.prop-specs{display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px solid var(--border);}
.prop-specs span{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted-2);}
.prop-specs i{color:var(--muted);font-size:10.5px;}
.view-more-btn{
  width:100%;padding:12px;border-radius:12px;border:none;color:#14121a;font-weight:900;
  font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  box-shadow:var(--shadow-gold);transition:all .3s ease;margin-top:auto;flex-shrink:0;cursor:pointer;
  position:relative;overflow:hidden;
}
.view-more-btn::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transition:all .5s;}
.view-more-btn:hover::after{left:100%;}
.view-more-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 30px rgba(212,167,44,0.4);}
.view-more-btn i { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.view-more-btn:hover i { transform: translateX(-4px); }

.rec-tabs {
  display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto;
  -ms-overflow-style: none; scrollbar-width: none;
  background: rgba(0,0,0,0.3); padding: 4px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05); box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}
.rec-tabs::-webkit-scrollbar { display: none; }
.rec-tabs .cat-pill {
  flex: 1; text-align: center; justify-content: center; background: transparent; border: none;
  color: var(--muted); padding: 8px; font-weight: 700; font-size: 11.5px;
  border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin: 0; box-shadow: none;
}
.rec-tabs .cat-pill i { display: none; }
.rec-tabs .cat-pill[data-active="true"] {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #14121a; box-shadow: 0 4px 15px rgba(212,167,44,0.3); transform: none;
}
.rec-tabs .cat-pill:hover:not([data-active="true"]) {
  background: rgba(255,255,255,0.05); color: var(--text); transform: none;
}

.opp-scroll-container {
  display:flex; flex-direction:column; gap:12px; overflow-y:auto; -ms-overflow-style:none; scrollbar-width:none;
  padding-bottom: 30px; margin-bottom: 5px;
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.opp-scroll-container::-webkit-scrollbar{display:none;}

.hud-center{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0;overflow:hidden;}
.hero{position:relative;text-align:center;padding-top:45px;margin-top:25px;flex-shrink:0;}
.hero::before{
  content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:95%;height:70px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  border-top:2px solid var(--gold);
  background:transparent;
  box-shadow:inset 0 20px 20px -20px var(--gold-light), 0 -10px 25px -5px rgba(212,167,44,0.4);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.star-decor {
  position: absolute; color: var(--gold-light); font-size: 14px; font-family: sans-serif;
  animation: twinkle 4s infinite alternate; pointer-events: none;
  text-shadow: 0 0 10px rgba(212,167,44,0.8);
}
.star-decor::before { content: '✦'; }

.star-decor.s1 { top: -10px; left: 8%; animation-delay: 0.2s; transform: scale(1.1); }
.star-decor.s2 { top: 20px; right: 10%; animation-delay: 1.5s; transform: scale(1.3); }
.star-decor.s3 { top: -20px; right: 26%; animation-delay: 0.8s; transform: scale(0.8); }
.star-decor.s4 { top: 15px; left: 28%; animation-delay: 2.1s; transform: scale(0.9); }

@keyframes twinkle {
  0% { opacity: 0.2; transform: scale(0.8) rotate(0deg); }
  100% { opacity: 1; transform: scale(1.2) rotate(45deg); filter: brightness(1.3); }
}
.hero-title{font-size:30px;font-weight:900;line-height:1.25;margin:10px 0 8px;animation:fadeUpIn 0.8s ease backwards;animation-delay:0s;}
.shimmer-text{
  background: linear-gradient(110deg, var(--gold-light) 0%, #fff 25%, var(--gold) 50%, var(--gold-light) 75%, #fff 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmerText 3s linear infinite;
  display: inline-block;
  text-shadow: 0 0 20px rgba(212,167,44,0.3);
}
@keyframes shimmerText { to { background-position: 200% center; } }
.hero-subtitle{
  max-width:560px;margin:0 auto 10px;color:var(--muted);font-size:13px;line-height:1.6;
  animation:fadeUpIn 0.8s ease backwards;animation-delay:0.1s;
}
.ai-highlight{
  color:var(--gold-light);font-weight:700;
  text-shadow:0 0 10px rgba(212,167,44,0.4);
}

.search-bar{
  display:flex;align-items:center;gap:10px;
  background:rgba(13,17,32,0.7);backdrop-filter:blur(25px) saturate(180%);
  border:1.5px solid rgba(212,167,44,0.3);
  border-radius:50px;padding:8px 8px 8px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(212,167,44,0.1);
  transition:all .3s ease;
}
.search-bar:focus-within{
  box-shadow:0 0 0 6px rgba(212,167,44,0.12), 0 12px 40px rgba(0,0,0,0.6);
  border-color:var(--gold);background:rgba(13,17,32,0.9);
}
.mic-btn{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--muted);border:1px solid var(--border);transition:all .2s ease;
}
.mic-btn:hover,.mic-btn.active{color:var(--gold);border-color:var(--border-strong);}
.mic-btn.active{animation:pulseRing 1.4s infinite;}
#searchInput,#chatInput{flex:1;background:transparent;border:none;outline:none;font-size:13.5px;padding:6px 0;}
#searchInput::placeholder,#chatInput::placeholder{color:var(--muted-2);}
.send-btn{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#14121a;font-size:15px;
  box-shadow:var(--shadow-gold);transition:transform .2s ease,filter .2s ease;
}
.send-btn:hover{transform:scale(1.06);filter:brightness(1.05);}
.send-btn i{transform:scaleX(-1);}

.category-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;perspective:1000px;}
.cat-pill{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.06);
  border-top:1px solid rgba(212,167,44,0.15);
  box-shadow:inset 0 1px 0 rgba(212,167,44,0.05);
  color:var(--muted);transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeUpIn 0.6s ease backwards;
}
.cat-pill:nth-child(1) {animation-delay: 0.1s;}
.cat-pill:nth-child(2) {animation-delay: 0.15s;}
.cat-pill:nth-child(3) {animation-delay: 0.2s;}
.cat-pill:nth-child(4) {animation-delay: 0.25s;}
.cat-pill:nth-child(5) {animation-delay: 0.3s;}
.cat-pill:nth-child(6) {animation-delay: 0.35s;}
.cat-pill:nth-child(7) {animation-delay: 0.4s;}
.cat-pill:nth-child(8) {animation-delay: 0.45s;}
.cat-pill i{color:var(--gold);font-size:12px;transition:transform 0.3s ease, filter 0.3s ease;}
.cat-pill:hover, .cat-pill[data-active="true"] {
  border-color:rgba(212,167,44,0.5);color:var(--gold-light);
  transform:translateY(-3px) scale(1.02);
  background:linear-gradient(145deg, rgba(212,167,44,0.1), rgba(212,167,44,0.02));
  box-shadow:0 8px 20px rgba(212,167,44,0.2), inset 0 0 10px rgba(212,167,44,0.1);
}
.cat-pill:hover i {transform:scale(1.2);filter:drop-shadow(0 0 5px var(--gold));}
@keyframes fadeUpIn { from {opacity:0; transform:translateY(15px);} to {opacity:1; transform:translateY(0);} }

.chat-panel{
  background:var(--panel);border:1px solid var(--border);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;height:65vh;min-height:550px;box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
.chat-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.05);flex-shrink:0;background:rgba(13,17,32,0.6);backdrop-filter:blur(15px);z-index:10;}
.chat-panel-title{display:flex;align-items:center;gap:12px;}
.chat-avatar-ring{width:36px;height:36px;border-radius:50%;background:rgba(212,167,44,0.1);border:1px solid rgba(212,167,44,0.3);
  display:flex;align-items:center;justify-content:center;padding:4px;box-shadow:0 0 10px rgba(212,167,44,0.2);}
.chat-panel-name{font-size:14px;font-weight:900;}
.chat-panel-name .eng{color:var(--gold);}
.chat-panel-status{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:2px;}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulseDot 1.8s infinite;box-shadow:0 0 8px rgba(34,197,94,0.6);}
.refresh-btn{width:32px;height:32px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .2s ease;}
.refresh-btn:hover{color:var(--gold);transform:rotate(180deg);}

.chat-body{padding:12px 18px;flex:1;overflow-y:auto;min-height:0;}
.chat-body::-webkit-scrollbar{width:6px;}
.chat-body::-webkit-scrollbar-track{background:rgba(13,17,32,0.5);border-radius:6px;}
.chat-body::-webkit-scrollbar-thumb{background:rgba(212,167,44,0.3);border-radius:6px;}
.chat-body::-webkit-scrollbar-thumb:hover{background:rgba(212,167,44,0.6);}

.welcome-row{display:flex;align-items:flex-end;gap:12px;margin-bottom:12px;}
.welcome-bubble{
  background:linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.05); border-top:1px solid rgba(212,167,44,0.3);
  border-radius:18px 4px 18px 18px;
  padding:16px 20px;font-size:12.5px;line-height:1.7;color:var(--text);max-width:65ch;
  box-shadow:0 15px 35px rgba(0,0,0,0.4), inset 0 1px 0 rgba(212,167,44,0.1);
}
.welcome-bubble b{color:var(--gold);}
.mascot{flex-shrink:0;animation:floatY 3.6s ease-in-out infinite;}

.suggest-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-right:75px;}
.suggest-card{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.03);backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:12px;padding:9px 16px;font-size:12px;color:var(--muted);text-align:right;transition:all .3s ease;
}
.suggest-card i{color:var(--gold);font-size:12px;}
.suggest-card:hover{border-color:rgba(212,167,44,0.4);color:var(--gold-light);transform:translateY(-2px);background:linear-gradient(145deg,rgba(212,167,44,0.05),transparent);box-shadow:0 8px 20px rgba(0,0,0,0.3);}

.chat-input-row{display:flex;align-items:center;gap:12px;padding:16px 24px;
  background:transparent;flex-shrink:0;transition:all .3s ease;}
  background:rgba(13,17,32,0.9);backdrop-filter:blur(30px) saturate(180%);flex-shrink:0;box-shadow:0 -10px 30px rgba(0,0,0,0.5);transition:all .3s ease;}
.chat-input-row:focus-within{border-color:var(--gold);box-shadow:0 -10px 30px rgba(0,0,0,0.6), inset 0 2px 15px rgba(212,167,44,0.2);}
.chat-input-row input{font-size:16px;}
.chat-input-row .mic-btn,.chat-input-row .send-btn{width:38px;height:38px;}

.services-strip{text-align:center;padding:4px 0 0;flex-shrink:0;}
.services-label{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:700;
  color:var(--muted);margin-bottom:8px;}
.services-label i{color:var(--gold);}
.services-row{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;}
.service-item{display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .3s ease;}
.service-item:hover{transform:translateY(-4px);}
.service-icon{width:50px;height:50px;border-radius:14px;background:linear-gradient(145deg, rgba(13,17,32,0.7), rgba(212,167,44,0.05));border:1px solid rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:18px;transition:all .3s ease;}
.service-item:hover .service-icon{border-color:var(--gold);box-shadow:0 8px 20px rgba(212,167,44,0.25), inset 0 0 0 1px rgba(212,167,44,0.15);background:rgba(13,17,32,0.95);}
.service-name{font-size:11.5px;color:var(--muted);font-weight:600;}

aside{display:flex;flex-direction:column;min-height:0;overflow-y:auto;}
aside::-webkit-scrollbar{display:none;}
aside{-ms-overflow-style:none;scrollbar-width:none;}

.tools-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;flex-shrink:0;}
.tool-card{
  display:flex;align-items:center;gap:16px;background:linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.06);
  border-top:1px solid rgba(212,167,44,0.2);
  border-radius:18px;padding:16px 20px;transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:inset 0 1px 0 rgba(212,167,44,0.05);
}
.tool-card:hover{
  border-color:rgba(212,167,44,0.4);transform:translateX(-5px) scale(1.01);
  background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(212,167,44,0.08));
  box-shadow:0 15px 35px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(212,167,44,0.2);
}
.tool-card:hover .tool-icon img{transform:scale(1.18) rotate(8deg);transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);filter:drop-shadow(0 8px 12px rgba(212,167,44,0.4));}
.tool-chevron{color:var(--muted);font-size:13px;transition:all 0.3s ease;}
.tool-card:hover .tool-chevron{color:var(--gold);transform:translateX(-4px);}
.tool-text{flex:1;}
.tool-title{font-size:15px;font-weight:800;margin-bottom:4px;color:var(--text);transition:color 0.3s ease;}
.tool-card:hover .tool-title{color:var(--gold-light);}
.tool-desc{font-size:11.5px;color:var(--muted);line-height:1.5;}
.tool-icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.tool-icon img{width:48px !important;height:48px !important;}

.assistant-card{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,0.02), rgba(0,0,0,0.3));
  backdrop-filter: blur(15px);
  border:1px solid rgba(255,255,255,0.08);
  border-top:1px solid rgba(212,167,44,0.4);
  border-radius:24px;
  padding:20px 18px 18px;
  text-align:center;
  overflow:hidden;
  margin-top:auto;
  flex-shrink:0;
  box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 1px 0 rgba(212,167,44,0.15);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.assistant-card:hover{
  border-color:rgba(212,167,44,0.4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(212,167,44,0.25);
  transform: translateY(-3px);
}
.assistant-card::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,167,44,0.25) 0%,transparent 70%);pointer-events:none;
  animation:pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow { 0% {transform:translate(-50%, -50%) scale(1);opacity:0.6;} 50% {transform:translate(-50%, -50%) scale(1.4);opacity:1;} 100% {transform:translate(-50%, -50%) scale(1);opacity:0.6;} }
.ai-badge{
  position:absolute;top:16px;left:16px;width:auto;height:auto;padding:3px 10px;border-radius:10px;
  background:rgba(212,167,44,0.15);border:1px solid rgba(212,167,44,0.3);color:var(--gold);font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;
  box-shadow: 0 0 15px rgba(212,167,44,0.2);backdrop-filter:blur(4px);z-index:2;
}
.assistant-mascot{margin:0 auto 10px;animation:floatY 3.2s ease-in-out infinite;position:relative;z-index:1; filter: drop-shadow(0 15px 25px rgba(212,167,44,0.4));}
.assistant-title{font-size:16px;font-weight:900;position:relative;z-index:1;letter-spacing:-0.3px;}
.assistant-title .eng{color:var(--gold);font-weight:900;}
.assistant-sub{font-size:11.5px;color:var(--gold);margin:4px 0 8px;position:relative;z-index:1;font-weight:700;}
.assistant-desc{font-size:11.5px;color:var(--muted);line-height:1.6;margin-bottom:14px;position:relative;z-index:1;}
.assistant-btn{
  position:relative;z-index:1;width:100%;padding:12px;border-radius:12px;font-weight:900;font-size:13.5px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#14121a;display:flex;align-items:center;
  justify-content:center;gap:10px;transition:all .3s ease;
  box-shadow:var(--shadow-gold);border:none;cursor:pointer;overflow:hidden;
}
.assistant-btn::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transition:all .5s;}
.assistant-btn:hover::after{left:100%;}
.assistant-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 30px rgba(212,167,44,0.4);}

.main-footer{
  max-width:1700px;width:100%;margin:0 auto;padding:6px 36px;border-top:1px solid rgba(212,167,44,0.15);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:16px;
  height:35px;flex-shrink:0;background:rgba(5,7,15,0.85);z-index:50;
}
.footer-brand{font-size:12px;color:var(--muted);white-space:nowrap;}
.footer-brand .eng{color:var(--gold);font-weight:800;}
.footer-links{display:flex;gap:18px;flex-wrap:nowrap;}
.footer-links a{font-size:11.5px;color:var(--muted);transition:color .2s ease;white-space:nowrap;}
.footer-links a:hover{color:var(--gold);}
.footer-social{display:flex;gap:8px;}
.footer-social a{
  width:30px;height:30px;border-radius:50%;background:var(--panel);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;transition:all .2s ease;
}
.footer-social a:hover{color:var(--gold-light);border-color:var(--gold);transform:translateY(-3px);box-shadow:0 5px 15px rgba(212,167,44,0.3);}

@media (max-width:1300px){
  .hud-layout{grid-template-columns: 1fr 1fr;}
}
@media (max-width:1000px){
  html,body{overflow:auto;height:auto;}
  .hud-layout{
    grid-template-areas:
      "center"
      "props"
      "tools";
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .chat-panel{height:75vh;min-height:500px;}
  header{padding:10px 18px;}
  .main-nav{display:none;}
  .suggest-chips{padding:12px 12px 0;}
}
</style>
</head>
<body>
<div class="bg-glow"></div>
<div class="aurora-glow aurora-1"></div>
<div class="aurora-glow aurora-2"></div>

<header>
  <div class="logo-block">
    <img src="logo.png" alt="Darak Logo" style="height:38px;width:auto;object-fit:contain;">
    <span class="logo-ar" style="margin-right:6px;">داراك</span>
    <span class="logo-en eng">DARAK</span>
  </div>
  <nav class="main-nav" aria-label="التنقل الرئيسي">
    <a href="index.html" class="nav-link active">الرئيسية</a>
    <a href="explore.html" class="nav-link">العقارات</a>
    <a href="onboarding.html" class="nav-link">المناطق</a>
    <a href="services.html" class="nav-link">الخدمات</a>
  </nav>
  <div class="header-actions">
    <a href="login.html" class="icon-btn" aria-label="حسابي" title="حسابي"><i class="fa-regular fa-user"></i></a>
    <button class="icon-btn" id="notifBtn" aria-label="الإشعارات" title="الإشعارات"><i class="fa-regular fa-bell"></i></button>
    <button class="icon-btn" id="favBtn" aria-label="المفضلة" title="المفضلة"><i class="fa-regular fa-heart"></i></button>
    <a href="add-property.html" class="add-property-btn"><i class="fa-solid fa-plus"></i> أضف عقارك</a>
  </div>
</header>

<main class="hud-layout">

  <aside class="opportunities reveal d1">
    <div class="col-label"><span>أفضل الفرص اليوم</span> <i class="fa-solid fa-sparkles"></i></div>
    <div class="rec-tabs" id="sidebarTabs">
      <button class="cat-pill" data-filter="اليوم" data-active="true">اليوم</button>
      <button class="cat-pill" data-filter="موصى به" data-active="false">موصى به</button>
      <button class="cat-pill" data-filter="فاخر" data-active="false">فاخر</button>
      <button class="cat-pill" data-filter="استثماري" data-active="false">استثماري</button>
    </div>

    <div class="opp-scroll-container">
      <div class="prop-card">
      <div class="prop-media sale"><img src="assets/property_v2_1_1781334814886.png" alt="">
        <div class="prop-badge"><i class="fa-solid fa-bolt" style="margin-left:4px;"></i> فرصة نادرة</div>
        <button class="prop-fav" aria-label="أضف للمفضلة"><i class="fa-regular fa-heart"></i></button>
      </div>
      <div class="prop-body">
        <div style="color:var(--gold);font-size:10px;margin-bottom:4px;letter-spacing:2px;"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
        <div class="prop-title">شقة فاخرة في تاج سيتي</div>
        <div class="prop-loc" style="font-size:11px;color:var(--muted);margin-top:2px;margin-bottom:6px;"><i class="fa-solid fa-map-location-dot" style="color:var(--gold);margin-left:4px;"></i> القاهرة الجديدة</div>
        <div class="prop-price" style="font-size:15px;color:var(--gold-light);font-weight:900;display:flex;flex-direction:column;">
           ٤٬٥٠٠٬٠٠٠ ج.م
           <small style="font-size:10.5px;color:var(--muted-2);font-weight:600;margin-top:2px;">(٢٥,٠٠٠ ج.م للمتر)</small>
        </div>
        <div class="prop-specs" style="margin:8px 0;border-top:1px solid rgba(212,167,44,0.15);padding-top:8px;">
          <span><i class="fa-solid fa-building" style="color:var(--gold);"></i> Apartment</span>
          <span><i class="fa-solid fa-ruler-combined" style="color:var(--gold);"></i> ١٨٠ م²</span>
        </div>
      </div>
    </div>

    <div class="prop-card">
      <div class="prop-media rent" style="padding:0;height:120px;"><img src="assets/property_v2_2_1781334832278.png" alt="" style="width:100%;height:100%;object-fit:cover;">
        <span class="prop-badge rent">للإيجار</span>
        <button class="prop-fav" aria-label="أضف للمفضلة"><i class="fa-regular fa-heart"></i></button>
      </div>
      <div class="prop-body">
        <div style="color:var(--gold);font-size:10px;margin-bottom:4px;letter-spacing:2px;"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
        <div class="prop-title">فيلا مستقلة بكمبوند ميفيدا</div>
        <div class="prop-price" style="font-size:15px;color:var(--gold-light);font-weight:900;">١٨٬٠٠٠٬٠٠٠ ج.م</div>
        <div class="prop-specs" style="margin:8px 0;border-top:1px solid rgba(255,255,255,0.05);padding-top:8px;">
          <span><i class="fa-solid fa-house"></i> Villa</span>
          <span><i class="fa-solid fa-ruler-combined"></i> ١٨٠ م²</span>
        </div>
      </div>
    </div>


    </div>

    <button class="view-more-btn"><i class="fa-solid fa-arrow-left"></i> عرض المزيد من الفرص</button>
  </aside>

  <div class="hud-center">
    <div class="hero reveal d2">
      <div class="star-decor s1"></div>
      <div class="star-decor s2"></div>
      <div class="star-decor s3"></div>
      <div class="star-decor s4"></div>
      <h1 class="hero-title">اسأل <span class="brand eng shimmer-text">Darak</span> عن أي شيء في العقارات</h1>
      <p class="hero-subtitle">نساعدك في العثور على أفضل عقار، أفضل سعر، أفضل منطقة، وأفضل مقدمي الخدمات من خلال <span class="ai-highlight">الذكاء الاصطناعي</span>.</p>

      <div class="category-pills">
        <button class="cat-pill"><i class="fa-solid fa-house"></i> شراء</button>
        <button class="cat-pill"><i class="fa-solid fa-key"></i> إيجار</button>
        <button class="cat-pill"><i class="fa-solid fa-chart-line"></i> استثمار</button>
        <button class="cat-pill"><i class="fa-solid fa-vault"></i> تخصص</button>
        <button class="cat-pill"><i class="fa-solid fa-paint-roller"></i> تشطيب</button>
        <button class="cat-pill"><i class="fa-solid fa-couch"></i> ديكور</button>
        <button class="cat-pill"><i class="fa-solid fa-building-columns"></i> تمويل</button>
        <button class="cat-pill"><i class="fa-solid fa-map-location-dot"></i> قارن مناطق</button>
      </div>
    </div>

    <div class="chat-panel reveal d3">
      <div class="chat-panel-header">
        <div class="chat-panel-title">
          <div class="chat-avatar-ring"><i class="fa-solid fa-wand-magic-sparkles" style="color:var(--gold);font-size:16px;"></i></div>
          <div>
            <div class="chat-panel-name"><span class="eng">Darak AI</span></div>
            <div class="chat-panel-status"><span class="live-dot"></span> مستشارك العقاري بالذكاء الاصطناعي</div>
          </div>
        </div>
        <button class="refresh-btn" id="clearChatBtn" title="محادثة جديدة" aria-label="بدء محادثة جديدة"><i class="fa-solid fa-rotate-right"></i></button>
      </div>

      <div class="chat-body" id="chatBody">
        <div class="welcome-row">
          <div class="welcome-bubble">
            مرحباً! أنا مساعد <b>Darak</b> الذكي.<br>
            اسألني عن العقارات، المناطق، الأسعار، التشطيب، الديكور، أو أي خدمة عقارية.<br>
            أنا هنا لمساعدتك في اتخاذ أفضل قرار.
          </div>
        </div>

      </div>



      <div id="filePreviewBar" style="display:none;padding:6px 18px;background:var(--panel-2);border-top:1px solid var(--border);align-items:center;justify-content:space-between;font-size:12px;color:var(--gold);">
        <span id="filePreviewName"></span>
        <button id="removeFileBtn" style="color:#ef4444;font-weight:bold;cursor:pointer;">✖ إلغاء</button>
      </div>
      <div class="chat-input-row" style="background:transparent;border:none;box-shadow:none;padding:12px 24px 20px;">
        <div class="chat-input-wrapper" style="display:flex;align-items:center;flex:1;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.1);border-radius:50px;padding:6px 6px 6px 18px;transition:all .3s ease;">
          <button class="mic-btn" id="chatFileBtn" aria-label="إرفاق ملف" title="إرفاق صورة أو ملف PDF/TXT" style="border:none;background:transparent;"><i class="fa-solid fa-paperclip"></i></button>
          <input type="file" id="chatFileInput" accept="image/*,.pdf,.txt,.doc,.docx,.csv,.json" style="display:none;">
          <input type="text" id="chatInput" placeholder="🔍 اسأل أي شيء عن العقارات..." maxlength="1000" style="flex:1;background:transparent;border:none;outline:none;font-size:14px;color:var(--text);padding:8px 8px;width:100%;">
          <button class="mic-btn" id="chatMicBtn" aria-label="بحث صوتي" style="border:none;background:transparent;"><i class="fa-solid fa-microphone"></i></button>
          <button class="send-btn" id="chatSend" aria-label="إرسال" style="margin-right:8px;"><i class="fa-solid fa-paper-plane"></i></button>
        </div>
      </div>
    </div>

  </div>

  <aside class="reveal d5">
    <div class="col-label" style="justify-content:flex-end"><span>أدوات <span class="eng" style="color:var(--gold)">Darak</span> الذكية</span> <i class="fa-solid fa-sparkles"></i></div>

    <div class="tools-list">
      <a href="onboarding.html" class="tool-card">
        <div class="tool-icon" style="background:none;padding:0;"><img src="assets/icon_house_1781332970134.png" alt="" style="width:38px;height:38px;object-fit:contain;"></div>
        <div class="tool-text"><div class="tool-title">اختر لي عقاراً</div><div class="tool-desc">نختار لك أفضل العقارات حسب أولوياتك</div></div>
        <i class="fa-solid fa-chevron-left tool-chevron"></i>
      </a>
      <a href="design.html" class="tool-card">
        <div class="tool-icon" style="background:none;padding:0;"><img src="assets/icon_room_1781332981672.png" alt="" style="width:38px;height:38px;object-fit:contain;"></div>
        <div class="tool-text"><div class="tool-title">صمم غرفتك بصورة</div><div class="tool-desc">حوّل صورتك إلى تصميم داخلي احترافي بالذكاء الاصطناعي</div></div>
        <i class="fa-solid fa-chevron-left tool-chevron"></i>
      </a>
      <a href="calculator.html" class="tool-card">
        <div class="tool-icon" style="background:none;padding:0;"><img src="assets/icon_calculator_1781332992881.png" alt="" style="width:38px;height:38px;object-fit:contain;"></div>
        <div class="tool-text"><div class="tool-title">حاسبة التشطيب والفرش</div><div class="tool-desc">احسب تكلفة التشطيب والفرش بدقة</div></div>
        <i class="fa-solid fa-chevron-left tool-chevron"></i>
      </a>
      <a href="evaluate.html" class="tool-card">
        <div class="tool-icon" style="background:none;padding:0;"><img src="assets/icon_chart_1781333002728.png" alt="" style="width:38px;height:38px;object-fit:contain;"></div>
        <div class="tool-text"><div class="tool-title">تقييم العقار</div><div class="tool-desc">تحليل ذكي لقيمة العقار وسعره في السوق</div></div>
        <i class="fa-solid fa-chevron-left tool-chevron"></i>
      </a>
      <a href="compare.html" class="tool-card">
        <div class="tool-icon" style="background:none;padding:0;"><img src="assets/icon_scales_1781333012031.png" alt="" style="width:38px;height:38px;object-fit:contain;"></div>
        <div class="tool-text"><div class="tool-title">قارن بين عقارين</div><div class="tool-desc">قارن بين خصائص وأسعار وعوائد أكثر من عقار</div></div>
        <i class="fa-solid fa-chevron-left tool-chevron"></i>
      </a>
    </div>

    <div class="assistant-card">
      <div class="ai-badge">AI</div>
      <img src="assets/robot_avatar_1781332718861.png" alt="Darak AI" class="assistant-mascot" style="width:70px;height:70px;object-fit:contain;">
      <div class="assistant-title">مساعد <span class="eng">Darak</span></div>
      <div class="assistant-sub">هنا لمساعدتك <span class="eng">24/7</span></div>
      <div class="assistant-desc">اسألني عن أي شيء في العقارات، الاستثمار، أو أي استفسار عقاري</div>
      <button class="assistant-btn" id="startChatBtn"><i class="fa-solid fa-comment-dots"></i> ابدأ محادثة جديدة</button>
    </div>
  </aside>

</main>

<footer class="main-footer">
  <div class="footer-brand"><span class="eng">Darak</span> <i class="fa-solid fa-sparkles" style="color:var(--gold);margin:0 4px;"></i> © 2026. جميع الحقوق محفوظة</div>
  <div class="footer-links">
    <a href="#">اتصل بنا</a>
    <a href="#">شروط الاستخدام</a>
    <a href="#">سياسة الخصوصية</a>
    <a href="#">مدونة دارك</a>
    <a href="#">من نحن</a>
  </div>
  <div class="footer-social">
    <a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
    <a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
    <a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
  </div>
</footer>

<script type="module">
import { fetchChatResponse, fetchAllProperties, semanticSearch, logInteraction, triggerScraping } from './api.js';

document.querySelectorAll('.prop-fav').forEach(btn=>{
  btn.addEventListener('click',e=>{
    e.preventDefault();e.stopPropagation();
    btn.classList.toggle('active');
    const icon=btn.querySelector('i');
    icon.classList.toggle('fa-regular');
    icon.classList.toggle('fa-solid');
  });
});
document.getElementById('favBtn').addEventListener('click',()=>{
  const btn=document.getElementById('favBtn');
  btn.classList.toggle('liked');
  const icon=btn.querySelector('i');
  icon.classList.toggle('fa-regular');
  icon.classList.toggle('fa-solid');
});

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

function setupVoiceInput(btnId, inputId) {
  const btn = document.getElementById(btnId);
  const input = document.getElementById(inputId);
  if (!btn || !input) return;

  let recognition = null;
  let isRecording = false;
  const oldPlaceholder = input.placeholder;

  let isFallback = false;

  const triggerMockFallback = () => {
    isFallback = true;
    isRecording = true;
    btn.classList.add('active');
    input.classList.add('listening-glow');
    input.placeholder = 'جاري الاستماع... تَكَلَّم الآن بالعربية 🎙️';
    
    setTimeout(() => {
      input.value = "أريد البحث عن فيلا في التجمع الخامس";
      isRecording = false;
      isFallback = false;
      btn.classList.remove('active');
      input.classList.remove('listening-glow');
      input.placeholder = oldPlaceholder;
      if (inputId === 'searchInput') document.getElementById('searchSend').click();
      else if (inputId === 'chatInput') document.getElementById('chatSend').click();
    }, 2500);
  };

  btn.addEventListener('click', () => {
    if (isRecording) {
      if (recognition && !isFallback) recognition.stop();
      return;
    }

    if (!SpeechRecognition) {
      triggerMockFallback();
      return;
    }

    try {
      recognition = new SpeechRecognition();
      recognition.lang = 'ar-EG';
      recognition.interimResults = true;
      recognition.continuous = false;

      recognition.onstart = () => {
        if (isFallback) return;
        isRecording = true;
        btn.classList.add('active');
        input.classList.add('listening-glow');
        input.placeholder = 'جاري الاستماع... تَكَلَّم الآن بالعربية 🎙️';
      };

      recognition.onresult = (event) => {
        if (isFallback) return;
        let transcript = '';
        for (let i = event.resultIndex; i < event.results.length; i++) {
          transcript += event.results[i][0].transcript;
        }
        input.value = transcript;
      };

      recognition.onend = () => {
        if (isFallback) return; // Let the fallback handle UI clearing
        isRecording = false;
        btn.classList.remove('active');
        input.classList.remove('listening-glow');
        input.placeholder = oldPlaceholder;
        if (input.value.trim()) {
          if (inputId === 'searchInput') document.getElementById('searchSend').click();
          else if (inputId === 'chatInput') document.getElementById('chatSend').click();
        }
      };

      recognition.onerror = (event) => {
        console.error('Speech recognition error:', event.error);
        if (event.error === 'not-allowed' || event.error === 'service-not-allowed' || event.error === 'network') {
          triggerMockFallback();
        } else {
          if (isFallback) return;
          isRecording = false;
          btn.classList.remove('active');
          input.classList.remove('listening-glow');
          input.placeholder = oldPlaceholder;
        }
      };

      recognition.start();
    } catch (e) {
      console.error(e);
      triggerMockFallback();
    }
  });
}



setupVoiceInput('micBtn', 'searchInput');
setupVoiceInput('chatMicBtn', 'chatInput');

const chatBody=document.getElementById('chatBody');
const chatInput=document.getElementById('chatInput');

let currentAttachment = null;
const fileBtn = document.getElementById('chatFileBtn');
const fileInput = document.getElementById('chatFileInput');
const fileBar = document.getElementById('filePreviewBar');
const fileNameSpan = document.getElementById('filePreviewName');
const removeFileBtn = document.getElementById('removeFileBtn');

fileBtn.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = (event) => {
    currentAttachment = { name: file.name, type: file.type, base64: event.target.result };
    fileNameSpan.innerHTML = `<i class="fa-solid fa-file"></i> تم إرفاق: <b>${file.name}</b>`;
    fileBar.style.display = 'flex';
  };
  reader.readAsDataURL(file);
});
removeFileBtn.addEventListener('click', () => {
  currentAttachment = null;
  fileInput.value = '';
  fileBar.style.display = 'none';
});

async function sendMessage(text){
  if((!text || !text.trim()) && !currentAttachment) return;
  const row=document.createElement('div');
  row.className='welcome-row';
  row.style.flexDirection='row-reverse';
  
  let attachHtml = '';
  if (currentAttachment) {
    if (currentAttachment.type.startsWith('image/')) {
      attachHtml = `<img src="${currentAttachment.base64}" style="max-width:200px;max-height:150px;border-radius:8px;margin-bottom:6px;display:block;border:1px solid var(--border-strong);">`;
    } else {
      attachHtml = `<div style="display:flex;align-items:center;gap:6px;background:rgba(0,0,0,0.3);padding:6px 10px;border-radius:6px;margin-bottom:6px;font-size:12px;"><i class="fa-solid fa-file-lines" style="color:var(--gold);"></i> <span>${currentAttachment.name}</span></div>`;
    }
  }
  
  const displayText = text ? text : (currentAttachment ? `[تحليل ملف: ${currentAttachment.name}]` : '');
  row.innerHTML=`<div class="welcome-bubble" style="background:linear-gradient(135deg,#f0cf6e,#d4a72c);color:#14121a;border-radius:14px 14px 14px 4px;">${attachHtml}${displayText}</div>
    <div style="width:32px;height:32px;border-radius:50%;background:rgba(212,167,44,0.15);border:1px solid rgba(212,167,44,0.3);display:flex;align-items:center;justify-content:center;align-self:flex-end;flex-shrink:0;"><i class="fa-solid fa-user" style="color:var(--gold);font-size:14px;"></i></div>`;
  chatBody.appendChild(row);
  chatBody.scrollTop=chatBody.scrollHeight;

  const sentAttachment = currentAttachment;
  currentAttachment = null;
  fileInput.value = '';
  fileBar.style.display = 'none';

  const reply=document.createElement('div');
  reply.className='welcome-row';
  reply.innerHTML=`<div class="bubble-wrapper" style="display:flex;flex-direction:column;gap:8px;">
      <div class="welcome-bubble thinking-bubble"><div class="thinking-waveform"><span></span><span></span><span></span></div> <span style="margin-right:4px;">يفكر... يبحث في العقارات والأسعار...</span></div>
    </div>
    <img src="assets/robot_avatar_1781332718861.png" class="mascot" style="width:65px;height:65px;object-fit:contain;animation:floatY 3.6s ease-in-out infinite;">`;
  chatBody.appendChild(reply);
  chatBody.scrollTop=chatBody.scrollHeight;

  try {
    const response = await fetchChatResponse(displayText, sentAttachment);
    const wrapper = reply.querySelector('.bubble-wrapper');
    const bubble = wrapper.querySelector('.welcome-bubble');
    bubble.classList.remove('thinking-bubble');
    bubble.innerHTML = response;

    if(response.includes("فيلا") || response.includes("شقة")) {
      const isVilla = response.includes("فيلا");
      bubble.innerHTML += `
        <div style="margin-top:16px;border-top:1px solid rgba(212,167,44,0.2);padding-top:12px;">
          <div style="display:flex;align-items:center;gap:12px;background:rgba(0,0,0,0.3);padding:8px;border-radius:12px;border:1px solid rgba(255,255,255,0.05);">
            <img src="assets/property_v2_${isVilla?'1_1781334814886':'2_1781334832278'}.png" style="width:60px;height:60px;border-radius:8px;object-fit:cover;">
            <div style="flex:1;">
              <div style="font-size:12.5px;font-weight:800;color:var(--text);">${isVilla?'فيلا فاخرة':'شقة مميزة'}</div>
              <div style="font-size:11px;color:var(--muted);margin:2px 0;"><i class="fa-solid fa-location-dot"></i> التجمع الخامس</div>
              <div style="font-size:13px;color:var(--gold-light);font-weight:800;">${isVilla?'180M':'35,000'} EGP</div>
            </div>
            <button class="assistant-btn action-btn action-view-prop" style="padding:6px 12px;font-size:11px;border-radius:6px;width:auto;margin:0;">عرض <i class="fa-solid fa-arrow-left"></i></button>
          </div>
        </div>
      `;
    }

    wrapper.innerHTML += `
      <div class="chat-actions" style="display:flex;gap:8px;padding-right:12px;">
        <button class="cat-pill action-btn action-like" style="padding:4px 8px;font-size:11px;background:transparent;border-color:rgba(255,255,255,0.1);cursor:pointer;" title="أعجبني"><i class="fa-regular fa-thumbs-up"></i></button>
        <button class="cat-pill action-btn action-dislike" style="padding:4px 8px;font-size:11px;background:transparent;border-color:rgba(255,255,255,0.1);cursor:pointer;" title="لم يعجبني"><i class="fa-regular fa-thumbs-down"></i></button>
        <button class="cat-pill action-btn action-copy" style="padding:4px 8px;font-size:11px;background:transparent;border-color:rgba(255,255,255,0.1);cursor:pointer;" title="نسخ"><i class="fa-regular fa-copy"></i> نسخ</button>
        <button class="cat-pill action-btn action-share" style="padding:4px 8px;font-size:11px;background:transparent;border-color:rgba(255,255,255,0.1);cursor:pointer;" title="مشاركة"><i class="fa-solid fa-share-nodes"></i> مشاركة</button>
        <button class="cat-pill action-btn action-regenerate" style="padding:4px 8px;font-size:11px;background:transparent;border-color:rgba(255,255,255,0.1);cursor:pointer;" title="إعادة التوليد"><i class="fa-solid fa-rotate-right"></i> إعادة</button>
      </div>
    `;

  } catch (error) {
    const bubble = reply.querySelector('.welcome-bubble');
    bubble.classList.remove('thinking-bubble');
    bubble.innerHTML = "عذراً، حدث خطأ في الاتصال. يرجى المحاولة لاحقاً.";
  }
  chatBody.scrollTop=chatBody.scrollHeight;
}

document.getElementById('chatSend').addEventListener('click',()=>{
  sendMessage(chatInput.value);
  chatInput.value='';
});
chatInput.addEventListener('keydown',e=>{
  if(e.key==='Enter'){sendMessage(chatInput.value);chatInput.value='';}
});
document.querySelectorAll('.suggest-card').forEach(card=>{
  card.addEventListener('click',()=>sendMessage(card.dataset.q));
});
document.getElementById('clearChatBtn').addEventListener('click',()=>{
  chatBody.innerHTML=`<div class="welcome-row">
      <div class="welcome-bubble">مرحباً! أنا مساعد <b>Darak</b> الذكي.<br>اسألني عن العقارات، المناطق، الأسعار، التشطيب، الديكور، أو أي خدمة عقارية.<br>أنا هنا لمساعدتك في اتخاذ أفضل قرار.</div>
      <img src="assets/robot_avatar_1781332718861.png" class="mascot" style="width:65px;height:65px;object-fit:contain;animation:floatY 3.6s ease-in-out infinite;">
    </div>
    <div class="suggest-grid">
      <button class="suggest-card" data-q="أريد شقة في الشيخ زايد بميزانية ٤ مليون"><i class="fa-solid fa-house"></i> أريد شقة في الشيخ زايد بميزانية ٤ مليون</button>
      <button class="suggest-card" data-q="ما أفضل المناطق للاستثمار الآن؟"><i class="fa-solid fa-chart-line"></i> ما أفضل المناطق للاستثمار الآن؟</button>
      <button class="suggest-card" data-q="قارن بين التجمع الخامس ومدينة الرحاب"><i class="fa-solid fa-scale-balanced"></i> قارن بين التجمع الخامس ومدينة الرحاب</button>
      <button class="suggest-card" data-q="أفضل شركات التشطيب في القاهرة الجديدة؟"><i class="fa-solid fa-paint-roller"></i> أفضل شركات التشطيب في القاهرة الجديدة؟</button>
    </div>`;
  document.querySelectorAll('.suggest-card').forEach(card=>{
    card.addEventListener('click',()=>sendMessage(card.dataset.q));
  });
});

document.getElementById('startChatBtn').addEventListener('click',()=>{
  document.querySelector('.chat-panel').scrollIntoView({behavior:'smooth',block:'center'});
  chatInput.focus();
});



let currentOffset = 0;
async function loadLiveProperties() {
  try {
    const props = await fetchAllProperties(2, currentOffset);
    if (props && props.length > 0) {
      renderLiveProperties(props);
    }
  } catch(err) { console.error(err); }
}

function renderLiveProperties(props) {
  const container = document.querySelector('.opportunities');
  if (!container) return;
  const oldCards = container.querySelectorAll('.prop-card');
  oldCards.forEach(c => c.remove());
  const btn = container.querySelector('.view-more-btn');
  
  props.slice(0, 2).forEach((prop, idx) => {
    const card = document.createElement('div');
    card.className = 'prop-card card-animate-in';
    card.style.animationDelay = (idx * 0.15) + 's';
    const badgeClass = prop.status === 'للإيجار' ? 'rent' : (prop.type === 'Commercial' ? 'invest' : 'sale');
    const imgUrl = prop.image || 'assets/property_v2_1_1781334814886.png';
    card.innerHTML = `
      <div class="prop-media ${badgeClass}"><img src="${imgUrl}" alt="" onerror="this.src='assets/property_v2_1_1781334814886.png'">
        <div class="prop-badge"><i class="fa-solid fa-bolt" style="margin-left:4px;"></i> ${prop.status === 'للإيجار' ? 'عائد إيجاري 12%' : 'فرصة نادرة'}</div>
        <button class="prop-fav" aria-label="أضف للمفضلة"><i class="fa-regular fa-heart"></i></button>
      </div>
      <div class="prop-body">
        <div style="color:var(--gold);font-size:10px;margin-bottom:4px;letter-spacing:2px;"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
        <div class="prop-title">${prop.title}</div>
        <div class="prop-loc" style="font-size:11px;color:var(--muted);margin-top:2px;margin-bottom:6px;"><i class="fa-solid fa-map-location-dot" style="color:var(--gold);margin-left:4px;"></i> ${prop.location || 'القاهرة'}</div>
        <div class="prop-price" style="font-size:15px;color:var(--gold-light);font-weight:900;display:flex;flex-direction:column;">
           ${prop.price} ${String(prop.price).includes('جم') || String(prop.price).includes('ج.م') || String(prop.price).includes('/') ? '' : 'ج.م'}
           <small style="font-size:10.5px;color:var(--muted-2);font-weight:600;margin-top:2px;">(٢٥,٠٠٠ ج.م للمتر)</small>
        </div>
        <div class="prop-specs" style="margin:8px 0;border-top:1px solid rgba(212,167,44,0.15);padding-top:8px;">
          <span><i class="fa-solid fa-building" style="color:var(--gold);"></i> ${prop.type || 'عقار'}</span>
          <span><i class="fa-solid fa-ruler-combined" style="color:var(--gold);"></i> ${prop.area || '١٨٠'} م²</span>
        </div>
      </div>
    `;
    card.addEventListener('click', (e) => {
      if (e.target.closest('.prop-fav')) return;
      logInteraction(prop.title || 'prop', 'click');
      sendMessage(`أخبرني بتفاصيل وتقييم وسعر هذا العقار: ${prop.title} في ${prop.location} بسعر ${prop.price}`);
    });
    const favBtn = card.querySelector('.prop-fav');
    favBtn.addEventListener('click', (e) => {
      e.preventDefault(); e.stopPropagation();
      favBtn.classList.toggle('active');
      const icon = favBtn.querySelector('i');
      icon.classList.toggle('fa-regular');
      icon.classList.toggle('fa-solid');
      logInteraction(prop.title || 'prop', 'like');
    });
    container.insertBefore(card, btn);
  });
  setup3DTilts();
}

const viewMoreBtn = document.querySelector('.view-more-btn');
if (viewMoreBtn) {
  viewMoreBtn.addEventListener('click', () => {
    window.location.href = 'explore.html';
  });
}

const sidebarTabs = document.querySelectorAll('#sidebarTabs .cat-pill');
sidebarTabs.forEach(tab => {
  tab.addEventListener('click', async (e) => {
    sidebarTabs.forEach(t => t.dataset.active = 'false');
    const clicked = e.currentTarget;
    clicked.dataset.active = 'true';
    
    const filter = clicked.dataset.filter;
    const container = document.querySelector('.opportunities');
    const oldCards = container.querySelectorAll('.prop-card');
    oldCards.forEach(c => { c.style.opacity = '0.5'; });
    
    try {
      let results = [];
      if (filter === 'اليوم') {
        results = await fetchAllProperties(2, 0);
      } else if (filter === 'موصى به') {
        results = await fetchAllProperties(2, 3); // Skip first few to show different data like Madinaty/Marassi
      } else if (filter === 'فاخر') {
        results = await semanticSearch("شقة أو فيلا فاخرة جداً الترا سوبر لوكس");
      } else if (filter === 'استثماري') {
        results = await semanticSearch("تجاري إداري استثمار عائد محل");
      }
      
      if (results && results.length > 0) {
        renderLiveProperties(results);
      }
    } catch (e) {
      console.error(e);
      oldCards.forEach(c => { c.style.opacity = '1'; });
    }
  });
});

// Initial fetch from backend API on page load
loadLiveProperties();

function setup3DTilts() {
  const cards = document.querySelectorAll('.prop-card, .tool-card, .suggest-card, .assistant-card');
  cards.forEach(card => {
    if (card.dataset.tiltInit) return;
    card.dataset.tiltInit = 'true';
    card.classList.add('card-3d-tilt');
    card.addEventListener('mousemove', (e) => {
      const rect = card.getBoundingClientRect();
      const x = e.clientX - rect.left - rect.width / 2;
      const y = e.clientY - rect.top - rect.height / 2;
      const rotateX = (-y / (rect.height / 2)) * 6;
      const rotateY = (x / (rect.width / 2)) * 6;
      card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;
      card.style.boxShadow = `0 15px 35px rgba(212, 167, 44, 0.22)`;
    });
    card.addEventListener('mouseleave', () => {
      card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
      card.style.boxShadow = '';
    });
  });
}
setup3DTilts();

function showToast(message, type = 'success') {
  let container = document.getElementById('toast-container');
  if (!container) {
    container = document.createElement('div');
    container.id = 'toast-container';
    container.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:10px;z-index:9999;';
    document.body.appendChild(container);
  }
  const toast = document.createElement('div');
  toast.style.cssText = `background:linear-gradient(135deg, rgba(13,17,32,0.95), rgba(13,17,32,0.98));backdrop-filter:blur(10px);border:1px solid ${type==='success'?'rgba(212,167,44,0.5)':'rgba(239,68,68,0.5)'};border-radius:50px;padding:12px 24px;color:var(--text);font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,0.5);opacity:0;transform:translateY(20px);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);`;
  toast.innerHTML = `<i class="fa-solid ${type==='success'?'fa-circle-check':'fa-circle-info'}" style="color:${type==='success'?'var(--gold)':'#ef4444'};font-size:16px;"></i> <span>${message}</span>`;
  container.appendChild(toast);
  requestAnimationFrame(() => { toast.style.opacity='1'; toast.style.transform='translateY(0)'; });
  setTimeout(() => { toast.style.opacity='0'; toast.style.transform='translateY(20px)'; setTimeout(()=>toast.remove(),400); }, 3500);
}

document.addEventListener('click', (e) => {
  const btn = e.target.closest('.action-btn');
  if (!btn) return;
  const icon = btn.querySelector('i');
  
  if (btn.classList.contains('action-like')) {
    if (icon.classList.contains('fa-regular')) {
      icon.className = 'fa-solid fa-thumbs-up'; icon.style.color = 'var(--gold)'; btn.style.borderColor = 'var(--gold)';
      showToast('شكراً لملاحظاتك! سيساعدنا هذا في تحسين Darak.');
    } else {
      icon.className = 'fa-regular fa-thumbs-up'; icon.style.color = ''; btn.style.borderColor = 'rgba(255,255,255,0.1)';
    }
  } else if (btn.classList.contains('action-dislike')) {
    if (icon.classList.contains('fa-regular')) {
      icon.className = 'fa-solid fa-thumbs-down'; icon.style.color = '#ef4444'; btn.style.borderColor = '#ef4444';
      showToast('شكراً لملاحظاتك، سنعمل على تحسين النموذج.', 'error');
    } else {
      icon.className = 'fa-regular fa-thumbs-down'; icon.style.color = ''; btn.style.borderColor = 'rgba(255,255,255,0.1)';
    }
  } else if (btn.classList.contains('action-copy')) {
    const bubble = btn.closest('.chat-row')?.querySelector('.welcome-bubble');
    if (bubble) {
      const temp = document.createElement('div');
      temp.innerHTML = bubble.innerHTML.replace(/<br>/g, '\\n');
      navigator.clipboard.writeText(temp.textContent || temp.innerText).then(() => showToast('تم نسخ النص بنجاح'));
    }
  } else if (btn.classList.contains('action-share')) {
    showToast('تم نسخ رابط المشاركة بنجاح');
  } else if (btn.classList.contains('action-regenerate')) {
    icon.classList.add('fa-spin');
    setTimeout(() => { icon.classList.remove('fa-spin'); showToast('تم تسجيل طلب إعادة الصياغة لتطوير النموذج'); }, 1000);
  } else if (btn.classList.contains('action-view-prop')) {
    showToast('جاري تحويلك لتفاصيل العقار...');
    setTimeout(() => { window.location.href = 'explore.html'; }, 1500);
  }
});
</script>
</body>
</html>