import type { Metadata } from 'next';
import Link from 'next/link';
import { Download } from 'lucide-react';
import { PageHeader, Section, Note } from '@/components/ui/section';
import { Badge, ClaimBadge } from '@/components/ui/badge';
import { EmptyState } from '@/components/ui/empty-state';
import { Freshness } from '@/components/ui/freshness';
import { SourceBadge } from '@/components/ui/source-badge';
import { JsonView } from '@/components/ui/json-view';
import { ScatterChart, type ScatterPoint } from '@/components/charts/scatter-chart';
import { listGapScopes, pickGapScope, gapComponents, gapSums, gapScopeKey, gapMetricDefs, type GapComponent } from '@/lib/queries/research-gap';
import { fmtInt, fmtNum, fmtPct, fmtValue, fmtDateTime, humanize } from '@/lib/format';
import { str, int, oneOf, withParams, type SP } from '@/lib/search-params';

export const dynamic = 'force-dynamic';

export const metadata: Metadata = {
  title: 'Research Gap Index — burden vs research activity',
  description: 'Deaths, active trials and publications per top-level cancer in one burden scope; shares, log2 gap ratios and per-1,000-deaths intensities with their formula versions and inputs.',
};

const SORT_KEYS = ['canonical_name', 'deaths', 'death_share', 'active_trials', 'trial_share', 'publications_5y', 'publication_share', 'trial_gap_ratio', 'research_gap_ratio', 'trials_per_1000_deaths', 'publications_per_1000_deaths'] as const;
type SortKey = (typeof SORT_KEYS)[number];

function sortRows(rows: GapComponent[], key: SortKey, dir: 'asc' | 'desc'): GapComponent[] {
  const sgn = dir === 'asc' ? 1 : -1;
  return [...rows].sort((a, b) => {
    // Ineligible rows always sink to the bottom.
    if (a.eligible !== b.eligible) return a.eligible ? -1 : 1;
    if (key === 'canonical_name') return sgn * a.canonical_name.localeCompare(b.canonical_name);
    const av = a[key];
    const bv = b[key];
    if (av == null && bv == null) return a.canonical_name.localeCompare(b.canonical_name);
    if (av == null) return 1;
    if (bv == null) return -1;
    return sgn * (Number(av) - Number(bv)) || a.canonical_name.localeCompare(b.canonical_name);
  });
}

/** Short display label for chart points: the entity's short name, else the canonical name without the "Malignant … Neoplasm" wrapper. */
function chartLabel(r: { canonical_name: string; short_name: string | null }): string {
  if (r.short_name) return r.short_name;
  return r.canonical_name.replace(/^Malignant\s+/i, '').replace(/\s+Neoplasm$/i, '');
}

function Ratio({ v }: { v: number | null }) {
  if (v == null) return <span className="text-ink-4">—</span>;
  const cls = v >= 1 ? 'text-danger font-medium' : v > 0 ? 'text-ink' : 'text-ink-3';
  return <span className={cls}>{fmtValue(v, 'log2_ratio')}</span>;
}

