/* ============================================================
   Kestrel home — Spade overhaul.
   Conversion-focused narrative built on real Kestrel + Strix data:
   Hero (Typewriter + FlipWords) → count-up StatBand → TextGenerate key
   finding → TextReveal → interactive Globe → Strix scrutiny → company
   HeroParallax → WhyItMatters → (Footer). Plus the RegisterInterest route.
   Every figure reads from window.KESTREL_SUMMARY / window.STRIX_*.
   ============================================================ */

/* Re-render once the async data (KESTREL_SUMMARY + STRIX_*) lands. data.jsx
   dispatches `strix-loaded` after both Strix and the Kestrel summary are set. */
const useKestrelReady = () => {
  const [, force] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => {
    // Keep listening even after KESTREL_SUMMARY is set: the Strix arrays
    // (window.STRIX_*) load separately and LATER, firing their own 'strix-loaded'.
    // Consumers below read window.STRIX_* directly, so a fast summary + slow Strix
    // load would otherwise leave those figures frozen at 0.
    const on = () => force();
    window.addEventListener('strix-loaded', on);
    return () => window.removeEventListener('strix-loaded', on);
  }, []);
  return window.KESTREL_SUMMARY;
};

const _fmt = (n) => (n == null ? '—' : Number(n).toLocaleString('en-US'));
const _pct = (n, d = 2) => (n == null ? '—' : Number(n).toFixed(d) + '%');

/* Pretty company name for Strix ids (anglo_american → Anglo American). */
const STRIX_NAME = { anglo_american: 'Anglo American', bhp: 'BHP', rio_tinto: 'Rio Tinto' };
const strixCompanyName = (id) =>
  STRIX_NAME[id] || String(id || '').replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());

/* A corner-tick stat cell with a count-up figure (thousands grouped). */
const StatCell = ({ eyebrow, value, decimals = 0, suffix = '', group = false, dark = false }) => (
  <CornerFrame className="stat-frame">
    <div className="sf-eyebrow">{eyebrow}</div>
    <div className="sf-value" style={dark ? { color: 'var(--lime)' } : undefined}>
      <CountInView value={value || 0} decimals={decimals} suffix={suffix} group={group} />
    </div>
  </CornerFrame>
);

