// ── Shared helpers ──────────────────────────────────────────────
const fmt = (n, prefix='£') => `${prefix}${n >= 1e6 ? (n/1e6).toFixed(2)+'M' : n >= 1e3 ? (n/1e3).toFixed(0)+'k' : n}`;

const StatCard = ({ label, value, sub, color='var(--gold)', glow=false }) => (
  <div className="glass" style={{ padding: '20px 22px', flex: 1, minWidth: 0,
    ...(glow ? { animation: 'glow-pulse 3s ease-in-out infinite', boxShadow: '0 0 20px rgba(201,168,76,0.15)' } : {}) }}>
    <div style={{ fontFamily: "'JetBrains Mono'", fontSize: 9, letterSpacing:'0.28em', color:'var(--text3)', textTransform:'uppercase', marginBottom: 10 }}>{label}</div>
    <div style={{ fontFamily: "'JetBrains Mono'", fontSize: 26, fontWeight: 600, color, lineHeight:1 }}>{value}</div>
    {sub && <div style={{ fontFamily: "'JetBrains Mono'", fontSize: 10, color:'var(--text3)', marginTop: 8 }}>{sub}</div>}
  </div>
);

const SectionHeader = ({ title, sub }) => (
  <div style={{ marginBottom: 24 }}>
    <div style={{ fontFamily: "'JetBrains Mono'", fontSize: 10, letterSpacing: '0.3em', color:'var(--gold)', textTransform:'uppercase', marginBottom: 6 }}>
      {title}
    </div>
    {sub && <div style={{ fontSize: 12, color: 'var(--text3)', letterSpacing:'0.05em' }}>{sub}</div>}
  </div>
);

// ── Inner Circle ─────────────────────────────────────────────────
const InnerCircle = () => {
  const [time, setTime] = React.useState(new Date());
  React.useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  const pad = n => String(n).padStart(2,'0');
  const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  const timeStr = `${pad(time.getHours())}:${pad(time.getMinutes())}:${pad(time.getSeconds())} UTC`;
  const dateStr = `${days[time.getDay()]}, ${time.getDate()} ${months[time.getMonth()]} ${time.getFullYear()}`;
  const hour = time.getHours();
  const greeting = hour < 12 ? 'Good Morning' : hour < 17 ? 'Good Afternoon' : 'Good Evening';

  const protocols = [
    { label: 'NETWORK PROTOCOL', status: 'SECURE', ok: true },
    { label: 'INTELLIGENCE FEED', status: 'ACTIVE', ok: true },
    { label: 'VAULT ACCESS', status: 'AUTHORISED', ok: true },
    { label: 'ORACLE STREAM', status: 'LIVE', ok: true },
    { label: 'FINANCIAL SYNC', status: 'UPDATED', ok: true },
    { label: 'SHADOW OPS', status: 'STANDBY', ok: null },
  ];

  const snapLedger = [
    { label: 'Net Worth', value: '£2.47M', delta: '+12.3%' },
    { label: 'Monthly Rev', value: '£47.2k', delta: '+8.1%' },
    { label: 'Capital Vel.', value: '94.4%', delta: 'vs target' },
  ];
  const snapVault = [
    { name: 'THE PM AGENCY', status: 'ACTIVE', progress: 88 },
    { name: 'CIPHER HUB', status: 'LIVE', progress: 61 },
    { name: 'NEXUS VENTURES', status: 'ACTIVE', progress: 74 },
  ];

  return (
    <div style={{ padding: '32px 36px', overflowY: 'auto', height: '100%' }}>
      {/* Welcome */}
      <div className="glass stagger-1" style={{ padding: '28px 32px', marginBottom: 24, borderColor: 'rgba(201,168,76,0.15)' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', flexWrap:'wrap', gap:16 }}>
          <div>
            <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.3em', color:'var(--text3)', textTransform:'uppercase', marginBottom:10 }}>Command Center</div>
            <div style={{ fontFamily:"'Playfair Display', Georgia, serif", fontSize:30, fontWeight:700, color:'var(--text)', marginBottom:6 }}>
              {greeting}, Director.
            </div>
            <div style={{ fontFamily:"'JetBrains Mono'", fontSize:11, color:'var(--text3)', lineHeight:1.8 }}>
              3 Intelligence Briefings await clearance.<br/>
              All systems nominal. Shadow Protocols on standby.
            </div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontFamily:"'JetBrains Mono'", fontSize:10, color:'var(--text3)', letterSpacing:'0.12em' }}>{dateStr}</div>
          </div>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginBottom:20 }}>
        {/* System Health */}
        <div className="glass stagger-2" style={{ padding:'24px' }}>
          <SectionHeader title="System Health" sub="Protocol status — all channels"/>
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {protocols.map((p,i) => (
              <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center',
                paddingBottom: 10, borderBottom: i < protocols.length-1 ? '1px solid rgba(255,255,255,0.04)' : 'none' }}>
                <div style={{ fontFamily:"'JetBrains Mono'", fontSize:10, letterSpacing:'0.12em', color:'var(--text2)' }}>{p.label}</div>
                <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                  <div style={{ width:6, height:6, borderRadius:'50%',
                    background: p.ok === true ? 'var(--green)' : p.ok === false ? 'var(--red)' : 'var(--amber)',
                    boxShadow: p.ok === true ? '0 0 6px rgba(76,175,130,0.8)' : p.ok === null ? '0 0 6px rgba(224,163,64,0.8)' : '0 0 6px rgba(224,82,82,0.8)',
                    animation: 'pulse-dot 2s ease-in-out infinite',
                    animationDelay: `${i*0.3}s` }}/>
                  <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.18em',
                    color: p.ok === true ? 'var(--green)' : p.ok === null ? 'var(--amber)' : 'var(--red)' }}>{p.status}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Key Metrics */}
        <div className="glass stagger-2" style={{ padding:'24px' }}>
          <SectionHeader title="Ledger Snapshot" sub="Financial overview — live sync"/>
          <div style={{ display:'flex', flexDirection:'column', gap:12, marginBottom:20 }}>
            {snapLedger.map((s,i) => (
              <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center',
                paddingBottom:12, borderBottom: i<snapLedger.length-1?'1px solid rgba(255,255,255,0.04)':'none' }}>
                <div style={{ fontFamily:"'JetBrains Mono'", fontSize:10, color:'var(--text3)', letterSpacing:'0.1em' }}>{s.label}</div>
                <div style={{ display:'flex', gap:12, alignItems:'baseline' }}>
                  <div style={{ fontFamily:"'JetBrains Mono'", fontSize:14, fontWeight:600, color:'var(--text)' }}>{s.value}</div>
                  <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--green)' }}>{s.delta}</div>
                </div>
              </div>
            ))}
          </div>
          <SectionHeader title="Vault Snapshot" sub="Active project status"/>
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {snapVault.map((p,i) => (
              <div key={i}>
                <div style={{ display:'flex', justifyContent:'space-between', marginBottom:5 }}>
                  <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--text2)', letterSpacing:'0.1em' }}>{p.name}</div>
                  <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--green)' }}>{p.progress}%</div>
                </div>
                <div style={{ height:3, background:'rgba(255,255,255,0.06)', borderRadius:2, overflow:'hidden' }}>
                  <div style={{ height:'100%', width:`${p.progress}%`, background:'linear-gradient(90deg, var(--gold), #E5C671)',
                    borderRadius:2, transition:'width 1s ease' }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Quick stats row */}
      <div className="stagger-3" style={{ display:'flex', gap:16 }}>
        <StatCard label="Active Protocols" value="12" sub="2 pending review" glow/>
        <StatCard label="Intelligence Briefs" value="03" sub="Awaiting clearance" color="var(--blue)"/>
        <StatCard label="Threat Index" value="LOW" sub="Landscape nominal" color="var(--green)"/>
        <StatCard label="Opportunity Score" value="8.4" sub="↑ 1.2 vs last week" color="var(--gold)"/>
      </div>
    </div>
  );
};

