(function() {
  var useState  = React.useState;
  var useEffect = React.useEffect;

  var EMOJIS = ['🏙','🌳','🚲','🏗','🎭','🌿','🏛','💡','🛤','🎪','🌁','🏞','🏟','🌉','🎡'];

  function ARDemoPage() {
    var _projects = useState([]); var projects = _projects[0], setProjects = _projects[1];
    var _loading  = useState(true); var loading = _loading[0], setLoading = _loading[1];
    var _preview  = useState(null); var preview = _preview[0], setPreview = _preview[1];
    var _sliderX  = useState(50);   var sliderX = _sliderX[0], setSliderX = _sliderX[1];
    var _dragging = useState(false); var dragging = _dragging[0], setDragging = _dragging[1];
    var sliderRef = React.useRef(null);

    useEffect(function() {
      window.ApiClient.get('/projects?status=live&limit=12&sort=-ar.views').then(function(d) {
        setProjects(d.projects || []);
        setLoading(false);
      }).catch(function() { setLoading(false); });
    }, []);

    function onMouseMove(e) {
      if (!dragging || !sliderRef.current) return;
      var rect = sliderRef.current.getBoundingClientRect();
      var x = Math.max(5, Math.min(95, ((e.clientX - rect.left) / rect.width) * 100));
      setSliderX(x);
    }

    return (
      <div className="user-screen" onMouseMove={onMouseMove} onMouseUp={function(){ setDragging(false); }}>
        {/* Header */}
        <div className="pg-hero">
          <button className="back-btn"
            onMouseEnter={function(){ document.body.classList.add('hov'); }}
            onMouseLeave={function(){ document.body.classList.remove('hov'); }}
            onClick={function(){ window.navigate('home'); }}>
            ← Back to Home
          </button>
          <div className="pg-eyebrow">Augmented Reality</div>
          <h1 className="pg-title">AR Demo</h1>
          <p className="pg-sub">See how AI transforms real city spaces into AR visualizations — before anything is built.</p>
        </div>

        {/* Before/After Slider */}
        <div className="pg-body" style={{ paddingBottom:0 }}>
          <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:16 }}>
            Interactive Before / After — drag to compare
          </div>
          <div ref={sliderRef} className="ar-slider"
            style={{ position:'relative', height:380, borderRadius:20, overflow:'hidden', cursor:'ew-resize', border:'1px solid var(--border)', userSelect:'none' }}
            onMouseDown={function(){ setDragging(true); }}>
            {/* AFTER side */}
            <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', background:'linear-gradient(135deg, oklch(0.18 0.04 295), oklch(0.22 0.06 188))' }}>
              <div style={{ fontSize:120, opacity:.9 }}>🏛</div>
              <div style={{ position:'absolute', top:20, right:20, fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', color:'var(--lime)', background:'oklch(0.14 0.03 188/0.8)', border:'1px solid var(--lime)', borderRadius:20, padding:'4px 12px', display:'flex', alignItems:'center', gap:6 }}>
                <span style={{ width:5, height:5, borderRadius:'50%', background:'var(--lime)', boxShadow:'0 0 6px var(--lime)' }} />
                AI VISION · AFTER
              </div>
            </div>
            {/* BEFORE side */}
            <div style={{ position:'absolute', inset:0, clipPath:'inset(0 '+(100-sliderX)+'% 0 0)', background:'oklch(0.16 0.01 62)', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <div style={{ fontSize:120, filter:'grayscale(1) brightness(0.4)' }}>🏚</div>
              <div style={{ position:'absolute', top:20, left:20, fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', color:'var(--text-faint)', background:'oklch(0.12 0.01 62/0.8)', border:'1px solid var(--border)', borderRadius:20, padding:'4px 12px' }}>BEFORE</div>
            </div>
            {/* Divider */}
            <div style={{ position:'absolute', top:0, bottom:0, left:sliderX+'%', transform:'translateX(-50%)', width:2, background:'white', opacity:.8 }}>
              <div style={{ position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)', width:36, height:36, borderRadius:'50%', background:'white', display:'flex', alignItems:'center', justifyContent:'center', color:'#111', fontSize:14, boxShadow:'0 2px 12px rgba(0,0,0,0.4)', userSelect:'none', cursor:'ew-resize' }}>⟺</div>
            </div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12, marginTop:12 }}>
            {[
              { val:'~10min', label:'Avg AI Processing Time', color:'var(--violet)' },
              { val:'94%',    label:'Geometric Accuracy',     color:'var(--lime)'   },
              { val:'31.8K',  label:'AR Viewers Today',       color:'var(--cyan)'   },
            ].map(function(s) {
              return (
                <div key={s.label} style={{ background:'var(--bg-raised)', border:'1px solid var(--border)', borderRadius:12, padding:'16px 20px', textAlign:'center' }}>
                  <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:32, color:s.color, lineHeight:1 }}>{s.val}</div>
                  <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-faint)', marginTop:4 }}>{s.label}</div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Live AR Projects */}
        <div className="pg-body">
          <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--lime)', marginBottom:4 }}>
            🟢 Live AR Projects
          </div>
          <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:32, color:'var(--text)', marginBottom:20 }}>
            Currently Active in Your City
          </div>

          {loading && <div className="pg-empty"><span className="pg-empty-icon">📡</span>Loading live projects…</div>}

          <div className="ar-live-grid">
            {projects.map(function(p, i) {
              var emoji = EMOJIS[i % EMOJIS.length];
              return (
                <div key={p._id} className="ar-card"
                  style={{ opacity:0, animation:'slide-in-left 0.35s var(--spring) '+(i*40)+'ms forwards' }}>
                  <div className="ar-card-thumb">
                    <div style={{ position:'relative', zIndex:1 }}>{emoji}</div>
                    <div style={{ position:'absolute', bottom:10, right:10, zIndex:2, fontFamily:'DM Mono,monospace', fontSize:8, color:'var(--lime)', background:'oklch(0.12 0.02 150/0.9)', border:'1px solid oklch(0.4 0.15 150/0.5)', borderRadius:20, padding:'3px 10px', display:'flex', alignItems:'center', gap:5 }}>
                      <span style={{ width:4, height:4, borderRadius:'50%', background:'var(--lime)', boxShadow:'0 0 5px var(--lime)' }} />
                      LIVE
                    </div>
                  </div>
                  <div className="ar-card-body">
                    <div style={{ fontSize:13, color:'var(--text)', fontWeight:500, marginBottom:4 }}>{p.title}</div>
                    <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', marginBottom:12 }}>
                      📍 {p.location&&p.location.district||'—'} · 👁 {(p.ar&&p.ar.views||0).toLocaleString()} views
                    </div>
                    <div style={{ display:'flex', gap:8 }}>
                      <button className="btn btn-v" style={{ flex:1, justifyContent:'center', padding:'8px', fontSize:10 }}
                        onMouseEnter={function(){ document.body.classList.add('hov'); }}
                        onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                        onClick={function(){ setPreview(p); }}>
                        👁 View in AR
                      </button>
                      <button className="btn btn-o" style={{ flex:1, justifyContent:'center', padding:'8px', fontSize:10 }}
                        onMouseEnter={function(){ document.body.classList.add('hov'); }}
                        onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                        onClick={function(){ window.navigate('project-detail', { id: p._id }); }}>
                        Details →
                      </button>
                    </div>
                  </div>
                </div>
              );
            })}
            {!loading && projects.length === 0 && (
              <div className="pg-empty" style={{ gridColumn:'1/-1' }}>
                <span className="pg-empty-icon">📡</span>No live AR projects yet
              </div>
            )}
          </div>
        </div>

        {/* AR Preview Modal */}
        {preview && (
          <div className="ar-preview-overlay" onClick={function(e){ if(e.target===e.currentTarget) setPreview(null); }}>
            <div className="ar-preview-box">
              <div className="ar-preview-screen">
                <div className="ar-grid-bg" />
                <div className="ar-scan-bar" />
                <div className="ar-corner tl" /><div className="ar-corner tr" />
                <div className="ar-corner bl" /><div className="ar-corner br" />
                <div className="ar-hud-chip"><span className="ar-pulse-dot" />AR LAYER ACTIVE</div>
                <div className="ar-preview-emoji">{EMOJIS[projects.indexOf(preview) % EMOJIS.length]}</div>
                <div style={{ position:'relative', zIndex:2, fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-dim)' }}>
                  {preview.location&&preview.location.district||'Location'} · GPS Anchored
                </div>
              </div>
              <div className="ar-preview-info">
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <div>
                    <div style={{ fontSize:16, fontWeight:500, color:'var(--text)', marginBottom:4 }}>{preview.title}</div>
                    <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)' }}>
                      👁 {(preview.ar&&preview.ar.views||0).toLocaleString()} live views · Live in AR
                    </div>
                  </div>
                  <div style={{ display:'flex', gap:8 }}>
                    <button className="btn btn-l" style={{ padding:'8px 14px', fontSize:10 }}
                      onMouseEnter={function(){ document.body.classList.add('hov'); }}
                      onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                      onClick={function(){ window.navigate('project-detail', { id: preview._id }); setPreview(null); }}>
                      Fund →
                    </button>
                    <button className="btn btn-o" style={{ padding:'8px 14px', fontSize:10 }}
                      onMouseEnter={function(){ document.body.classList.add('hov'); }}
                      onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                      onClick={function(){ setPreview(null); }}>
                      ✕ Close
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

  window.UserARDemoPage = ARDemoPage;
})();