/* ---------- 1. HERO ---------- */
const HomeHero = ({ setRoute, summary }) => {
  // Live count of every major covered (passages ∪ Strix), not just the passage corpus.
  const n = (window.platformCompanyCount && window.platformCompanyCount()) || summary?.meta?.n_companies;
  const yr = summary?.meta?.year_range || [];
  const eyebrow = `Independent analysis · ${n || 13} mining majors · ${yr[0] || 2018}–${yr[1] || 2023}`;
  return (
    <section className="section first">
      <div className="site-wrap">
        <div className="dark-section panel-round grid-bg" style={{ padding: '60px 52px 64px', overflow: 'hidden' }}>
          <div className="grid-2" style={{ alignItems: 'center' }}>
            <div>
              <div className="mono-eyebrow" style={{ marginBottom: 26, color: 'var(--lime)' }}>{eyebrow}</div>
              <h1 className="spade-h" style={{ fontSize: 'clamp(33px, 6.5vw, 60px)', lineHeight: 1.04 }}>
                <TypewriterEffect
                  segments={[
                    { text: 'What companies say.' },
                    { text: '\n' },
                    { text: 'What actually creates value.', className: 'hl', color: 'var(--lime)' },
                  ]}
                />
              </h1>
              <p className="lede" style={{ marginTop: 26, maxWidth: 520, color: '#C2CDB5' }}>
                Every claimed initiative across global mining sustainability reports — scored for{' '}
                <FlipWords
                  words={['substance', 'evidence', 'measurable value', 'accountability']}
                  color="var(--lime)"
                  style={{ fontWeight: 600 }}
                />
                , not press-release polish.
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
                <button className="btn btn-lime btn-lg" onClick={() => setRoute({ page: 'register-interest' })}>
                  Register your interest <Icon name="arrow-right" size={16} style={{ marginLeft: 4 }} className="arrow" />
                </button>
                <button
                  className="btn btn-lg"
                  style={{ background: 'transparent', border: '1px solid rgba(166,225,94,0.45)', color: '#E8EFDF', fontFamily: 'var(--mono)' }}
                  onClick={() => setRoute({ page: 'companies' })}>
                  Explore the data
                </button>
              </div>
            </div>
            <div className="hero-scene-wrap"><HeroScene /></div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- 2. STAT BAND (count-ups) ---------- */
const HomeStatBand = ({ summary }) => {
  const m = summary?.meta || {};
  const pos = summary?.global?.label_pct?.positive;
  return (
    <section className="section tight">
      <div className="site-wrap">
        <div className="mono-eyebrow" style={{ justifyContent: 'center', display: 'flex', marginBottom: 48 }}>
          Independent analysis across global mining sustainability reports
        </div>
        <div className="home-statgrid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0 }}>
          <SpReveal delay={0}><StatCell eyebrow="DISCLOSURE DATA POINTS" value={(m.total_passages || 0) + (summary?.strix?.observations || 0)} group /></SpReveal>
          <SpReveal delay={110}><StatCell eyebrow="GLOBAL MINING MAJORS" value={(window.platformCompanyCount && window.platformCompanyCount()) || m.n_companies} /></SpReveal>
          <SpReveal delay={220}><StatCell eyebrow="SUSTAINABILITY & ANNUAL REPORTS" value={m.n_reports} /></SpReveal>
          <SpReveal delay={330}><StatCell eyebrow="QUALIFY AS TRUE SHARED VALUE" value={pos} decimals={2} suffix="%" /></SpReveal>
        </div>
      </div>
    </section>
  );
};

/* ---------- 3. KEY FINDING (TextGenerate + four criteria) ---------- */
const CRITERIA = [
  { icon: 'target', label: 'Materiality', body: 'Tied to a core operational dependency — not philanthropy bolted on the side.' },
  { icon: 'chart', label: 'Measurable outcome', body: 'A disclosed, quantified result: beneficiaries, volumes, money — something you can check.' },
  { icon: 'stack', label: 'Causal linkage', body: 'An explicit mechanism from the initiative to the shared benefit, not a vague association.' },
  { icon: 'check', label: 'Independent verification', body: 'Evidence that survives beyond the company’s own narrative.' },
];
const KeyFinding = ({ summary }) => {
  const total = summary?.meta?.total_passages;
  const pos = summary?.global?.label_pct?.positive;
  const neg = summary?.global?.label_pct?.negative;
  const sentence = `Across ${_fmt(total)} disclosed passages, just ${_pct(pos)} describe measurable shared value.`;
  return (
    <section className="section">
      <div className="site-wrap">
        <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <div className="mono-eyebrow" style={{ justifyContent: 'center', display: 'flex', marginBottom: 22 }}>The finding</div>
          <TextGenerate as="h2" className="spade-h" style={{ fontSize: 'clamp(28px, 5vw, 44px)' }} highlight={/\d/} highlightColor="var(--moss)" text={sentence} />
          <p className="lede" style={{ marginTop: 22, maxWidth: 680, marginLeft: 'auto', marginRight: 'auto' }}>
            Most mining ESG reporting is narrative. Creating Shared Value means a mining activity that earns a genuine
            commercial return <em>and</em> delivers a measurable benefit to host communities or the environment at the
            same time — real value for the business and for society, not donations or good PR. Kestrel reads every
            passage and scores it against four explicit criteria, so the {_pct(neg)} that creates no measurable value
            can’t hide in the prose.
          </p>
        </div>
        <div className="grid-bg home-criteria" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0 }}>
          {CRITERIA.map((c, i) => (
            <SpReveal key={c.label} delay={i * 90}>
              <CornerFrame style={{ padding: '26px 24px 30px', minHeight: 200 }}>
                <div style={{ width: 34, height: 34, borderRadius: 9, background: 'var(--sage-tint)', color: 'var(--moss-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                  <Icon name={c.icon} size={18} />
                </div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--moss)', marginBottom: 10 }}>
                  0{i + 1}
                </div>
                <div style={{ fontWeight: 600, fontSize: 17, color: 'var(--ink)', marginBottom: 8 }}>{c.label}</div>
                <p style={{ fontSize: 13.5, lineHeight: 1.5, color: 'var(--ink-2)' }}>{c.body}</p>
              </CornerFrame>
            </SpReveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- 4. TEXT REVEAL ---------- */
const ClaimVsEvidence = () => {
  // Disclosure-fingerprint chips (moved here from the old WhyItMatters scatter):
  // corner-tick labels that float around the claim-vs-evidence reveal. Decorative
  // only — pointerEvents:none + lower z-index so they never intercept the sweep.
  const chips = [
    { label: 'Classification', v: <span style={{ color: 'var(--lime)' }}>TRUE SHARED VALUE</span>, top: '6%', left: '2%' },
    { label: 'Location', v: <>PILBARA,<br />WESTERN AUSTRALIA</>, top: '4%', right: '3%' },
    { label: 'Beneficiaries', v: '412 APPRENTICES', top: '44%', left: '0%' },
    { label: 'Source', v: <>SUSTAINABILITY<br />REPORT 2024 · p.47</>, top: '40%', right: '1%' },
    { label: 'Evidence tier', v: <>A · INDEPENDENTLY<br />VERIFIED</>, bottom: '8%', left: '5%' },
    { label: 'Confidence', v: '82 / 100', bottom: '6%', right: '6%' },
  ];
  return (
    <section className="section dark-section" style={{ overflow: 'hidden' }}>
      <div className="site-wrap" style={{ position: 'relative', minHeight: 520, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {chips.map((c, i) => (
          <div key={i} aria-hidden="true" className="m-hide" style={{
            position: 'absolute', width: 220, pointerEvents: 'none', zIndex: 1,
            animation: `kestrel-label-float ${(4.6 + (i % 3) * 0.7).toFixed(1)}s ease-in-out ${(-i * 0.6).toFixed(1)}s infinite`,
            top: c.top, bottom: c.bottom, left: c.left, right: c.right,
          }}>
            <DataChip label={c.label} ticks>{c.v}</DataChip>
          </div>
        ))}
        <div style={{ position: 'relative', zIndex: 2, maxWidth: 620, margin: '0 auto', textAlign: 'center' }}>
          <div className="mono-eyebrow" style={{ justifyContent: 'center', display: 'flex', marginBottom: 22, color: 'var(--lime)' }}>
            Narrative vs evidence
          </div>
          <TextReveal
            text="What the report claims."
            revealText="What the evidence shows."
            hint="◂  sweep to compare  ▸"
            fontSize="clamp(26px, 5.2vw, 44px)"
            height={184}
          />
          <p style={{ marginTop: 22, color: '#C2CDB5', maxWidth: 560, margin: '22px auto 0' }}>
            Every Kestrel classification carries the source passage, its four criteria grades, and the confidence behind it —
            linked back to the original report and page, so a claim and its evidence sit side by side.
          </p>
        </div>
      </div>
    </section>
  );
};

/* ---------- 6. STRIX SCRUTINY ---------- */
const StrixScrutiny = ({ setRoute }) => {
  // Counts come from the PUBLIC summary (window.KESTREL_SUMMARY.strix) so the
  // marketing stats show for everyone; fall back to the gated arrays when signed in.
  const _sx = (window.KESTREL_SUMMARY && window.KESTREL_SUMMARY.strix) || {};
  const obs = _sx.observations ?? (window.STRIX_OBSERVATIONS || []).length;
  const restated = _sx.restatements ?? (window.STRIX_RESTATEMENTS || []).length;
  const dropped = _sx.dropped_targets ?? (window.STRIX_DROPPED_TARGETS || []).length;
  // Examples for the "what the numbers hid" box: prefer the public /api/summary
  // examples (available to everyone, incl. anonymous prod visitors); else fall back
  // to the loaded Strix arrays (localhost public fallback / signed-in full data).
  const _ex = _sx.examples || {};
  const exRe = (_ex.restatements && _ex.restatements.length) ? _ex.restatements : (window.STRIX_RESTATEMENTS || []).slice(0, 2);
  const exDrop = _ex.dropped || (window.STRIX_DROPPED_TARGETS || [])[0];
  const metricName = window.strixMetricName || ((id) => String(id || '').replace(/_/g, ' '));

  return (
    <section className="section dark-section">
      <div className="site-wrap">
        <div className="mono-eyebrow" style={{ marginBottom: 22, color: 'var(--lime)' }}>
          Strix · quantitative ESG extraction engine
        </div>
        <div className="grid-2" style={{ alignItems: 'center' }}>
          <div>
            <h2 className="spade-h" style={{ fontSize: 'clamp(28px, 5vw, 46px)', color: '#F4F7EE' }}>
              We don’t stop at <span className="hl" style={{ color: 'var(--lime)' }}>what they say.</span>
            </h2>
            <p style={{ marginTop: 20, color: '#C2CDB5', maxWidth: 480 }}>
              Strix extracts and standardises the actual ESG numbers across mining reporting years — then flags what
              quietly changes: restated figures, redrawn boundaries, methodology shifts, and active targets that expire
              or vanish. Every datapoint linked back to its source report and page.
            </p>
            <div style={{ display: 'flex', gap: 40, marginTop: 34, flexWrap: 'wrap' }}>
              {[
                { v: obs, g: true, l: 'ESG data points' },
                { v: restated, g: false, l: 'restatements caught' },
                { v: dropped, g: false, l: 'targets quietly dropped' },
              ].map((s) => (
                <div key={s.l}>
                  <div className="sf-value tabular" style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 46, letterSpacing: '-0.04em', color: 'var(--lime)', lineHeight: 1 }}>
                    <CountInView value={s.v} group={s.g} />
                  </div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#9DAC8C', marginTop: 8 }}>{s.l}</div>
                </div>
              ))}
            </div>
            <button className="btn btn-lime" style={{ marginTop: 36, fontFamily: 'var(--mono)' }} onClick={() => setRoute({ page: 'companies' })}>
              Explore the data <Icon name="arrow-right" size={15} style={{ marginLeft: 4 }} className="arrow" />
            </button>
          </div>
          <CornerFrame style={{ padding: '8px 22px 14px' }}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--lime)', padding: '16px 0 4px' }}>
              <Icon name="alert-triangle" size={13} style={{ marginRight: 7, verticalAlign: '-2px' }} />
              What the numbers hid
            </div>
            {exRe.map((r, i) => (
              <div className="sx-row" key={i}>
                <div style={{ fontSize: 12.5, color: '#C2CDB5' }}>
                  {strixCompanyName(r.company_id)} · {metricName(r.metric_id)} {r.fiscal_year}
                </div>
                <div style={{ fontSize: 12.5, color: '#E8EFDF', textAlign: 'right' }}>
                  <span className="sx-strike">{_fmt(r.original_value)}</span>
                  <span style={{ color: 'var(--lime)' }}> → {_fmt(r.restated_value)}</span>{' '}
                  {r.restated_unit || r.unit || ''}
                </div>
              </div>
            ))}
            {exDrop && (
              <div className="sx-row">
                <div className="sx-strike" style={{ fontSize: 12.5, color: '#9DAC8C' }}>
                  {strixCompanyName(exDrop.company_id)} · {exDrop.expressed_as}
                </div>
                <div style={{ fontSize: 12, color: 'var(--lime)', textAlign: 'right', whiteSpace: 'nowrap' }}>
                  dropped {exDrop.dropped_in_year}
                </div>
              </div>
            )}
          </CornerFrame>
        </div>
      </div>
    </section>
  );
};

/* ---------- 7. COMPANY HEROPARALLAX ---------- */
const CompanyCard = ({ c, setRoute }) => {
  // Which data layers cover this company — Kestrel (passage classifications) and/or
  // Strix (ESG metric extractions) — mirroring the companies-page cards so the home
  // showcase shows BOTH, not Strix alone. Strix count prefers the precise figure from
  // the full gated dataset when a paid session has it, else the public counts-only
  // block; never renders "0" (see the companies.jsx CoCard note). _fmtK lives in
  // companies.jsx — shared global lexical scope, loaded just before this file.
  const hasKestrel = (c.n_passages || 0) > 0;
  const cov = (typeof window !== 'undefined' && window.strixCoverageFor) ? window.strixCoverageFor(c.id) : null;
  const fullObs = (typeof window !== 'undefined' && window.strixObsForCompany) ? (window.strixObsForCompany(c.id) || []) : [];
  const strixN = fullObs.length || (cov ? cov.n : 0);
  const hasStrix = strixN > 0;
  return (
    <a href="#" className="hp-card"
      onClick={(e) => { e.preventDefault(); setRoute({ page: 'company', id: c.id }); }}>
      <div className="hp-logo"><CompanyLogo id={c.id} /></div>
      <div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
          {c.country} · {c.commodity}
        </div>
        <div className="hp-meta" style={{ marginTop: 10 }}>
          {c.positive_pct != null
            ? <span style={{ fontFamily: 'var(--mono)', fontSize: 12.5, color: 'var(--moss-deep)', fontWeight: 600 }}>{_pct(c.positive_pct)} true</span>
            : <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-3)' }}>Strix metrics</span>}
          <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-2)' }}>Scorecard ›</span>
        </div>
        {(hasKestrel || hasStrix) && (
          <div className="co-sources" style={{ marginTop: 10 }}>
            {hasKestrel && (
              <span className="co-src co-src-kestrel" title={`${(c.n_passages || 0).toLocaleString()} passages classified by Kestrel`}>
                <span className="co-src-dot" />Kestrel<span className="co-src-n">{_fmtK(c.n_passages)}</span>
              </span>
            )}
            {hasStrix && (
              <span className="co-src co-src-strix" title={`${strixN.toLocaleString()} ESG metric extractions by Strix`}>
                <span className="co-src-dot" />Strix<span className="co-src-n">{_fmtK(strixN)}</span>
              </span>
            )}
          </div>
        )}
      </div>
    </a>
  );
};
const CompanyShowcase = ({ setRoute, summary }) => {
  // Every miner with any data layer — passages ∪ Strix-only (Vale, Glencore, Fortescue).
  const companies = (typeof window.allPlatformCompanies === 'function')
    ? window.allPlatformCompanies()
    : (summary?.companies || []);
  // Split into 3 drifting rows (5 / 4 / 4).
  const rows = [];
  if (companies.length) {
    rows.push(companies.slice(0, 5).map((c) => <CompanyCard key={c.id} c={c} setRoute={setRoute} />));
    rows.push(companies.slice(5, 9).map((c) => <CompanyCard key={c.id} c={c} setRoute={setRoute} />));
    rows.push(companies.slice(9).map((c) => <CompanyCard key={c.id} c={c} setRoute={setRoute} />));
  }
  return (
    <section className="section">
      <div className="site-wrap">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
          <div className="mono-eyebrow" style={{ justifyContent: 'center', display: 'flex', marginBottom: 18 }}>Explore every miner</div>
          <h2 className="spade-h" style={{ fontSize: 'clamp(30px, 5.2vw, 48px)' }}>
            {(window.platformCompanyCount && window.platformCompanyCount()) || summary?.meta?.n_companies || 13} majors. <span style={{ color: 'var(--moss)' }}>One standard.</span>
          </h2>
          <p className="lede" style={{ marginTop: 18, maxWidth: 560, marginLeft: 'auto', marginRight: 'auto' }}>
            Open any company to see its disclosures scored, its CSV pillars, and exactly where the narrative outruns the evidence.
          </p>
        </div>
      </div>
      {rows.length > 0 && (
        <HeroParallax rows={rows} amplitude={150} style={{ padding: '4px 0' }} />
      )}
      <div className="site-wrap" style={{ textAlign: 'center', marginTop: 44 }}>
        <button className="btn btn-lime btn-lg" style={{ fontFamily: 'var(--mono)' }} onClick={() => setRoute({ page: 'compare' })}>
          Compare companies side by side <Icon name="arrow-right" size={16} style={{ marginLeft: 4 }} className="arrow" />
        </button>
      </div>
    </section>
  );
};

/* ---------- 2.5  DATA → INSIGHT (encrypted reveal + evervault card) ----------
   The value-prop beat: raw disclosure decrypts into a single readable signal.
   Both figures are live — the noise is the full corpus, the core is the few
   passages that clear the bar. See [[feedback_kestrel_no_hardcoded_stats]]. */
const DataToInsight = ({ summary }) => {
  const total = summary?.meta?.total_passages;
  const reports = summary?.meta?.n_reports;
  const positiveCount = summary?.global?.label_primary?.positive; // the signal in the noise
  const strixPoints = summary?.strix?.observations ?? (window.STRIX_OBSERVATIONS || []).length; // Strix extraction scale
  const strixCompanies = summary?.strix?.companies ?? new Set((window.STRIX_OBSERVATIONS || []).map((o) => o.company_id)).size;
  const sY0 = summary?.strix?.year_min, sY1 = summary?.strix?.year_max; // metric-layer coverage span
  const line = `${_fmt(total)} disclosure passages. ${_fmt(positiveCount)} describe measurable shared value.`;
  return (
    <section className="section dark-section">
      <div className="site-wrap">
        <div className="grid-2" style={{ alignItems: 'center' }}>
          <div>
            <div className="mono-eyebrow" style={{ marginBottom: 22, color: 'var(--lime)' }}>
              Raw disclosure → signal
            </div>
            <h2 className="spade-h" style={{ fontSize: 'clamp(28px, 5vw, 46px)', color: '#F4F7EE' }}>
              We translate complex data into{' '}
              <span className="hl" style={{ color: 'var(--lime)' }}>insight.</span>
            </h2>
            <p style={{ marginTop: 20, color: '#C2CDB5', maxWidth: 480 }}>
              {_fmt(reports)} sustainability and annual reports — thousands of pages of careful prose. Kestrel reads
              every line and resolves it into something you can actually compare: scored, sourced, and stripped of spin.
            </p>
            <CornerFrame style={{ marginTop: 32, padding: '22px 24px', background: 'rgba(166,225,94,0.04)' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--lime)', marginBottom: 14, display: 'flex', alignItems: 'center', gap: 7 }}>
                <Icon name="check" size={12} /> Decrypted insight
              </div>
              <EncryptedText
                text={line}
                style={{ display: 'block', fontSize: 'clamp(15px, 2.1vw, 19px)', fontWeight: 500, lineHeight: 1.55, letterSpacing: '0.01em', color: '#F4F7EE' }}
              />
            </CornerFrame>
          </div>
          <div>
            <EvervaultCard text={_fmt(strixPoints)} caption={`structured ESG observations across ${_fmt(strixCompanies)} companies`} />
            <p style={{ marginTop: 16, fontFamily: 'var(--mono)', fontSize: 12, color: '#9DAC8C', textAlign: 'center' }}>
              {sY0 && sY1 ? `${sY0}–${sY1} · ` : ''}the raw disclosures Strix resolves into structured, comparable numbers.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- MAIN MENU (Tabs) ----------
   The site's primary navigation, rendered AS the Tabs component: the tab bar is
   the menu, and switching flips a deck of destination panels. Each panel previews
   a top-level section with a live figure + a button that routes there. Uses the
   vanilla Tabs from animations.jsx; figures from window.KESTREL_SUMMARY. */
const MENU_TABS = [
  { value: 'overview', title: 'Overview', page: 'home', eyebrow: 'The finding',
    blurb: 'What companies claim versus what actually creates measurable shared value — across every global mining major.',
    stat: (s) => ({ v: _pct(s?.global?.label_pct?.positive), l: 'qualify as true shared value' }), cta: 'Read the overview' },
  { value: 'companies', title: 'Companies', page: 'companies', eyebrow: 'Profiles',
    blurb: 'Browse every company Kestrel covers, ranked by shared-value share. Open any profile for its full scorecard.',
    stat: (s) => ({ v: _fmt((window.platformCompanyCount && window.platformCompanyCount()) || s?.meta?.n_companies), l: 'global mining majors' }), cta: 'Browse companies' },
  { value: 'method', title: 'Method', page: 'method', eyebrow: 'How it works',
    blurb: 'Every passage scored against four explicit Creating Shared Value criteria: materiality, measurable outcome, causal linkage, independent verification.',
    stat: (s) => ({ v: _fmt((s?.meta?.total_passages || 0) + (s?.strix?.observations || 0)), l: 'data points' }), cta: 'See the method' },
  { value: 'compare', title: 'Compare', page: 'compare', eyebrow: 'Side by side',
    blurb: 'Put any majors head to head — disclosure quality, CSV pillars, and exactly where the narrative outruns the evidence.',
    stat: (s) => ({ v: _fmt(s?.meta?.n_reports), l: 'reports analysed' }), cta: 'Compare companies' },
  { value: 'access', title: 'Get access', page: 'register-interest', eyebrow: 'Early access',
    blurb: 'Kestrel is in early access. Tell us who you are and how you’d use the full passage-level corpus and the Strix metric layer.',
    stat: null, cta: 'Register interest' },
];

const MenuPanel = ({ t, setRoute, summary }) => {
  const stat = t.stat ? t.stat(summary) : null;
  return (
    <div className="menu-panel">
      <div>
        <div className="mono-eyebrow" style={{ color: 'var(--lime)', marginBottom: 16 }}>{t.eyebrow}</div>
        <h3 className="menu-panel-title">{t.title}.</h3>
        <p className="menu-panel-blurb">{t.blurb}</p>
      </div>
      <div className="menu-panel-foot">
        {stat ? (
          <div>
            <div className="menu-panel-stat-v">{stat.v}</div>
            <div className="menu-panel-stat-l">{stat.l}</div>
          </div>
        ) : <span />}
        <button className="btn btn-lime" style={{ fontFamily: 'var(--mono)' }} onClick={() => setRoute({ page: t.page })}>
          {t.cta} <Icon name="arrow-right" size={15} style={{ marginLeft: 4 }} className="arrow" />
        </button>
      </div>
    </div>
  );
};

const MainMenuTabs = ({ setRoute, summary }) => {
  const tabs = MENU_TABS.map((t) => ({
    title: t.title, value: t.value,
    content: <MenuPanel t={t} setRoute={setRoute} summary={summary} />,
  }));
  return (
    <section className="section first">
      <div className="site-wrap">
        <div className="mono-eyebrow" style={{ marginBottom: 18 }}>The menu</div>
        <h2 className="spade-h" style={{ fontSize: 'clamp(28px, 5vw, 46px)', maxWidth: 720 }}>
          The whole picture, <span style={{ color: 'var(--moss)' }}>one tab away.</span>
        </h2>
        <div style={{ marginTop: 'clamp(28px, 4vw, 44px)' }}>
          <Tabs tabs={tabs} />
        </div>
      </div>
    </section>
  );
};
window.MainMenuTabs = MainMenuTabs;

/* ---------- HERO DECK ----------
   The page hero IS the front card of a stack. Hovering the top nav broadcasts
   `kx-menu` events; the hovered page's card shuffles to the front and the
   current hero drops into the fan behind. At rest only the front (current
   page's) card shows. Live figures from window.KESTREL_SUMMARY. */
const HERO_CARDS = [
  { k: 'home', kind: 'hero' },
  { k: 'method', eyebrow: 'How it works', title: 'Method', blurb: 'Under the hood: how Strix extracts and standardises the numbers and Kestrel scores the narrative — every result traceable to its source report.', stat: (s) => ({ v: _fmt((s?.meta?.total_passages || 0) + (s?.strix?.observations || 0)), l: 'data points' }), cta: 'See the method' },
  { k: 'companies', eyebrow: 'Profiles', title: 'Companies', blurb: 'Browse every major, ranked by shared-value share. Open any full scorecard.', stat: (s) => ({ v: _fmt((window.platformCompanyCount && window.platformCompanyCount()) || s?.meta?.n_companies), l: 'global mining majors' }), cta: 'Browse companies' },
  { k: 'compare', eyebrow: 'Side by side', title: 'Compare', blurb: 'Put any majors head to head — where the narrative outruns the evidence.', stat: (s) => ({ v: _fmt(s?.meta?.n_reports), l: 'reports analysed' }), cta: 'Compare companies' },
];

const HeroDeckCard = ({ c, summary, setRoute }) => {
  if (c.kind === 'hero') {
    const m = summary?.meta || {};
    const yr = m.year_range || [2018, 2023];
    return (
      <div className="hero-deck-inner">
        <div>
          <div className="mono-eyebrow" style={{ color: 'var(--lime)', marginBottom: 22 }}>
            Independent analysis · {(window.platformCompanyCount && window.platformCompanyCount()) || m.n_companies || 13} mining majors · {yr[0]}–{yr[1]}
          </div>
          <h2 className="menu-panel-title" style={{ fontSize: 'clamp(33px, 5.4vw, 60px)', lineHeight: 1.04 }}>
            <span style={{ color: 'var(--lime)' }}>Find</span> the Numbers.<br /><span style={{ color: 'var(--lime)' }}>Track</span> the Changes.<br /><span style={{ color: 'var(--lime)' }}>Verify</span> the Story.
          </h2>
          <p className="menu-panel-blurb" style={{ maxWidth: 820 }}>
            Monitor ESG performance, dropped targets, methodology changes, and disclosure trends across global mining companies. Turn thousands of pages of sustainability reporting into source-verifiable insights, performance trends, and hidden disclosure changes.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <button className="btn btn-lime btn-lg" onClick={(e) => { e.stopPropagation(); setRoute({ page: 'register-interest' }); }}>
            Register your interest <Icon name="arrow-right" size={16} style={{ marginLeft: 4 }} className="arrow" />
          </button>
          <button className="btn btn-lg" style={{ background: 'transparent', border: '1px solid rgba(166,225,94,0.45)', color: '#E8EFDF', fontFamily: 'var(--mono)' }} onClick={(e) => { e.stopPropagation(); setRoute({ page: 'companies' }); }}>
            Explore the data
          </button>
        </div>
      </div>
    );
  }
  const stat = c.stat ? c.stat(summary) : null;
  return (
    <div className="hero-deck-inner">
      <div>
        <div className="mono-eyebrow" style={{ color: 'var(--lime)', marginBottom: 14 }}>{c.eyebrow}</div>
        <h2 className="menu-panel-title">{c.title}.</h2>
        <p className="menu-panel-blurb">{c.blurb}</p>
      </div>
      <div className="menu-panel-foot">
        {stat ? <div><div className="menu-panel-stat-v">{stat.v}</div><div className="menu-panel-stat-l">{stat.l}</div></div> : <span />}
      </div>
    </div>
  );
};

const HeroDeck = ({ currentKey, setRoute }) => {
  const [menu, setMenu] = React.useState({ open: false, activeKey: null });
  const [, force] = React.useReducer((x) => x + 1, 0);
  // kx-menu (from the nav) drives the shuffle; strix-loaded fills live figures.
  React.useEffect(() => {
    const onMenu = (e) => setMenu({ open: !!(e.detail && e.detail.open), activeKey: e.detail ? e.detail.activeKey : null });
    window.addEventListener('kx-menu', onMenu);
    const onData = () => force();
    if (!window.KESTREL_SUMMARY) window.addEventListener('strix-loaded', onData);
    return () => { window.removeEventListener('kx-menu', onMenu); window.removeEventListener('strix-loaded', onData); };
  }, []);
  const summary = window.KESTREL_SUMMARY;
  // Front card = whichever nav item is being hovered, else the current page.
  const active = (menu.open && menu.activeKey) ? menu.activeKey : currentKey;
  const seq = [active, ...HERO_CARDS.map((c) => c.k).filter((k) => k !== active)];
  return (
    <section className="section first">
      <div className="site-wrap">
        <div className={`hero-deck ${menu.open ? 'is-open' : ''}`}>
          {seq.map((k, depth) => {
            const c = HERO_CARDS.find((x) => x.k === k);
            const front = depth === 0;
            const d = Math.min(depth, 3);
            const style = front
              ? { transform: `translateY(${menu.open ? -16 : 0}px) scale(1)`, opacity: 1, filter: 'none', zIndex: HERO_CARDS.length + 1, pointerEvents: 'auto' }
              : menu.open
                ? { transform: `translateY(${24 + d * 38}px) scale(${(1 - d * 0.058).toFixed(3)})`, opacity: depth > 3 ? 0 : 1, filter: `brightness(${(1 - d * 0.16).toFixed(2)})`, zIndex: HERO_CARDS.length - depth, pointerEvents: 'none' }
                : { transform: 'translateY(10px) scale(0.96)', opacity: 0, filter: 'none', zIndex: HERO_CARDS.length - depth, pointerEvents: 'none' };
            return (
              <div key={k} className={`hero-deck-card ${c.kind === 'hero' ? 'is-hero' : ''}`} style={style}
                onMouseMove={(e) => {
                  const r = e.currentTarget.getBoundingClientRect();
                  e.currentTarget.style.setProperty('--spot-x', (e.clientX - r.left) + 'px');
                  e.currentTarget.style.setProperty('--spot-y', (e.clientY - r.top) + 'px');
                }}
                onClick={() => { if (c.k !== currentKey) setRoute({ page: c.k }); }}>
                <div className="card-spotlight" aria-hidden="true"><div className="card-spotlight-dots" /></div>
                <HeroDeckCard c={c} summary={summary} setRoute={setRoute} />
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};
window.HeroDeck = HeroDeck;

/* ---------- HOME (composition) ---------- */
/* ---------- 1.5  TWO ENGINES — Kestrel vs Strix ----------
   Platform intro: two purpose-built mining tools, what each does, and why they
   differ. Answers "what is Kestrel / what is Strix / why are they different". */
const ENGINE_CARDS = [
  {
    key: 'kestrel', tag: 'Kestrel · qualitative', icon: 'doc', title: 'Disclosure intelligence',
    body: 'Reads the narrative side of mining reporting — sustainability, social and community performance, governance, biodiversity, climate strategy, human rights, and Creating Shared Value — and tracks how commitments are made, maintained, modified, or quietly dropped.',
    points: ['Track commitments over time', 'New · maintained · modified · dropped', 'Compare disclosure quality', 'Verify against the source report'],
  },
  {
    key: 'strix', tag: 'Strix · quantitative', icon: 'chart', title: 'Extraction engine',
    body: 'Turns thousands of pages of mining sustainability, climate, and annual reports into structured ESG metrics — standardising inconsistent formats, tracking year-on-year performance, and flagging methodology changes, redrawn boundaries, and silently dropped targets.',
    points: ['Extract & standardise metrics', 'Year-on-year performance', 'Methodology & boundary changes', 'Active · revised · dropped targets'],
  },
];
const TwoEngines = () => (
  <section className="section dark-section">
    <div className="site-wrap">
      <div style={{ maxWidth: 760 }}>
        <div className="mono-eyebrow" style={{ marginBottom: 20, color: 'var(--lime)' }}>One platform · two engines</div>
        <h2 className="spade-h" style={{ fontSize: 'clamp(28px, 5vw, 46px)', color: '#F4F7EE' }}>
          What companies say, and <span className="hl" style={{ color: 'var(--lime)' }}>what they report.</span>
        </h2>
        <p style={{ marginTop: 18, color: '#C2CDB5', maxWidth: 600 }}>
          Kestrel and Strix are separate but complementary tools — both purpose-built for mining and extractives. One reads the words; the other extracts the numbers.
        </p>
      </div>
      <div style={{ marginTop: 42, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 18 }}>
        {ENGINE_CARDS.map((c, i) => (
          <SpReveal key={c.key} delay={i * 110} style={{ height: '100%' }}>
            <CornerFrame style={{ padding: '28px 28px 30px', height: '100%', boxSizing: 'border-box', background: 'rgba(166,225,94,0.035)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(166,225,94,0.12)', color: 'var(--lime)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name={c.icon} size={19} />
                </div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--lime)' }}>{c.tag}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 24, letterSpacing: '-0.02em', color: '#F4F7EE', marginBottom: 12 }}>{c.title}</div>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: '#C2CDB5', marginBottom: 18 }}>{c.body}</p>
              <div style={{ display: 'grid', gap: 9, borderTop: '1px solid rgba(166,225,94,0.16)', paddingTop: 16 }}>
                {c.points.map((p) => (
                  <div key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: 9, fontSize: 13, color: '#E8EFDF' }}>
                    <Icon name="check" size={15} color="var(--lime)" style={{ flexShrink: 0, marginTop: 1 }} />
                    <span>{p}</span>
                  </div>
                ))}
              </div>
            </CornerFrame>
          </SpReveal>
        ))}
      </div>
      <p style={{ marginTop: 24, fontFamily: 'var(--mono)', fontSize: 12.5, lineHeight: 1.7, color: '#9DAC8C', maxWidth: 740 }}>
        Kestrel analyses what companies <span style={{ color: 'var(--lime)' }}>say</span>. Strix analyses what they <span style={{ color: 'var(--lime)' }}>report in numbers</span>. Together they cover the whole mining disclosure record — every claim and every datapoint traceable to its source.
      </p>
    </div>
  </section>
);

/* ---------- 1.6  THREE PILLARS — the core differentiators ----------
   Source traceability · mining-specific standardisation · commitment & target
   tracking. The primary commercial value proposition, stated plainly. */
const PILLARS = [
  { icon: 'doc', title: 'Source-Verifiable Intelligence', body: 'Every metric, commitment, target, and classification links back to the original mining report and page reference wherever the disclosure allows. Findings you can check — not take on trust.' },
  { icon: 'stack', title: 'Mining-Specific Standardisation', body: 'Mining companies report the same things in different ways. The platform standardises those disclosures into one comparable format, while preserving the original source context.' },
  { icon: 'target', title: 'Commitment & Target Tracking', body: 'Follow commitments and targets from announcement through revision, extension, expiry, or quiet removal — with methodology and boundary changes flagged across every reporting year.' },
];
const Pillars = () => (
  <section className="section">
    <div className="site-wrap">
      <div style={{ maxWidth: 720 }}>
        <div className="mono-eyebrow" style={{ marginBottom: 18 }}>The platform · three pillars</div>
        <h2 className="spade-h" style={{ fontSize: 'clamp(28px, 5vw, 44px)' }}>
          Source-verifiable. Standardised. <span style={{ color: 'var(--moss)' }}>Tracked.</span>
        </h2>
        <p className="lede" style={{ marginTop: 18, maxWidth: 600 }}>
          The three things every Kestrel and Strix output is built to guarantee — and the reason mining teams, investors, and analysts rely on the platform.
        </p>
      </div>
      <div className="grid-bg" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 0 }}>
        {PILLARS.map((p, i) => (
          <SpReveal key={p.title} delay={i * 100} style={{ height: '100%' }}>
            <CornerFrame style={{ padding: '28px 26px 32px', minHeight: 230, height: '100%', boxSizing: 'border-box' }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--sage-tint)', color: 'var(--moss-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                <Icon name={p.icon} size={20} />
              </div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--moss)', marginBottom: 10 }}>0{i + 1}</div>
              <div style={{ fontWeight: 600, fontSize: 18, color: 'var(--ink)', marginBottom: 10, letterSpacing: '-0.01em' }}>{p.title}</div>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-2)' }}>{p.body}</p>
            </CornerFrame>
          </SpReveal>
        ))}
      </div>
    </div>
  </section>
);

const Home = ({ setRoute }) => {
  const summary = useKestrelReady();
  return (
    <>
      <HomeStatBand summary={summary} />
      <TwoEngines />
      <Pillars />
      <DataToInsight summary={summary} />
      <KeyFinding summary={summary} />
      <ClaimVsEvidence />
      <Globe setRoute={setRoute} />
      <StrixScrutiny setRoute={setRoute} />
      <CompanyShowcase setRoute={setRoute} summary={summary} />
    </>
  );
};
window.Home = Home;

/* ============================================================
   REGISTER INTEREST — Spade lead-capture (client-side success).
   No backend in this build; submit shows a thank-you. The structured
   fields mirror the live site's form so wiring an endpoint is a drop-in.
   ============================================================ */
const RI_ROLES = ['Consultant', 'Investor / analyst', 'NGO / civil society', 'Regulator / policy', 'Researcher / academic', 'Industry / operator', 'Journalist', 'Other'];
const RI_USES = ['Screening & due diligence', 'Investment research', 'Academic research', 'Regulatory / policy', 'Client advising', 'Internal benchmarking', 'Journalism', 'Other'];

const RegisterInterest = ({ setRoute }) => {
  const [form, setForm] = React.useState({ name: '', email: '', company: '', role: '', use: '', notes: '' });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [err, setErr] = React.useState(null);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    setErr(null);
    setSending(true);
    try {
      const res = await fetch('/api/register-interest', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error('request failed');
      setSent(true);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch (e2) {
      setErr('Something went wrong — please try again in a moment.');
    } finally {
      setSending(false);
    }
  };

  if (sent) {
    return (
      <section className="section first">
        <div className="site-wrap" style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
          <div className="dark-section panel-round" style={{ padding: '64px 48px' }}>
            <div style={{ width: 56, height: 56, borderRadius: 14, background: 'var(--lime)', color: 'var(--forest)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
              <Icon name="check" size={28} />
            </div>
            <h2 className="spade-h" style={{ fontSize: 'clamp(28px, 6vw, 40px)', color: '#F4F7EE' }}>Thank you{form.name ? `, ${form.name.split(' ')[0]}` : ''}.</h2>
            <p style={{ marginTop: 16, color: '#C2CDB5', maxWidth: 440, margin: '16px auto 0' }}>
              You’re on the early-access list. We’ll be in touch about access to the full Kestrel dataset.
            </p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 32 }}>
              <button className="btn btn-lime" style={{ fontFamily: 'var(--mono)' }} onClick={() => setRoute({ page: 'companies' })}>Explore the data</button>
              <button className="btn" style={{ background: 'transparent', border: '1px solid rgba(166,225,94,0.45)', color: '#E8EFDF', fontFamily: 'var(--mono)' }} onClick={() => setRoute({ page: 'home' })}>Back to overview</button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="section first">
      <div className="site-wrap">
        <div className="grid-2" style={{ alignItems: 'start' }}>
          <div>
            <div className="mono-eyebrow" style={{ marginBottom: 22 }}>Register your interest</div>
            <h1 className="spade-h" style={{ fontSize: 'clamp(32px, 6vw, 52px)' }}>
              Get access to the <span style={{ color: 'var(--moss)' }}>full dataset.</span>
            </h1>
            <p className="lede" style={{ marginTop: 22, maxWidth: 460 }}>
              Kestrel is in early access. Tell us who you are and how you’d use it — we’ll prioritise access to the
              full passage-level corpus, source citations, and the Strix ESG metric layer.
            </p>
            <div style={{ marginTop: 30, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {['Passage-level access across all 13 majors', 'Four-criteria scoring with source citations', 'Strix restatement & dropped-target tracking'].map((t) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14.5, color: 'var(--ink-2)' }}>
                  <span style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--sage-tint)', color: 'var(--moss-deep)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                    <Icon name="check" size={13} />
                  </span>
                  {t}
                </div>
              ))}
            </div>
          </div>

          <form onSubmit={submit} className="tick-frame" style={{ padding: '34px 32px', background: 'var(--canvas)', borderRadius: 18, border: '1px solid var(--line)' }}>
            <span className="tk tk-tl" /><span className="tk tk-tr" /><span className="tk tk-bl" /><span className="tk tk-br" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div className="ri-grid">
                <input className="ri-field" required placeholder="Full name" value={form.name} onChange={set('name')} />
                <input className="ri-field" required type="email" placeholder="Work email" value={form.email} onChange={set('email')} />
              </div>
              <input className="ri-field" placeholder="Organisation" value={form.company} onChange={set('company')} />
              <div className="ri-grid">
                <select className="ri-field" value={form.role} onChange={set('role')}>
                  <option value="">Your role…</option>
                  {RI_ROLES.map((r) => <option key={r} value={r}>{r}</option>)}
                </select>
                <select className="ri-field" value={form.use} onChange={set('use')}>
                  <option value="">Primary use…</option>
                  {RI_USES.map((u) => <option key={u} value={u}>{u}</option>)}
                </select>
              </div>
              <textarea className="ri-field" rows={3} placeholder="What would you use Kestrel for? (optional)" value={form.notes} onChange={set('notes')} style={{ resize: 'vertical' }} />
              <button type="submit" disabled={sending} className="btn btn-lime btn-lg" style={{ width: '100%', justifyContent: 'center', fontFamily: 'var(--mono)', opacity: sending ? 0.6 : 1 }}>
                {sending ? 'Sending…' : <>Request early access <Icon name="arrow-right" size={16} style={{ marginLeft: 4 }} className="arrow" /></>}
              </button>
              {err && (
                <p style={{ fontSize: 12.5, color: '#d05a3e', textAlign: 'center', fontFamily: 'var(--mono)' }}>{err}</p>
              )}
              <p style={{ fontSize: 12, color: 'var(--ink-3)', textAlign: 'center', fontFamily: 'var(--mono)' }}>
                No spam. We’ll only contact you about Kestrel access.
              </p>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
};
window.RegisterInterest = RegisterInterest;