/* ============================================================
 * Developer · Findings (replaces the misplaced AuditView) +
 * Readiness, Hedera Monitor, Documents/Buyers/Issuance stubs.
 *
 * The findings view is READ-ONLY: developers see CAPs raised
 * against their project and can post a response + attach
 * evidence. They CANNOT sample or sign off.
 * ============================================================ */

function FindingsView({ projects, hero, onOpenProject }) {
  // Hero project has the seeded findings; other projects are clean.
  const heroFindings = FINDINGS.map(f => ({ ...f, projectId: hero.id, projectName: hero.name }));
  const [selectedId, setSelectedId] = React.useState(heroFindings[0].id);
  const [responses, setResponses] = React.useState({});
  const [draft, setDraft] = React.useState('');

  const selected = heroFindings.find(f => f.id === selectedId);
  const submitResponse = () => {
    if (!draft.trim()) return;
    setResponses(r => ({ ...r, [selectedId]: [...(r[selectedId]||[]), { who:'Grace K.', when:'just now', body: draft }] }));
    setDraft('');
  };

  return (
    <main style={{flex:1, padding:'28px 32px', background:'#F9FAFB', minWidth:0}}>
      <div style={{marginBottom:24}}>
        <div style={{fontSize:11, fontWeight:800, letterSpacing:'0.12em', textTransform:'uppercase', color:'#F4C300', marginBottom:4}}>
          Trust · Read-only
        </div>
        <h1 style={{fontSize:28, fontWeight:900, color:'#022C28', letterSpacing:'-0.02em', margin:0, lineHeight:1.1}}>
          VVB findings &amp; change requests
        </h1>
        <p style={{fontSize:14, color:'#6B7280', margin:'6px 0 0', maxWidth:720, lineHeight:1.55}}>
          Findings raised by your assigned VVB auditor across your projects. You can post a response and attach evidence —
          sampling, anomaly adjudication, and validation sign-off are VVB-only actions.
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'320px 1fr', gap:18}}>
        {/* List */}
        <div>
          <div style={{display:'flex', gap:8, marginBottom:10}}>
            <span style={{fontSize:11, fontWeight:800, color:'#9CA3AF', letterSpacing:'0.1em', textTransform:'uppercase'}}>Open ({heroFindings.filter(f=>f.status==='open').length})</span>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            {heroFindings.map(f => (
              <FindingListItem key={f.id} finding={f} active={selectedId===f.id} onClick={()=>setSelectedId(f.id)} respCount={(responses[f.id]||[]).length}/>
            ))}
          </div>

          <div style={{marginTop:14, padding:14, background:'#fff', border:'1px solid #E5E7EB', borderRadius:10}}>
            <div style={{fontSize:11, fontWeight:800, color:'#9CA3AF', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:6}}>Other projects</div>
            <div style={{fontSize:12, color:'#022C28', lineHeight:1.5}}>No open findings across your other {projects.length - 1} projects.</div>
            <div style={{fontSize:11, color:'#6B7280', marginTop:4}}>Last reviewed: 13 Mar 2026</div>
          </div>
        </div>

        {/* Detail */}
        <div>
          {selected && <FindingDetail finding={selected} responses={responses[selected.id]||[]} draft={draft} setDraft={setDraft} onSubmit={submitResponse} onOpenProject={()=>onOpenProject(hero)} project={hero}/>}
        </div>
      </div>
    </main>
  );
}

