/* global React, window */
const { MoleculeViz } = window;

function Hero({ scenarioPrice, scenarioProfit, scenarioActiveCount }) {
  return (
    <section className="hero">
      <div>
        <div className="eyebrow">NASDAQ · ADUR · Investment Dossier</div>
        <h1 className="serif">
          A new chemistry for the <em>hydrocarbon economy.</em>
        </h1>
        <p className="hero-lede">
          Aduro Clean Technologies uses an aqueous platform — water as the reaction medium, a renewable hydrogen-donor, and a simple metal catalyst — to selectively cut hydrocarbon chains at moderate temperature. No external H₂ gas. No brute-force thermal cracking. One platform, thirteen market verticals, no direct competitor. This hub is the full investment case: the science, the moat, the markets, a live scenario model, and the milestones between here and commercialization.
        </p>

        <div className="stat-strip">
          <div className="stat-cell">
            <div className="stat-label">Share Price</div>
            <div className="stat-value">$11.58</div>
            <div className="stat-delta">Pre-revenue · Pilot stage</div>
          </div>
          <div className="stat-cell">
            <div className="stat-label">Market Cap</div>
            <div className="stat-value">~$450M</div>
            <div className="stat-delta">Fully diluted · 38.9M shares</div>
          </div>
          <div className="stat-cell">
            <div className="stat-label">Cash (Q3 FY26)</div>
            <div className="stat-value">C$39.4M</div>
            <div className="stat-delta">Zero debt · ~2.5 yr runway</div>
          </div>
          <div className="stat-cell">
            <div className="stat-label">Scenario Price <span style={{ color: 'var(--accent)' }}>●</span></div>
            <div className="stat-value" style={{ color: 'var(--accent)' }}>
              ${scenarioPrice > 0 ? scenarioPrice.toFixed(0) : '—'}
            </div>
            <div className="stat-delta">{scenarioActiveCount} engines · live model</div>
          </div>
        </div>

        <div className="ribbon">
          <div className="ribbon-cell current">
            <div className="ribbon-label">Now · Phase I</div>
            <div className="ribbon-val">Validation</div>
            <div className="ribbon-sub">2024–2027 · Pilot + FOAK</div>
          </div>
          <div className="ribbon-cell">
            <div className="ribbon-label">Phase II</div>
            <div className="ribbon-val">Early Adoption</div>
            <div className="ribbon-sub">2027–2030 · 5–10 plants</div>
          </div>
          <div className="ribbon-cell">
            <div className="ribbon-label">Phase III</div>
            <div className="ribbon-val">Acceleration</div>
            <div className="ribbon-sub">2030–2035 · 10–50 plants</div>
          </div>
          <div className="ribbon-cell">
            <div className="ribbon-label">Phase IV</div>
            <div className="ribbon-val">Platform Standard</div>
            <div className="ribbon-sub">2035+ · 50–200+ plants</div>
          </div>
        </div>
      </div>

      <div>
        <MoleculeViz />
        <div className="hero-specs">
          {[
            { v: '240–390°C', l: 'Temperature' },
            { v: 'C5–C20', l: 'Output Range' },
            { v: '<2%', l: 'Char Waste' },
            { v: '98%+', l: 'Purity' },
          ].map((s, i) => (
            <div key={i} style={{ borderLeft: '1px solid var(--line)', paddingLeft: 12 }}>
              <div className="num" style={{ fontSize: 18, color: 'var(--fg-0)', letterSpacing: '-0.02em' }}>{s.v}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 2 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;