// ── Oracle Stream ────────────────────────────────────────────────
const OracleStream = () => {
  const WORKER = 'https://cipher-oracle.amarcal.workers.dev';

  const [view, setView] = React.useState('today');
  const [briefings, setBriefings] = React.useState([]);
  const [bookmarks, setBookmarks] = React.useState([]);
  const [archiveDates, setArchiveDates] = React.useState([]);
  const [archiveDate, setArchiveDate] = React.useState(null);
  const [status, setStatus] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [sourceFilter, setSourceFilter] = React.useState(null);
  const [evaluating, setEvaluating] = React.useState(null);
  const [evalModal, setEvalModal] = React.useState(null);
  const [implementing, setImplementing] = React.useState(false);
  const [implementedIds, setImplementedIds] = React.useState({});
  const evalCache = React.useRef({});

  const bookmarkMap = React.useMemo(() => {
    const m = {};
    bookmarks.forEach(bm => { m[bm.id] = bm.bookmark_id; });
    return m;
  }, [bookmarks]);

  React.useEffect(() => {
    fetch(`${WORKER}/api/status`).then(r => r.json()).then(setStatus).catch(() => {});
    fetch(`${WORKER}/api/bookmarks`).then(r => r.json()).then(d => setBookmarks(d.bookmarks || [])).catch(() => {});
  }, []);

  React.useEffect(() => {
    setError(null);
    setSourceFilter(null);
    if (view === 'bookmarks') { setLoading(false); return; }
    if (view === 'archive' && !archiveDate) {
      setLoading(true);
      fetch(`${WORKER}/api/archive`)
        .then(r => r.json())
        .then(d => { setArchiveDates(d.weeks || []); setBriefings([]); setLoading(false); })
        .catch(e => { setError(e.message); setLoading(false); });
      return;
    }
    const url = view === 'today' ? `${WORKER}/api/briefings` : `${WORKER}/api/briefings?date=${archiveDate}`;
    setLoading(true);
    fetch(url)
      .then(r => r.json())
      .then(d => { setBriefings(d.briefings || []); setLoading(false); })
      .catch(e => { setError(e.message); setLoading(false); });
  }, [view, archiveDate]);

  const toggleBookmark = async (briefingId) => {
    const bmId = bookmarkMap[briefingId];
    if (bmId) {
      await fetch(`${WORKER}/api/bookmarks/${bmId}`, { method: 'DELETE' }).catch(() => {});
      setBookmarks(prev => prev.filter(b => b.bookmark_id !== bmId));
    } else {
      const r = await fetch(`${WORKER}/api/bookmarks`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ briefing_id: briefingId }),
      }).catch(() => null);
      if (!r) return;
      const d = await r.json();
      const src = briefings.find(b => b.id === briefingId) || bookmarks.find(b => b.id === briefingId);
      if (src) setBookmarks(prev => [...prev, { ...src, bookmark_id: d.id }]);
    }
  };

  const handleEvaluate = async (briefing) => {
    if (evalCache.current[briefing.id]) {
      setEvalModal({ briefing, result: evalCache.current[briefing.id] });
      return;
    }
    setEvaluating(briefing.id);
    try {
      const r = await fetch(`${WORKER}/api/evaluate`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ briefing }),
      });
      const data = await r.json();
      if (data.error) throw new Error(data.error);
      evalCache.current[briefing.id] = data;
      setEvalModal({ briefing, result: data });
    } catch (e) {
      alert('Evaluation failed: ' + e.message);
    } finally {
      setEvaluating(null);
    }
  };

  const handleImplement = async () => {
    if (!evalModal || implementing) return;
    setImplementing(true);
    try {
      const r = await fetch(`${WORKER}/api/implement`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ briefing: evalModal.briefing, evaluation: evalModal.result }),
      });
      const data = await r.json();
      if (data.error) throw new Error(data.error);
      setImplementedIds(prev => ({ ...prev, [evalModal.briefing.id]: data.task_url }));
      setEvalModal(null);
    } catch (e) {
      alert('Task creation failed: ' + e.message);
    } finally {
      setImplementing(false);
    }
  };

  const allItems = view === 'bookmarks' ? bookmarks : briefings;
  const displayItems = sourceFilter ? allItems.filter(b => b.source_type === sourceFilter) : allItems;
  const opportunities = displayItems.filter(b => b.tag === 'Opportunity').length;
  const threats = displayItems.filter(b => b.tag === 'Threat').length;
  const ytCount = displayItems.filter(b => b.source_type === 'youtube').length;
  const sourceTypes = React.useMemo(() => {
    const types = new Set(allItems.map(b => b.source_type || 'rss'));
    return Array.from(types).sort();
  }, [allItems]);
  const lastSync = status?.last_run?.completed_at
    ? new Date(status.last_run.completed_at).toLocaleTimeString('en-GB', { hour:'2-digit', minute:'2-digit', timeZone:'UTC' }) + ' UTC'
    : null;

  const tagColors = (tag) => {
    if (tag === 'Opportunity') return { bg:'rgba(76,175,130,0.1)', border:'rgba(76,175,130,0.3)', color:'var(--green)' };
    if (tag === 'Threat') return { bg:'rgba(224,82,82,0.1)', border:'rgba(224,82,82,0.3)', color:'var(--red)' };
    return { bg:'rgba(255,255,255,0.05)', border:'rgba(255,255,255,0.1)', color:'var(--text3)' };
  };

  const scoreColor = (n) => n >= 8 ? 'var(--gold)' : n >= 5 ? 'var(--blue)' : 'var(--text3)';
  const scoreBg   = (n) => n >= 8 ? 'rgba(201,168,76,0.1)' : n >= 5 ? 'rgba(79,195,247,0.08)' : 'rgba(255,255,255,0.04)';
  const scoreBorder = (n) => n >= 8 ? 'rgba(201,168,76,0.3)' : n >= 5 ? 'rgba(79,195,247,0.2)' : 'rgba(255,255,255,0.08)';

  const bizPill = (level) => {
    if (level === 'High')   return { color:'var(--green)', border:'rgba(76,175,130,0.3)',  bg:'rgba(76,175,130,0.08)' };
    if (level === 'Medium') return { color:'var(--amber)', border:'rgba(224,163,64,0.3)',  bg:'rgba(224,163,64,0.08)' };
    return null;
  };

  const showCards = !loading && (view !== 'archive' || archiveDate);

  return (
    <div style={{ padding:'32px 36px', overflowY:'auto', height:'100%' }}>
      {/* Header */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', flexWrap:'wrap', gap:16, marginBottom:28 }}>
        <div className="stagger-1">
          <div style={{ fontFamily:"'Playfair Display',Georgia,serif", fontSize:26, fontWeight:700, color:'var(--text)' }}>The Oracle Stream</div>
          <div style={{ fontFamily:"'JetBrains Mono'", fontSize:10, color:'var(--text3)', marginTop:6 }}>
            {loading ? 'Syncing...' : `${displayItems.length} briefings${lastSync ? ' · Last sync ' + lastSync : ''}`}
          </div>
        </div>
        <div style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
          {[
            { key:'today', label:'Today' },
            { key:'bookmarks', label:`Saved (${bookmarks.length})` },
            { key:'archive', label:'Archive' },
          ].map(({ key, label }) => (
            <button key={key} onClick={() => { setView(key); setArchiveDate(null); }}
              style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.15em', textTransform:'uppercase',
                padding:'6px 12px', cursor:'pointer', borderRadius:3, border:'1px solid',
                borderColor: view === key ? 'rgba(79,195,247,0.4)' : 'rgba(255,255,255,0.1)',
                background: view === key ? 'rgba(79,195,247,0.08)' : 'transparent',
                color: view === key ? 'var(--blue)' : 'var(--text3)' }}>
              {label}
            </button>
          ))}
          <div style={{ display:'flex', alignItems:'center', gap:7, padding:'6px 12px',
            background:'rgba(79,195,247,0.06)', border:'1px solid rgba(79,195,247,0.2)', borderRadius:3 }}>
            <div style={{ width:5, height:5, borderRadius:'50%', background:'var(--blue)', animation:'pulse-dot 1.5s ease-in-out infinite' }}/>
            <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.2em', color:'var(--blue)' }}>LIVE</span>
          </div>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 260px', gap:20 }}>
        {/* Main feed */}
        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>

          {/* Archive date list */}
          {view === 'archive' && !archiveDate && !loading && (
            <div className="glass" style={{ padding:'22px' }}>
              <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.28em', color:'var(--gold)', marginBottom:14 }}>SELECT DATE</div>
              {archiveDates.length === 0
                ? <div style={{ fontSize:12, color:'var(--text3)' }}>No archived briefings yet.</div>
                : archiveDates.map((d, i) => (
                  <div key={i} onClick={() => setArchiveDate(d.run_date)}
                    style={{ display:'flex', justifyContent:'space-between', alignItems:'center', cursor:'pointer',
                      padding:'10px 0', borderBottom: i < archiveDates.length-1 ? '1px solid rgba(255,255,255,0.04)' : 'none',
                      transition:'opacity 0.15s' }}
                    onMouseEnter={e => e.currentTarget.style.opacity='0.65'}
                    onMouseLeave={e => e.currentTarget.style.opacity='1'}>
                    <span style={{ fontFamily:"'JetBrains Mono'", fontSize:11, color:'var(--text)' }}>{d.run_date}</span>
                    <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--text3)' }}>{d.count} briefings</span>
                  </div>
                ))
              }
            </div>
          )}

          {/* Back button when browsing archive date */}
          {view === 'archive' && archiveDate && (
            <button onClick={() => setArchiveDate(null)}
              style={{ alignSelf:'flex-start', fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.15em',
                padding:'6px 12px', background:'transparent', border:'1px solid rgba(255,255,255,0.1)',
                color:'var(--text3)', cursor:'pointer', borderRadius:3 }}>
              back to dates
            </button>
          )}

          {/* Loading */}
          {loading && (
            <div className="glass" style={{ padding:'44px', textAlign:'center' }}>
              <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.28em', color:'var(--text3)',
                animation:'pulse-dot 1.5s ease-in-out infinite' }}>SYNCING FEED...</div>
            </div>
          )}

          {/* Error */}
          {error && (
            <div className="glass" style={{ padding:'20px', borderColor:'rgba(224,82,82,0.3)' }}>
              <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--red)' }}>FEED ERROR — {error}</div>
            </div>
          )}

          {/* Empty state */}
          {showCards && !error && displayItems.length === 0 && (
            <div className="glass" style={{ padding:'44px', textAlign:'center' }}>
              <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.25em', color:'var(--text3)' }}>
                {view === 'bookmarks' ? 'NO SAVED BRIEFINGS' : 'NO BRIEFINGS YET'}
              </div>
            </div>
          )}

          {/* Briefing cards */}
          {showCards && displayItems.map((b) => {
            const tc = tagColors(b.tag);
            const isBookmarked = !!bookmarkMap[b.id];
            const isPriority = b.is_priority === 1;
            const bizPills = [
              { label:'PPL', value: b.ppl_nation },
              { label:'AITT', value: b.aitt },
              { label:'FORGE', value: b.forge_am },
              { label:'GHL', value: b.ghl },
            ].filter(p => bizPill(p.value));

            return (
              <div key={b.id || b.bookmark_id} className="glass"
                style={{ padding:'20px 22px', position:'relative', transition:'border-color 0.2s',
                  borderColor: isPriority ? 'rgba(201,168,76,0.2)' : 'var(--border)',
                  boxShadow: isPriority ? '0 0 20px rgba(201,168,76,0.04)' : 'none' }}
                onMouseEnter={e => e.currentTarget.style.borderColor='rgba(79,195,247,0.25)'}
                onMouseLeave={e => e.currentTarget.style.borderColor=isPriority ? 'rgba(201,168,76,0.2)' : 'var(--border)'}>

                {isPriority && (
                  <div style={{ position:'absolute', top:0, left:0, right:0, height:2,
                    background:'linear-gradient(90deg, var(--gold), transparent)', borderRadius:'8px 8px 0 0' }}/>
                )}

                {/* Top row */}
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10, gap:8 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
                    {/* Score */}
                    <div style={{ width:26, height:26, borderRadius:4, display:'flex', alignItems:'center', justifyContent:'center',
                      fontFamily:"'JetBrains Mono'", fontSize:11, fontWeight:700,
                      color: scoreColor(b.relevance_score), background: scoreBg(b.relevance_score),
                      border: `1px solid ${scoreBorder(b.relevance_score)}` }}>
                      {b.relevance_score}
                    </div>
                    {/* Tag */}
                    <div style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.18em',
                      padding:'3px 8px', borderRadius:2,
                      background: tc.bg, border:`1px solid ${tc.border}`, color: tc.color }}>
                      {(b.tag || 'NEUTRAL').toUpperCase()}
                    </div>
                    {/* Source type */}
                    <div style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.12em',
                      padding:'3px 7px', borderRadius:2,
                      background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.08)', color:'var(--text3)' }}>
                      {(b.source_type || 'rss').toUpperCase()}
                    </div>
                  </div>
                  <div style={{ display:'flex', alignItems:'center', gap:10, flexShrink:0 }}>
                    <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--text3)' }}>{b.source_name}</span>
                    <button onClick={() => toggleBookmark(b.id)}
                      style={{ background:'none', border:'none', cursor:'pointer', padding:'2px 4px',
                        color: isBookmarked ? 'var(--gold)' : 'rgba(255,255,255,0.2)',
                        fontSize:16, lineHeight:1, transition:'color 0.2s' }}
                      title={isBookmarked ? 'Remove saved' : 'Save'}>
                      {isBookmarked ? '★' : '☆'}
                    </button>
                  </div>
                </div>

                {/* Title */}
                <a href={b.original_url} target="_blank" rel="noreferrer"
                  style={{ display:'block', fontFamily:"'Inter'", fontWeight:600, fontSize:14,
                    color:'var(--text)', marginBottom:8, lineHeight:1.4, textDecoration:'none',
                    transition:'color 0.15s' }}
                  onMouseEnter={e => e.target.style.color='var(--blue)'}
                  onMouseLeave={e => e.target.style.color='var(--text)'}>
                  {b.title}
                </a>

                {/* Summary */}
                <div style={{ fontSize:12, color:'var(--text2)', lineHeight:1.75, marginBottom: bizPills.length ? 12 : 0 }}>
                  {b.summary}
                </div>

                {/* Business pills */}
                {bizPills.length > 0 && (
                  <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom: 12 }}>
                    {bizPills.map(p => {
                      const ps = bizPill(p.value);
                      return (
                        <span key={p.label} style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.1em',
                          padding:'2px 7px', borderRadius:2,
                          background: ps.bg, border:`1px solid ${ps.border}`, color: ps.color }}>
                          {p.label} {p.value.toUpperCase()}
                        </span>
                      );
                    })}
                  </div>
                )}

                {/* Action bar */}
                <div style={{ display:'flex', justifyContent:'flex-end', alignItems:'center', gap:8,
                  paddingTop: bizPills.length ? 0 : 8, marginTop: bizPills.length ? 0 : 4,
                  borderTop:'1px solid rgba(255,255,255,0.04)' }}>
                  {implementedIds[b.id] && (
                    <a href={implementedIds[b.id]} target="_blank" rel="noreferrer"
                      style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.12em',
                        color:'var(--gold)', textDecoration:'none',
                        padding:'3px 8px', borderRadius:2,
                        background:'rgba(201,168,76,0.08)', border:'1px solid rgba(201,168,76,0.25)' }}>
                      QUEUED IN CLICKUP ↗
                    </a>
                  )}
                  <button
                    onClick={() => handleEvaluate(b)}
                    disabled={evaluating === b.id}
                    style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.14em',
                      padding:'4px 10px', borderRadius:2, cursor: evaluating === b.id ? 'default' : 'pointer',
                      border:'1px solid rgba(79,195,247,0.2)',
                      background: evaluating === b.id ? 'rgba(79,195,247,0.04)' : 'transparent',
                      color: evaluating === b.id ? 'rgba(79,195,247,0.4)' : 'rgba(79,195,247,0.6)',
                      transition:'all 0.15s',
                      animation: evaluating === b.id ? 'pulse-dot 1.5s ease-in-out infinite' : 'none' }}>
                    {evaluating === b.id ? 'EVALUATING...' : evalCache.current[b.id] ? '⚡ RE-EVALUATE' : '⚡ EVALUATE'}
                  </button>
                </div>
              </div>
            );
          })}
        </div>

        {/* Evaluation Modal */}
        {evalModal && (() => {
          const { briefing, result } = evalModal;
          const typeConfig = {
            build:      { label:'BUILD',      color:'var(--gold)',  border:'rgba(201,168,76,0.3)',  bg:'rgba(201,168,76,0.06)' },
            strategic:  { label:'STRATEGIC',  color:'var(--blue)',  border:'rgba(79,195,247,0.3)',  bg:'rgba(79,195,247,0.06)' },
            tech_stack: { label:'TECH STACK', color:'var(--amber)', border:'rgba(224,163,64,0.3)', bg:'rgba(224,163,64,0.06)' },
          }[result.type] || { label:'UNKNOWN', color:'var(--text3)', border:'rgba(255,255,255,0.1)', bg:'transparent' };

          return (
            <div style={{ position:'fixed', inset:0, zIndex:60, display:'flex', alignItems:'center', justifyContent:'center',
              background:'rgba(0,0,0,0.75)', backdropFilter:'blur(8px)', animation:'fadeIn 0.2s ease-out' }}
              onClick={(e) => { if (e.target === e.currentTarget) setEvalModal(null); }}>
              <div className="glass" style={{ width:600, maxHeight:'82vh', overflowY:'auto', borderRadius:10,
                borderColor: typeConfig.border,
                boxShadow:`0 0 60px rgba(0,0,0,0.6), 0 0 30px ${typeConfig.border}`,
                animation:'slideInUp 0.3s ease-out', padding:'32px' }}>

                {/* Header */}
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:20 }}>
                  <div>
                    <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:10 }}>
                      <span style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.2em',
                        padding:'3px 10px', borderRadius:2,
                        background: typeConfig.bg, border:`1px solid ${typeConfig.border}`, color: typeConfig.color }}>
                        {typeConfig.label}
                      </span>
                      <span style={{ fontFamily:"'JetBrains Mono'", fontSize:8, color:'var(--text3)', letterSpacing:'0.1em' }}>
                        ORACLE IMPLEMENT
                      </span>
                    </div>
                    <div style={{ fontFamily:"'Inter'", fontSize:16, fontWeight:600, color:'var(--text)', lineHeight:1.4 }}>
                      {result.headline}
                    </div>
                  </div>
                  <button onClick={() => setEvalModal(null)}
                    style={{ background:'none', border:'none', color:'var(--text3)', fontSize:18, cursor:'pointer', padding:4, flexShrink:0 }}>
                    ✕
                  </button>
                </div>

                {/* Source */}
                <div style={{ fontSize:11, color:'var(--text3)', marginBottom:16, paddingBottom:16,
                  borderBottom:'1px solid rgba(255,255,255,0.06)' }}>
                  {briefing.source_name} — {briefing.title}
                </div>

                {/* Why */}
                <div style={{ marginBottom:20 }}>
                  <div style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.2em', color: typeConfig.color,
                    textTransform:'uppercase', marginBottom:8 }}>Why This Matters</div>
                  <div style={{ fontSize:12, color:'var(--text2)', lineHeight:1.75 }}>{result.why}</div>
                </div>

                {/* Plan */}
                <div style={{ background:'rgba(255,255,255,0.02)', border:'1px solid rgba(255,255,255,0.06)',
                  borderRadius:6, padding:'20px', marginBottom:20 }}>
                  <div style={{ fontSize:12, color:'var(--text2)', lineHeight:1.75, marginBottom:16 }}>{result.plan?.summary}</div>

                  {result.plan?.steps?.length > 0 && (
                    <div style={{ marginBottom:16 }}>
                      <div style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.18em', color:'var(--text3)',
                        textTransform:'uppercase', marginBottom:10 }}>Steps</div>
                      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                        {result.plan.steps.map((s, i) => (
                          <div key={i} style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
                            <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color: typeConfig.color,
                              flexShrink:0, marginTop:1 }}>{i + 1}.</span>
                            <span style={{ fontSize:12, color:'var(--text2)', lineHeight:1.6 }}>{s}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  <div style={{ display:'flex', gap:20, flexWrap:'wrap' }}>
                    {result.plan?.estimated_effort && (
                      <div>
                        <div style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.15em', color:'var(--text3)',
                          textTransform:'uppercase', marginBottom:4 }}>Effort</div>
                        <div style={{ fontFamily:"'JetBrains Mono'", fontSize:11, color:'var(--text)' }}>{result.plan.estimated_effort}</div>
                      </div>
                    )}
                    {result.plan?.affected_systems?.length > 0 && (
                      <div>
                        <div style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.15em', color:'var(--text3)',
                          textTransform:'uppercase', marginBottom:4 }}>Systems</div>
                        <div style={{ fontFamily:"'JetBrains Mono'", fontSize:11, color:'var(--text)' }}>
                          {result.plan.affected_systems.join(', ')}
                        </div>
                      </div>
                    )}
                  </div>

                  {result.plan?.risks && result.plan.risks !== 'null' && (
                    <div style={{ marginTop:14, paddingTop:14, borderTop:'1px solid rgba(255,255,255,0.05)' }}>
                      <div style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.15em', color:'var(--amber)',
                        textTransform:'uppercase', marginBottom:4 }}>Risks</div>
                      <div style={{ fontSize:11, color:'var(--text3)', lineHeight:1.6 }}>{result.plan.risks}</div>
                    </div>
                  )}
                </div>

                {/* CTA */}
                <div style={{ display:'flex', gap:10, justifyContent:'flex-end' }}>
                  {result.type === 'build' ? (
                    <>
                      <button onClick={() => setEvalModal(null)}
                        style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.12em',
                          padding:'8px 16px', borderRadius:3, cursor:'pointer',
                          border:'1px solid rgba(255,255,255,0.1)', background:'transparent', color:'var(--text3)' }}>
                        REJECT
                      </button>
                      <button onClick={handleImplement} disabled={implementing}
                        style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.12em',
                          padding:'8px 20px', borderRadius:3, cursor: implementing ? 'default' : 'pointer',
                          border:'1px solid rgba(201,168,76,0.4)',
                          background: implementing ? 'rgba(201,168,76,0.06)' : 'rgba(201,168,76,0.12)',
                          color: implementing ? 'rgba(201,168,76,0.5)' : 'var(--gold)',
                          transition:'all 0.15s' }}>
                        {implementing ? 'QUEUING...' : 'APPROVE — QUEUE IN CLICKUP'}
                      </button>
                    </>
                  ) : (
                    <button onClick={() => setEvalModal(null)}
                      style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.12em',
                        padding:'8px 20px', borderRadius:3, cursor:'pointer',
                        border:`1px solid ${typeConfig.border}`,
                        background: typeConfig.bg,
                        color: typeConfig.color }}>
                      GOT IT
                    </button>
                  )}
                </div>
              </div>
            </div>
          );
        })()}

        {/* Sidebar */}
        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          <div className="glass stagger-2" style={{ padding:'20px' }}>
            <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.28em', color:'var(--gold)', textTransform:'uppercase', marginBottom:14 }}>
              Intercept Stats
            </div>
            {[
              ['Briefings', displayItems.length],
              ['Opportunities', opportunities],
              ['Threats', threats],
              ['YouTube', ytCount],
              ['RSS / Web', displayItems.length - ytCount],
              ['Saved', bookmarks.length],
            ].map(([k, v], i) => (
              <div key={i} style={{ display:'flex', justifyContent:'space-between', paddingBottom:8, marginBottom:8,
                borderBottom: i < 5 ? '1px solid rgba(255,255,255,0.04)' : 'none' }}>
                <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--text3)' }}>{k}</span>
                <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--text)' }}>{v}</span>
              </div>
            ))}
          </div>

          <div className="glass" style={{ padding:'20px' }}>
            <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.28em', color:'var(--gold)', textTransform:'uppercase', marginBottom:12 }}>
              Source Filter
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              <button onClick={() => setSourceFilter(null)}
                style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.08em',
                  padding:'6px 10px', borderRadius:3, border:'1px solid', cursor:'pointer',
                  borderColor: !sourceFilter ? 'rgba(79,195,247,0.4)' : 'rgba(255,255,255,0.1)',
                  background: !sourceFilter ? 'rgba(79,195,247,0.1)' : 'transparent',
                  color: !sourceFilter ? 'var(--blue)' : 'var(--text3)',
                  transition:'all 0.15s' }}>
                all sources
              </button>
              {sourceTypes.map(type => (
                <button key={type} onClick={() => setSourceFilter(type)}
                  style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.08em',
                    padding:'6px 10px', borderRadius:3, border:'1px solid', cursor:'pointer',
                    borderColor: sourceFilter === type ? 'rgba(201,168,76,0.4)' : 'rgba(255,255,255,0.1)',
                    background: sourceFilter === type ? 'rgba(201,168,76,0.08)' : 'transparent',
                    color: sourceFilter === type ? 'var(--gold)' : 'var(--text3)',
                    transition:'all 0.15s',
                    textTransform:'capitalize' }}>
                  {type}
                </button>
              ))}
            </div>
          </div>

          {status && (
            <div className="glass" style={{ padding:'20px' }}>
              <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.28em', color:'var(--gold)', textTransform:'uppercase', marginBottom:14 }}>
                System Status
              </div>
              {[
                ['Pipeline', status.last_run?.status || 'Unknown'],
                ['Items processed', status.last_run?.items_processed ?? '—'],
                ['Today total', status.today_count ?? 0],
                ['Last run', status.last_run?.completed_at
                  ? new Date(status.last_run.completed_at).toLocaleDateString('en-GB', { month:'short', day:'numeric' })
                  : '—'],
              ].map(([k, v], i) => (
                <div key={i} style={{ display:'flex', justifyContent:'space-between', paddingBottom:8, marginBottom:8,
                  borderBottom: i < 3 ? '1px solid rgba(255,255,255,0.04)' : 'none' }}>
                  <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--text3)' }}>{k}</span>
                  <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9,
                    color: k === 'Pipeline'
                      ? (v === 'completed' ? 'var(--green)' : v === 'running' ? 'var(--amber)' : 'var(--text)')
                      : 'var(--text)' }}>
                    {String(v)}
                  </span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ── Sovereign Ledger ─────────────────────────────────────────────
const SovereignLedger = () => {
  const velRef = React.useRef(null);
  const velChart = React.useRef(null);
  const wealthRef = React.useRef(null);
  const wealthChart = React.useRef(null);

  const months = ['May','Jun','Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr'];
  const velData = [28000,31000,29500,35000,38200,36800,42000,44500,41200,47000,45500,47200];
  const netWorthData = [1800000,1880000,1920000,1990000,2050000,2110000,2180000,2240000,2280000,2350000,2420000,2470000];

  const chartDefaults = {
    responsive: true, maintainAspectRatio: false,
    plugins: { legend: { display: false }, tooltip: {
      backgroundColor: 'rgba(10,10,10,0.92)', borderColor:'rgba(201,168,76,0.3)', borderWidth:1,
      titleFont: { family:"'JetBrains Mono'", size:9 }, bodyFont: { family:"'JetBrains Mono'", size:10 },
      titleColor:'#999', bodyColor:'#E2E2E2',
    }},
    scales: {
      x: { grid:{ color:'rgba(255,255,255,0.04)' }, ticks:{ color:'#555', font:{ family:"'JetBrains Mono'", size:9 }, maxRotation:0 } },
      y: { grid:{ color:'rgba(255,255,255,0.04)' }, border:{ dash:[3,3] },
        ticks:{ color:'#555', font:{ family:"'JetBrains Mono'", size:9 } } },
    }
  };

  React.useEffect(() => {
    if (!window.Chart) return;
    const mkChart = (ref, chartRef, color, data, fmt) => {
      if (!ref.current) return;
      if (chartRef.current) chartRef.current.destroy();
      chartRef.current = new window.Chart(ref.current, {
        type:'line',
        data:{ labels: months, datasets:[{ data, borderColor: color,
          backgroundColor: color.replace(')', ', 0.06)').replace('rgb(','rgba(').replace('#','rgba(').replace('rgba(','rgba(').replace('(','('),
          fill:true, tension:0.4, pointBackgroundColor: color, pointRadius:3, pointHoverRadius:5 }] },
        options:{ ...chartDefaults, scales:{ ...chartDefaults.scales,
          y:{ ...chartDefaults.scales.y, ticks:{ ...chartDefaults.scales.y.ticks, callback: fmt } } } }
      });
    };
    mkChart(velRef, velChart, '#4FC3F7', velData, v=>`£${(v/1000).toFixed(0)}k`);
    mkChart(wealthRef, wealthChart, '#C9A84C', netWorthData, v=>`£${(v/1e6).toFixed(2)}M`);
    return () => { velChart.current?.destroy(); wealthChart.current?.destroy(); };
  }, []);

  const portfolio = [
    { label:'Agency Revenue', pct:45, color:'#C9A84C' },
    { label:'Investments', pct:30, color:'#4FC3F7' },
    { label:'Retained Capital', pct:15, color:'#4CAF82' },
    { label:'Other Ventures', pct:10, color:'#888' },
  ];

  return (
    <div style={{ padding:'32px 36px', overflowY:'auto', height:'100%' }}>
      <div className="stagger-1" style={{ marginBottom:28 }}>
        <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.3em', color:'var(--gold)', textTransform:'uppercase', marginBottom:8 }}>Sovereign Ledger</div>
        <div style={{ fontFamily:"'Playfair Display',Georgia,serif", fontSize:26, fontWeight:700, color:'var(--text)' }}>Financial Command Suite</div>
        <div style={{ fontFamily:"'JetBrains Mono'", fontSize:10, color:'var(--text3)', marginTop:6 }}>Simulated data · Refreshed 04:12 UTC · All values in GBP</div>
      </div>

      {/* Top KPIs */}
      <div className="stagger-1" style={{ display:'flex', gap:16, marginBottom:20 }}>
        <StatCard label="Net Worth" value="£2.47M" sub="↑ 12.3% year-on-year" glow/>
        <StatCard label="Monthly Revenue" value="£47.2k" sub="vs £50k target (94.4%)" color="var(--blue)"/>
        <StatCard label="Capital Velocity" value="94.4%" sub="0.8% below trajectory" color="var(--green)"/>
        <StatCard label="Runway" value="18mo" sub="Current burn rate" color="var(--text)"/>
      </div>

      {/* Charts row */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginBottom:20 }}>
        <div className="glass stagger-2" style={{ padding:'24px' }}>
          <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.28em', color:'var(--blue)', textTransform:'uppercase', marginBottom:16 }}>
            Capital Velocity — Monthly Revenue (12mo)
          </div>
          <div style={{ height:200 }}>
            <canvas ref={velRef}/>
          </div>
        </div>
        <div className="glass stagger-2" style={{ padding:'24px' }}>
          <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.28em', color:'var(--gold)', textTransform:'uppercase', marginBottom:16 }}>
            Net Worth Trajectory (12mo)
          </div>
          <div style={{ height:200 }}>
            <canvas ref={wealthRef}/>
          </div>
        </div>
      </div>

      {/* Portfolio + Targets */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
        <div className="glass stagger-3" style={{ padding:'24px' }}>
          <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.28em', color:'var(--gold)', textTransform:'uppercase', marginBottom:20 }}>Capital Allocation</div>
          <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
            {portfolio.map((p,i) => (
              <div key={i}>
                <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                  <span style={{ fontFamily:"'JetBrains Mono'", fontSize:10, color:'var(--text2)' }}>{p.label}</span>
                  <span style={{ fontFamily:"'JetBrains Mono'", fontSize:10, color:p.color }}>{p.pct}%</span>
                </div>
                <div style={{ height:3, background:'rgba(255,255,255,0.06)', borderRadius:2, overflow:'hidden' }}>
                  <div style={{ height:'100%', width:`${p.pct}%`, background:p.color, borderRadius:2 }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="glass stagger-3" style={{ padding:'24px' }}>
          <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.28em', color:'var(--gold)', textTransform:'uppercase', marginBottom:20 }}>Monthly Targets</div>
          {[
            { label:'Revenue', current:47200, target:50000 },
            { label:'New Clients', current:3, target:4 },
            { label:'Project Closures', current:7, target:8 },
            { label:'Expenses', current:12400, target:13000, inverse:true },
          ].map((t,i) => {
            const pct = Math.min((t.current/t.target)*100, 100);
            const color = t.inverse ? (pct < 95 ? '#4CAF82' : '#E05252') : (pct >= 90 ? '#4CAF82' : pct >= 70 ? '#E0A340' : '#E05252');
            const fv = v => t.label.includes('Revenue') || t.label.includes('Expenses') ? `£${(v/1000).toFixed(1)}k` : String(v);
            return (
              <div key={i} style={{ marginBottom:16 }}>
                <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                  <span style={{ fontFamily:"'JetBrains Mono'", fontSize:10, color:'var(--text2)' }}>{t.label}</span>
                  <span style={{ fontFamily:"'JetBrains Mono'", fontSize:10, color }}>
                    {fv(t.current)} <span style={{ color:'var(--text3)' }}>/ {fv(t.target)}</span>
                  </span>
                </div>
                <div style={{ height:4, background:'rgba(255,255,255,0.06)', borderRadius:2, overflow:'hidden' }}>
                  <div style={{ height:'100%', width:`${pct}%`, background:color, borderRadius:2, transition:'width 1.2s ease' }}/>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ── Architect's Vault ────────────────────────────────────────────
const projects = [
  { id:'PRJ-001', codename:'ARCHITECT', name:'The PM Agency', status:'ACTIVE', clearance:'IV',
    type:'Brand & Consultancy', progress:88, founded:'2020',
    desc:'Full-service brand, project and campaign management consultancy. Core revenue engine. Clients across property, finance and creative industries.',
    kpis:[['Monthly Rev','£31.4k'],['Active Clients','14'],['Team Size','6'],['Satisfaction','94%']],
    tags:['Consultancy','Brand','Projects'] },
  { id:'PRJ-002', codename:'ORACLE', name:'CIPHER Intelligence Hub', status:'LIVE', clearance:'V',
    type:'Proprietary Technology', progress:61, founded:'2026',
    desc:'Internal AI intelligence platform. Real-time briefing aggregation, financial command suite, and project oversight. Architecture complete.',
    kpis:[['Build Stage','Beta'],['Integrations','7'],['Daily Queries','—'],['Security','Level V']],
    tags:['AI','Technology','Internal'] },
  { id:'PRJ-003', codename:'HERALD', name:'The Content Syndicate', status:'ACTIVE', clearance:'III',
    type:'Content & Media', progress:74, founded:'2023',
    desc:'Strategic content creation and distribution network. Ghostwriting, thought leadership and content-led growth for B2B founders.',
    kpis:[['Monthly Rev','£8.2k'],['Active Briefs','22'],['Output/mo','40+'],['Channels','8']],
    tags:['Content','Media','B2B'] },
  { id:'PRJ-004', codename:'SOVEREIGN', name:'Capital Velocity Fund', status:'BUILDING', clearance:'II',
    type:'Investment Vehicle', progress:38, founded:'2025',
    desc:'Personal investment and capital allocation framework. Early-stage equity, index positions and alternative assets under active management.',
    kpis:[['AUM','£220k'],['Positions','11'],['YTD Return','+14.2%'],['Next Close','Q3 2026']],
    tags:['Finance','Investments','Capital'] },
  { id:'PRJ-005', codename:'NEXUS', name:'Nexus Ventures', status:'INCUBATING', clearance:'II',
    type:'Partnerships & Equity', progress:22, founded:'2026',
    desc:'Strategic partnerships network and equity co-investment vehicle. Targeting AI, property tech and creator economy verticals.',
    kpis:[['Pipeline','6 deals'],['Signed MOUs','2'],['Target Raise','£500k'],['Timeline','Q4 2026']],
    tags:['Ventures','Partnerships','Strategy'] },
  { id:'PRJ-006', codename:'PHANTOM', name:'Shadow Infrastructure', status:'CLASSIFIED', clearance:'V',
    type:'Tech Infrastructure', progress:51, founded:'2025',
    desc:'[REDACTED — LEVEL V CLEARANCE REQUIRED] Proprietary technology stack, automation layer and data infrastructure underpinning all Group operations.',
    kpis:[['Status','[REDACTED]'],['Systems','[REDACTED]'],['Uptime','[REDACTED]'],['Access','Restricted']],
    tags:['Infrastructure','Tech','Classified'] },
];

const ArchitectsVault = () => {
  const [selected, setSelected] = React.useState(null);

  const getStatusStyle = (s) => {
    if (s === 'ACTIVE' || s === 'LIVE') return 'tag-green';
    if (s === 'BUILDING') return 'tag-blue';
    if (s === 'INCUBATING') return 'tag-amber';
    return 'tag-red';
  };

  return (
    <div style={{ padding:'32px 36px', overflowY:'auto', height:'100%', position:'relative' }}>
      <div className="stagger-1" style={{ marginBottom:28 }}>
        <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.3em', color:'var(--gold)', textTransform:'uppercase', marginBottom:8 }}>Architect's Vault</div>
        <div style={{ fontFamily:"'Playfair Display',Georgia,serif", fontSize:26, fontWeight:700, color:'var(--text)' }}>Classified Project Files</div>
        <div style={{ fontFamily:"'JetBrains Mono'", fontSize:10, color:'var(--text3)', marginTop:6 }}>6 active dossiers · Click any file to access deep-dive view</div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18 }}>
        {projects.map((p, i) => (
          <div key={p.id} className={`glass stagger-${Math.min(i+1,5)}`}
            style={{ padding:'24px', cursor:'pointer', position:'relative', overflow:'hidden' }}
            onClick={() => setSelected(p)}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = 'rgba(201,168,76,0.3)';
              e.currentTarget.style.boxShadow = '0 0 28px rgba(201,168,76,0.08)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = 'var(--border)';
              e.currentTarget.style.boxShadow = 'none';
            }}>
            {/* Classified watermark */}
            {p.status === 'CLASSIFIED' && (
              <div style={{ position:'absolute', top:12, right:-18, background:'rgba(224,82,82,0.15)',
                color:'#E05252', fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.3em',
                padding:'3px 24px', transform:'rotate(30deg)', border:'1px solid rgba(224,82,82,0.3)' }}>CLASSIFIED</div>
            )}
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14 }}>
              <span className={`tag ${getStatusStyle(p.status)}`}>{p.status}</span>
              <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--text3)' }}>{p.id}</span>
            </div>
            <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.2em', color:'var(--gold)', marginBottom:6 }}>
              CODENAME: {p.codename}
            </div>
            <div style={{ fontFamily:"'Inter'", fontSize:15, fontWeight:600, color:'var(--text)', marginBottom:6 }}>{p.name}</div>
            <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--text3)', marginBottom:14, letterSpacing:'0.1em' }}>{p.type}</div>
            <div style={{ fontSize:11, color:'var(--text2)', lineHeight:1.7, marginBottom:16, height:50, overflow:'hidden' }}>
              {p.status === 'CLASSIFIED' ? '[REDACTED — ACCESS RESTRICTED]' : p.desc.substring(0,100)+'...'}
            </div>
            <div>
              <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--text3)' }}>PROGRESS</span>
                <span style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--gold)' }}>{p.progress}%</span>
              </div>
              <div style={{ height:3, background:'rgba(255,255,255,0.06)', borderRadius:2, overflow:'hidden' }}>
                <div style={{ height:'100%', width:`${p.progress}%`, background:'linear-gradient(90deg, var(--gold), #E5C671)', borderRadius:2 }}/>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Detail Modal */}
      {selected && (
        <div style={{ position:'fixed', inset:0, zIndex:50, display:'flex', alignItems:'center', justifyContent:'center',
          background:'rgba(0,0,0,0.7)', backdropFilter:'blur(6px)', animation:'fadeIn 0.2s ease-out' }}
          onClick={(e) => { if (e.target === e.currentTarget) setSelected(null); }}>
          <div className="glass" style={{ width:640, maxHeight:'80vh', overflowY:'auto', borderRadius:10,
            borderColor:'rgba(201,168,76,0.2)', boxShadow:'0 0 60px rgba(0,0,0,0.6), 0 0 30px rgba(201,168,76,0.08)',
            animation:'slideInUp 0.3s ease-out', padding:'32px' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:24 }}>
              <div>
                <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.3em', color:'var(--gold)', marginBottom:8 }}>
                  CODENAME: {selected.codename} · {selected.id} · CLEARANCE {selected.clearance}
                </div>
                <div style={{ fontFamily:"'Playfair Display',Georgia,serif", fontSize:22, fontWeight:700, color:'var(--text)' }}>{selected.name}</div>
                <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, color:'var(--text3)', marginTop:4 }}>{selected.type} · Est. {selected.founded}</div>
              </div>
              <button onClick={() => setSelected(null)} style={{ background:'none', border:'none', color:'var(--text3)', fontSize:20, cursor:'pointer', padding:4 }}>✕</button>
            </div>
            <div style={{ fontSize:13, color:'var(--text2)', lineHeight:1.8, marginBottom:24, paddingBottom:24, borderBottom:'1px solid var(--border)' }}>
              {selected.desc}
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:24 }}>
              {selected.kpis.map(([k,v],i) => (
                <div key={i} className="glass" style={{ padding:'14px 16px' }}>
                  <div style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.2em', color:'var(--text3)', textTransform:'uppercase', marginBottom:6 }}>{k}</div>
                  <div style={{ fontFamily:"'JetBrains Mono'", fontSize:16, fontWeight:600, color:'var(--gold)' }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
              {selected.tags.map(t => <span key={t} className="tag tag-gold">{t}</span>)}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// ── Shadow Protocols ─────────────────────────────────────────────
const ShadowProtocols = () => {
  const [progress, setProgress] = React.useState({});

  const tools = [
    { id:'SP-001', name:'NEURAL ANALYTICS ENGINE', desc:'Predictive insight engine drawing from cross-platform data streams.', pct:73 },
    { id:'SP-002', name:'QUANTUM PATTERN MATCHER', desc:'Anomaly detection and cross-signal correlation across the Oracle feed.', pct:45 },
    { id:'SP-003', name:'PREDICTIVE MARKET ORACLE', desc:'AI-driven market opportunity scoring and sector momentum forecasting.', pct:29 },
    { id:'SP-004', name:'AUTONOMOUS BRIEF WRITER', desc:'Fully automated intelligence brief generation from raw intercept data.', pct:61 },
    { id:'SP-005', name:'SHADOW NETWORK MAPPER', desc:'Relationship graph across clients, competitors and strategic contacts.', pct:18 },
    { id:'SP-006', name:'CHRONOS SCHEDULER AI', desc:'Context-aware scheduling and capacity management across all ventures.', pct:88 },
  ];

  React.useEffect(() => {
    tools.forEach((t, i) => {
      setTimeout(() => {
        setProgress(prev => ({ ...prev, [t.id]: t.pct }));
      }, i * 200 + 400);
    });
  }, []);

  return (
    <div style={{ padding:'32px 36px', overflowY:'auto', height:'100%' }}>
      <div className="stagger-1" style={{ marginBottom:28 }}>
        <div style={{ fontFamily:"'JetBrains Mono'", fontSize:9, letterSpacing:'0.3em', color:'var(--gold)', textTransform:'uppercase', marginBottom:8 }}>Shadow Protocols</div>
        <div style={{ fontFamily:"'Playfair Display',Georgia,serif", fontSize:26, fontWeight:700, color:'var(--text)' }}>Future Tools — Decrypting...</div>
        <div style={{ fontFamily:"'JetBrains Mono'", fontSize:10, color:'var(--text3)', marginTop:6 }}>6 protocols in development · Access restricted pending build completion</div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:18 }}>
        {tools.map((t, i) => {
          const pct = progress[t.id] || 0;
          const isNearDone = t.pct >= 80;
          return (
            <div key={t.id} className={`glass stagger-${Math.min(i+1,5)}`} style={{ padding:'24px', position:'relative', overflow:'hidden' }}>
              {/* Lock icon */}
              <div style={{ position:'absolute', top:20, right:20, opacity: pct >= 100 ? 0 : 0.3 }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <rect x="3" y="7" width="10" height="8" rx="1.5" stroke="#C9A84C" strokeWidth="1.2"/>
                  <path d="M5 7V5a3 3 0 0 1 6 0v2" stroke="#C9A84C" strokeWidth="1.2" strokeLinecap="round"/>
                </svg>
              </div>
              <div style={{ fontFamily:"'JetBrains Mono'", fontSize:8, letterSpacing:'0.2em', color:'var(--text3)', marginBottom:8 }}>{t.id}</div>
              <div style={{ fontFamily:"'JetBrains Mono'", fontSize:11, fontWeight:600, color: isNearDone ? 'var(--gold)' : 'var(--text)', marginBottom:10, letterSpacing:'0.06em' }}>{t.name}</div>
              <div style={{ fontSize:11, color:'var(--text3)', lineHeight:1.7, marginBottom:18 }}>{t.desc}</div>
              <div style={{ marginBottom:8 }}>
                <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                  <span style={{ fontFamily:"'JetBrains Mono'", fontSize:8, color:'var(--text3)', letterSpacing:'0.2em',
                    animation: pct < 100 ? 'pulse-dot 2s ease-in-out infinite' : 'none',
                    animationDelay:`${i*0.4}s` }}>
                    {pct >= 100 ? '● DECRYPTED' : `DECRYPTING TOOL...`}
                  </span>
                  <span style={{ fontFamily:"'JetBrains Mono'", fontSize:8, color: isNearDone ? 'var(--gold)' : 'var(--blue)' }}>{t.pct}%</span>
                </div>
                <div style={{ height:4, background:'rgba(255,255,255,0.06)', borderRadius:2, overflow:'hidden' }}>
                  <div style={{ height:'100%', width:`${pct}%`,
                    background: isNearDone ? 'linear-gradient(90deg, var(--gold), #E5C671)' : 'var(--blue)',
                    borderRadius:2, transition:'width 1.4s cubic-bezier(0.4,0,0.2,1)',
                    boxShadow: isNearDone ? '0 0 8px rgba(201,168,76,0.5)' : '0 0 8px rgba(79,195,247,0.4)' }}/>
                </div>
              </div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <span className={`tag ${isNearDone ? 'tag-gold' : 'tag-blue'}`}>
                  {t.pct >= 80 ? 'NEAR COMPLETE' : t.pct >= 50 ? 'IN PROGRESS' : 'EARLY BUILD'}
                </span>
                {isNearDone && <span style={{ fontFamily:"'JetBrains Mono'", fontSize:8, color:'var(--gold)' }}>ETA: SOON</span>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

Object.assign(window, { InnerCircle, OracleStream, SovereignLedger, ArchitectsVault, ShadowProtocols });