function FindingListItem({ finding, active, onClick, respCount }) {
  const sev = {
    major:       { fg:'#991B1B', dot:'#DC2626', lbl:'MAJOR' },
    minor:       { fg:'#92400E', dot:'#D97706', lbl:'MINOR' },
    observation: { fg:'#0C4A6E', dot:'#0077B6', lbl:'OBS' },
  }[finding.severity];
  return (
    <button onClick={onClick} style={{
      width:'100%', textAlign:'left',
      background: active ? '#FFF8E0' : '#fff',
      border: active ? '1.5px solid #F4C300' : '1px solid #E5E7EB',
      borderRadius:10, padding:'12px 14px', cursor:'pointer', fontFamily:'inherit',
      transition:'all 150ms',
    }}>
      <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:5}}>
        <span style={{width:8, height:8, borderRadius:'50%', background:sev.dot}}/>
        <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:10, fontWeight:800, color:sev.fg, letterSpacing:'0.04em'}}>{finding.id} · {sev.lbl}</span>
        {finding.cap && <span style={{marginLeft:'auto', fontSize:9, fontWeight:800, color:'#7C5104', letterSpacing:'0.06em', background:'#FFF8E0', padding:'2px 6px', borderRadius:4}}>CAP {finding.capDueDays}d</span>}
      </div>
      <div style={{fontSize:13, fontWeight:800, color:'#022C28', lineHeight:1.35, marginBottom:4}}>{finding.title}</div>
      <div style={{fontSize:11, color:'#6B7280', display:'flex', justifyContent:'space-between'}}>
        <span>{finding.raised}</span>
        {respCount > 0 && <span style={{color:'#059669', fontWeight:700}}>{respCount} response{respCount>1?'s':''}</span>}
      </div>
    </button>
  );
}

