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

  var STATUS_LABEL = { live:'Live in AR', completed:'Completed', pending:'Pending', in_review:'In Review', ar_processing:'AI Processing', archived:'Archived' };
  var STATUS_COLOR = { live:'teal', completed:'teal', pending:'dim', in_review:'amber', ar_processing:'amber' };
  var EMOJIS = ['🏙','🌳','🚲','🏗','🎭','🌿','🏛','💡','🛤','🎪','🌁','🏞','🏟','🌉','🎡'];

  // Renders the Meshy GLB in a <model-viewer> web component
  function ModelViewer(props) {
    var ref = React.useRef(null);
    React.useEffect(function() {
      if (!ref.current || !props.src) return;
      ref.current.innerHTML = '';
      var mv = document.createElement('model-viewer');
      mv.setAttribute('src', props.src);
      if (props.iosSrc) mv.setAttribute('ios-src', props.iosSrc);
      mv.setAttribute('ar', '');
      mv.setAttribute('ar-modes', 'webxr scene-viewer quick-look');
      mv.setAttribute('camera-controls', '');
      mv.setAttribute('auto-rotate', '');
      mv.setAttribute('shadow-intensity', '1');
      mv.setAttribute('exposure', '0.6');
      mv.setAttribute('environment-image', 'neutral');
      mv.setAttribute('alt', props.alt || '3D model');
      mv.style.cssText = 'width:100%;height:460px;border-radius:14px;background:transparent;--poster-color:transparent;';
      ref.current.appendChild(mv);
      return function() { if (ref.current) ref.current.innerHTML = ''; };
    }, [props.src]);
    return React.createElement('div', { ref: ref, style: { minHeight: 460 } });
  }

  function FundSidebar(props) {
    var project = props.project, onFunded = props.onFunded;
    var raised  = project.funding && project.funding.raised || 0;
    var goal    = project.funding && project.funding.goal   || 1;
    var pct     = Math.min(100, Math.round((raised/goal)*100));

    var _amount   = useState('');     var amount = _amount[0], setAmount = _amount[1];
    var _preset   = useState(null);   var preset = _preset[0], setPreset = _preset[1];
    var _funding  = useState(false);  var funding = _funding[0], setFunding = _funding[1];
    var _funded   = useState(false);  var funded  = _funded[0],  setFunded  = _funded[1];

    function selectPreset(val) {
      setPreset(val);
      setAmount(String(val));
    }

    async function handleFund() {
      if (!window.AuthState || !window.AuthState.isLoggedIn()) {
        window.showUserToast('Sign in to fund projects', 'rose');
        return;
      }
      var amt = parseFloat(amount);
      if (!amt || amt <= 0) { window.showUserToast('Enter a valid amount', 'rose'); return; }
      setFunding(true);
      try {
        var user = window.AuthState.getUser();
        await window.ApiClient.post('/funding', {
          project: project._id,
          amount:  amt * 1000,
          source:  user.role || 'citizen',
        });
        setFunded(true);
        window.showUserToast('Funded $'+amt+'K — thank you! 🎉', 'lime');
        if (onFunded) onFunded(amt * 1000);
      } catch(e) {
        window.showUserToast(e.message || 'Funding failed', 'rose');
      } finally {
        setFunding(false);
      }
    }

    if (funded) {
      return (
        <div className="fund-sidebar" style={{ textAlign:'center', padding:'40px 24px' }}>
          <div style={{ fontSize:48, marginBottom:12 }}>🎉</div>
          <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:28, color:'var(--lime)', marginBottom:8 }}>Thank You!</div>
          <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)' }}>Your contribution is making this city better.</div>
          <button className="btn btn-l" style={{ marginTop:20, width:'100%', justifyContent:'center' }}
            onMouseEnter={function(){ document.body.classList.add('hov'); }}
            onMouseLeave={function(){ document.body.classList.remove('hov'); }}
            onClick={function(){ setFunded(false); setAmount(''); setPreset(null); }}>
            Fund Again
          </button>
        </div>
      );
    }

    return (
      <div className="fund-sidebar">
        <div className="fund-sidebar-title">Fund This Project</div>
        <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:32, color:'var(--lime)', lineHeight:1 }}>
          ${Math.round(raised/1000)}K
        </div>
        <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', marginTop:2 }}>
          of ${Math.round(goal/1000)}K goal
        </div>
        <div className="fund-bar-track">
          <div className="fund-bar-fill-v" style={{ width:pct+'%' }} />
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)' }}>
          <span>{pct}% funded</span>
          <span>{project.funding&&project.funding.sources&&project.funding.sources.length||0} backers</span>
        </div>

        <div style={{ height:1, background:'var(--border)', margin:'20px 0' }} />

        <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:6 }}>
          Your Contribution ($K)
        </div>
        <input className="fund-amount-input" type="number" min="0.1" step="0.5"
          placeholder="e.g. 5"
          value={amount}
          onChange={function(e){ setAmount(e.target.value); setPreset(null); }}
          onMouseEnter={function(){ document.body.classList.add('hov'); }}
          onMouseLeave={function(){ document.body.classList.remove('hov'); }}
        />
        <div className="fund-presets">
          {[1,5,10,25].map(function(v) {
            return (
              <button key={v} className={'fund-preset'+(preset===v?' on':'')}
                onMouseEnter={function(){ document.body.classList.add('hov'); }}
                onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                onClick={function(){ selectPreset(v); }}>
                ${v}K
              </button>
            );
          })}
        </div>
        <button className="btn btn-v" style={{ width:'100%', justifyContent:'center', padding:'13px' }}
          disabled={funding}
          onMouseEnter={function(){ document.body.classList.add('hov'); }}
          onMouseLeave={function(){ document.body.classList.remove('hov'); }}
          onClick={handleFund}>
          {funding ? 'Processing…' : '💚 Fund This Project'}
        </button>
        <div style={{ marginTop:10, fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)', textAlign:'center' }}>
          Free to contribute · Secure · Transparent
        </div>
      </div>
    );
  }

  function ProjectDetailPage() {
    var params = window.UserRouter.getParams();
    var id     = params.id;

    var _project  = useState(null);  var project = _project[0], setProject = _project[1];
    var _loading  = useState(true);  var loading = _loading[0], setLoading = _loading[1];
    var _tab      = useState('overview'); var tab = _tab[0], setTab = _tab[1];
    var _arOpen   = useState(false);  var arOpen = _arOpen[0], setArOpen = _arOpen[1];
    var _raised   = useState(0);      var raised = _raised[0], setRaised = _raised[1];
    var _arStatus = useState(null);   var arStatus = _arStatus[0], setArStatus = _arStatus[1];
    var _generating3D = useState(false); var generating3D = _generating3D[0], setGenerating3D = _generating3D[1];
    var pollRef   = React.useRef(null);

    function startGenerate3D() {
      if (!window.AuthState || !window.AuthState.isLoggedIn()) {
        window.showUserToast('Sign in to generate 3D', 'rose');
        return;
      }
      setGenerating3D(true);
      window.ApiClient.post('/projects/'+id+'/generate-3d', {}).then(function() {
        setArStatus(function(s){ return Object.assign({}, s, { status:'ar_processing', processingStage:'ai_transform', progress:0, modelUrl:null }); });
        window.showUserToast('Meshy is building your 3D model…', 'violet');
      }).catch(function(e) {
        window.showUserToast(e.message || 'Failed to start 3D generation', 'rose');
      }).finally(function(){ setGenerating3D(false); });
    }

    useEffect(function() {
      if (!id) { window.navigate('projects'); return; }
      setLoading(true);
      Promise.all([
        window.ApiClient.get('/projects/'+id),
        window.ApiClient.get('/projects/'+id+'/ar-status').catch(function(){ return null; }),
      ]).then(function(results) {
        var p = results[0];
        var s = results[1];
        setProject(p);
        setRaised(p.funding && p.funding.raised || 0);
        setArStatus(s || { status: p.status, processingStage: p.ar && p.ar.processingStage, progress: p.ar && p.ar.progress || 0 });
        setLoading(false);
      }).catch(function(){ setLoading(false); window.navigate('projects'); });
    }, [id]);

    // Poll while enhancing image or generating 3D
    useEffect(function() {
      if (!id || !arStatus) return;
      var busy = arStatus.processingStage === 'enhancing' || arStatus.status === 'ar_processing';
      if (!busy) { clearInterval(pollRef.current); return; }

      pollRef.current = setInterval(function() {
        window.ApiClient.get('/projects/'+id+'/ar-status').then(function(s) {
          setArStatus(s);
          if (s.processingStage === 'enhanced' && arStatus.processingStage === 'enhancing') {
            window.showUserToast('Vision enhanced — ready for 3D!', 'lime');
            window.ApiClient.get('/projects/'+id).then(function(p){ setProject(p); }).catch(function(){});
          }
          if (s.status !== 'ar_processing' && s.modelUrl) {
            clearInterval(pollRef.current);
            window.showUserToast('3D model ready — view in AR! 🚀', 'lime');
            window.ApiClient.get('/projects/'+id).then(function(p){ setProject(p); }).catch(function(){});
          }
          if (s.status !== 'ar_processing' && arStatus.status === 'ar_processing' && !s.modelUrl && s.processingStage === 'enhanced') {
            clearInterval(pollRef.current);
            window.showUserToast(s.meshyError || '3D generation failed — try again', 'rose');
          }
        }).catch(function(){});
      }, 4000);
      return function() { clearInterval(pollRef.current); };
    }, [id, arStatus && arStatus.processingStage, arStatus && arStatus.status]);

    function onFunded(amt) {
      setRaised(function(r){ return r + amt; });
    }

    if (loading) {
      return (
        <div className="user-screen">
          <div style={{ padding:'80px 64px', textAlign:'center', fontFamily:'DM Mono,monospace', fontSize:11, color:'var(--text-faint)', letterSpacing:'.1em' }}>LOADING PROJECT…</div>
        </div>
      );
    }
    if (!project) return null;

    var emoji     = EMOJIS[Math.abs(id.charCodeAt(0) - 48) % EMOJIS.length];
    var goal      = project.funding && project.funding.goal || 1;
    var pct       = Math.min(100, Math.round((raised/goal)*100));
    var statusLabel = STATUS_LABEL[project.status] || project.status;
    var statusColor = STATUS_COLOR[project.status] || 'dim';

    return (
      <div className="user-screen">
        <div className="pg-hero" style={{ paddingBottom:0 }}>
          <button className="back-btn"
            onMouseEnter={function(){ document.body.classList.add('hov'); }}
            onMouseLeave={function(){ document.body.classList.remove('hov'); }}
            onClick={function(){ window.navBack(); }}>
            ← Back to Projects
          </button>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
            <span className={'chip '+( statusColor==='teal'?'c-c':statusColor==='amber'?'c-a':'c-d')}>{statusLabel}</span>
            <span style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)' }}>
              {project.zone && project.zone.toUpperCase()} · {project.location&&project.location.district||'—'}
            </span>
          </div>
          <h1 style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:'clamp(32px,4vw,56px)', letterSpacing:'.03em', color:'var(--text)', margin:'0 0 8px' }}>{project.title}</h1>
          <div style={{ fontFamily:'DM Mono,monospace', fontSize:11, color:'var(--text-faint)' }}>
            Submitted by <span style={{ color:'var(--violet)' }}>{project.submittedBy&&project.submittedBy.name||'—'}</span>
            {project.submittedBy&&project.submittedBy.role && <span> · {project.submittedBy.role}</span>}
          </div>
        </div>

        <div className="pg-body">
          <div className="proj-detail-layout">
            {/* Left — detail */}
            <div>
              {/* Visual */}
              <div className="proj-detail-visual">
                <div style={{ fontSize:110 }}>{emoji}</div>
                <div className="proj-detail-visual-overlay" />
                <div className="proj-detail-visual-badge">
                  <span className={'chip '+( statusColor==='teal'?'c-c':statusColor==='amber'?'c-a':'c-d')}>{statusLabel}</span>
                  {project.ar && project.ar.views > 0 && (
                    <span className="chip c-v">👁 {project.ar.views.toLocaleString()} views</span>
                  )}
                </div>
              </div>

              {/* Tabs */}
              <div className="proj-detail-tab-bar">
                {['overview','funding','ar view'].map(function(t) {
                  return (
                    <button key={t} className={'proj-detail-tab'+(tab===t?' on':'')}
                      onMouseEnter={function(){ document.body.classList.add('hov'); }}
                      onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                      onClick={function(){ setTab(t); }}>
                      {t}
                    </button>
                  );
                })}
              </div>

              {/* Overview tab */}
              {tab === 'overview' && (
                <div style={{ animation:'pg-in .25s ease both' }}>
                  {project.description && (
                    <p style={{ fontSize:15, color:'var(--text-dim)', lineHeight:1.75, marginBottom:24 }}>{project.description}</p>
                  )}
                  {project.vision && (
                    <div style={{ background:'oklch(0.18 0.03 295 / 0.3)', border:'1px solid oklch(0.35 0.1 295 / 0.4)', borderRadius:12, padding:'16px 20px', marginBottom:20 }}>
                      <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--violet)', marginBottom:8 }}>✦ Vision Prompt</div>
                      <div style={{ fontSize:14, color:'var(--text)', fontStyle:'italic' }}>"{project.vision}"</div>
                    </div>
                  )}
                  <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(160px, 1fr))', gap:12 }}>
                    {[
                      { label:'AI Score',     val: project.aiScore ? project.aiScore+'/100' : '—',    color:'var(--violet)' },
                      { label:'AR Views',     val: (project.ar&&project.ar.views||0).toLocaleString(), color:'var(--cyan)'   },
                      { label:'Zone',         val: project.zone ? project.zone.charAt(0).toUpperCase()+project.zone.slice(1) : '—', color:'var(--amber)' },
                      { label:'Status',       val: statusLabel,                                        color:'var(--lime)'   },
                    ].map(function(s) {
                      return (
                        <div key={s.label} style={{ background:'var(--bg-raised)', border:'1px solid var(--border)', borderRadius:10, padding:'14px 16px' }}>
                          <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:6 }}>{s.label}</div>
                          <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:22, color:s.color }}>{s.val}</div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* Funding tab */}
              {tab === 'funding' && (
                <div style={{ animation:'pg-in .25s ease both' }}>
                  <div style={{ marginBottom:20 }}>
                    <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                      <span style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:36, color:'var(--lime)' }}>${Math.round(raised/1000)}K</span>
                      <span style={{ fontFamily:'DM Mono,monospace', fontSize:11, color:'var(--text-faint)', alignSelf:'flex-end', paddingBottom:6 }}>of ${Math.round(goal/1000)}K goal</span>
                    </div>
                    <div className="fund-bar-track">
                      <div className="fund-bar-fill-v" style={{ width:pct+'%' }} />
                    </div>
                    <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)', marginTop:6 }}>{pct}% funded</div>
                  </div>
                  {project.funding && project.funding.sources && project.funding.sources.length > 0 && (
                    <div>
                      <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--text-faint)', marginBottom:10 }}>Funding Sources</div>
                      <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                        {project.funding.sources.map(function(s) {
                          return <span key={s} className={'chip '+(s==='government'?'c-c':s==='business'?'c-l':'c-v')}>{s}</span>;
                        })}
                      </div>
                    </div>
                  )}
                </div>
              )}

              {/* AR View tab */}
              {tab === 'ar view' && (
                <div style={{ animation:'pg-in .25s ease both' }}>
                  {arStatus && arStatus.modelUrl ? (
                    /* ── Real 3D model from Meshy ─────────────────────────── */
                    <div>
                      <div className="ar-model-header">
                        <span className="ar-live-badge"><span className="ar-pulse-dot" />3D MODEL LIVE</span>
                        <span style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)' }}>
                          Tap the AR button inside the viewer to place at {project.location&&project.location.district||'location'}
                        </span>
                      </div>
                      {arStatus.enhancedPhotoUrl && (
                        <div style={{ marginBottom:14 }}>
                          <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--violet)', marginBottom:8 }}>✦ AI-Enhanced Vision</div>
                          <img src={arStatus.enhancedPhotoUrl} alt="Enhanced vision" style={{ width:'100%', maxHeight:220, objectFit:'cover', borderRadius:12, border:'1px solid var(--border)' }} />
                        </div>
                      )}
                      <ModelViewer src={arStatus.modelUrl} iosSrc={arStatus.usdzUrl || null} alt={project.title} />
                      <div className="ar-model-footer">
                        <div className="ar-model-hint">
                          <span style={{ fontSize:18 }}>📱</span>
                          <div>
                            <div style={{ fontSize:13, color:'var(--text)', fontWeight:500, marginBottom:3 }}>Place in the Real World</div>
                            <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)' }}>
                              On Android tap the AR icon · On iPhone tap AR Quick Look
                            </div>
                          </div>
                        </div>
                        <div className="ar-model-actions">
                          <a href={arStatus.modelUrl} download className="btn btn-o" style={{ padding:'8px 18px', fontSize:11, textDecoration:'none' }}
                            onMouseEnter={function(){ document.body.classList.add('hov'); }}
                            onMouseLeave={function(){ document.body.classList.remove('hov'); }}>
                            ↓ Download GLB
                          </a>
                          {arStatus.usdzUrl && (
                            <a href={arStatus.usdzUrl} rel="ar" className="btn btn-v" style={{ padding:'8px 18px', fontSize:11, textDecoration:'none' }}
                              onMouseEnter={function(){ document.body.classList.add('hov'); }}
                              onMouseLeave={function(){ document.body.classList.remove('hov'); }}>
                              👁 AR Quick Look
                            </a>
                          )}
                        </div>
                      </div>
                    </div>
                  ) : arStatus && arStatus.processingStage === 'enhancing' ? (
                    /* ── Step 1: Enhancing image ───────────────────────────── */
                    <div className="ar-pipeline-state">
                      {arStatus.photoUrl && (
                        <img src={arStatus.photoUrl} alt="Original" style={{ width:'100%', maxHeight:200, objectFit:'cover', borderRadius:12, marginBottom:16, border:'1px solid var(--border)', opacity:0.7 }} />
                      )}
                      <div className="ar-pipeline-anim">
                        <div className="ar-pipeline-ring" />
                        <span style={{ fontSize:40, position:'relative', zIndex:2 }}>✨</span>
                      </div>
                      <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:26, color:'var(--text)', marginBottom:8 }}>Enhancing Your Vision</div>
                      <p style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)', maxWidth:360, margin:'0 auto 20px', lineHeight:1.7 }}>
                        Meshy AI is transforming your photo based on your prompt. This takes about 30–90 seconds.
                      </p>
                      <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--text-faint)' }}>This page auto-updates when ready</div>
                    </div>
                  ) : arStatus && arStatus.status === 'ar_processing' ? (
                    /* ── Step 2: Generating 3D ─────────────────────────────── */
                    <div className="ar-pipeline-state">
                      {arStatus.enhancedPhotoUrl && (
                        <img src={arStatus.enhancedPhotoUrl} alt="Enhanced" style={{ width:'100%', maxHeight:180, objectFit:'cover', borderRadius:12, marginBottom:16, border:'1px solid oklch(0.35 0.1 295 / 0.5)' }} />
                      )}
                      <div className="ar-pipeline-anim">
                        <div className="ar-pipeline-ring" />
                        <span style={{ fontSize:40, position:'relative', zIndex:2 }}>🏗</span>
                      </div>
                      <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:26, color:'var(--text)', marginBottom:8 }}>Building 3D Model</div>
                      <p style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)', maxWidth:360, margin:'0 auto 20px', lineHeight:1.7 }}>
                        Meshy is generating a textured 3D model from your enhanced vision. This takes 2–5 minutes.
                      </p>
                      <div className="ar-progress-wrap">
                        <div className="ar-progress-track">
                          <div className="ar-progress-fill" style={{ width:(arStatus.progress||0)+'%' }} />
                        </div>
                        <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--violet)', marginTop:6 }}>
                          GENERATING 3D · {arStatus.progress||0}%
                        </div>
                      </div>
                    </div>
                  ) : arStatus && (arStatus.enhancedPhotoUrl || arStatus.canGenerate3D) ? (
                    /* ── Step 1 done — show enhanced image + 3D button ─────── */
                    <div style={{ background:'oklch(0.14 0.03 295 / 0.5)', border:'1px solid oklch(0.35 0.1 295 / 0.4)', borderRadius:14, padding:'28px', textAlign:'center' }}>
                      <div style={{ fontFamily:'DM Mono,monospace', fontSize:9, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--lime)', marginBottom:12 }}>✓ Vision Enhanced</div>
                      <div style={{ display:'grid', gridTemplateColumns: arStatus.photoUrl ? '1fr 1fr' : '1fr', gap:12, marginBottom:20, textAlign:'left' }}>
                        {arStatus.photoUrl && (
                          <div>
                            <div style={{ fontFamily:'DM Mono,monospace', fontSize:8, color:'var(--text-faint)', marginBottom:6 }}>ORIGINAL</div>
                            <img src={arStatus.photoUrl} alt="Before" style={{ width:'100%', height:160, objectFit:'cover', borderRadius:10, border:'1px solid var(--border)' }} />
                          </div>
                        )}
                        <div>
                          <div style={{ fontFamily:'DM Mono,monospace', fontSize:8, color:'var(--violet)', marginBottom:6 }}>AI ENHANCED</div>
                          <img src={arStatus.enhancedPhotoUrl || arStatus.photoUrl} alt="After" style={{ width:'100%', height:160, objectFit:'cover', borderRadius:10, border:'1px solid oklch(0.35 0.1 295 / 0.5)' }} />
                        </div>
                      </div>
                      <p style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)', maxWidth:380, margin:'0 auto 20px', lineHeight:1.7 }}>
                        Your vision has been enhanced. Click below when you're ready to generate the 3D AR model.
                      </p>
                      {window.AuthState && window.AuthState.isLoggedIn() && (
                        <button className="btn btn-v" style={{ padding:'12px 28px', fontSize:12 }}
                          disabled={generating3D}
                          onMouseEnter={function(){ document.body.classList.add('hov'); }}
                          onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                          onClick={startGenerate3D}>
                          {generating3D ? 'Starting…' : '🏗 Generate 3D Model'}
                        </button>
                      )}
                      {arStatus.meshyError && (
                        <div style={{ marginTop:12, fontFamily:'DM Mono,monospace', fontSize:9, color:'var(--rose)' }}>{arStatus.meshyError}</div>
                      )}
                    </div>
                  ) : (
                    /* ── Not started ───────────────────────────────────────── */
                    <div style={{ background:'oklch(0.14 0.03 295 / 0.5)', border:'1px solid oklch(0.35 0.1 295 / 0.4)', borderRadius:14, padding:'40px', textAlign:'center' }}>
                      <div style={{ fontSize:48, marginBottom:16 }}>🏙</div>
                      <div style={{ fontFamily:'Bebas Neue,sans-serif', fontSize:22, color:'var(--text)', marginBottom:8 }}>Vision Not Ready</div>
                      <p style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)', maxWidth:340, margin:'0 auto 16px' }}>
                        {arStatus && arStatus.enhanceError
                          ? arStatus.enhanceError
                          : 'Submit a project with a photo and vision prompt to start the AI pipeline.'}
                      </p>
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* Right — fund sidebar */}
            <FundSidebar project={Object.assign({}, project, { funding: Object.assign({}, project.funding, { raised: raised }) })} onFunded={onFunded} />
          </div>
        </div>

        {/* AR Preview Modal */}
        {arOpen && (
          <div className="ar-preview-overlay" onClick={function(e){ if(e.target===e.currentTarget) setArOpen(false); }}>
            <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">{emoji}</div>
                <div style={{ position:'relative', zIndex:2, fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-dim)', letterSpacing:'.08em' }}>
                  {project.location&&project.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 }}>{project.title}</div>
                    <div style={{ fontFamily:'DM Mono,monospace', fontSize:10, color:'var(--text-faint)' }}>
                      👁 {(project.ar&&project.ar.views||0).toLocaleString()} live views · {statusLabel}
                    </div>
                  </div>
                  <button className="btn btn-o" style={{ padding:'8px 18px', fontSize:11 }}
                    onMouseEnter={function(){ document.body.classList.add('hov'); }}
                    onMouseLeave={function(){ document.body.classList.remove('hov'); }}
                    onClick={function(){ setArOpen(false); }}>
                    ✕ Close
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

  window.UserProjectDetailPage = ProjectDetailPage;
})();