import os

filepath = 'src/app/map/MapUI.tsx'
with open(filepath, 'r') as f:
    content = f.read()

old_nearby = """         {/* Nearby Properties */}
         <div className="p-6 border-b border-slate-100 ">
          <h3 className="font-black text-base mb-4 text-slate-900 ">Nearby Properties</h3>
          <div className="flex flex-col gap-3">
           {filteredProperties.filter((p: any) => p.id !== selectedProperty.id).slice(0, 3).map((p: any) => (
            <button key={p.id} onClick={() => { setSelectedProperty(p); setActivePhotoIndex(0); }} className="flex items-center gap-3 p-3 rounded-xl border border-slate-100 hover:border-emerald-300 hover:bg-emerald-50 transition-all text-left">
             <img src={p.photos?.[0] || 'https://images.pexels.com/photos/30557705/pexels-photo-30557705.jpeg?auto=compress&cs=tinysrgb&w=200'} alt={p.title} className="w-16 h-14 rounded-xl object-cover shrink-0" />
             <div className="flex-1 min-w-0">
              <p className="font-bold text-sm text-slate-900 truncate">{p.title}</p>
              <p className="text-xs text-slate-500 truncate">{p.location}</p>
              <p className="text-emerald-600 font-black text-sm mt-0.5">₹{(p.price / 10000000).toFixed(2)} Cr</p>
             </div>
            </button>
           ))}
          </div>
         </div>"""

new_nearby = """         {/* Nearby Properties */}
         <div className="p-6 border-b border-slate-100 ">
          <div className="flex items-center justify-between mb-4">
            <h3 className="font-black text-base text-slate-900 ">Nearby Properties</h3>
            <div className="flex gap-2">
              <button className="w-8 h-8 rounded-full border border-slate-200 flex items-center justify-center hover:bg-slate-50 text-slate-400 hover:text-slate-700 transition" onClick={(e) => { e.currentTarget.parentElement?.parentElement?.nextElementSibling?.scrollBy({ left: -200, behavior: 'smooth' }); }}>
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7"></path></svg>
              </button>
              <button className="w-8 h-8 rounded-full border border-slate-200 flex items-center justify-center hover:bg-slate-50 text-slate-400 hover:text-slate-700 transition" onClick={(e) => { e.currentTarget.parentElement?.parentElement?.nextElementSibling?.scrollBy({ left: 200, behavior: 'smooth' }); }}>
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path></svg>
              </button>
            </div>
          </div>
          <div className="flex gap-4 overflow-x-auto pb-4 snap-x hide-scrollbar" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
           {filteredProperties.filter((p: any) => p.id !== selectedProperty.id).slice(0, 8).map((p: any) => (
            <button key={p.id} onClick={() => { setSelectedProperty(p); setActivePhotoIndex(0); }} className="flex flex-col min-w-[200px] w-[200px] rounded-2xl border border-slate-200 hover:border-emerald-400 hover:shadow-lg hover:shadow-emerald-500/10 transition-all text-left overflow-hidden snap-start group bg-white">
             <div className="relative w-full h-[120px] overflow-hidden bg-slate-100">
               <img src={p.photos?.[0] || 'https://images.pexels.com/photos/30557705/pexels-photo-30557705.jpeg?auto=compress&cs=tinysrgb&w=400'} alt={p.title} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
               <div className="absolute top-2 right-2 bg-white/90 backdrop-blur-sm text-[10px] font-black px-2 py-1 rounded-md text-slate-700">{p.area}</div>
             </div>
             <div className="p-3">
              <p className="font-bold text-sm text-slate-900 line-clamp-1 mb-0.5 group-hover:text-emerald-700 transition-colors">{p.title}</p>
              <p className="text-xs text-slate-500 truncate mb-2">{p.location}</p>
              <p className="text-emerald-600 font-black text-sm">₹{(p.price / 10000000).toFixed(2)} Cr</p>
             </div>
            </button>
           ))}
          </div>
          <style dangerouslySetInnerHTML={{__html: `
            .hide-scrollbar::-webkit-scrollbar { display: none; }
          `}} />
         </div>"""

content = content.replace(old_nearby, new_nearby)

with open(filepath, 'w') as f:
    f.write(content)
print("Slider injected.")