/* global React, window */
const { VERTICAL_DETAIL: VD_DR, MILESTONES: MS_DR, ENGINES: EN_DR, VERTICALS: VX_DR } = window;

function DataRoom() {
  return (
    <div>
      <div className="prose" style={{ maxWidth: '74ch', marginBottom: 28 }}>
        <p>
          An analyst's reference layer. Every number in this hub traces back to a disclosed source: SEC filings, peer-reviewed studies, government statistics, or partner press releases. This page consolidates the primary data for independent verification.
        </p>
      </div>

      {/* Section 1: Consolidated vertical economics */}
      <div style={{ marginBottom: 40 }}>
        <div className="card-label" style={{ marginBottom: 12 }}>§ 01 · Consolidated vertical economics</div>
        <div style={{ overflowX: 'auto' }}>
          <table className="tbl" style={{ minWidth: 1000 }}>
            <thead>
              <tr>
                <th>Vertical</th>
                <th>Stage</th>
                <th className="num-col">TAM</th>
                <th className="num-col">Unit economics</th>
                <th className="num-col">Yield</th>
                <th className="num-col">Margin</th>
                <th>Primary partners</th>
              </tr>
            </thead>
            <tbody>
              {VX_DR.map((v) => {
                const d = VD_DR[v.k];
                if (!d) return null;
                const econ = d.economics || {};
                const unit = econ.sale_price_range || econ.uplift || econ.royalty || '—';
                return (
                  <tr key={v.k}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ width: 8, height: 8, background: v.c, borderRadius: 2 }} />
                        <div>
                          <div style={{ fontWeight: 500, fontSize: 13, color: 'var(--fg-0)' }}>{v.n}</div>
                          <div style={{ fontSize: 10, color: 'var(--fg-3)', fontFamily: 'var(--mono)' }}>{v.k}</div>
                        </div>
                      </div>
                    </td>
                    <td><span className="chip" style={{ borderColor: v.c, color: v.c }}>{v.stage}</span></td>
                    <td className="num-col">{v.tam >= 1000 ? (v.tam / 1000).toFixed(1) + 'B' : v.tam + 'M'}<div style={{ fontSize: 9, color: 'var(--fg-3)' }}>{v.u}</div></td>
                    <td className="num-col" style={{ fontSize: 11 }}>{unit}</td>
                    <td className="num-col">{econ.yield || '—'}</td>
                    <td className="num-col">{econ.margin || '—'}</td>
                    <td style={{ fontSize: 11, color: 'var(--fg-2)' }}>{d.partners ? d.partners.slice(0, 2).map(p => p.name).join(', ') : '—'}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Section 2: All regulatory drivers */}
      <div style={{ marginBottom: 40 }}>
        <div className="card-label" style={{ marginBottom: 12 }}>§ 02 · Regulatory forcing function — full schedule</div>
        <table className="tbl">
          <thead>
            <tr><th>Jurisdiction / Framework</th><th>Applies to</th><th>Detail</th></tr>
          </thead>
          <tbody>
            {Object.entries(VD_DR).flatMap(([k, d]) =>
              (d.regulatory || []).map((r, i) => ({ k, d, r, i }))
            ).map(({ k, d, r, i }) => (
              <tr key={`${k}-${i}`}>
                <td><span className="chip accent">{r.name}</span></td>
                <td style={{ fontSize: 12 }}>{d.full}</td>
                <td style={{ fontSize: 12, color: 'var(--fg-1)' }}>{r.detail}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Section 3: Full competitive matrix */}
      <div style={{ marginBottom: 40 }}>
        <div className="card-label" style={{ marginBottom: 12 }}>§ 03 · Per-vertical competitive verdict</div>
        <table className="tbl">
          <thead>
            <tr><th style={{ width: 180 }}>Vertical</th><th style={{ width: 180 }}>Alternative</th><th>Verdict</th></tr>
          </thead>
          <tbody>
            {Object.entries(VD_DR).flatMap(([k, d]) =>
              (d.competitive || []).map((c, i) => ({ k, d, c, i }))
            ).map(({ k, d, c, i }) => (
              <tr key={`${k}-${i}`} className={c.tech.startsWith('HCT') ? 'hilite' : ''}>
                <td style={{ fontSize: 12, color: 'var(--fg-2)' }}>{i === 0 ? d.full : ''}</td>
                <td style={{ fontSize: 12, fontWeight: c.tech.startsWith('HCT') ? 600 : 400 }}>{c.tech}</td>
                <td style={{ fontSize: 12 }}>{c.verdict}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Section 4: Milestones with price-impact ranges */}
      <div style={{ marginBottom: 40 }}>
        <div className="card-label" style={{ marginBottom: 12 }}>§ 04 · Milestone catalysts with impact estimates</div>
        <table className="tbl">
          <thead>
            <tr><th>Target</th><th>Status</th><th>Event</th><th className="num-col">Impact ($)</th><th>Rationale</th></tr>
          </thead>
          <tbody>
            {MS_DR.map((m, i) => (
              <tr key={i}>
                <td className="num" style={{ fontSize: 11 }}>{m.y}</td>
                <td><span className={`chip ${m.s === 'done' ? 'pos' : m.s === 'next' ? 'warn' : ''}`}>{m.s === 'done' ? 'Done' : m.s === 'next' ? 'Imminent' : 'Future'}</span></td>
                <td style={{ fontWeight: 500, fontSize: 13 }}>{m.e}</td>
                <td className="num-col" style={{ color: m.p ? 'var(--accent)' : 'var(--fg-3)' }}>{m.p ? `+$${m.p[0]}–${m.p[1]}` : '—'}</td>
                <td style={{ fontSize: 12, color: 'var(--fg-2)', lineHeight: 1.55 }}>{m.note}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Section 5: Ownership + financials */}
      <div style={{ marginBottom: 40 }}>
        <div className="card-label" style={{ marginBottom: 12 }}>§ 05 · Share structure & financial position</div>
        <div className="dataroom-2col">
          <table className="tbl">
            <thead><tr><th>Ownership bucket</th><th className="num-col">%</th><th>Note</th></tr></thead>
            <tbody>
              <tr><td>CEO Ofer Vicus</td><td className="num-col">~29.5%</td><td style={{ fontSize: 12 }}>Co-founder, aligned with multi-year timeline</td></tr>
              <tr><td>Management + board</td><td className="num-col">~5–7%</td><td style={{ fontSize: 12 }}>Cumulative insider holdings</td></tr>
              <tr className="hilite"><td><b>Total insiders</b></td><td className="num-col"><b>34–36%</b></td><td style={{ fontSize: 12 }}>Unusually high for a pre-revenue Nasdaq listing</td></tr>
              <tr><td>Institutional</td><td className="num-col">~1.6%</td><td style={{ fontSize: 12 }}>Massive headroom on validation milestones</td></tr>
              <tr><td>Retail + float</td><td className="num-col">~63%</td><td style={{ fontSize: 12 }}>High conviction base</td></tr>
            </tbody>
          </table>
          <table className="tbl">
            <thead><tr><th>Line</th><th className="num-col">Value</th><th>As of</th></tr></thead>
            <tbody>
              <tr><td>Cash</td><td className="num-col" style={{ color: 'var(--accent)', fontWeight: 600 }}>C$39.4M</td><td style={{ fontSize: 12 }}>Feb 28, 2026 (Q3 FY26)</td></tr>
              <tr><td>Debt</td><td className="num-col" style={{ color: 'var(--pos)', fontWeight: 600 }}>$0</td><td style={{ fontSize: 12 }}>—</td></tr>
              <tr><td>Operating burn</td><td className="num-col">~$10.2M/yr</td><td style={{ fontSize: 12 }}>real cash, excl. non-cash items</td></tr>
              <tr className="hilite"><td><b>Runway</b></td><td className="num-col"><b>~2.5 yrs</b></td><td style={{ fontSize: 12 }}>to FOAK completion</td></tr>
              <tr><td>Shares outstanding</td><td className="num-col">38.9 M</td><td style={{ fontSize: 12 }}>basic count</td></tr>
              <tr><td>Analyst targets</td><td className="num-col">$19 / $22 / $46</td><td style={{ fontSize: 12 }}>Ladenburg / HC Wainwright / D. Boral</td></tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Section 6: Partnership registry */}
      <div style={{ marginBottom: 40 }}>
        <div className="card-label" style={{ marginBottom: 12 }}>§ 06 · Partnership registry (by vertical)</div>
        <table className="tbl">
          <thead><tr><th>Vertical</th><th>Partner</th><th>Status</th><th>Context</th></tr></thead>
          <tbody>
            {Object.entries(VD_DR).flatMap(([k, d]) =>
              (d.partners || []).map((p, i) => ({ k, d, p, i }))
            ).map(({ k, d, p, i }) => (
              <tr key={`${k}-${i}`}>
                <td style={{ fontSize: 12, color: 'var(--fg-2)' }}>{i === 0 ? d.full : ''}</td>
                <td style={{ fontWeight: 500, fontSize: 13 }}>{p.name}</td>
                <td style={{ fontSize: 12, color: 'var(--accent)' }}>{p.status}</td>
                <td style={{ fontSize: 12 }}>{p.context}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Section 7: Aggregated risks */}
      <div style={{ marginBottom: 40 }}>
        <div className="card-label" style={{ marginBottom: 12 }}>§ 07 · Risk register</div>
        <div className="risks-2col">
          {Object.entries(VD_DR).map(([k, d]) => d.risks && (
            <div key={k} style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 6, padding: 16 }}>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 8, color: 'var(--fg-0)' }}>{d.full}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {d.risks.map((r, i) => (
                  <li key={i} style={{ display: 'flex', gap: 8, fontSize: 12, color: 'var(--fg-1)', lineHeight: 1.55, marginBottom: 6 }}>
                    <span style={{ color: 'var(--neg)', flexShrink: 0 }}>▸</span>
                    <span>{r}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--mono)', borderTop: '1px solid var(--line)', paddingTop: 16, lineHeight: 1.6 }}>
        Sources: Aduro 10-Q filings; NGP pilot operating data; OECD Plastics Outlook 2022; Sousa et al. 2023 (paraffinic crude); WTR equity research; EU PPWR/ReFuelEU regulatory texts; company press releases. This is a design prototype — verify all figures against primary sources.
      </div>
    </div>
  );
}

window.DataRoom = DataRoom;