/* ============================================================
   Deal Flow screens — Pipeline · Outreach · Industry Studies
   ============================================================ */

/* ---- shared filtering ---- */
function dfFilter(leads, f) {
  const q = (f.search || '').trim().toLowerCase();
  return leads.filter((d) => {
    if (f.verticals.length && !f.verticals.includes(d.verticalName)) return false;
    if (f.owners.length && !(d.owner && f.owners.includes(DF.mName(d.owner)))) return false;
    if (q && !(d.name + ' ' + d.domain + ' ' + (d.verticalName || '')).toLowerCase().includes(q)) return false;
    return true;
  });
}

/* Screen 1: Pipeline now lives in df_pipeline.jsx (the large board dashboard). */

/* ================= Screen 2: Outreach ================= */
function Outreach({ outreach, filters, openDrawer }) {
  const cur = outreach; // already globally filtered
  const ytd = cur.filter((d) => d.year === 2026);
  const ytdLeads = ytd.filter((d) => d.leadIn).length;
  const ytdGoal = DF.GOAL_PER * DF.TEAM * DF.ytd2026.length; // 4*6*5 = 120
  const latestMonth = DF.months[DF.months.length - 1];
  const monthLeads = cur.filter((d) => d.month === latestMonth && d.leadIn).length;
  const totalLeadIns = cur.filter((d) => d.leadIn).length;
  const convRate = cur.length ? totalLeadIns / cur.length : 0;

  // --- goal-pacing projection (O1 cockpit) ---
  const monthsElapsed = DF.ytd2026.length;               // Jan–May 2026 = 5
  const runRate = monthsElapsed ? ytdLeads / monthsElapsed : 0;
  const projYear = Math.round(runRate * 12);
  const goalYear = DF.GOAL_MONTH * 12;                   // 288
  const remaining = 12 - monthsElapsed;
  const needPerMo = remaining > 0 ? Math.ceil((goalYear - ytdLeads) / remaining) : 0;
  const onPace = ytdLeads >= ytdGoal;
  const paceGap = Math.abs(ytdLeads - ytdGoal);

  // --- this-month momentum vs prior month ---
  const prevMonth = DF.months[DF.months.length - 2];
  const prevMonthLeads = cur.filter((d) => d.month === prevMonth && d.leadIn).length;
  const monthDelta = monthLeads - prevMonthLeads;

  // --- conversion momentum: recent 6 mo vs prior 6 mo ---
  const recentMos = DF.months.slice(6), priorMos = DF.months.slice(0, 6);
  const convOf = (mos) => { const s = cur.filter((d) => mos.includes(d.month)); return s.length ? s.filter((d) => d.leadIn).length / s.length : 0; };
  const convDeltaPP = Math.round((convOf(recentMos) - convOf(priorMos)) * 1000) / 10;

  // outreach funnel
  const all = cur.length;
  const reached = cur.filter((d) => d.reached).length;
  const leadIns = totalLeadIns;
  const future = cur.filter((d) => d.status === 'future').length;
  const notInt = cur.filter((d) => d.status === 'not_int').length;

  // full funnel: cold outreach lead-ins flowing into the deal pipeline (all phases)
  const coldPipe = dfFilter(DF.pipeline.filter((d) => d.source === 'cold_calling'), filters);
  const pBase = coldPipe.length || 1;
  const rateAt = (rank) => coldPipe.filter((d) => d.stageRank >= rank).length / pBase;
  const fullFunnel = [
    { key: 'sourced', label: 'Companies sourced', value: all, set: cur },
    { key: 'reached', label: 'Initial outreach', value: reached, set: cur.filter((d) => d.reached) },
    { key: 'lead_in', label: 'Lead-in', value: leadIns, set: cur.filter((d) => d.leadIn) },
    { key: 'appointment', label: 'Appointment', value: Math.round(leadIns * rateAt(1)), pipe: 1 },
    { key: 'hot_nbo', label: 'Hot / NBO', value: Math.round(leadIns * rateAt(2)), pipe: 2 },
    { key: 'term_dd', label: 'Term sheet / DD', value: Math.round(leadIns * rateAt(3)), pipe: 3 },
    { key: 'closed', label: 'Closed / signed', value: Math.round(leadIns * rateAt(4)), pipe: 4 },
  ];

  // monthly trend (lead-ins per month)
  const trend = DF.months.map((mo) => ({ label: DF.monthLabel(mo), mo, value: cur.filter((d) => d.month === mo && d.leadIn).length }));

  // team performance + conversion
  const team = DF.members.map((m) => {
    const mine = cur.filter((d) => d.owner === m.id);
    const li = mine.filter((d) => d.leadIn);
    const ytdLi = mine.filter((d) => d.year === 2026 && d.leadIn).length;
    return { id: m.id, name: m.name, total: mine.length, leadIns: li.length, ytdLeads: ytdLi, rate: mine.length ? li.length / mine.length : 0 };
  }).sort((a, b) => b.ytdLeads - a.ytdLeads);

  const ytdTone = ytdLeads >= ytdGoal ? 'var(--positive)' : ytdLeads >= ytdGoal * 0.85 ? 'var(--warn)' : 'var(--danger)';
  const monthTone = monthLeads >= DF.GOAL_MONTH ? 'var(--positive)' : monthLeads >= DF.GOAL_MONTH * 0.85 ? 'var(--warn)' : 'var(--danger)';

  return (
    <div className="screen-in">
      <PageHead icon="phone" title="Outreach"
        right={<button className="btn"><Icon name="download" size={14} /> Export</button>} />

      <div style={{ display: 'flex', gap: 12, marginBottom: 22 }}>
        {/* hero: YTD vs goal + end-of-year projection */}
        <div className="card" style={{ flex: 1.9, padding: '13px 16px 14px', position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div className="micro">YTD lead-ins vs goal</div>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11, fontWeight: 700,
              padding: '2px 8px', borderRadius: 20,
              color: onPace ? 'var(--positive)' : 'var(--danger)',
              background: onPace ? 'var(--positive-soft)' : 'var(--danger-soft)',
            }}>
              <Icon name={onPace ? 'arrowUp' : 'arrowDown'} size={11} stroke={2.4} />
              {onPace ? 'on pace' : `${paceGap} behind pace`}
            </span>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 7, marginTop: 4 }}>
            <span className="tabular" style={{ fontSize: 28, fontWeight: 700, lineHeight: 1, color: ytdTone }}>{ytdLeads}</span>
            <span className="tabular" style={{ fontSize: 14, color: 'var(--ink-soft)', fontWeight: 600 }}>/ {ytdGoal} YTD goal</span>
          </div>
          {/* projection bar: fill = YTD progress, marker = where run-rate lands by year end */}
          <div style={{ position: 'relative', height: 8, background: 'var(--surface-deep)', borderRadius: 5, marginTop: 11, overflow: 'visible' }}>
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: Math.min(100, ytdLeads / goalYear * 100) + '%', background: ytdTone, borderRadius: 5 }}></div>
            <div title={`Projected year-end ≈ ${projYear}`} style={{ position: 'absolute', left: Math.min(99, projYear / goalYear * 100) + '%', top: -3, bottom: -3, width: 2, background: 'var(--ink-muted)' }}></div>
            <div title="Full-year goal" style={{ position: 'absolute', left: 'calc(100% - 2px)', top: -3, bottom: -3, width: 2, background: 'var(--danger)' }}></div>
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-soft)', marginTop: 9, fontWeight: 500 }}>
            Projected year-end ≈ <b style={{ color: 'var(--ink)' }}>{projYear}</b> vs {goalYear} goal · need <b style={{ color: 'var(--ink)' }}>{needPerMo}/mo</b> to close the gap
          </div>
        </div>
        {/* this month vs goal */}
        <div className="card" style={{ flex: 1, padding: '13px 15px 14px' }}>
          <div className="micro" style={{ marginBottom: 7 }}>This month vs goal</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
            <span className="tabular" style={{ fontSize: 27, fontWeight: 700, lineHeight: 1, color: monthTone }}>{monthLeads}</span>
            <span className="tabular" style={{ fontSize: 14, color: 'var(--ink-soft)', fontWeight: 600 }}>/ {DF.GOAL_MONTH}</span>
            {monthDelta !== 0 && (
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 1, fontSize: 11.5, fontWeight: 700, color: monthDelta > 0 ? 'var(--positive)' : 'var(--danger)' }}>
                <Icon name={monthDelta > 0 ? 'arrowUp' : 'arrowDown'} size={11} stroke={2.2} />{Math.abs(monthDelta)}
              </span>
            )}
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-soft)', marginTop: 9, fontWeight: 500 }}>{DF.monthLabel(latestMonth)} {monthLeads >= DF.GOAL_MONTH ? '· goal hit ✓' : `· ${DF.GOAL_MONTH - monthLeads} short`}</div>
        </div>
        <KpiCell label="Conversion to lead-in" value={DF.fmtPct(convRate)} delta={convDeltaPP} hint="pp" sub="vs prior 6 mo"
          onClick={() => openDrawer('All lead-ins', 'Cold-outreach contacts that converted', cur.filter((d) => d.leadIn))} />
        <KpiCell label="Companies contacted" value={all.toLocaleString('en-US')} sub="trailing 12 months"
          onClick={() => openDrawer('All companies contacted', 'The full cold-calling universe', cur)} />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 16, marginBottom: 16 }}>
        <ChartCard title="Outreach funnel" sub="Cold contacts all the way through to closed deals"
          footnote="Top three stages are cold-outreach activity. Deal stages show how cold-sourced lead-ins advance through the pipeline (lead-in → … → closed).">
          <div style={{ padding: '6px 0' }}>
            <StepFunnel
              steps={fullFunnel.map((s) => ({ label: s.label, value: s.value }))}
              dropoffs={[
                { label: 'Future potential', value: future, tone: 'warn', onClick: () => openDrawer('Future potential', 'Contacted, parked for later', cur.filter((d) => d.status === 'future')) },
                { label: 'Not interested', value: notInt, tone: 'danger', onClick: () => openDrawer('Not interested', 'Contacted, declined', cur.filter((d) => d.status === 'not_int')) },
              ]}
              onStep={(s, i) => {
                const st = fullFunnel[i];
                if (st.set) openDrawer(st.label, 'Cold-outreach companies', st.set);
                else openDrawer(`${st.label} · cold-sourced`, 'Cold-sourced deals that reached this stage', coldPipe.filter((d) => d.stageRank >= st.pipe));
              }} />
          </div>
        </ChartCard>
        <ChartCard title="Monthly leads vs goal" sub="Below-goal months in red against the goal line"
          footnote={`Goal line = 4 × ${DF.TEAM} = ${DF.GOAL_MONTH} lead-ins/month.`}>
          <GoalTrend data={trend} goal={DF.GOAL_MONTH} height={210}
            onPoint={(d) => openDrawer(`Lead-ins · ${d.label}`, 'Cold-outreach lead-ins this month', cur.filter((x) => x.month === d.mo && x.leadIn))} />
        </ChartCard>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.25fr', gap: 16 }}>
        <ChartCard title="Team performance" sub="YTD lead-ins per member · red mark = monthly goal pace">
          <div style={{ padding: '4px 0' }}>
            <TeamBars rows={team.map((t) => ({ label: t.name, value: t.ytdLeads }))} goal={DF.GOAL_PER * DF.ytd2026.length}
              onRow={(r) => { const m = DF.members.find((x) => x.name === r.label); openDrawer(`${r.label} · lead-ins`, 'Cold-outreach lead-ins YTD', cur.filter((d) => d.owner === m.id && d.year === 2026 && d.leadIn)); }} />
          </div>
        </ChartCard>
        <div className="card" style={{ overflow: 'hidden' }}>
          <div style={{ padding: '14px 16px 6px' }}>
            <h3 style={{ fontSize: 13.5, fontWeight: 700 }}>Team conversion</h3>
            <div style={{ fontSize: 11.5, color: 'var(--ink-soft)', marginTop: 2, fontWeight: 500 }}>Trailing 12 months · ≥10% green · ≥5% amber · else red</div>
          </div>
          <table className="tbl">
            <thead><tr><th>Member</th><th className="num">Total leads</th><th className="num">Lead-ins</th><th className="num" style={{ width: 90 }}>Rate</th></tr></thead>
            <tbody>
              {team.map((t) => (
                <tr key={t.id} className="clickable" onClick={() => openDrawer(`${t.name} · contacts`, 'All cold-outreach companies', cur.filter((d) => d.owner === t.id))}>
                  <td style={{ fontWeight: 600 }}>{t.name}</td>
                  <td className="num tabular" style={{ color: 'var(--ink-muted)' }}>{t.total}</td>
                  <td className="num tabular" style={{ fontWeight: 700 }}>{t.leadIns}</td>
                  <td className="num"><ConvCell rate={t.rate} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* ================= Screen 3: Industry Studies ================= */
function IndustryStudies({ industry, filters, openDrawer }) {
  const [sort, setSort] = useState({ key: 'conv', dir: 'desc' });
  const [exp, setExp] = useState(null);
  const cur = industry;

  const rows = DF.verticals.map((v) => {
    const set = cur.filter((d) => d.vertical === v.id);
    const inP = set.filter((d) => d.inPipeline);
    const stageCounts = DF.IND_ORDER.map((st) => set.filter((d) => d.stageRank >= DF.indRank(st)).length);
    return { id: v.id, name: v.name, total: set.length, inP: inP.length, conv: set.length ? inP.length / set.length : 0, stageCounts, set };
  }).filter((r) => r.total > 0);

  const m = sort.dir === 'asc' ? 1 : -1;
  rows.sort((a, b) => { const x = sort.key === 'name' ? a.name.toLowerCase() : a[sort.key]; const y = sort.key === 'name' ? b.name.toLowerCase() : b[sort.key]; return x < y ? -m : x > y ? m : 0; });
  const onSort = (k) => setSort((s) => s.key === k ? { key: k, dir: s.dir === 'asc' ? 'desc' : 'asc' } : { key: k, dir: k === 'name' ? 'asc' : 'desc' });

  const totalAll = cur.length;
  const totalInP = cur.filter((d) => d.inPipeline).length;
  const overallConv = totalAll ? totalInP / totalAll : 0;
  const latestMonth = DF.months[DF.months.length - 1];
  const monthInP = cur.filter((d) => d.month === latestMonth && d.inPipeline).length;

  return (
    <div className="screen-in">
      <PageHead icon="briefcase" title="Industry Studies"
        right={<button className="btn"><Icon name="download" size={14} /> Export</button>} />

      <div style={{ display: 'flex', gap: 12, marginBottom: 22 }}>
        <KpiCell label="In pipeline" value={totalInP} sub={`of ${totalAll.toLocaleString('en-US')} scanned`}
          onClick={() => openDrawer('In pipeline · all verticals', 'Scanned companies that entered the pipeline', cur.filter((d) => d.inPipeline), true)} />
        <KpiCell label="Added this month" value={monthInP} sub={`pipeline · ${DF.monthLabel(latestMonth)}`}
          onClick={() => openDrawer(`In pipeline · ${DF.monthLabel(latestMonth)}`, 'Entered pipeline this month', cur.filter((d) => d.month === latestMonth && d.inPipeline), true)} />
        <KpiCell label="Conversion rate" value={DF.fmtPct(overallConv)} accent sub="scan → pipeline" />
        <KpiCell label="Active verticals" value={rows.length} sub="under study" />
      </div>

      <div className="card" style={{ overflow: 'hidden', marginBottom: 16 }}>
        <div style={{ padding: '14px 16px 6px' }}>
          <h3 style={{ fontSize: 13.5, fontWeight: 700 }}>Conversion by vertical</h3>
          <div style={{ fontSize: 11.5, color: 'var(--ink-soft)', marginTop: 2, fontWeight: 500 }}>Sorted by conversion: best and worst hunting grounds. Click a vertical to open its deep-dive.</div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th className="sortable" onClick={() => onSort('name')}>Vertical</th>
              <th className="sortable num" onClick={() => onSort('total')} style={{ textAlign: 'right' }}>Scanned</th>
              <th className="sortable num" onClick={() => onSort('inP')} style={{ textAlign: 'right' }}>In pipeline</th>
              <th className="sortable num" onClick={() => onSort('conv')} style={{ textAlign: 'right', width: 100 }}>Conversion</th>
              <th style={{ width: 120 }}>Stage funnel</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => {
              const on = exp === r.id;
              return (
                <React.Fragment key={r.id}>
                  <tr className="clickable" onClick={() => setExp((e) => e === r.id ? null : r.id)} style={on ? { background: 'var(--accent-soft)' } : null}>
                    <td><span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name={on ? 'chevronDown' : 'chevronRight'} size={13} style={{ color: on ? 'var(--accent)' : 'var(--ink-faint)' }} /><span style={{ fontWeight: on ? 700 : 600, color: on ? 'var(--accent)' : 'var(--ink)' }}>{r.name}</span></span></td>
                    <td className="num tabular" style={{ color: 'var(--ink-muted)' }}>{r.total}</td>
                    <td className="num tabular" style={{ fontWeight: 700 }}>{r.inP}</td>
                    <td className="num"><ConvCell rate={r.conv} /></td>
                    <td><MiniFunnel values={r.stageCounts.slice(1)} /></td>
                  </tr>
                  {on && (
                    <tr>
                      <td colSpan={5} style={{ padding: 0, background: 'var(--surface)' }}>
                        <div style={{ borderTop: '1px solid var(--line)', animation: 'fadeIn .15s ease' }}>
                          <VerticalDeepDive r={r} openDrawer={openDrawer} />
                        </div>
                      </td>
                    </tr>
                  )}
                </React.Fragment>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ---- Industry: per-vertical deep-dive panel (wireframe I3) ---- */
function VerticalDeepDive({ r, openDrawer }) {
  const stageLabels = ['Scanned', 'In pipeline', 'Lead in', 'Appointment', 'Analysis', 'NBO', 'Monitoring'];
  // funnel: scanned → … → monitoring (cumulative counts already in r.stageCounts)
  const funnelSteps = DF.IND_ORDER.map((st, i) => ({ key: st, label: stageLabels[i], value: r.stageCounts[i] }));

  // subsectors: split this vertical's scans, count + how many entered pipeline
  const subs = (DF.SUBSECTORS[r.id] || ['General']).map((name) => {
    const set = r.set.filter((d) => d.subsector === name);
    const inP = set.filter((d) => d.inPipeline);
    return { name, total: set.length, inP: inP.length, conv: set.length ? inP.length / set.length : 0, set };
  }).sort((a, b) => b.total - a.total);
  const subMax = Math.max(1, ...subs.map((s) => s.total));

  // scan trend by month
  const trend = DF.months.map((mo) => ({ label: DF.monthLabel(mo), value: r.set.filter((d) => d.month === mo).length }));

  // top targets: furthest-stage companies in pipeline
  const targets = r.set.filter((d) => d.inPipeline).sort((a, b) => b.stageRank - a.stageRank || b.fte - a.fte).slice(0, 6);

  return (
    <div style={{ overflow: 'hidden' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, padding: '15px 18px 13px', borderBottom: '1px solid var(--line)' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 5 }}><Icon name="briefcase" size={11} style={{ verticalAlign: -1, marginRight: 5, color: 'var(--accent)' }} />Vertical deep-dive</div>
          <h3 style={{ fontSize: 18, fontWeight: 700 }}>{r.name}</h3>
          <div style={{ fontSize: 12.5, color: 'var(--ink-soft)', marginTop: 3, fontWeight: 500 }}>
            <b style={{ color: 'var(--ink)' }}>{r.total}</b> scanned · <b style={{ color: 'var(--ink)' }}>{r.inP}</b> in pipeline · <b style={{ color: 'var(--ink)' }}>{DF.fmtPct(r.conv)}</b> conversion
          </div>
        </div>
        <div style={{ width: 200, flexShrink: 0 }}>
          <div className="micro" style={{ marginBottom: 4, textAlign: 'right' }}>Scans / month</div>
          <Sparkline values={trend.map((d) => d.value)} w={196} h={42} />
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 0 }}>
        <div style={{ padding: '15px 18px', borderRight: '1px solid var(--line)' }}>
          <div className="micro" style={{ marginBottom: 12 }}>Stage funnel</div>
          <StepFunnel steps={funnelSteps}
            onStep={(s, i) => { const st = funnelSteps[i]; openDrawer(`${r.name} · ${st.label}`, 'Companies that reached this stage', i === 0 ? r.set : r.set.filter((d) => d.stageRank >= DF.indRank(st.key)), true); }} />
        </div>
        <div style={{ padding: '15px 18px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <div className="micro" style={{ marginBottom: 11 }}>Subsectors</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {subs.map((s) => (
                <button key={s.name} onClick={() => openDrawer(`${r.name} · ${s.name}`, 'Scanned companies in this subsector', s.set, true)}
                  style={{ border: 'none', background: 'transparent', padding: 0, cursor: 'pointer', textAlign: 'left' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                    <span style={{ fontSize: 12.5, fontWeight: 600 }}>{s.name}</span>
                    <span className="tabular" style={{ fontSize: 11.5, color: 'var(--ink-soft)', fontWeight: 600 }}>{s.total} · {s.inP} in pipe</span>
                  </div>
                  <div style={{ height: 8, background: 'var(--surface-deep)', borderRadius: 5, overflow: 'hidden' }}>
                    <div style={{ width: s.total / subMax * 100 + '%', height: '100%', background: 'var(--accent)', borderRadius: 5 }}></div>
                  </div>
                </button>
              ))}
            </div>
          </div>
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 9 }}>
              <div className="micro">Top targets · furthest in pipeline</div>
              <button className="btn ghost sm" onClick={() => openDrawer(`${r.name} · in pipeline`, 'All companies that entered the pipeline', r.set.filter((d) => d.inPipeline), true)} style={{ height: 24, padding: '0 9px', fontSize: 11.5 }}>View all <Icon name="chevronRight" size={12} /></button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {targets.length === 0 && <div style={{ fontSize: 12, color: 'var(--ink-faint)', padding: '6px 0' }}>No companies in pipeline yet.</div>}
              {targets.map((d) => (
                <button key={d.id} onClick={() => openDrawer(d.name, `${r.name} · ${d.country}`, [d], true)}
                  style={{ border: 'none', borderTop: '1px solid var(--line-soft)', background: 'transparent', cursor: 'pointer', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0' }}>
                  <span style={{ flex: 1, minWidth: 0, fontSize: 12.5, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.name}</span>
                  <StatusBadge status={d.status} />
                  <span className="tabular" style={{ fontSize: 11.5, color: 'var(--ink-soft)', width: 54, textAlign: 'right' }}>{d.fte} FTE</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Outreach, IndustryStudies, dfFilter });