/* global React, window */

function Compete() {
  const rows = [
    {
      dim: 'Process temperature',
      hct: '240–390°C',
      pyr: '400–600°C',
      coke: '450–520°C',
      gas: '700–1,400°C',
      mech: 'Ambient',
      note: 'Lower temperature → higher selectivity, less char, less energy',
    },
    {
      dim: 'Char / waste output',
      hct: '<2%',
      pyr: '15–30%',
      coke: '20–30%',
      gas: '10–20%',
      mech: 'N/A',
      note: 'Char is disposal cost; lower is structurally better economics',
    },
    {
      dim: 'Output quality',
      hct: 'C5–C20 saturated',
      pyr: 'Mixed oils + waxes',
      coke: 'Coker gasoline',
      gas: 'Syngas',
      mech: 'Pellets',
      note: 'HCT output is directly cracker-feedstock compatible',
    },
    {
      dim: 'Mixed / dirty plastics',
      hct: '✓ Native',
      pyr: 'Limited (clean PE/PP)',
      coke: '✗',
      gas: '✓ (expensive)',
      mech: '✗',
      note: '70–75% of waste is mixed. Only HCT and gasification handle it economically',
    },
    {
      dim: 'Heavy / sour crude',
      hct: '✓ Direct',
      pyr: '✗',
      coke: '✓ (expensive)',
      gas: '✗',
      mech: '✗',
      note: 'HCT replaces cokers for many heavy feedstocks',
    },
    {
      dim: 'Crosslinked (PEX/XLPE)',
      hct: '✓ 84% yield',
      pyr: '✗',
      coke: '✗',
      gas: '✓',
      mech: '✗',
      note: 'Effectively zero competing technology',
    },
    {
      dim: 'Synthetic turf + PFAS',
      hct: '✓',
      pyr: '✗',
      coke: '✗',
      gas: 'Partial',
      mech: '✗',
      note: 'HCT is the only demonstrated solution for the infill crisis',
    },
    {
      dim: 'Capital model',
      hct: 'Licensee-funded',
      pyr: 'Owner-operated',
      coke: 'Owner-operated',
      gas: 'Owner-operated',
      mech: 'Owner-operated',
      note: 'Aduro scales without capex; IP-royalty model (Qualcomm / ARM)',
    },
  ];

  return (
    <div>
      <div className="prose" style={{ maxWidth: '74ch', marginBottom: 32 }}>
        <p>
          Existing hydrocarbon processing technologies all share one flaw: they use temperature as their only tool, which breaks molecules randomly. HCT uses chemistry — a metal catalyst coordinates to specific C–C bonds while a renewable hydrogen donor caps the broken ends in situ, all in an aqueous medium at moderate temperature. The result is qualitatively different output with dramatically different economics.
        </p>
      </div>

      <div style={{ overflowX: 'auto' }}>
        <table className="tbl" style={{ minWidth: 900 }}>
          <thead>
            <tr>
              <th style={{ width: 180 }}>Dimension</th>
              <th style={{ color: 'var(--accent)' }}>HCT (Aduro)</th>
              <th>Pyrolysis</th>
              <th>Coking</th>
              <th>Gasification</th>
              <th>Mechanical</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <React.Fragment key={i}>
                <tr className="hilite">
                  <td style={{ fontWeight: 500 }}>{r.dim}</td>
                  <td className="num" style={{ color: 'var(--accent)', fontWeight: 600 }}>{r.hct}</td>
                  <td className="num">{r.pyr}</td>
                  <td className="num">{r.coke}</td>
                  <td className="num">{r.gas}</td>
                  <td className="num">{r.mech}</td>
                </tr>
                <tr>
                  <td colSpan="6" style={{ fontSize: 11, color: 'var(--fg-3)', fontStyle: 'italic', paddingTop: 0, paddingBottom: 16, borderBottom: '1px solid var(--line)' }}>
                    {r.note}
                  </td>
                </tr>
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>

      {/* Deep-dive: the five dimensions where the economics actually diverge */}
      <div style={{ marginTop: 48 }}>
        <div className="card-label" style={{ marginBottom: 6 }}>§ Deep dive</div>
        <h3 className="serif" style={{ fontSize: 22, letterSpacing: '-0.015em', color: 'var(--fg-0)', marginBottom: 8 }}>
          Where the economics actually diverge
        </h3>
        <div className="prose" style={{ maxWidth: '74ch', marginBottom: 24 }}>
          <p>
            The summary table shows that HCT differs from thermal processes on most dimensions. The five sections below quantify what that difference is worth in operator economics — and therefore in how much royalty Aduro can defensibly charge for each licensed plant.
          </p>
        </div>

        {/* Hydrotreating tax */}
        <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 8, padding: 24, marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
            <span className="chip accent">01</span>
            <div className="card-label" style={{ color: 'var(--fg-0)', fontSize: 13 }}>The hydrotreating tax</div>
          </div>
          <div className="prose" style={{ maxWidth: '80ch', marginBottom: 16 }}>
            <p>
              Pyrolysis oil cannot be sold, used, or processed by any steam cracker without first being hydrotreated. Hydrotreating uses high-pressure hydrogen (~$1–2/kg gray, $3–6/kg green) at 300–400°C with expensive catalysts to remove sulfur, chlorine, nitrogen, and oxygen, and to saturate the reactive olefins. Cost runs roughly $400 per ton of pyrolysis oil processed. This is not optional — no refinery or cracker will accept untreated pyrolysis oil because the contaminants would poison their catalysts and corrode their equipment.
            </p>
            <p>
              HCT output is already saturated and contaminant-free by virtue of the water chemistry. It skips the hydrotreating step entirely. Even if HCT and pyrolysis produced identical liquid volumes, HCT output is worth ~$400/ton more because the buyer does not need to hydrotreat it. On a 25,000 tpa plant that is $10M/yr in avoided hydrotreating cost for the operator — a margin that directly supports Aduro's ability to charge a royalty premium.
            </p>
          </div>
          <div className="compete-3col">
            {[
              { l: 'Hydrotreating cost (pyrolysis)', v: '~$400/ton', c: 'var(--neg)' },
              { l: 'Operator savings @ 25K tpa', v: '~$10M/yr', c: 'var(--pos)' },
              { l: 'Required for HCT', v: 'No', 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: 20, color: s.c, marginTop: 4 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* All-in capex */}
        <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 8, padding: 24, marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
            <span className="chip accent">02</span>
            <div className="card-label" style={{ color: 'var(--fg-0)', fontSize: 13 }}>All-in capital cost</div>
          </div>
          <div className="prose" style={{ maxWidth: '80ch', marginBottom: 16 }}>
            <p>
              Published capex numbers for competing technologies typically cite only the core reactor. True all-in cost — including the hydrotreating unit and feedstock-sorting infrastructure pyrolysis actually requires — is 3–10× higher per ton of annual capacity. PureCycle's Ironton, Ohio facility (~48,500 tpa, polypropylene only) cost $509M, or roughly $10,500 per ton of annual capacity. HCT's modular 25,000 tpa design, by contrast, is estimated at $15–25M all-in because it needs no separate hydrogen plant, no hydrotreater, and no complex sorting infrastructure.
            </p>
          </div>
          <div style={{ overflowX: 'auto' }}>
            <table className="tbl" style={{ minWidth: 600 }}>
              <thead>
                <tr>
                  <th>Technology</th>
                  <th className="num-col">Plant cost</th>
                  <th className="num-col">Annual capacity</th>
                  <th className="num-col">$/ton capacity</th>
                </tr>
              </thead>
              <tbody>
                <tr className="hilite">
                  <td style={{ fontWeight: 600, color: 'var(--accent)' }}>HCT (estimated, modular)</td>
                  <td className="num-col" style={{ color: 'var(--accent)', fontWeight: 600 }}>$15–25M</td>
                  <td className="num-col">25,000 tpa</td>
                  <td className="num-col" style={{ color: 'var(--accent)', fontWeight: 600 }}>$600–1,000</td>
                </tr>
                <tr>
                  <td>Pyrolysis (all-in: reactor + hydrotreater + sort)</td>
                  <td className="num-col">$90–200M</td>
                  <td className="num-col">20–40K tpa</td>
                  <td className="num-col">$2,500–5,000</td>
                </tr>
                <tr>
                  <td>PureCycle (Ironton, PP only)</td>
                  <td className="num-col">$509M</td>
                  <td className="num-col">48,500 tpa</td>
                  <td className="num-col">~$10,500</td>
                </tr>
                <tr>
                  <td>Coking (delayed coker, barrel-scale)</td>
                  <td className="num-col">$1–4B</td>
                  <td className="num-col">50–200K bpd</td>
                  <td className="num-col" style={{ fontSize: 11, color: 'var(--fg-3)' }}>n/a (barrel-basis)</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 10, fontStyle: 'italic' }}>
            HCT plant cost is a third-party estimate based on conventional equipment; FOAK cost not publicly disclosed. Pyrolysis all-in bundles the reactor ($30–80M), mandatory hydrotreater ($50–100M), and feedstock sorting ($10–20M).
          </div>
        </div>

        {/* Uptime */}
        <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 8, padding: 24, marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
            <span className="chip accent">03</span>
            <div className="card-label" style={{ color: 'var(--fg-0)', fontSize: 13 }}>Operational uptime</div>
          </div>
          <div className="prose" style={{ maxWidth: '80ch', marginBottom: 16 }}>
            <p>
              The water-based chemistry prevents the coking and fouling that causes shutdowns in thermal systems. Low char formation (&lt;2%) means minimal reactor cleaning. HCT targets 90%+ commercial uptime (8,000+ hours per year) based on pilot data across 240+ continuous runs. Pyrolysis plants, by contrast, have historically achieved only 50–70% uptime due to char accumulation that forces shutdowns every 2–4 weeks for cleaning. A pyrolysis plant running 60% of the time produces only 60% of projected revenue — a reality that financial models often ignore.
            </p>
          </div>
          <div className="compete-3col">
            {[
              { l: 'HCT target uptime', v: '90%+', s: '~8,000+ hrs/yr', c: 'var(--accent)' },
              { l: 'Pyrolysis observed', v: '50–70%', s: 'char shutdowns every 2–4 wks', c: 'var(--neg)' },
              { l: 'Revenue impact vs plan', v: '−30%', s: 'at 70% uptime on 100% model', c: 'var(--warn)' },
            ].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: 20, color: s.c, marginTop: 4 }}>{s.v}</div>
                <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{s.s}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Circularity vs downcycling */}
        <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 8, padding: 24, marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
            <span className="chip accent">04</span>
            <div className="card-label" style={{ color: 'var(--fg-0)', fontSize: 13 }}>Circularity vs downcycling</div>
          </div>
          <div className="prose" style={{ maxWidth: '80ch', marginBottom: 16 }}>
            <p>
              HCT output is naphtha. It enters a steam cracker and produces ethylene and propylene — the same monomers used to make virgin plastic. A plastic made from HCT-derived naphtha is chemically identical to plastic made from fossil naphtha. That plastic can be recycled through HCT again without limit: waste → naphtha → virgin-quality plastic → waste → repeat, with no quality degradation at any point in the cycle. The chemistry resets the material to its molecular building blocks every time.
            </p>
            <p>
              Mechanical recycling, the dominant alternative, is fundamentally not circular. Each melt cycle shortens polymer chains. Maximum practical cycles before quality forces disposal: 1–3 for polyolefins, 2–4 for PET. The industry term is "downcycling" because material always moves to lower-value applications: food-grade bottle → non-food bottle → fiber → carpet backing → landfill. Pyrolysis can, in theory, feed plastic back into new plastic production via cracker feed, but the economics of hydrotreating and cracker qualification make it marginal; in practice, much pyrolysis oil ends up blended into fuel, which is a linear pathway, not circular.
            </p>
          </div>
          <div className="compete-3col">
            {[
              { l: 'HCT', v: 'True circular', s: 'Unlimited cycles · no quality loss', c: 'var(--pos)' },
              { l: 'Pyrolysis', v: 'Often linear', s: 'Oil frequently sold as fuel', c: 'var(--warn)' },
              { l: 'Mechanical', v: '1–4 cycles', s: 'Downcycling, then landfill', c: 'var(--neg)' },
            ].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: 16, color: s.c, marginTop: 4 }}>{s.v}</div>
                <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{s.s}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Pre-processing */}
        <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 8, padding: 24, marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
            <span className="chip accent">05</span>
            <div className="card-label" style={{ color: 'var(--fg-0)', fontSize: 13 }}>Pre-processing cost</div>
          </div>
          <div className="prose" style={{ maxWidth: '80ch', marginBottom: 16 }}>
            <p>
              Pyrolysis requires a full pre-processing chain before plastic can even enter the reactor: receive bales, break open, remove metals, wash, dry (moisture kills yield), sort by polymer with NIR sensors, remove PVC (corrosive), remove PET (oxygen degrades oil), densify and pelletize. Cost: $50–150 per ton depending on incoming feedstock quality. Many pyrolysis operators spend more on feedstock preparation than on the actual reactor. Cheap "mixed plastic waste" at $0/ton becomes expensive "pyrolysis-grade feedstock" at $100–200/ton after sorting.
            </p>
            <p>
              HCT requires shredding only. No washing, no drying, no color sorting, no polymer sorting, no PVC removal, no PET removal. The water chemistry handles contaminants as part of the reaction (PVC chlorine binds into harmless salts; PET hydrolyzes and the ethylene glycol can donate hydrogen into the process). Estimated pre-processing cost is $10–20 per ton — the lowest of any chemical recycling technology because the chemistry does what sorting infrastructure would otherwise have to do.
            </p>
          </div>
          <div className="compete-2col">
            {[
              { l: 'HCT pre-processing', v: '$10–20/ton', s: 'Shred only · est., not guidance', c: 'var(--accent)' },
              { l: 'Pyrolysis pre-processing', v: '$50–150/ton', s: 'Wash · sort · dry · densify', c: 'var(--neg)' },
            ].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: 20, color: s.c, marginTop: 4 }}>{s.v}</div>
                <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{s.s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ marginTop: 32, background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 8, padding: 24 }}>
        <div className="card-label">Why pyrolysis hasn't worked</div>
        <div className="prose" style={{ marginTop: 12 }}>
          <p>
            Pyrolysis has received more than a decade of venture capital and corporate investment. After all that capital, it processes less than 2% of global plastic waste. The limitations are structural, not execution: it requires clean, sorted feedstock; it produces 15–30% char that must be disposed of; output quality varies run-to-run because the process is thermally indiscriminate. HCT is not a better pyrolysis — it is a different chemistry altogether, addressing exactly the waste fractions pyrolysis cannot touch.
          </p>
        </div>
      </div>
    </div>
  );
}

window.Compete = Compete;
