/* global React, window */

function Thesis() {
  return (
    <>
      {/* The Technology */}
      <section className="section">
        <div className="section-head">
          <div>
            <div className="section-num">§ 01</div>
            <div className="section-title serif">The Technology</div>
          </div>
          <div className="section-kicker">
An aqueous medium with a simple metal catalyst and a renewable hydrogen-donor (methanol, ethanol, glycerol, cellulose) selectively cleaves carbon–carbon bonds at moderate temperature — capping the broken ends with H in a single step. This chemistry did not exist before Aduro developed it.
          </div>
        </div>

        <div className="thesis-2col">
          <div className="prose">
            <p>
              Hydrocarbon polymers are the molecular backbone of modern civilization. Plastic packaging, medical devices, asphalt, tire rubber, insulation, crude oil, synthetic fibers, polyurethane, PEX plumbing, agricultural films. The global hydrocarbon economy exceeds $5 trillion annually. The subset Aduro's technology directly addresses — processing, recycling, and upgrading of hydrocarbon materials — represents trillions in annual value flows still relying on thermal principles developed 80–100 years ago.
            </p>
            <p>
              Every existing approach for breaking these chains uses extreme heat. Pyrolysis at 400–600°C. Coking at 450–520°C. Gasification at 700–1,400°C. These processes are inherently indiscriminate: they break molecules randomly, producing a chaotic mix of useful product, waste char, and toxic emissions.
            </p>
          </div>
          <div className="prose">
            <p>
Hydrochemolytic Technology (HCT) takes a fundamentally different path. In an aqueous medium, a simple in-situ metal catalyst coordinates to specific C–C bonds while a renewable H-donor co-agent — methanol, ethanol, glycerol, or cellulose — supplies the hydrogen equivalents that cap the broken ends. Operating at 240–390 °C, the process is like molecular scissors that cut target bonds and saturate the fragments in one step, leaving everything else intact. No molecular H₂ gas required.
            </p>
            <p>
The result is qualitatively different output: ~97% saturated C5–C20 hydrocarbons, the exact molecular range steam crackers need to produce virgin-quality ethylene and propylene. Clean, stable, directly usable. Less than 2% solid char. No downstream hydrogenation required.
            </p>
          </div>
        </div>

        <div className="rule" />

        <div className="grid-4">
          {[
            { v: '240–390°C', l: 'Operating Temperature', s: 'vs 400–1,400°C for thermal' },
            { v: 'C5–C20', l: 'Output Range', s: 'cracker-ready naphtha' },
            { v: '<2%', l: 'Char Waste', s: 'vs 15–30% pyrolysis' },
            { v: '240+', l: 'Continuous Runs', s: 'process know-how compounding' },
          ].map((s, i) => (
            <div key={i} className="minibox">
              <div className="card-label">{s.l}</div>
              <div className="num" style={{ fontSize: 28, color: 'var(--accent)', marginTop: 4 }}>{s.v}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 6 }}>{s.s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Moat */}
      <section className="section">
        <div className="section-head">
          <div>
            <div className="section-num">§ 02</div>
            <div className="section-title serif">The Moat</div>
          </div>
          <div className="section-kicker">
            Ten patents plus a continuation filing. But the deeper moat is 240+ continuous-flow runs of process know-how that cannot be reverse-engineered from the output.
          </div>
        </div>

        <div className="moat-2col">
          <div className="prose">
            <p>
A competitor would need to independently discover the full HCT triad — aqueous medium, in-situ metal catalyst, and renewable H-donor co-agent — develop the process parameters from scratch over years of R&D, and navigate around Aduro's patent portfolio. Meanwhile, every month of operation compounds the know-how advantage. Each deployed plant generates operational data that improves the next plant's design, creating a feedback loop late entrants cannot shortcut.
            </p>
            <p>
              First-mover advantage in platform technology is durable. The Houdry catalytic cracking process went commercial at Sun Oil in 1937; fluid catalytic cracking followed at Standard Oil of New Jersey in 1942. Nearly a century later, those two designs still power most of the world's refineries. ARM's instruction set, defined in the 1980s, runs 95% of mobile devices today. Platform chemistry, once adopted, is hard to displace.
            </p>
          </div>
          <div>
            <div className="grid-2">
              {[
                { v: '10+', l: 'Patents', s: '7 granted · 3 pending · CIP' },
                { v: '240+', l: 'Continuous Runs', s: 'of process tuning' },
                { v: '5', l: 'Core Verticals', s: 'pilot / bench validated' },
                { v: '8', l: 'Emerging Verticals', s: 'lab / disclosed / testing' },
              ].map((s, i) => (
                <div key={i} className="minibox">
                  <div className="num" style={{ fontSize: 26, color: 'var(--fg-0)' }}>{s.v}</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-1)', marginTop: 4, fontWeight: 500 }}>{s.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2 }}>{s.s}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Licensing */}
      <section className="section">
        <div className="section-head">
          <div>
            <div className="section-num">§ 03</div>
            <div className="section-title serif">Licensing, not manufacturing</div>
          </div>
          <div className="section-kicker">
            Aduro licenses the technology. Partners fund all capex and operations. Revenue comes from per-unit royalties on every ton processed or barrel upgraded. The Qualcomm/ARM model applied to hydrocarbon chemistry.
          </div>
        </div>

        <div className="prose" style={{ maxWidth: '80ch', marginBottom: 28 }}>
          <p>
            The licensee gets technology they cannot replicate, processes feedstock they have no solution for, and produces output at premium prices. Aduro gets recurring royalty revenue with 70–80% net margins because it carries none of the capital or operating costs. Every licensed plant becomes a perpetual revenue stream at minimal incremental cost.
          </p>
        </div>

        <div className="grid-3">
          {[
            { v: '100%', l: 'Licensee-funded', s: 'All plant capex and opex borne by the operator', c: 'var(--warn)' },
            { v: 'IP + Design', l: 'Aduro provides', s: 'Process license, engineering package, technical support', c: 'var(--accent)' },
            { v: '70–80%', l: 'Aduro margins', s: 'On royalty revenue, no capital or opex drag', c: 'var(--pos)' },
          ].map((s, i) => (
            <div key={i} className="minibox" style={{ borderTop: `2px solid ${s.c}` }}>
              <div className="num" style={{ fontSize: 26, color: s.c }}>{s.v}</div>
              <div style={{ fontSize: 13, color: 'var(--fg-0)', marginTop: 6, fontWeight: 500 }}>{s.l}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 4, lineHeight: 1.55 }}>{s.s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Regulatory */}
      <section className="section">
        <div className="section-head">
          <div>
            <div className="section-num">§ 04</div>
            <div className="section-title serif">A regulatory forcing function</div>
          </div>
          <div className="section-kicker">
            EU PPWR mandates recycled content with financial penalties. ReFuelEU mandates 6% SAF by 2030, 70% by 2050. Existing technologies cannot produce enough supply. HCT fills the gap.
          </div>
        </div>

        <div className="prose" style={{ maxWidth: '80ch', marginBottom: 24 }}>
          <p>
            Mechanical recycling handles roughly 9–10% of global plastic waste. Pyrolysis, after decades of development, currently handles less than 2%. Even at its theoretical best on clean polyolefins, pyrolysis cannot touch the 70–75% of waste that is mixed, contaminated, multi-layer, or crosslinked. HCT makes that fraction recyclable for the first time, filling a supply gap that regulation is about to make urgent.
          </p>
        </div>

        <div className="grid-3">
          {[
            { k: 'PPWR', v: 'EU Packaging & Packaging Waste Regulation', s: 'Binding recycled-content targets with financial penalties for non-compliance' },
            { k: 'ReFuelEU', v: 'Aviation SAF Mandate', s: '6% Sustainable Aviation Fuel by 2030, rising to 70% by 2050' },
            { k: 'EPR', v: 'Extended Producer Responsibility', s: 'Producers pay for end-of-life processing across 30+ jurisdictions' },
          ].map((s, i) => (
            <div key={i} className="minibox">
              <div className="chip accent">{s.k}</div>
              <div style={{ fontSize: 14, color: 'var(--fg-0)', marginTop: 10, fontWeight: 500, letterSpacing: '-0.01em' }}>{s.v}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 6, lineHeight: 1.55 }}>{s.s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Partnerships */}
      <section className="section">
        <div className="section-head">
          <div>
            <div className="section-num">§ 05</div>
            <div className="section-title serif">The partnership pipeline</div>
          </div>
          <div className="section-kicker">
            Fifteen-plus active engagements spanning the world's largest energy, chemical, and industrial companies. These are contracted relationships disclosed in SEC filings, not speculative.
          </div>
        </div>

        <div className="partners-grid">
          {[
            { v: 'Shell', n: 'CEP graduated · Dec 2025', t: 'eval' },
            { v: 'TotalEnergies', n: 'Final stage collaboration · PU', t: 'eval' },
            { v: 'Confidential Petrochemical Co.', n: 'Active CEP engagement', t: 'eval' },
            { v: 'Global EPC Firm', n: 'Licensing MOU signed', t: 'commercial' },
            { v: 'Commodities Trader', n: 'Offtake LOI signed', t: 'commercial' },
            { v: 'Food Packaging Co.', n: 'Active CEP engagement', t: 'eval' },
            { v: 'GF Building Flow', n: 'PEX / XLPE MOU', t: 'commercial' },
            { v: 'Cleanfarms', n: 'Agri-plastics · 2,000+ sites', t: 'commercial' },
            { v: 'ECOCE (Mexico)', n: 'Packaging waste program', t: 'commercial' },
            { v: 'Ebert HERA', n: 'FOAK permitting + expansion', t: 'deploy' },
            { v: 'Brightlands / Chemelot', n: 'FOAK site · Netherlands', t: 'deploy' },
            { v: 'Siemens', n: 'Process automation', t: 'deploy' },
            { v: 'Zeton', n: 'Built NGP pilot plant', t: 'deploy' },
            { v: 'NexGen Polymers', n: 'Feedstock + pilot offtake', t: 'deploy' },
            { v: 'Delphi Group', n: 'LCA assessment', t: 'deploy' },
          ].map((p, i) => {
            const colors = { eval: 'var(--warn)', commercial: 'var(--pos)', deploy: 'var(--accent)' };
            return (
              <div key={i} style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 6, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 3, height: 32, background: colors[p.t], borderRadius: 2 }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-0)', letterSpacing: '-0.01em' }}>{p.v}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2, fontFamily: 'var(--mono)' }}>{p.n}</div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ display: 'flex', gap: 16, marginTop: 16, fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--mono)' }}>
          <span><span style={{ color: 'var(--warn)' }}>■</span> Evaluation / R&D</span>
          <span><span style={{ color: 'var(--pos)' }}>■</span> Contracted / commercial</span>
          <span><span style={{ color: 'var(--accent)' }}>■</span> Deployment / technical</span>
        </div>
      </section>

      {/* Financial position */}
      <section className="section">
        <div className="section-head">
          <div>
            <div className="section-num">§ 06</div>
            <div className="section-title serif">Funded through commercialization</div>
          </div>
          <div className="section-kicker">
            C$39.4M cash, zero debt, real operating burn around $10M/yr. Approximately 2.5 years of runway to FOAK completion before any dilution is required.
          </div>
        </div>

        <div className="grid-4" style={{ marginBottom: 28 }}>
          {[
            { l: 'Cash', v: 'C$39.4M', s: 'as of Feb 28, 2026', c: 'var(--accent)' },
            { l: 'Debt', v: '$0', s: 'zero leverage', c: 'var(--pos)' },
            { l: 'Operating burn', v: '~$10.2M/yr', s: 'real cash only', c: 'var(--warn)' },
            { l: 'Runway', v: '~2.5 yrs', s: 'to FOAK completion', c: 'var(--accent)' },
          ].map((s, i) => (
            <div key={i} className="minibox" style={{ borderTop: `2px solid ${s.c}` }}>
              <div className="card-label">{s.l}</div>
              <div className="num" style={{ fontSize: 24, color: s.c, marginTop: 4 }}>{s.v}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{s.s}</div>
            </div>
          ))}
        </div>

        <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 8, padding: 24 }}>
          <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>Published analyst targets</div>
          <div className="analysts-grid">
            {[
              { firm: 'D. Boral', target: 46 },
              { firm: 'HC Wainwright', target: 22 },
              { firm: 'Ladenburg Thalmann', target: 19 },
            ].map((a, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <div className="num" style={{ fontSize: 32, color: 'var(--fg-0)', fontWeight: 500 }}>${a.target}</div>
                <div>
                  <div style={{ fontSize: 13, color: 'var(--fg-1)' }}>{a.firm}</div>
                  <div style={{ fontSize: 11, color: 'var(--pos)', fontFamily: 'var(--mono)' }}>+{Math.round(((a.target - 11.58) / 11.58) * 100)}%</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 16, lineHeight: 1.55, maxWidth: '70ch' }}>
            Insider ownership ~34–36% with CEO Ofer Vicus at ~29.5%. Institutional ownership only ~1.6%, representing both risk (limited validation) and opportunity (massive inflow potential as milestones are achieved).
          </div>
        </div>
      </section>
    </>
  );
}

window.Thesis = Thesis;