function FindingDetail({ finding, responses, draft, setDraft, onSubmit, project, onOpenProject }) {
  const sev = {
    major:       { bg:'#FEE2E2', bd:'#FCA5A5', fg:'#991B1B', label:'MAJOR' },
    minor:       { bg:'#FEF3C7', bd:'#FDE68A', fg:'#92400E', label:'MINOR' },
    observation: { bg:'#E8F4FC', bd:'#BAE0F7', fg:'#0C4A6E', label:'OBSERVATION' },
  }[finding.severity];
  return (
    <div style={{background:'#fff', border:'1px solid #E5E7EB', borderRadius:10, overflow:'hidden'}}>
      <div style={{padding:'22px 26px', background:sev.bg, borderBottom:`1.5px solid ${sev.bd}`}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:14}}>
          <div>
            <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:8}}>
              <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:10, fontWeight:800, color:sev.fg, letterSpacing:'0.06em', padding:'3px 8px', background:'rgba(255,255,255,0.7)', borderRadius:6}}>
                {finding.id} · {sev.label}
              </span>
              {finding.cap && <span style={{fontSize:10, fontWeight:800, color:'#7C5104', letterSpacing:'0.06em', padding:'3px 8px', background:'#FFF8E0', borderRadius:6}}>CAP · DUE IN {finding.capDueDays} DAYS</span>}
            </div>
            <h2 style={{fontSize:20, fontWeight:900, color:'#022C28', margin:0, letterSpacing:'-0.01em'}}>{finding.title}</h2>
            <div style={{fontSize:12, color:'#4B5563', marginTop:6}}>
              Raised <b>{finding.raised}</b> by <b>{finding.by}</b> · against <a href="#" onClick={(e)=>{e.preventDefault(); onOpenProject();}} style={{color:'#B8960A', fontWeight:700, textDecoration:'none'}}>{project.name}</a>
            </div>
          </div>
        </div>
      </div>

      <div style={{padding:'22px 26px'}}>
        <div style={{fontSize:10, fontWeight:800, textTransform:'uppercase', letterSpacing:'0.12em', color:'#9CA3AF', marginBottom:6}}>Finding</div>
        <div style={{fontSize:14, color:'#022C28', lineHeight:1.6, marginBottom:24}}>{finding.detail}</div>

        {finding.requiresResponse && (
          <div style={{marginBottom:24, padding:'14px 16px', background:'#FFF8E0', border:'1px solid #FDE68A', borderRadius:10, display:'flex', alignItems:'center', gap:12}}>
            <PamojaIcon name="alert" size={16} color="#B8960A" stroke={1.8}/>
            <div style={{fontSize:13, color:'#7C5104', lineHeight:1.5}}>
              <b>Response required.</b> Post a response, attach evidence, then mark this CAP as <i>Addressed</i> to return it to the VVB queue.
            </div>
          </div>
        )}

        {/* Response thread */}
        <div style={{fontSize:10, fontWeight:800, textTransform:'uppercase', letterSpacing:'0.12em', color:'#9CA3AF', marginBottom:10}}>Response thread</div>

        {responses.length === 0 && (
          <div style={{
            border:'1.5px dashed #E5E7EB', borderRadius:10, padding:'20px 16px',
            textAlign:'center', background:'#FAFAFA', marginBottom:14,
            fontSize:12, color:'#6B7280',
          }}>No responses yet — you haven't replied to this finding.</div>
        )}

        {responses.map((r,i) => (
          <div key={i} style={{display:'flex', gap:12, marginBottom:14, padding:'12px 14px', background:'#F9FAFB', borderRadius:10, border:'1px solid #F3F4F6'}}>
            <div style={{width:32, height:32, borderRadius:'50%', background:'#022C28', color:'#F4C300', display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:900, flexShrink:0}}>GK</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:4}}>
                <span style={{fontSize:13, fontWeight:800, color:'#022C28'}}>{r.who}</span>
                <span style={{fontSize:11, color:'#9CA3AF'}}>{r.when}</span>
              </div>
              <div style={{fontSize:13, color:'#022C28', lineHeight:1.5}}>{r.body}</div>
            </div>
          </div>
        ))}

        {/* Compose */}
        <div style={{marginTop:18, border:'1.5px solid #E5E7EB', borderRadius:10, padding:14, background:'#fff'}}>
          <textarea
            value={draft}
            onChange={(e)=>setDraft(e.target.value)}
            placeholder="Write a response — explain what you've done, attach evidence, or request clarification…"
            style={{
              width:'100%', minHeight:90, border:'none', outline:'none',
              fontFamily:'inherit', fontSize:13, resize:'vertical', color:'#022C28',
            }}/>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:10, paddingTop:10, borderTop:'1px dashed #F3F4F6'}}>
            <button style={{
              background:'transparent', border:'1px solid #E5E7EB', borderRadius:8,
              padding:'6px 12px', fontSize:11, fontWeight:700, color:'#022C28',
              cursor:'pointer', fontFamily:'inherit',
              display:'inline-flex', alignItems:'center', gap:6,
            }}>
              <PamojaIcon name="upload" size={12} stroke={2} color="#022C28"/>
              Attach evidence
            </button>
            <div style={{display:'flex', gap:8}}>
              <Btn kind="secondary" style={{minHeight:36, padding:'6px 14px', fontSize:12}}>Save draft</Btn>
              <Btn kind="primary" onClick={onSubmit} style={{minHeight:36, padding:'6px 14px', fontSize:12}}>Post response</Btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
 * Readiness view (developer-appropriate gap report)
 * ============================================================ */

