/* TerminalExtras.jsx — Reading list, Quick takes, Funding timeline, Presenter mode, Compare mode */

/* ─────────── Reading list ─────────── */
function ReadingList({ items }) {
  if (!items || items.length === 0) return null;
  return (
    <div className="section-block">
      <div className="block-head">
        <span className="lbl">◆ Reading list</span>
        <span className="idx">{items.length}</span>
      </div>
      <div className="reading-list">
        {items.map(r=>(
          <div key={r.title} className="reading-item">
            <div className="r-title"><a href={r.url} target="_blank" rel="noreferrer">{r.title} ↗</a></div>
            <div className="r-time">{r.time}</div>
            <div className="r-meta"><span className="r-kind">{r.kind}</span> · {r.venue}</div>
            {r.blurb && <div className="r-blurb">{r.blurb}</div>}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ─────────── Quick takes (Buying / Watching / Skeptical) ─────────── */
function QuickTakes({ takes }) {
  if (!takes || takes.length === 0) return null;
  const groups = {
    buying:    takes.filter(t=>t.stance==='buying'),
    watching:  takes.filter(t=>t.stance==='watching'),
    skeptical: takes.filter(t=>t.stance==='skeptical'),
  };
  const labels = { buying: 'Buying', watching: 'Watching', skeptical: 'Skeptical' };
  return (
    <div className="section-block" style={{padding:0, border:0}}>
      <div className="block-head" style={{padding:'0 0 6px'}}>
        <span className="lbl">◆ Quick takes · IC shortlist</span>
        <span className="idx">{takes.length}</span>
      </div>
      <div className="takes-grid">
        {['buying','watching','skeptical'].map(k=>(
          <div key={k} className={"take-col "+k}>
            <div className="take-head">
              <span>{labels[k]}</span>
              <span className="take-count">{groups[k].length}</span>
            </div>
            <div className="take-body">
              {groups[k].length === 0
                ? <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--ink-600)'}}>—</span>
                : groups[k].map(t=>(
                    <div key={t.name} className="take-card">
                      <div className="take-name">{t.name}</div>
                      <div className="take-thesis">{t.thesis}</div>
                    </div>
                  ))
              }
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ─────────── Funding timeline across all weeks ─────────── */
const TAG_COLORS = {
  'Robotics':             '#C85A1E',  // amber-600
  'AI / ML':              '#2B6B6B',  // teal
  'Space':                '#6B4423',  // warm brown
  'Humanoids':            '#B8860B',  // dark goldenrod
  'Training data':        '#8A9A5B',  // olive
  'Foundation Models':    '#A0522D',  // sienna
  'Manipulation / dexterity': '#7D5A44',
  'Funding':              '#D4A14A',
  'People':               '#6B5B8B',
  'Companies':            '#9C6B4A',
  'default':              '#8E7563'
};
function colorFor(tag){ return TAG_COLORS[tag] || TAG_COLORS.default; }

function parseAmount(a){
  if (!a) return 0;
  const v = parseFloat(a.replace(/[^0-9.]/g,'')) || 0;
  return /B/i.test(a) ? v*1000 : v; // in $M
}

function FundingTimeline({ allWeeks, cache, onPickWeek }) {
  // Sort weeks newest-first -> reverse so older at top (reading chronologically)
  const ordered = [...allWeeks].reverse();
  const weeks = ordered.map(w => {
    const data = cache[w.id];
    const rounds = (data?.funding || [])
      .map(f => ({ co: f.co, stage: f.stage, mm: parseAmount(f.amount), amount: f.amount }))
      .filter(r => r.mm > 0)
      .sort((a, b) => b.mm - a.mm);
    const total = rounds.reduce((s, x) => s + x.mm, 0);
    return { ...w, rounds, total };
  });
  const maxRound = Math.max(...weeks.flatMap(w => w.rounds.map(r => r.mm)), 1);
  const fmt = (mm) => mm >= 1000 ? `$${(mm/1000).toFixed(1)}B` : `$${Math.round(mm)}M`;
  const TOP_N = 5;

  return (
    <Panel title="Funding flow ▸ across weeks" count={weeks.length}>
      <div className="funding-flow">
        {weeks.map(w => {
          const top = w.rounds.slice(0, TOP_N);
          const rest = w.rounds.slice(TOP_N);
          const restSum = rest.reduce((s, r) => s + r.mm, 0);
          return (
            <div key={w.id} className="ff-week">
              <button className="ff-week-head" onClick={() => onPickWeek(w.id)}>
                <span className="ff-week-label">{w.label}</span>
                <span className="ff-week-meta">{w.dateRange} · {w.rounds.length} {w.rounds.length === 1 ? 'round' : 'rounds'}</span>
                <span className="ff-week-total">{w.total > 0 ? fmt(w.total) : '—'}</span>
              </button>
              {w.rounds.length === 0 && <div className="ff-empty">no rounds recorded</div>}
              {top.map((r, i) => (
                <div key={i} className="ff-row">
                  <span className="ff-co" title={`${r.co}${r.stage && r.stage !== '—' ? ' · ' + r.stage : ''}`}>{r.co}</span>
                  <div className="ff-bar-track">
                    <div className="ff-bar-fill" style={{width: (r.mm / maxRound * 100) + '%'}}/>
                  </div>
                  <span className="ff-amt">{r.amount}</span>
                </div>
              ))}
              {rest.length > 0 && (
                <div className="ff-more">+ {rest.length} more · {fmt(restSum)}</div>
              )}
            </div>
          );
        })}
      </div>
    </Panel>
  );
}

/* ─────────── Presenter mode ─────────── */
function PresenterMode({ week, onClose, firstVisit }) {
  const steps = useMemo(()=>{
    const out = [];
    const parseAmt = (s) => {
      if (!s || s === '—') return 0;
      const m = String(s).match(/\$?([\d.]+)\s*([MB])/i);
      if (!m) return 0;
      const n = parseFloat(m[1]);
      return m[2].toUpperCase() === 'B' ? n * 1000 : n;
    };
    const fmtAmt = (m) => {
      if (m >= 1000) return '$' + (m/1000).toFixed(2).replace(/\.?0+$/, '') + 'B';
      return '$' + Math.round(m) + 'M';
    };
    const splitSentences = (s) => {
      if (!s) return [];
      return s.split(/(?<=[.!?])\s+/).map(x=>x.trim()).filter(Boolean);
    };

    out.push({ kind:'title', eyebrow: 'Weekly dispatch · '+week.label, title: week.headline, body: week.dateRange });
    out.push({ kind:'theme', eyebrow: 'Theme of the week', title: week.theme.title, body: week.theme.summary, tags: week.theme.tags });
    out.push({ kind:'section', eyebrow: 'Thing I noticed', title: week.noticed.title, body: week.noticed.summary, url: week.noticed.link });
    out.push({ kind:'section', eyebrow: 'Trend / discussion', title: week.trend.title, body: week.trend.summary, tags: week.trend.tags });
    if (week.companies?.length) {
      out.push({ kind:'grid', eyebrow: 'Companies to watch', title: `${week.companies.length} on the radar this week`, cards: week.companies.map(c=>({
        pcTitle: c.name,
        pcTags: c.tags && c.tags.length ? c.tags : (c.tag ? [c.tag] : []),
        pcBody: c.blurb,
        url: c.url && c.url !== '—' ? c.url : null
      })) });
    }
    if (week.funding?.length) {
      const items = week.funding.map(f => ({ ...f, _amt: parseAmt(f.amount) }))
                                .filter(f => f._amt > 0)
                                .sort((a,b) => b._amt - a._amt);
      const max = items[0]?._amt || 1;
      const total = items.reduce((s,x)=>s+x._amt, 0);
      out.push({ kind:'fundingBars', eyebrow: 'Funding · M&A', title: 'Cap moving this week', items, max, total: fmtAmt(total), totalRaw: total });
    }
    if (week.takes?.length) {
      out.push({ kind:'takes', eyebrow: 'Quick takes', title: 'IC shortlist', cards: week.takes.map(t=>({
        title: t.name,
        stance: t.stance,
        bullets: splitSentences(t.thesis)
      })) });
    }
    return out;
  }, [week]);

  const [i, setI] = useState(0);
  const touchRef = React.useRef({ x:0, y:0, t:0, swiped:false });

  useEffect(()=>{
    const h = (e)=>{
      if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { setI(x=>Math.min(steps.length-1, x+1)); e.preventDefault(); }
      if (e.key === 'ArrowLeft'  || e.key === 'PageUp')                     { setI(x=>Math.max(0, x-1)); e.preventDefault(); }
      if (e.key === 'Escape' || e.key.toLowerCase() === 'p')                { onClose(); }
    };
    window.addEventListener('keydown', h);
    return ()=>window.removeEventListener('keydown', h);
  }, [steps.length, onClose]);

  const onTouchStart = (e)=>{
    const t = e.touches[0];
    touchRef.current = { x:t.clientX, y:t.clientY, t:Date.now(), swiped:false };
  };
  const onTouchEnd = (e)=>{
    const s = touchRef.current;
    const t = e.changedTouches[0];
    const dx = t.clientX - s.x;
    const dy = t.clientY - s.y;
    const dt = Date.now() - s.t;
    if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.5 && dt < 800) {
      touchRef.current.swiped = true;
      if (dx < 0) setI(x=>Math.min(steps.length-1, x+1));
      else        setI(x=>Math.max(0, x-1));
    }
  };

  const step = steps[i];

  const gridCols = step?.cards && step.cards.length > 4 ? 'cols-3' : 'cols-2';

  return (
    <div
      className="presenter-overlay"
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
      onClick={(e)=>{
        if (touchRef.current.swiped) { touchRef.current.swiped = false; return; }
        if (e.target.classList.contains('presenter-stage')) setI(x=>Math.min(steps.length-1, x+1));
      }}
    >
      <div className="presenter-bar">
        <span className="p-logo">Robotics <span style={{color:'var(--amber-500)'}}>x</span> AI Research</span>
        <span>Presenter mode</span>
        <span>·</span>
        <span className="p-step">Step {i+1} / {steps.length}</span>
        <span className="p-progress">{steps.map((_,ix)=><span key={ix} className={ix<=i?'on':''}/>)}</span>
        <span className="p-step-title">{step.eyebrow}</span>
        <div className="p-spacer"/>
        <button className="p-close" onClick={onClose}>Exit (Esc)</button>
      </div>

      <div className="presenter-stage">
        <span className="p-eyebrow">◆ {step.eyebrow}</span>
        {step.url ? (
          <a href={step.url} target="_blank" rel="noopener noreferrer" className="p-title-link" onClick={(e)=>e.stopPropagation()}>
            <h1>{step.title}</h1>
          </a>
        ) : (
          <h1>{step.title}</h1>
        )}
        {Array.isArray(step.body)
          ? <ul className="p-bullets">{step.body.map((b,ix)=><li key={ix}>{b}</li>)}</ul>
          : step.body && <p className="p-body">{step.body}</p>}
        {step.tags && (
          <div className="p-tags">{step.tags.map(t=><span key={t} className="chip">{t}</span>)}</div>
        )}
        {step.kind === 'grid' && (
          <div className={"presenter-grid " + gridCols}>
            {step.cards.map((c,ix)=>{
              const inner = (
                <>
                  <div className="pc-title">{c.pcTitle}</div>
                  {c.pcTags && c.pcTags.length > 0 && (
                    <div className="pc-tags">{c.pcTags.map(t => <span key={t} className="pc-tag">{t}</span>)}</div>
                  )}
                  {c.pcSub && !c.pcTags && <div className="pc-sub">{c.pcSub}</div>}
                  {c.pcBody && <div className="pc-body">{c.pcBody}</div>}
                </>
              );
              return c.url
                ? <a key={ix} href={c.url} target="_blank" rel="noopener noreferrer" className="p-card p-card-link" onClick={(e)=>e.stopPropagation()}>{inner}</a>
                : <div key={ix} className="p-card">{inner}</div>;
            })}
          </div>
        )}
        {step.kind === 'fundingBars' && (
          <div className="funding-bars" onClick={(e)=>e.stopPropagation()}>
            {step.items.map((f,ix)=>(
              <div key={ix} className="fb-row">
                <div className="fb-rank">{ix+1}</div>
                <div className="fb-name">{f.co}{f.geo && f.geo !== '—' ? <span className="fb-geo"> · {f.geo}</span> : null}</div>
                <div className="fb-track">
                  <div className="fb-fill" style={{width: ((f._amt/step.max)*100)+'%'}}/>
                </div>
                <div className="fb-amt">{f.amount}</div>
              </div>
            ))}
            <div className="fb-row fb-total">
              <div className="fb-rank">Σ</div>
              <div className="fb-name">Total · top {step.items.length}</div>
              <div className="fb-track"><div className="fb-fill fb-fill-total" style={{width:'100%'}}/></div>
              <div className="fb-amt">{step.total}</div>
            </div>
          </div>
        )}
        {step.kind === 'takes' && (
          <div className={"presenter-grid " + gridCols}>
            {step.cards.map((c,ix)=>(
              <div key={ix} className="p-card take-card">
                <div className="pc-title">{c.title}</div>
                {c.bullets.length > 1 ? (
                  <ul className="tc-bullets">{c.bullets.map((b,bx)=><li key={bx}>{b}</li>)}</ul>
                ) : (
                  <div className="pc-body">{c.bullets[0]}</div>
                )}
                <div className={"tc-stance stance-"+c.stance}>{c.stance}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="presenter-hint">
        <kbd>←</kbd><kbd>→</kbd><span>step</span>
        <span>·</span>
        <span>click to advance</span>
        <span>·</span>
        <kbd>Esc</kbd><span>exit</span>
      </div>

      {firstVisit && (
        <button className="presenter-first-hint" onClick={(e)=>{ e.stopPropagation(); onClose(); }}>
          <span>Click here or press</span>
          <kbd>ESC</kbd>
          <span>to close Presenter Mode</span>
          <span className="x-close">×</span>
        </button>
      )}
    </div>
  );
}

/* ─────────── Compare mode ─────────── */
function CompareMode({ allWeeks, cache, initialA, initialB }) {
  const [a, setA] = useState(initialA || allWeeks[0]?.id);
  const [b, setB] = useState(initialB || allWeeks[1]?.id || allWeeks[0]?.id);

  const weekA = cache[a];
  const weekB = cache[b];
  if (!weekA || !weekB) return <div style={{padding:20, fontFamily:'var(--font-mono)'}}>Pick two weeks…</div>;

  const coNamesA = new Set((weekA.companies||[]).map(c=>c.name));
  const coNamesB = new Set((weekB.companies||[]).map(c=>c.name));
  const fundA = new Set((weekA.funding||[]).map(f=>f.co));
  const fundB = new Set((weekB.funding||[]).map(f=>f.co));

  const newInA = [...coNamesA].filter(n=>!coNamesB.has(n));
  const newInB = [...coNamesB].filter(n=>!coNamesA.has(n));
  const carry = [...coNamesA].filter(n=>coNamesB.has(n));

  const renderCol = (w, other, side) => (
    <div className={"compare-col "+side}>
      <div className="cc-head">{w.label} · {w.dateRange}</div>
      <div className="cc-theme">{w.theme.title}</div>
      <div className="cc-section">
        <div className="cc-label">Companies · {w.companies?.length || 0}</div>
        <div className="cc-list">
          {(w.companies||[]).map(c=>{
            const isNew = !(side==='a' ? coNamesB : coNamesA).has(c.name);
            return (
              <div key={c.name} className={"cc-row "+(isNew?'new':'')}>
                <span>{c.name} <span style={{color:'var(--ink-600)', fontWeight:400}}>· {c.tag}</span></span>
              </div>
            );
          })}
        </div>
      </div>
      <div className="cc-section">
        <div className="cc-label">Funding · {w.funding?.length || 0}</div>
        <div className="cc-list">
          {(w.funding||[]).map(f=>{
            const isNew = !(side==='a' ? fundB : fundA).has(f.co);
            return (
              <div key={f.co} className={"cc-row "+(isNew?'new':'')}>
                <span>{f.co} <span style={{color:'var(--ink-600)', fontWeight:400}}>· {f.stage}</span></span>
                <span className="cc-amt">{f.amount}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );

  return (
    <div className="compare-panel">
      <div className="compare-head">
        <span className="eyebrow">Compare weeks</span>
        <select value={a} onChange={e=>setA(e.target.value)}>
          {allWeeks.map(w=><option key={w.id} value={w.id}>{w.label} · {w.dateRange}</option>)}
        </select>
        <span style={{fontFamily:'var(--font-mono)', fontSize:12, color:'var(--ink-600)'}}>↔</span>
        <select value={b} onChange={e=>setB(e.target.value)}>
          {allWeeks.map(w=><option key={w.id} value={w.id}>{w.label} · {w.dateRange}</option>)}
        </select>
        <div style={{flex:1}}/>
        <span style={{fontFamily:'var(--font-mono)', fontSize:10, color:'var(--ink-600)', letterSpacing:'.12em', textTransform:'uppercase'}}>◆ = new vs the other week</span>
      </div>

      <div className="compare-cols">
        {renderCol(weekA, weekB, 'a')}
        {renderCol(weekB, weekA, 'b')}
      </div>

      <div className="compare-diff">
        <div className="dh">Diff</div>
        <ul>
          {newInA.length > 0 && <li><span className="plus">+ New in {weekA.label}:</span> {newInA.join(' · ')}</li>}
          {newInB.length > 0 && <li><span className="plus">+ New in {weekB.label}:</span> {newInB.join(' · ')}</li>}
          {carry.length > 0   && <li><span className="carry">= Recurring:</span> {carry.join(' · ')}</li>}
          {newInA.length+newInB.length+carry.length === 0 && <li>No overlap in companies this cycle.</li>}
        </ul>
      </div>
    </div>
  );
}

/* ─────────── Special Reports ─────────── */
function SpecialReports({ reports, onOpen }) {
  if (!reports || reports.length === 0) return null;
  return (
    <div className="section-block special-reports">
      <div className="block-head">
        <span className="lbl">◆ Special reports</span>
        <span className="idx">{reports.length}</span>
      </div>
      <div className="reports-grid">
        {reports.map(r => (
          <button key={r.id} className="report-card" onClick={()=>onOpen(r.id)}>
            <div className="rc-eyebrow">
              <span className="rc-tag">{r._tag || 'Report'}</span>
              <span className="rc-date">{r.publishDate}</span>
            </div>
            <div className="rc-title">{r.title}</div>
            {r.subtitle && <div className="rc-sub">{r.subtitle}</div>}
            {r.tags && r.tags.length > 0 && (
              <div className="rc-tags">{r.tags.map(t => <span key={t} className="chip">{t}</span>)}</div>
            )}
            <div className="rc-cta">Read report →</div>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ─────────── Conferences ─────────── */
function Conferences({ conferences }) {
  if (!conferences || conferences.length === 0) return null;
  const today = new Date().toISOString().slice(0, 10);
  const upcoming = conferences
    .filter(c => (c.endDate || c.startDate) >= today)
    .sort((a, b) => (a.startDate || '').localeCompare(b.startDate || ''));
  if (upcoming.length === 0) return null;
  const fmtTier = (t) => t === 1 ? 'Tier 1' : t === 2 ? 'Tier 2' : t === 3 ? 'Tier 3' : '';
  return (
    <div className="section-block conferences">
      <div className="block-head">
        <span className="lbl">◆ Conferences ▸ upcoming</span>
        <span className="idx">{upcoming.length}</span>
      </div>
      <div className="conferences-grid">
        {upcoming.map(c => {
          const inner = (
            <>
              <div className="cf-eyebrow">
                <span className={"cf-tier cf-tier-" + (c.tier || 0)}>{fmtTier(c.tier)}</span>
                <span className="cf-type">{c.type}</span>
                <span className="cf-date">{c.dateLabel || c.startDate}</span>
              </div>
              <div className="cf-name">{c.name}{c.url && c.url !== '—' ? <span className="cf-arrow"> ↗</span> : null}</div>
              {c.fullName && c.fullName !== c.name && <div className="cf-fullname">{c.fullName}</div>}
              <div className="cf-loc">
                <span>{c.location}</span>
                {c.venue && c.venue !== c.location && c.venue !== 'TBC' && <span className="cf-venue"> · {c.venue}</span>}
              </div>
              {c.blurb && <div className="cf-blurb">{c.blurb}</div>}
            </>
          );
          return c.url && c.url !== '—'
            ? <a key={c.id} href={c.url} target="_blank" rel="noopener noreferrer" className="conf-card conf-card-link">{inner}</a>
            : <div key={c.id} className="conf-card">{inner}</div>;
        })}
      </div>
    </div>
  );
}

function ReportDetail({ report, onClose }) {
  useEffect(()=>{
    const h = (e)=>{ if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return ()=>window.removeEventListener('keydown', h);
  }, [onClose]);

  if (!report) return null;
  return (
    <div className="report-overlay" onClick={(e)=>{ if (e.target.classList.contains('report-overlay')) onClose(); }}>
      <div className="report-modal">
        <div className="report-bar">
          <span className="rb-eyebrow">◆ Special report</span>
          <span className="rb-date">{report.publishDate}</span>
          <div className="rb-spacer"/>
          <button className="rb-close" onClick={onClose}>Close (Esc)</button>
        </div>
        <div className="report-body">
          <h1 className="rd-title">{report.title}</h1>
          {report.subtitle && <p className="rd-subtitle">{report.subtitle}</p>}
          {report.homeUrl && (
            <a href={report.homeUrl} target="_blank" rel="noopener noreferrer" className="rd-home-link">
              {report.homeLabel || 'Visit home'} ↗
            </a>
          )}
          {report.tags && report.tags.length > 0 && (
            <div className="rd-tags">{report.tags.map(t => <span key={t} className="chip">{t}</span>)}</div>
          )}
          {report.heroImage && (
            <figure className="rd-figure rd-hero">
              <img src={report.heroImage.url} alt={report.heroImage.alt || ''} loading="lazy"/>
              {report.heroImage.caption && <figcaption>{report.heroImage.caption}</figcaption>}
            </figure>
          )}
          {report.pullQuote && (
            <blockquote className="rd-quote">
              <span className="rd-quote-text">"{report.pullQuote.text}"</span>
              {report.pullQuote.attribution && <span className="rd-quote-attr">— {report.pullQuote.attribution}</span>}
            </blockquote>
          )}
          {report.tldr && report.tldr.length > 0 && (
            <div className="rd-tldr">
              <div className="rd-tldr-label">TL;DR</div>
              <ul>{report.tldr.map((b,ix)=><li key={ix}>{b}</li>)}</ul>
            </div>
          )}
          {(report.sections || []).map((s, ix)=>(
            <section key={ix} className="rd-section">
              <h2 className="rd-h2">{s.heading}</h2>
              {s.body && (Array.isArray(s.body)
                ? s.body.map((p, px) => <p key={px} className="rd-body">{p}</p>)
                : <p className="rd-body">{s.body}</p>)}
              {s.prose && <div className="rd-prose">{s.prose}</div>}
              {s.image && (
                <figure className="rd-figure">
                  <img src={s.image.url} alt={s.image.alt || ''} loading="lazy"/>
                  {s.image.caption && <figcaption>{s.image.caption}</figcaption>}
                </figure>
              )}
              {s.items && s.items.length > 0 && (
                <div className="rd-items">
                  {s.items.map((it, jx)=>{
                    const inner = (
                      <>
                        <div className="rd-item-name">{it.name}{it.url ? <span className="rd-item-arrow"> ↗</span> : null}</div>
                        {it.blurb && <div className="rd-item-blurb">{it.blurb}</div>}
                      </>
                    );
                    return it.url
                      ? <a key={jx} href={it.url} target="_blank" rel="noopener noreferrer" className="rd-item rd-item-link">{inner}</a>
                      : <div key={jx} className="rd-item">{inner}</div>;
                  })}
                </div>
              )}
            </section>
          ))}
          {report.sources && report.sources.length > 0 && (
            <section className="rd-section">
              <h2 className="rd-h2">Sources</h2>
              <ul className="rd-sources">
                {report.sources.map((s, ix)=>(
                  <li key={ix}><a href={s.url} target="_blank" rel="noopener noreferrer">{s.title} ↗</a></li>
                ))}
              </ul>
            </section>
          )}
        </div>
      </div>
    </div>
  );
}

window.ReadingList = ReadingList;
window.QuickTakes = QuickTakes;
window.FundingTimeline = FundingTimeline;
window.PresenterMode = PresenterMode;
window.CompareMode = CompareMode;
window.SpecialReports = SpecialReports;
window.Conferences = Conferences;
window.ReportDetail = ReportDetail;