export default async function ResearchGapPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const scopes = await listGapScopes();
  const want = { geography: str(sp, 'geography', 'USA'), year: int(sp, 'year', 0, 1900, 2100) || null, sex: oneOf(sp, 'sex', ['all', 'male', 'female'] as const, 'all'), source: str(sp, 'source') };
  const scope = pickGapScope(scopes, want);
  const sort = oneOf(sp, 'sort', SORT_KEYS, 'research_gap_ratio');
  const dir = oneOf(sp, 'dir', ['asc', 'desc'] as const, sort === 'canonical_name' ? 'asc' : 'desc');
  const [rowsRaw, defs] = scope ? await Promise.all([gapComponents(scope), gapMetricDefs()]) : [[] as GapComponent[], new Map()];
  const rows = sortRows(rowsRaw, sort, dir);
  const eligible = rows.filter((r) => r.eligible);
  const sums = gapSums(rows);
  const current = { geography: scope?.geography ?? want.geography, year: scope?.year ?? null, sex: scope?.sex ?? want.sex, source: scope?.source_slug ?? null, sort, dir };
  const sortLink = (key: SortKey) => withParams(current, { sort: key, dir: sort === key ? (dir === 'desc' ? 'asc' : 'desc') : key === 'canonical_name' ? 'asc' : 'desc' });
  const sortMark = (key: SortKey) => (sort === key ? (dir === 'desc' ? ' ▼' : ' ▲') : '');
  const geographies = [...new Set(scopes.map((s) => s.geography))];
  const yearsFor = (geo: string, sex: string) => [...new Set(scopes.filter((s) => s.geography === geo && s.sex === sex).map((s) => Number(s.year)))].sort((a, b) => b - a);
  const sexesFor = (geo: string) => [...new Set(scopes.filter((s) => s.geography === geo).map((s) => s.sex))];
  const sourcesFor = (geo: string, year: number | null, sex: string) => scopes.filter((s) => s.geography === geo && Number(s.year) === year && s.sex === sex);
  const pubSlope = sums.deaths > 0 ? sums.publications5y / sums.deaths : 0;
  const trialSlope = sums.deaths > 0 ? sums.activeTrials / sums.deaths : 0;
  const cancerHref = (r: GapComponent) => `/cancer/${r.slug}/rankings`;
  const sourceBadge = scope ? <SourceBadge p={{ sourceSlug: scope.source_slug, sourceName: scope.source_name, dataset: `mortality_count · ${scope.geography} · ${scope.year} · ${scope.sex}`, layer: 'normalized' }} compact /> : null;
  const pubPoints: ScatterPoint[] = eligible.map((r) => ({
    id: r.cancer_id,
    label: chartLabel(r),
    href: cancerHref(r),
    x: Number(r.deaths),
    y: Number(r.publications_5y),
    size: Number(r.active_trials),
    tooltip: `${r.canonical_name} — deaths ${fmtInt(r.deaths)} (${scope?.year}) · publications 5 y ${fmtInt(r.publications_5y)} · active trials ${fmtInt(r.active_trials)} · research gap ratio ${fmtValue(r.research_gap_ratio, 'log2_ratio')}`,
  }));
  const trialPoints: ScatterPoint[] = eligible.map((r) => ({
    id: r.cancer_id,
    label: chartLabel(r),
    href: cancerHref(r),
    x: Number(r.deaths),
    y: Number(r.active_trials),
    tooltip: `${r.canonical_name} — deaths ${fmtInt(r.deaths)} (${scope?.year}) · active trials ${fmtInt(r.active_trials)} · trial gap ratio ${fmtValue(r.trial_gap_ratio, 'log2_ratio')}`,
  }));
  const dTrial = defs.get('trial_gap_ratio');
  const dRes = defs.get('research_gap_ratio');
  const dTpd = defs.get('trials_per_1000_deaths');
  const dPpd = defs.get('publications_per_1000_deaths');

  return (
    <div>
      <PageHeader
        kicker="Unmet need · computed index"
        title="Research Gap Index"
        lede="How a cancer's share of deaths compares with its share of registered research activity — active interventional trials (ClinicalTrials.gov) and publications of the last five years (PubMed) — within one burden scope. It measures where registered activity is thin relative to mortality; it does not measure the quality, funding or difficulty of research, and it inherits every limit of the burden source."
      >
        <p className="mt-2 flex flex-wrap items-center gap-2 text-[12.5px] text-ink-3">
          <ClaimBadge kind="computed" />
          {scope ? <span className="ci-mono">{scope.formula_version}</span> : null}
          {dTrial ? <span className="ci-mono">{dTrial.formula_version}</span> : null}
          {dRes ? <span className="ci-mono">{dRes.formula_version}</span> : null}
          <Link href="/methodology#research-gap" className="ci-link">
            Methodology
          </Link>
          <Link href="/rankings/trial_gap_ratio" className="ci-link">
            Trial Gap Ratio ranking
          </Link>
          <Link href="/rankings/research_gap_ratio" className="ci-link">
            Research Gap Ratio ranking
          </Link>
        </p>
        <Note>
          Burden is currently <strong>United States only</strong> (CDC WONDER and U.S. Cancer Statistics): global estimates (IARC / GLOBOCAN) remain under license review, so no world scope exists yet. Shares and ratios are relative to the eligible top-level cancers of the scope, not to all cancers.
        </Note>
      </PageHeader>

      {!scope ? (
        <EmptyState title="Research gap components not yet computed" knows={[{ label: 'Percentile-based Trial Gap Index', href: '/rankings/trial_gap' }, { label: 'Percentile-based Research Gap Index', href: '/rankings/research_gap' }, { label: 'Methodology', href: '/methodology#research-gap' }]}>
          Components require a burden scope (annual deaths per top-level cancer for one geography, year, sex and source) plus trial and literature counters. They are recomputed by <code className="ci-mono">pnpm cix intel</code>.
        </EmptyState>
      ) : (
        <>
          {/* Scope selector (GET params, server-rendered) */}
          <form method="get" action="/research-gap" className="ci-rule flex flex-wrap items-end gap-3 pt-4 text-[13px]" aria-label="Burden scope">
            <label className="flex flex-col gap-0.5">
              <span className="ci-kicker">Geography</span>
              <select name="geography" defaultValue={scope.geography} className="border border-rule bg-paper px-2 py-1">
                {geographies.map((g) => (
                  <option key={g} value={g}>
                    {g}
                  </option>
                ))}
              </select>
            </label>
            <label className="flex flex-col gap-0.5">
              <span className="ci-kicker">Sex</span>
              <select name="sex" defaultValue={scope.sex} className="border border-rule bg-paper px-2 py-1">
                {sexesFor(scope.geography).map((s) => (
                  <option key={s} value={s}>
                    {s === 'all' ? 'both sexes' : humanize(s)}
                  </option>
                ))}
              </select>
            </label>
            <label className="flex flex-col gap-0.5">
              <span className="ci-kicker">Year</span>
              <select name="year" defaultValue={String(scope.year)} className="border border-rule bg-paper px-2 py-1">
                {yearsFor(scope.geography, scope.sex).map((y) => (
                  <option key={y} value={y}>
                    {y}
                  </option>
                ))}
              </select>
            </label>
            <label className="flex flex-col gap-0.5">
              <span className="ci-kicker">Burden source</span>
              <select name="source" defaultValue={scope.source_slug} className="border border-rule bg-paper px-2 py-1">
                {sourcesFor(scope.geography, Number(scope.year), scope.sex).map((s) => (
                  <option key={s.source_slug} value={s.source_slug}>
                    {s.source_slug} ({s.n_eligible} eligible)
                  </option>
                ))}
              </select>
            </label>
            <input type="hidden" name="sort" value={sort} />
            <input type="hidden" name="dir" value={dir} />
            <button type="submit" className="border border-rule-strong px-3 py-1 text-ink hover:border-accent hover:text-accent">
              Apply
            </button>
            <span className="text-[12px] text-ink-3">
              Scope key <span className="ci-mono">{gapScopeKey(scope)}</span> · burden source {sourceBadge}
            </span>
          </form>

          {/* KPI strip */}
          <section aria-label="Scope totals" className="mt-5">
            <ul className="grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-5">
              {[
                { label: 'Scope', value: `${scope.geography} · ${scope.year}`, note: `${scope.sex === 'all' ? 'both sexes' : humanize(scope.sex)} · all ages · top-level cancers`, text: true },
                { label: 'Eligible cancers', value: fmtInt(sums.eligible), note: `of ${fmtInt(rows.length)} with a mortality observation · deaths ≥ 100` },
                { label: 'Σ deaths', value: fmtInt(sums.deaths), note: `${scope.source_slug} · ${scope.year} · eligible set` },
                { label: 'Σ active trials', value: fmtInt(sums.activeTrials), note: 'ClinicalTrials.gov · cancer + NCIt descendants' },
                { label: 'Σ publications (5 y)', value: fmtInt(sums.publications5y), note: 'PubMed · query-based per entity' },
              ].map((k) => (
                <li key={k.label}>
                  <span className={`block font-display text-ink ${k.text ? 'text-xl sm:text-2xl' : 'ci-num text-2xl sm:text-3xl'}`}>{k.value}</span>
                  <span className="block text-[12.5px] font-medium text-ink-2">{k.label}</span>
                  <span className="block text-[11.5px] text-ink-3">{k.note}</span>
                </li>
              ))}
            </ul>
            <Freshness dataUpdatedAt={scope.computed_at} extra={`components ${scope.formula_version} · sums are over the eligible set only`} />
          </section>

          {/* Scatter 1 */}
          <Section
            id="deaths-vs-publications"
            kicker="Burden vs literature"
            title="Annual deaths vs publications of the last five years"
            description={`Each bubble is one eligible top-level cancer; bubble area is proportional to its active interventional trials. The dashed line is the scope's overall intensity (${fmtNum(pubSlope * 1000, 0)} publications per 1,000 deaths): cancers below it have a positive Research Gap Ratio — fewer publications than their share of deaths would suggest — and cancers above it a negative one.`}
            className="mt-8"
            actions={
              <Link href={`/rankings/research_gap_ratio?scope=${encodeURIComponent(gapScopeKey(scope))}`} className="ci-link">
                Research Gap Ratio ranking →
              </Link>
            }
          >
            {pubPoints.length ? (
              <ScatterChart points={pubPoints} xLabel={`Annual deaths, ${scope.year}`} yLabel="Publications, last 5 years" sizeLabel="Active trials" ariaLabel={`Scatter of annual deaths against publications for ${pubPoints.length} eligible top-level cancers, ${scope.geography} ${scope.year}`} reference={{ slope: pubSlope, label: `Scope average: ${fmtNum(pubSlope * 1000, 0)} publications per 1,000 deaths (Research Gap Ratio = 0)` }} width={880} height={460} />
            ) : (
              <EmptyState compact>No eligible cancer in this scope.</EmptyState>
            )}
            <p className="mt-1.5 flex flex-wrap items-center gap-2 text-[11.5px] text-ink-3">
              <ClaimBadge kind="computed" />
              <span>
                x: {sourceBadge} mortality_count · y: <Link href="/source/pubmed" className="ci-src">pubmed</Link> publications_5y · size: <Link href="/source/clinicaltrials" className="ci-src">clinicaltrials</Link> active_trials
              </span>
            </p>
          </Section>

          {/* Scatter 2 */}
          <Section
            id="deaths-vs-trials"
            kicker="Burden vs clinical research"
            title="Annual deaths vs active interventional trials"
            description={`Dashed line: ${fmtNum(trialSlope * 1000, 1)} active trials per 1,000 deaths (Trial Gap Ratio = 0). Below the line: positive Trial Gap Ratio.`}
            className="mt-8"
            actions={
              <Link href={`/rankings/trial_gap_ratio?scope=${encodeURIComponent(gapScopeKey(scope))}`} className="ci-link">
                Trial Gap Ratio ranking →
              </Link>
            }
          >
            <div className="max-w-3xl">
              {trialPoints.length ? <ScatterChart points={trialPoints} xLabel={`Annual deaths, ${scope.year}`} yLabel="Active interventional trials" ariaLabel={`Scatter of annual deaths against active trials for ${trialPoints.length} eligible top-level cancers, ${scope.geography} ${scope.year}`} reference={{ slope: trialSlope, label: `Scope average: ${fmtNum(trialSlope * 1000, 1)} active trials per 1,000 deaths (Trial Gap Ratio = 0)` }} width={640} height={320} /> : <EmptyState compact>No eligible cancer in this scope.</EmptyState>}
            </div>
          </Section>

          {/* Table */}
          <Section
            id="components"
            kicker="Components"
            title="Deaths, activity, shares and gap ratios per cancer"
            description="Click a column header to sort (the order is kept in the URL). Ineligible cancers are listed last with the reason. Shares are the cancer's fraction of the eligible set's total; ratios are log₂(death share ÷ activity share): 0 = proportional, +1 = twice the death share, −1 = half."
            className="mt-8"
            actions={
              <a href={`/api/export/research-gap.csv${withParams({ geography: scope.geography, year: scope.year, sex: scope.sex, source: scope.source_slug }, {})}`} className="inline-flex items-center gap-1.5 border border-rule px-2.5 py-1 text-[13px] text-ink no-underline hover:border-accent hover:text-accent">
                <Download className="h-3.5 w-3.5" aria-hidden /> CSV (with attribution)
              </a>
            }
          >
            <div className="mb-2 flex flex-wrap items-center gap-2 text-[12px] text-ink-3">
              {sourceBadge}
              <Link href="/source/clinicaltrials" className="ci-src">
                clinicaltrials
              </Link>
              <Link href="/source/pubmed" className="ci-src">
                pubmed
              </Link>
              <ClaimBadge kind="computed" />
              <span>
                {fmtInt(rows.length)} top-level cancers with a {scope.year} mortality observation · {fmtInt(sums.eligible)} eligible
              </span>
            </div>
            <div className="ci-table-wrap">
              <table className="ci-table">
                <thead>
                  <tr>
                    <th>
                      <Link href={sortLink('canonical_name')} className="no-underline">
                        Cancer{sortMark('canonical_name')}
                      </Link>
                    </th>
                    <th className="num">
                      <Link href={sortLink('deaths')} className="no-underline" title={`mortality_count · ${scope.source_slug} · ${scope.year}`}>
                        Deaths {scope.year}
                        {sortMark('deaths')}
                      </Link>
                    </th>
                    <th className="num">
                      <Link href={sortLink('death_share')} className="no-underline">
                        Death share{sortMark('death_share')}
                      </Link>
                    </th>
                    <th className="num">
                      <Link href={sortLink('active_trials')} className="no-underline">
                        Active trials{sortMark('active_trials')}
                      </Link>
                    </th>
                    <th className="num">
                      <Link href={sortLink('trial_share')} className="no-underline">
                        Trial share{sortMark('trial_share')}
                      </Link>
                    </th>
                    <th className="num">
                      <Link href={sortLink('publications_5y')} className="no-underline">
                        Publications 5 y{sortMark('publications_5y')}
                      </Link>
                    </th>
                    <th className="num">
                      <Link href={sortLink('publication_share')} className="no-underline">
                        Publication share{sortMark('publication_share')}
                      </Link>
                    </th>
                    <th className="num">
                      <Link href={sortLink('trial_gap_ratio')} className="no-underline" title={dTrial?.formula}>
                        Trial gap ratio{sortMark('trial_gap_ratio')}
                      </Link>
                    </th>
                    <th className="num">
                      <Link href={sortLink('research_gap_ratio')} className="no-underline" title={dRes?.formula}>
                        Research gap ratio{sortMark('research_gap_ratio')}
                      </Link>
                    </th>
                    <th className="num">
                      <Link href={sortLink('trials_per_1000_deaths')} className="no-underline" title={dTpd?.formula}>
                        Trials / 1,000 deaths{sortMark('trials_per_1000_deaths')}
                      </Link>
                    </th>
                    <th className="num">
                      <Link href={sortLink('publications_per_1000_deaths')} className="no-underline" title={dPpd?.formula}>
                        Pubs / 1,000 deaths{sortMark('publications_per_1000_deaths')}
                      </Link>
                    </th>
                    <th>Eligibility</th>
                    <th>Inputs</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((r) => (
                    <tr key={r.cancer_id} className={r.eligible ? '' : 'text-ink-3'}>
                      <td className="min-w-[200px]">
                        <Link className="ci-link" href={cancerHref(r)}>
                          {r.canonical_name}
                        </Link>
                        {r.eligible && (r.trial_gap_rank != null || r.research_gap_rank != null) ? (
                          <span className="ml-1.5 text-[11px] text-ink-3" title="Rank in the Trial Gap Ratio / Research Gap Ratio rankings of this scope (1 = largest gap)">
                            #{r.trial_gap_rank ?? '—'} / #{r.research_gap_rank ?? '—'}
                          </span>
                        ) : null}
                      </td>
                      <td className="num">
                        <span className="ci-num">{fmtInt(r.deaths)}</span>
                        <span className="ml-1 text-[11px] text-ink-3">
                          {scope.year} {sourceBadge}
                        </span>
                      </td>
                      <td className="num">{fmtPct(r.death_share, 1)}</td>
                      <td className="num">{fmtInt(r.active_trials)}</td>
                      <td className="num">{fmtPct(r.trial_share, 1)}</td>
                      <td className="num">{fmtInt(r.publications_5y)}</td>
                      <td className="num">{fmtPct(r.publication_share, 1)}</td>
                      <td className="num">
                        <Ratio v={r.trial_gap_ratio} />
                      </td>
                      <td className="num">
                        <Ratio v={r.research_gap_ratio} />
                      </td>
                      <td className="num">{fmtValue(r.trials_per_1000_deaths, 'per_1000_deaths')}</td>
                      <td className="num">{fmtValue(r.publications_per_1000_deaths, 'per_1000_deaths')}</td>
                      <td>
                        {r.eligible ? (
                          <Badge tone="ok" title="deaths ≥ 100; ratios require ≥ 1 trial / ≥ 1 publication">
                            eligible
                          </Badge>
                        ) : (
                          <Badge tone="outline" title={r.ineligible_reason ?? undefined}>
                            {r.ineligible_reason?.split(' ')[0]?.replace(/_/g, ' ') ?? 'ineligible'}
                          </Badge>
                        )}
                      </td>
                      <td>
                        <details>
                          <summary className="ci-link text-[12.5px]">inputs</summary>
                          <div className="mt-1 max-w-[380px]">
                            <JsonView data={r.inputs} />
                            <p className="ci-mono mt-1 text-[10.5px] text-ink-4">
                              component {r.component_id} · {r.formula_version}
                            </p>
                          </div>
                        </details>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <Freshness dataUpdatedAt={scope.computed_at} extra={`computed ${fmtDateTime(scope.computed_at)} · ${scope.formula_version}`} />
          </Section>

          <div className="mt-8 grid gap-6 lg:grid-cols-[1fr_1fr]">
            <Section id="formulas" kicker="Formulas" title="How each column is computed" level={3}>
              {/* Stacked (not the two-column KV): formulas are long and must keep the full width on narrow screens. */}
              <dl className="space-y-2.5 text-[13px]">
                {[
                  { k: 'Death share', f: 'deaths / Σ deaths (eligible set)', v: null },
                  { k: 'Trial share', f: 'active_trials / Σ active_trials (eligible set)', v: null },
                  { k: 'Publication share', f: 'publications_5y / Σ publications_5y (eligible set)', v: null },
                  ...[dTrial, dRes, dTpd, dPpd].filter((d): d is NonNullable<typeof d> => !!d).map((d) => ({ k: d.name, f: d.formula, v: d.formula_version })),
                ].map((it) => (
                  <div key={it.k}>
                    <dt className="text-ink-3">{it.k}</dt>
                    <dd className="min-w-0 break-words">
                      <code className="ci-mono text-[12px]">{it.f}</code>
                      {it.v ? <span className="ci-mono ml-1.5 text-[11px] text-ink-3">{it.v}</span> : null}
                    </dd>
                  </div>
                ))}
                <div>
                  <dt className="text-ink-3">Eligibility</dt>
                  <dd>deaths ≥ 100 in the scope; a ratio is undefined (—) when the cancer has no trial / no publication.</dd>
                </div>
                <div>
                  <dt className="text-ink-3">Components</dt>
                  <dd className="ci-mono">{scope.formula_version}</dd>
                </div>
              </dl>
              <p className="mt-3 text-[12px] text-ink-3">
                <Link href="/methodology#research-gap" className="ci-link">
                  Full methodology
                </Link>{' '}
                · percentile-based indexes: <Link href="/rankings/trial_gap" className="ci-link">Trial Gap Index</Link>, <Link href="/rankings/research_gap" className="ci-link">Research Gap Index</Link>.
              </p>
            </Section>
            <Section id="caveats" kicker="Read with care" title="What this index is not" level={3}>
              <ul className="list-disc space-y-1.5 pl-5 text-[13px] text-ink-2">
                <li>Not a judgement of research quality, funding or difficulty — only registered activity counted against deaths. A positive ratio is a signal to look closer, not an accusation.</li>
                <li>Trial counts aggregate a cancer and its NCIt descendants; registrations phrased at a broader level (e.g. &ldquo;colorectal cancer&rdquo;) are attributed to the broader entity and can overstate the gap of narrower sites.</li>
                <li>Literature counts are query-based per entity (the query is stored with each count) and are not aggregated over descendants; a narrow query can inflate a Research Gap Ratio.</li>
                <li>Burden depends on the epidemiology source and its site definitions; the same cancer can have a different ratio under another source or year. Compare only within one table.</li>
                <li>United States only for now; a US death share is not a global death share.</li>
                <li>Shares are relative to the eligible set: adding or removing one cancer changes every other cancer&rsquo;s ratio slightly.</li>
              </ul>
            </Section>
          </div>
        </>
      )}
    </div>
  );
}