function ReadinessView({ projects, hero, onOpenProject }) {
  return (
    <main style={{flex:1, padding:'28px 32px', background:'#F9FAFB', minWidth:0}}>
      <div style={{marginBottom:24}}>
        <div style={{fontSize:11, fontWeight:800, letterSpacing:'0.12em', textTransform:'uppercase', color:'#F4C300', marginBottom:4}}>
          Compliance
        </div>
        <h1 style={{fontSize:28, fontWeight:900, color:'#022C28', letterSpacing:'-0.02em', margin:0, lineHeight:1.1}}>VVB Readiness</h1>
        <p style={{fontSize:14, color:'#6B7280', margin:'6px 0 0', maxWidth:720, lineHeight:1.55}}>
          Weighted readiness across the five compliance phases. Close the gaps below before your VVB starts desk review.
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:20}}>
        <div style={{display:'flex', flexDirection:'column', gap:16}}>
          {projects.map(p => <ReadinessRow key={p.id} project={p} onOpen={()=>onOpenProject(p)}/>)}
        </div>
        <aside>
          <div style={{background:'#fff', border:'1px solid #E5E7EB', borderRadius:10, padding:20}}>
            <div style={{fontSize:11, fontWeight:800, textTransform:'uppercase', letterSpacing:'0.1em', color:'#9CA3AF', marginBottom:10}}>Weighting</div>
            {[
              { p:'Phase 1', l:'Eligibility', w:'20%' },
              { p:'Phase 2', l:'PDD',         w:'25%' },
              { p:'Phase 3', l:'Validation',  w:'25%' },
              { p:'Phase 4', l:'Monitoring',  w:'20%' },
              { p:'Phase 5', l:'Issuance',    w:'10%' },
            ].map((r,i) => (
              <div key={i} style={{display:'flex', justifyContent:'space-between', padding:'8px 0', borderBottom:i<4 ? '1px dashed #F3F4F6' : 'none'}}>
                <div>
                  <div style={{fontSize:13, fontWeight:700, color:'#022C28'}}>{r.p}</div>
                  <div style={{fontSize:11, color:'#6B7280'}}>{r.l}</div>
                </div>
                <span style={{fontSize:14, fontWeight:900, color:'#F4C300', letterSpacing:'-0.01em'}}>{r.w}</span>
              </div>
            ))}
          </div>
        </aside>
      </div>
    </main>
  );
}

function ReadinessRow({ project, onOpen }) {
  const tier = project.vvb >= 90 ? { label:'Validation-ready', color:'#059669', bg:'#E6FBF3' }
             : project.vvb >= 75 ? { label:'Nearly ready', color:'#059669', bg:'#E6FBF3' }
             : project.vvb >= 50 ? { label:'In progress', color:'#D97706', bg:'#FEF3C7' }
             :                     { label:'Early stage', color:'#6B7280', bg:'#F3F4F6' };
  return (
    <div onClick={onOpen} style={{
      background:'#fff', border:'1px solid #E5E7EB', borderRadius:10, padding:'18px 22px',
      cursor:'pointer', transition:'border-color 150ms, box-shadow 150ms',
    }}
    onMouseEnter={e=>{ e.currentTarget.style.borderColor='#F4C300'; e.currentTarget.style.boxShadow='0 8px 30px rgba(0,0,0,0.06)'; }}
    onMouseLeave={e=>{ e.currentTarget.style.borderColor='#E5E7EB'; e.currentTarget.style.boxShadow='none'; }}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:14, marginBottom:12}}>
        <div style={{minWidth:0, flex:1}}>
          <div style={{display:'flex', alignItems:'center', gap:10, flexWrap:'wrap', marginBottom:6, lineHeight:1.25}}>
            <h3 style={{fontSize:15, fontWeight:900, color:'#022C28', margin:0, letterSpacing:'-0.01em', lineHeight:1.25}}>{project.name}</h3>
            <Badge variant={project.registryVariant} mono>{project.registry}</Badge>
          </div>
          <div style={{fontSize:11, color:'#6B7280', lineHeight:1.4}}>
            <span style={{fontFamily:'JetBrains Mono, monospace'}}>{project.id}</span> · Phase {project.phase} · {project.location}
          </div>
        </div>
        <div style={{textAlign:'right', flexShrink:0}}>
          <div style={{fontSize:28, fontWeight:900, color:'#022C28', letterSpacing:'-0.02em', lineHeight:1}}>
            {project.vvb}<span style={{fontSize:13, color:'#6B7280', fontWeight:600}}>/100</span>
          </div>
          <div style={{display:'inline-block', fontSize:10, fontWeight:800, letterSpacing:'0.06em', textTransform:'uppercase', color:tier.color, background:tier.bg, padding:'2px 8px', borderRadius:9999, marginTop:6, whiteSpace:'nowrap'}}>{tier.label}</div>
        </div>
      </div>
      <div style={{height:6, background:'#F3F4F6', borderRadius:9999, overflow:'hidden'}}>
        <div style={{height:'100%', background: project.vvb>=75 ? '#2BC48A' : project.vvb>=50 ? '#F4C300' : '#9CA3AF', width:`${project.vvb}%`, transition:'width 400ms'}}/>
      </div>
    </div>
  );
}

