<?php
$dir = __DIR__ . '/images';
$files = glob($dir . '/*.{jpg,jpeg,JPG,JPEG,png,PNG,webp,WEBP}', GLOB_BRACE);
$files = $files ? $files : array();
function _k($f){ $b=basename($f); return preg_match('/^(\d+)_/',$b,$m)?intval($m[1]):99999; }
usort($files, function($a,$b){ $ka=_k($a); $kb=_k($b); return $ka===$kb?strcmp($a,$b):$ka-$kb; });
function _lbl($f){
  $b=preg_replace('/\.[^.]+$/','',basename($f));
  if(preg_match('/-([A-Za-z_]+)-[A-Za-z0-9]+$/',$b,$m)){ $c=ucwords(str_replace('_',' ',strtolower($m[1]))); }
  elseif(stripos($b,'hero')!==false){ $c='Aerial View'; }
  else { $c=ucwords(str_replace(array('_','-'),' ',$b)); }
  return $c==='Others' ? 'Interior' : $c;
}
$items=array();
foreach($files as $f){ $items[]=array('src'=>'images/'.rawurlencode(basename($f)),'label'=>_lbl($f)); }
?>
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>2705 Marshall Drive — Photo Gallery</title><style>
:root{--navy:#1F3A5F;--navy-d:#14253D;--gold:#B0824A;--gold-l:#C9A24B;--ice:#E9F0F7;--line:#E2E8F0;--cream:#FBF9F4}
*{box-sizing:border-box} body{margin:0;font-family:'Segoe UI',Helvetica,Arial,sans-serif;background:var(--cream);color:#23303F}
a{color:inherit}
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:10px 20px}
.bar-mid{flex:1;text-align:center} .addr{font-family:Georgia,serif;color:var(--navy);font-weight:700;font-size:16px}
.cnt{font-size:12px;color:#5A6573;letter-spacing:1px;margin-top:2px}
.back,.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:10px 18px;border-radius:30px;border:0;cursor:pointer}
.back:hover,.btn:hover{background:var(--gold)} .brand{display:flex;align-items:center;text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;max-width:1320px;margin:18px auto;padding:0 16px}
.cell{position:relative;aspect-ratio:4/3;border:0;padding:0;cursor:pointer;border-radius:10px;overflow:hidden;background:#dbe6f1}
.cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.cell:hover img{transform:scale(1.05)}
.cell .tag{position:absolute;left:8px;bottom:8px;background:rgba(31,58,95,.85);color:#fff;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;opacity:0;transition:opacity .2s}
.cell:hover .tag{opacity:1}
.empty{max-width:700px;margin:60px auto;text-align:center;color:#5A6573;line-height:1.6}
.botback{text-align:center;margin:14px 0 44px}
.lb{position:fixed;inset:0;background:rgba(8,14,24,.95);display:none;align-items:center;justify-content:center;z-index:100}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:84vh;border-radius:8px}
.lbX{position:absolute;top:16px;right:20px;font-size:34px;background:none;border:0;color:#fff;cursor:pointer;line-height:1}
.lbNav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;font-size:40px;width:56px;height:74px;cursor:pointer;border-radius:8px}
.lbNav:hover{background:rgba(255,255,255,.25)} .lbPrev{left:14px} .lbNext{right:14px}
.lbMeta{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-weight:600}
.lbCount{color:var(--gold-l);margin-left:8px}
@media(max-width:600px){.lbNav{width:44px;height:60px;font-size:30px}.addr{font-size:14px}.back,.btn{padding:9px 14px;font-size:13px}}
</style></head><body>
<div class="bar">
  <a class="brand" href="index.html"><div style="display:flex;flex-direction:row;align-items:center;gap:12px"><svg width="46" height="46" viewBox="0 0 64 64" aria-hidden="true" style="flex:0 0 auto">
      <circle cx="32" cy="32" r="30" fill="#1F3A5F" stroke="#B0824A" stroke-width="2.5"/>
      <polygon points="32,14 24.5,30 39.5,30" fill="#B0824A"/>
      <rect x="30.3" y="28" width="3.4" height="18" fill="#B0824A"/>
      <path d="M32 37 L25.5 46 M32 37 L38.5 46 M32 41 L27.5 48.5 M32 41 L36.5 48.5"
            stroke="#B0824A" stroke-width="2.4" fill="none" stroke-linecap="round"/>
    </svg><div style="line-height:1.04">
      <div style="font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:.5px;color:#1F3A5F;font-size:19px">ASH &amp; ARROW</div>
      <div style="font-family:Arial,Helvetica,sans-serif;letter-spacing:3.5px;color:#B0824A;font-size:9px;margin-top:2px">BROKERAGE</div>
    </div></div></a>
  <div class="bar-mid"><div class="addr">2705 Marshall Drive &middot; Frisco, TX</div><div class="cnt" id="count"></div></div>
  <a class="back" href="index.html">&larr; Back to property</a>
</div>
<div class="grid" id="grid"></div>
<div class="empty" id="empty" style="display:none">Photos will appear here once images are uploaded to the <b>images/</b> folder.</div>
<div class="botback"><a class="btn" href="index.html">&larr; Back to property</a></div>
<div class="lb" id="lb">
  <button class="lbX" id="lbX" aria-label="Close">&times;</button>
  <button class="lbNav lbPrev" id="lbPrev" aria-label="Previous">&#8249;</button>
  <img id="lbImg" alt=""/>
  <button class="lbNav lbNext" id="lbNext" aria-label="Next">&#8250;</button>
  <div class="lbMeta"><span id="lbCap"></span><span class="lbCount" id="lbCount"></span></div>
</div>
<script>window.PHOTOS = <?php echo json_encode($items); ?>;</script>
<script>
(function(){
  var P = window.PHOTOS || [];
  var grid=document.getElementById('grid');
  document.getElementById('count').textContent = P.length ? (P.length+' photos') : '';
  if(!P.length){ document.getElementById('empty').style.display='block'; return; }
  P.forEach(function(p,i){
    var c=document.createElement('button'); c.className='cell'; c.type='button'; c.setAttribute('aria-label',p.label);
    var im=document.createElement('img'); im.src=p.src; im.alt=p.label; im.loading='lazy';
    var t=document.createElement('span'); t.className='tag'; t.textContent=p.label;
    c.appendChild(im); c.appendChild(t); c.addEventListener('click',function(){openLb(i);}); grid.appendChild(c);
  });
  var lb=document.getElementById('lb'),lbImg=document.getElementById('lbImg'),lbCap=document.getElementById('lbCap'),lbCount=document.getElementById('lbCount'),cur=0;
  function openLb(i){cur=i;show();lb.classList.add('open');document.body.style.overflow='hidden';}
  function closeLb(){lb.classList.remove('open');document.body.style.overflow='';}
  function show(){var p=P[cur];lbImg.src=p.src;lbImg.alt=p.label;lbCap.textContent=p.label;lbCount.textContent=(cur+1)+' / '+P.length;}
  function next(){cur=(cur+1)%P.length;show();} function prev(){cur=(cur-1+P.length)%P.length;show();}
  document.getElementById('lbX').addEventListener('click',closeLb);
  document.getElementById('lbNext').addEventListener('click',function(e){e.stopPropagation();next();});
  document.getElementById('lbPrev').addEventListener('click',function(e){e.stopPropagation();prev();});
  lb.addEventListener('click',function(e){if(e.target===lb)closeLb();});
  document.addEventListener('keydown',function(e){if(!lb.classList.contains('open'))return;if(e.key==='Escape')closeLb();else if(e.key==='ArrowRight')next();else if(e.key==='ArrowLeft')prev();});
  var x0=null; lb.addEventListener('touchstart',function(e){x0=e.touches[0].clientX;},{passive:true});
  lb.addEventListener('touchend',function(e){if(x0===null)return;var dx=e.changedTouches[0].clientX-x0;if(Math.abs(dx)>40){dx<0?next():prev();}x0=null;});
})();
</script>
</body></html>