/* ============================================================
 * Hedera Monitor (read-only audit trail)
 * ============================================================ */

function HederaMonitor({ projects }) {
  return (
    <main style={{flex:1, padding:'28px 32px', background:'#F9FAFB', minWidth:0}}>
      <div style={{marginBottom:24}}>
        <div style={{fontSize:11, fontWeight:800, letterSpacing:'0.12em', textTransform:'uppercase', color:'#F4C300', marginBottom:4}}>
          Trust · Read-only
        </div>
        <h1 style={{fontSize:28, fontWeight:900, color:'#022C28', letterSpacing:'-0.02em', margin:0, lineHeight:1.1}}>Hedera Monitor</h1>
        <p style={{fontSize:14, color:'#6B7280', margin:'6px 0 0', maxWidth:720, lineHeight:1.55}}>
          Every confirm / commit / sign-off on your projects is anchored to Hedera Consensus Service topic <span style={{fontFamily:'JetBrains Mono, monospace'}}>0.0.8321350</span>.
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:24}}>
        <StatCard label="Anchors total" value="1,247" sub="Across 6 projects" accent="#7C5CFC" icon="hedera"/>
        <StatCard label="Last 24 hrs"   value="38"    sub="Avg 1.6 per hour"    accent="#2BC48A" icon="check"/>
        <StatCard label="Topic"         value="0.0.8321350" sub="Hedera testnet" accent="#F4C300" icon="hedera"/>
        <StatCard label="Latency"       value="3.4s"  sub="Avg to consensus"   accent="#0077B6" icon="clock"/>
      </div>

      <div style={{background:'#022C28', borderRadius:10, padding:'22px 26px', color:'#fff', marginBottom:24}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:14}}>
          <div>
            <div style={{fontSize:11, fontWeight:800, letterSpacing:'0.12em', textTransform:'uppercase', color:'#F4C300', marginBottom:2}}>Live feed</div>
            <h2 style={{fontSize:18, fontWeight:900, margin:0}}>Recent anchors</h2>
          </div>
          <div style={{display:'inline-flex', alignItems:'center', gap:6, fontSize:11, fontFamily:'JetBrains Mono, monospace', color:'#2BC48A', padding:'4px 10px', background:'rgba(43,196,138,0.12)', borderRadius:6}}>
            <span style={{width:6, height:6, borderRadius:'50%', background:'#2BC48A', animation:'p-pulse 1.6s infinite'}}/>
            Streaming
          </div>
        </div>
        <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:12, lineHeight:1.8, color:'rgba(255,255,255,0.85)'}}>
          {HEDERA_EVENTS.map((e,i) => (
            <div key={i} style={{display:'grid', gridTemplateColumns:'130px 1fr 140px', gap:14, padding:'6px 0', borderBottom: i<HEDERA_EVENTS.length-1 ? '1px dashed rgba(255,255,255,0.08)' : 'none'}}>
              <span style={{color:'rgba(255,255,255,0.4)'}}>{e.t}</span>
              <span><span style={{color:'#F4C300'}}>{e.actor}</span> {e.action}</span>
              <span style={{color:'#B894FF', textAlign:'right'}}>{e.tx}</span>
            </div>
          ))}
        </div>
      </div>

      <PreviewBanner tone="gray">
        <b>Read-only.</b> The Hedera Monitor never accepts writes — anchoring happens via the platform's commit pipeline. Use the <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:12}}>HashScan</span> link on any TX ID to verify externally.
      </PreviewBanner>
    </main>
  );
}

/* ============================================================
 * Stub views — Documents, Buyers, Issuance, Phase nav fallback.
 * ============================================================ */

function DocumentsView({ projects }) {
  return (
    <main style={{flex:1, padding:'28px 32px', background:'#F9FAFB', minWidth:0}}>
      <h1 style={{fontSize:28, fontWeight:900, color:'#022C28', letterSpacing:'-0.02em', margin:'0 0 6px'}}>Documents</h1>
      <p style={{fontSize:14, color:'#6B7280', margin:'0 0 24px'}}>PDDs, monitoring reports, FPIC records, tenure docs — all hashed and anchored on upload.</p>
      <PreviewBanner>
        <b>Preview surface · existing behaviour.</b> The Documents tab is functional in production; not in this design pass.
      </PreviewBanner>
      <div style={{marginTop:18, display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14}}>
        {projects.slice(0,3).map(p => (
          <div key={p.id} style={{background:'#fff', border:'1px solid #E5E7EB', borderRadius:10, padding:18}}>
            <div style={{fontSize:13, fontWeight:800, color:'#022C28', marginBottom:4}}>{p.name}</div>
            <div style={{fontSize:11, color:'#6B7280', marginBottom:14}}>{p.documents} documents · {Math.round(p.documents * 0.4)} pending review</div>
            {[
              { name:'PDD v3.2.pdf', sz:'2.4 MB', hash:'1c7e…' },
              { name:'Baseline study.pdf', sz:'8.1 MB', hash:'a3f9…' },
              { name:'FPIC records.zip', sz:'24.7 MB', hash:'b71d…' },
            ].map((d,i) => (
              <div key={i} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0', borderTop:i?'1px dashed #F3F4F6':'none'}}>
                <PamojaIcon name="document" size={14} color="#9CA3AF" stroke={1.6}/>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:12, fontWeight:700, color:'#022C28', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{d.name}</div>
                  <div style={{fontSize:10, color:'#6B7280', fontFamily:'JetBrains Mono, monospace'}}>{d.sz} · sha256:{d.hash}</div>
                </div>
                <PamojaIcon name="external" size={12} color="#B8960A" stroke={2}/>
              </div>
            ))}
          </div>
        ))}
      </div>
    </main>
  );
}

function BuyersView({ projects }) {
  return (
    <main style={{flex:1, padding:'28px 32px', background:'#F9FAFB', minWidth:0}}>
      <h1 style={{fontSize:28, fontWeight:900, color:'#022C28', letterSpacing:'-0.02em', margin:'0 0 6px'}}>Credit buyers</h1>
      <p style={{fontSize:14, color:'#6B7280', margin:'0 0 24px'}}>Buyers who have purchased or retired credits from your portfolio.</p>
      <PreviewBanner tone="blue">
        <b>Preview surface · buyer flow is on the roadmap.</b> The data below is illustrative.
      </PreviewBanner>
      <div style={{marginTop:18, background:'#fff', border:'1px solid #E5E7EB', borderRadius:10, padding:24}}>
        <SectionHeader eyebrow="Active" title="Top buyers — last 90 days"/>
        <div style={{marginTop:14}}>
          {[
            { name:'Microsoft Climate Innovation Fund', region:'United States', credits:8400, retired:8400 },
            { name:'Frontier Climate', region:'Multi-national', credits:4200, retired:0 },
            { name:'Klimax DAO', region:'Singapore', credits:1800, retired:1800 },
          ].map((b,i) => (
            <div key={i} style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 0', borderTop: i?'1px dashed #F3F4F6':'none'}}>
              <div>
                <div style={{fontSize:14, fontWeight:800, color:'#022C28'}}>{b.name}</div>
                <div style={{fontSize:11, color:'#6B7280'}}>{b.region}</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{fontSize:14, fontWeight:800, color:'#022C28'}}>{b.credits.toLocaleString()} tCO2e</div>
                <div style={{fontSize:11, color: b.retired === b.credits ? '#059669' : '#B8960A'}}>{b.retired ? `${b.retired.toLocaleString()} retired` : 'Pending retirement'}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </main>
  );
}

function IssuanceView({ projects }) {
  const totalIssued = projects.reduce((s,p)=>s+p.credits, 0);
  return (
    <main style={{flex:1, padding:'28px 32px', background:'#F9FAFB', minWidth:0}}>
      <h1 style={{fontSize:28, fontWeight:900, color:'#022C28', letterSpacing:'-0.02em', margin:'0 0 6px'}}>Issuance</h1>
      <p style={{fontSize:14, color:'#6B7280', margin:'0 0 24px'}}>Verified credits available for sale or retirement across your portfolio.</p>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14, marginBottom:24}}>
        <StatCard label="Total issued"  value={totalIssued.toLocaleString()} sub="Lifetime, all projects" accent="#F4C300" icon="check"/>
        <StatCard label="Available"     value={projects.reduce((s,p)=>s+p.available,0).toLocaleString()} sub="On Pamoja marketplace" accent="#2BC48A" icon="plus"/>
        <StatCard label="Retired"       value={(totalIssued - projects.reduce((s,p)=>s+p.available,0)).toLocaleString()} sub="Buyer claims" accent="#0077B6" icon="shield"/>
      </div>
      <div style={{background:'#fff', border:'1px solid #E5E7EB', borderRadius:10, overflow:'hidden'}}>
        <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
          <thead>
            <tr style={{background:'#F9FAFB', borderBottom:'1px solid #E5E7EB'}}>
              <th style={{textAlign:'left', padding:'12px 16px', fontSize:10, fontWeight:800, color:'#9CA3AF', letterSpacing:'0.1em', textTransform:'uppercase'}}>Project</th>
              <th style={{textAlign:'left', padding:'12px 16px', fontSize:10, fontWeight:800, color:'#9CA3AF', letterSpacing:'0.1em', textTransform:'uppercase'}}>Vintage</th>
              <th style={{textAlign:'right', padding:'12px 16px', fontSize:10, fontWeight:800, color:'#9CA3AF', letterSpacing:'0.1em', textTransform:'uppercase'}}>Issued</th>
              <th style={{textAlign:'right', padding:'12px 16px', fontSize:10, fontWeight:800, color:'#9CA3AF', letterSpacing:'0.1em', textTransform:'uppercase'}}>Available</th>
              <th style={{textAlign:'right', padding:'12px 16px', fontSize:10, fontWeight:800, color:'#9CA3AF', letterSpacing:'0.1em', textTransform:'uppercase'}}>Retired</th>
            </tr>
          </thead>
          <tbody>
            {projects.filter(p=>p.credits>0).map(p => (
              <tr key={p.id} style={{borderBottom:'1px solid #F3F4F6'}}>
                <td style={{padding:'14px 16px'}}>
                  <div style={{fontWeight:800, color:'#022C28'}}>{p.name}</div>
                  <div style={{fontSize:11, color:'#6B7280', fontFamily:'JetBrains Mono, monospace'}}>{p.id}</div>
                </td>
                <td style={{padding:'14px 16px', color:'#022C28'}}>2025</td>
                <td style={{padding:'14px 16px', textAlign:'right', fontWeight:700, color:'#022C28'}}>{p.credits.toLocaleString()}</td>
                <td style={{padding:'14px 16px', textAlign:'right', fontWeight:700, color:'#B8960A'}}>{p.available.toLocaleString()}</td>
                <td style={{padding:'14px 16px', textAlign:'right', fontWeight:700, color:'#059669'}}>{(p.credits - p.available).toLocaleString()}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </main>
  );
}

window.FindingsView = FindingsView;
window.ReadinessView = ReadinessView;
window.HederaMonitor = HederaMonitor;
window.DocumentsView = DocumentsView;
window.BuyersView = BuyersView;
window.IssuanceView = IssuanceView;