// Methodology tab: faithful rendition of the AEI aggregation methodology (PDF Appendix 1)
const { useState: useStateMeth } = React;

// ---- Pillar / indicator structure + weights (from the methodology table) ----
const METH_PILLARS = [
{
  name: 'Economic Resilience',
  weight: '14.3%',
  indicators: [
  ['Economic Complexity Index', '20%'],
  ['Export product concentration', '20%'],
  ['Gross domestic savings (% GDP)', '20%'],
  ['Ecological deficit/reserve', '20%'],
  ['Inflation rate (average consumer prices)', '20%']]

},
{
  name: 'Risk Expectations and Behavioural Change',
  weight: '14.3%',
  indicators: [
  ['Climate change a threat to country in next 20 years', '25%'],
  ['Worried severe weather events could cause serious harm', '25%'],
  ['Plan for future disaster known by all household members over 10 years old', '25%'],
  ['Nonlife insurance premium volume to GDP (%)', '25%']]

},
{
  name: 'Financial Market Strength',
  weight: '14.3%',
  indicators: [
  ['Domestic credit to private sector (% of GDP)', '25%'],
  ['Quality of regulations for financial services', '25%'],
  ['Venture capital received (deal count/bn $PPP GDP)', '25%'],
  ['Financial account ownership or mobile money usage (% age 15+)', '25%']]

},
{
  name: 'Entrepreneurship, Innovation, and Technological Diffusion',
  weight: '14.3%',
  indicators: [
  ['Quality of regulations for business entry', '16.7%'],
  ['Operational efficiency of business entry', '16.7%'],
  ['Quality of regulations for market competition', '16.7%'],
  ['STEM graduates as percentage of total graduates in tertiary education', '16.7%'],
  ['Perceived opportunities for starting a business', '16.7%'],
  ['Material productivity', '16.7%']]

},
{
  name: 'Infrastructure Regulation and Standards',
  weight: '14.3%',
  indicators: [
  ['Environmental permits for construction', '20%'],
  ['Transparency of environmental permits', '20%'],
  ['Building, zoning and land use regulations', '20%'],
  ['Building, zoning and land use transparency', '20%'],
  ['Environmental sustainability of electricity, water & internet (composite)', '20%']]

},
{
  name: 'Governance Efficiency and Integrity',
  weight: '14.3%',
  indicators: [
  ['Government Effectiveness', '25%'],
  ['Corruption Perceptions Index', '25%'],
  ['Publicized laws and government data', '25%'],
  ['E-Government Development Index', '25%']]

},
{
  name: 'Social Cohesion',
  weight: '14.3%',
  indicators: [
  ['Population covered by at least one social protection benefit', '33.3%'],
  ['Neighbors care about you and your wellbeing', '33.3%'],
  ['People do not resort to violence to redress personal grievances', '33.3%']]

}];


// ---- small presentational helpers ----
// Two-column split: heading (kicker + title) in a left column beside the prose,
// collapsing to stacked (heading on top) on narrow viewports. Layout + responsive
// behaviour live in the `.meth-section` CSS class in the host HTML.
function MethSection({ kicker, title, children, id }) {
  return (
    <section id={id} className="meth-section">
      <div className="meth-head">
        {kicker ?
        <div style={{ letterSpacing: '0.14em', textTransform: 'uppercase', color: PALETTE.lightMagenta, fontWeight: 700, fontSize: 12, marginBottom: 10 }}>{kicker}</div> :
        null}
        <h2 style={{ fontFamily: 'Poppins, sans-serif', fontWeight: 500, fontSize: 25, lineHeight: 1.18, color: PALETTE.darkGrey, margin: 0, letterSpacing: '-0.01em', textWrap: 'balance' }}>{title}</h2>
      </div>
      <div className="meth-body">{children}</div>
    </section>);

}

const methP = { fontSize: 15, lineHeight: 1.62, color: PALETTE.midGrey, margin: '0 0 14px', textAlign: 'justify', hyphens: 'auto' };
const methStrong = { color: PALETTE.darkGrey, fontWeight: 600 };

// Reassemble a localized prose string that carries inline emphasis: `str`
// contains {1},{2}… tokens and `nodes` maps each token to the JSX (e.g. a
// <strong>) to splice in at that position, so translators can move the
// emphasized phrase wherever grammar requires.
function methRich(str, nodes) {
  const out = [];
  const re = /\{(\w+)\}/g;
  let last = 0, m, i = 0;
  while ((m = re.exec(str))) {
    if (m.index > last) out.push(str.slice(last, m.index));
    out.push(<React.Fragment key={i++}>{nodes[m[1]]}</React.Fragment>);
    last = m.index + m[0].length;
  }
  if (last < str.length) out.push(str.slice(last));
  return out;
}
const methEm = (key) => <strong style={methStrong}>{tr(key)}</strong>;

// Smooth in-page jump to a section, clearing the sticky header offset.
function methScrollTo(id) {
  // Reuse the app's scroll handler: when embedded it posts aei:scrollto so the
  // HOST scrolls (the iframe itself doesn't scroll); standalone it scrolls here.
  // Plain window.scrollTo did nothing inside the iframe.
  window.dispatchEvent(new CustomEvent('aei-tab', { detail: { anchor: id } }));
}

// Section directory (id, kicker, title, one-line summary) — drives the TOC.
const METH_TOC = [
['meth-foundation', 'foundation'],
['meth-step1', 'step1'],
['meth-step2', 'step2'],
['meth-step3', 'step3'],
['meth-step4', 'step4'],
['meth-structure', 'structure'],
['meth-roadmap', 'roadmap']];

// A clean min–max fraction formula rendered with flexbox
function Fraction({ num, den }) {
  return (
    <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', verticalAlign: 'middle', margin: '0 6px' }}>
      <span style={{ padding: '0 6px 3px' }}>{num}</span>
      <span style={{ borderTop: '1.5px solid ' + PALETTE.midGrey, padding: '3px 6px 0', width: '100%', textAlign: 'center' }}>{den}</span>
    </span>);

}

function FormulaCard({ label, children }) {
  return (
    <div style={{ background: '#FBFBFD', border: '1px solid #E7E8EC', borderRadius: 10, padding: '18px 22px', margin: '0 0 14px' }}>
      <div style={{ fontSize: 12, fontWeight: 600, color: PALETTE.lightMagenta, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', fontSize: 18, color: PALETTE.darkGrey, fontStyle: 'italic', rowGap: 6 }}>
        {children}
      </div>
    </div>);

}

function Callout({ children }) {
  return (
    <div style={{ borderLeft: '3px solid ' + PALETTE.lightMoss, background: '#F4F9F8', padding: '16px 20px', borderRadius: '0 8px 8px 0', margin: '4px 0 14px' }}>
      <p style={{ ...methP, margin: 0 }}>{children}</p>
    </div>);

}

function WeightsTable({ feedback, onFeedback, pillars, onPillarInfo }) {
  const showFb = !!(feedback && onFeedback);
  const canInfo = !!(pillars && onPillarInfo);
  // Below ~600px the 4-column table is cramped, so swap it for a stacked card
  // per pillar (indicator name + source · year + weight) instead of x-scrolling.
  const wrapRef = React.useRef(null);
  const [narrow, setNarrow] = React.useState(false);
  React.useEffect(() => {
    const el = wrapRef.current;
    if (!el || typeof ResizeObserver === 'undefined') return;
    const ro = new ResizeObserver(() => setNarrow(el.offsetWidth < 600));
    ro.observe(el); setNarrow(el.offsetWidth < 600);
    return () => ro.disconnect();
  }, []);
  const infoBtn = (pi, name) => (canInfo && pillars[pi] ?
    <button onClick={() => onPillarInfo(pillars[pi])} aria-label={tr('methodology.about_pillar', { name })} title={tr('methodology.about_pillar', { name })}
      style={{ flexShrink: 0, marginLeft: 8, width: 19, height: 19, borderRadius: '50%', border: `1px solid ${PALETTE.lightMagenta}`, cursor: 'pointer', fontFamily: 'Poppins, sans-serif', fontStyle: 'italic', fontWeight: 700, fontSize: 11, lineHeight: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: '#fff', color: PALETTE.darkMagenta, verticalAlign: 'middle' }}>i</button> : null);
  return (
    <div ref={wrapRef} style={{ background: '#fff', border: '1px solid #E7E8EC', borderRadius: 12, overflow: 'hidden', boxShadow: '0 1px 2px rgba(55,57,83,0.05), 0 4px 16px rgba(55,57,83,0.05)', maxWidth: CONTENT_W }}>
      {showFb ?
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 12, padding: '12px 18px 12px 22px', borderBottom: '1px solid #ECECF1', background: '#FAFAFB' }}>
        <span style={{ fontSize: 13, color: PALETTE.lightGrey, marginRight: 'auto' }}>{tr('methodology.weights_feedback_prompt')}</span>
        <FeedbackButton variant="pill" label={tr('common.provide_feedback')}
        onClick={() => onFeedback({ scope: 'view', label: 'Pillars, indicators & weights', sub: 'The indicator set, sources and weighting in the published index', category: 'Indicators & data sources' })} />
      </div> :
      null}
      {narrow ?
      <div style={{ padding: '10px 14px 14px' }}>
        {METH_PILLARS.map((p, pi) =>
          <div key={pi} style={{ border: '1px solid #ECECF1', borderRadius: 10, padding: '12px 14px', marginTop: pi ? 10 : 0, background: '#fff' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10, paddingBottom: 8, borderBottom: '1px solid #F4F4F7' }}>
              <span style={{ fontWeight: 600, color: PALETTE.darkGrey, lineHeight: 1.3 }}>
                <span style={{ color: PALETTE.lightMagenta, marginRight: 6, fontVariantNumeric: 'tabular-nums' }}>{tr('common.pillar')} {pi + 1}</span>{p.name}{infoBtn(pi, p.name)}
              </span>
              <span style={{ color: PALETTE.darkMagenta, fontWeight: 700, fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>{p.weight}</span>
            </div>
            {p.indicators.map((ind, ii) => {
              const meta = metricMeta(ind[0]);
              return (
                <div key={ii} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '9px 0', borderTop: ii ? '1px solid #F7F7F9' : 'none' }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, color: PALETTE.midGrey, lineHeight: 1.35 }}>{ind[0]}</div>
                    <div style={{ fontSize: 12, color: PALETTE.lightGrey, marginTop: 3, lineHeight: 1.4 }}>
                      {meta ?
                      <a href={meta.link} target="_blank" rel="noopener" title={meta.source} style={{ color: PALETTE.darkMagenta, textDecoration: 'none', fontWeight: 500, wordBreak: 'break-word' }}>{sourceShort(meta.source)}<span style={{ fontSize: '0.82em', marginLeft: 2 }}>↗</span></a> :
                      <span>—</span>}
                      {meta ? <span> · {yearShort(meta.year)}</span> : null}
                    </div>
                  </div>
                  <span style={{ fontSize: 13, color: PALETTE.lightGrey, fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>{ind[1]}</span>
                </div>);
            })}
          </div>
        )}
      </div> :
      <div style={{ overflowX: 'auto' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14, tableLayout: 'fixed' }}>
        <colgroup>
          <col style={{ width: '36%' }} />
          <col style={{ width: '34%' }} />
          <col style={{ width: '13%' }} />
          <col style={{ width: '17%' }} />
        </colgroup>
        <thead>
          <tr>
            <th style={{ textAlign: 'left', padding: '14px 22px', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', color: PALETTE.lightGrey, fontWeight: 600, borderBottom: '1px solid #E4E5EA' }}>{tr('methodology.col_pillar_indicator')}</th>
            <th style={{ textAlign: 'left', padding: '14px 16px', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', color: PALETTE.lightGrey, fontWeight: 600, borderBottom: '1px solid #E4E5EA' }}>{tr('common.source')}</th>
            <th style={{ textAlign: 'left', padding: '14px 12px', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', color: PALETTE.lightGrey, fontWeight: 600, borderBottom: '1px solid #E4E5EA' }}>{tr('common.year')}</th>
            <th style={{ textAlign: 'right', padding: '14px 16px', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', color: PALETTE.lightGrey, fontWeight: 600, borderBottom: '1px solid #E4E5EA' }}>{tr('common.weight')}</th>
          </tr>
        </thead>
        <tbody>
          {METH_PILLARS.map((p, pi) =>
            <React.Fragment key={pi}>
              <tr style={{ background: '#FAF6F8' }}>
                <td colSpan={3} style={{ padding: '13px 22px', fontWeight: 600, color: PALETTE.darkGrey, borderTop: pi ? '1px solid #ECECF1' : 'none' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                    <span><span style={{ color: PALETTE.lightMagenta, marginRight: 8, fontVariantNumeric: 'tabular-nums' }}>{tr('common.pillar')} {pi + 1}</span>{p.name}</span>
                    {canInfo && pillars[pi] ?
                    <button onClick={() => onPillarInfo(pillars[pi])} aria-label={tr('methodology.about_pillar', { name: p.name })} title={tr('methodology.about_pillar', { name: p.name })}
                    style={{ flexShrink: 0, width: 19, height: 19, borderRadius: '50%', border: `1px solid ${PALETTE.lightMagenta}`, cursor: 'pointer', fontFamily: 'Poppins, sans-serif', fontStyle: 'italic', fontWeight: 700, fontSize: 11, lineHeight: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: '#fff', color: PALETTE.darkMagenta, transition: 'background .15s, color .15s, border-color .15s' }}
                    onMouseEnter={(e) => {e.currentTarget.style.background = PALETTE.darkMagenta;e.currentTarget.style.borderColor = PALETTE.darkMagenta;e.currentTarget.style.color = '#fff';}}
                    onMouseLeave={(e) => {e.currentTarget.style.background = '#fff';e.currentTarget.style.borderColor = PALETTE.lightMagenta;e.currentTarget.style.color = PALETTE.darkMagenta;}}>i</button> :
                    null}
                  </span>
                </td>
                <td colSpan={1} style={{ padding: '13px 16px', textAlign: 'right', fontWeight: 600, color: PALETTE.darkMagenta, fontVariantNumeric: 'tabular-nums', borderTop: pi ? '1px solid #ECECF1' : 'none' }}>{p.weight}</td>
              </tr>
              {p.indicators.map((ind, ii) => {
                const meta = metricMeta(ind[0]);
                return (
                  <tr key={ii}>
                    <td style={{ padding: '10px 22px 10px 44px', color: PALETTE.midGrey, borderTop: '1px solid #F4F4F7', verticalAlign: 'top' }}>{ind[0]}</td>
                    <td style={{ padding: '10px 16px', borderTop: '1px solid #F4F4F7', verticalAlign: 'top', lineHeight: 1.4 }}>
                      {meta ?
                      <a href={meta.link} target="_blank" rel="noopener" title={meta.source} style={{ color: PALETTE.darkMagenta, textDecoration: 'none', fontWeight: 500, wordBreak: 'break-word' }}>
                          {sourceShort(meta.source)}<span style={{ fontSize: '0.82em', marginLeft: 2 }}>↗</span>
                        </a> :
                      <span style={{ color: PALETTE.lightGrey }}>—</span>}
                    </td>
                    <td style={{ padding: '10px 12px', color: PALETTE.lightGrey, borderTop: '1px solid #F4F4F7', verticalAlign: 'top', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap', fontSize: 13 }}>{meta ? yearShort(meta.year) : '—'}</td>
                    <td style={{ padding: '10px 16px', textAlign: 'right', color: PALETTE.lightGrey, fontVariantNumeric: 'tabular-nums', borderTop: '1px solid #F4F4F7', verticalAlign: 'top' }}>{ind[1]}</td>
                  </tr>);

              })}
            </React.Fragment>
            )}
        </tbody>
      </table>
      </div>}
      <div style={{ padding: '12px 22px', borderTop: '1px solid #ECECF1', background: '#FAFAFB', fontSize: 13, lineHeight: 1.5, color: PALETTE.lightGrey }}>{tr('methodology.weights_footer')}</div>
    </div>);

}

function Methodology({ feedback, onFeedback }) {
  const [openPillar, setOpenPillar] = useStateMeth(null);
  const pillars = window.AEI_DATA.pillars;
  // Section directory: stack each row into a card below ~520px.
  const tocRef = React.useRef(null);
  const [tocNarrow, setTocNarrow] = React.useState(false);
  React.useEffect(() => {
    const el = tocRef.current;
    if (!el || typeof ResizeObserver === 'undefined') return;
    const ro = new ResizeObserver(() => setTocNarrow(el.offsetWidth < 520));
    ro.observe(el); setTocNarrow(el.offsetWidth < 520);
    return () => ro.disconnect();
  }, []);
  return (
    <div>
      {/* Lede */}
      <IntroBlock eyebrow={tr('methodology.lede_eyebrow')}>
        {tr('methodology.lede_body')}
      </IntroBlock>

      {/* Section directory — click a row to jump to that section. Stacks into a
          card per row on mobile; the summary column wraps instead of truncating. */}
      <div ref={tocRef} style={{ margin: '24px 0 48px', maxWidth: CONTENT_W, background: '#fff', border: '1px solid #E7E8EC', borderRadius: 12, overflow: 'hidden', boxShadow: '0 1px 2px rgba(55,57,83,0.05), 0 4px 16px rgba(55,57,83,0.05)' }}>
        {METH_TOC.map((s, i) =>
        <button key={s[0]} onClick={() => methScrollTo(s[0])} style={{
          width: '100%', textAlign: 'left', fontFamily: 'inherit', cursor: 'pointer',
          background: '#fff', border: 'none', borderTop: i ? '1px solid #EEEFF2' : 'none',
          transition: 'background .12s',
          ...(tocNarrow
            ? { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 5, padding: '14px 18px' }
            : { display: 'grid', gridTemplateColumns: '104px minmax(150px, 0.9fr) 1.5fr 16px', alignItems: 'center', columnGap: 18, padding: '14px 20px' })
        }}
        onMouseEnter={(e) => e.currentTarget.style.background = '#FBF6F8'}
        onMouseLeave={(e) => e.currentTarget.style.background = '#fff'}>
            <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: PALETTE.lightMagenta, whiteSpace: 'nowrap' }}>{tr('methodology.' + s[1] + '.kicker')}</span>
            <span style={{ fontSize: 14, fontWeight: 600, color: PALETTE.darkGrey, ...(tocNarrow ? {} : { paddingLeft: 18, borderLeft: '1px solid #E4E5EA', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }) }}>{tr('methodology.' + s[1] + '.toc_title')}</span>
            <span style={{ fontSize: 13, color: PALETTE.midGrey, lineHeight: 1.4, ...(tocNarrow ? {} : { paddingLeft: 18, borderLeft: '1px solid #E4E5EA' }) }}>{tr('methodology.' + s[1] + '.summary')}</span>
            {tocNarrow ? null : <span style={{ color: PALETTE.lightMagenta, fontSize: 16, lineHeight: 1, textAlign: 'right' }}>›</span>}
          </button>
        )}
      </div>

      <MethSection kicker={tr('methodology.foundation.kicker')} title={tr('methodology.foundation.title')} id="meth-foundation">
        <p style={methP}>
          {methRich(tr('methodology.foundation.p1'), { 1: <strong style={methStrong}>Adaptation Economy Framework</strong> })}
        </p>

        <div style={{ margin: '20px 0 6px' }}>
          <div style={{ fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: PALETTE.lightGrey, fontWeight: 700, marginBottom: 12 }}>{tr('methodology.foundation.pillars_label')}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10 }}>
            {pillars.map((p) =>
            <button key={p.num} onClick={() => setOpenPillar(p)} style={{
              textAlign: 'left', fontFamily: 'inherit', cursor: 'pointer', background: '#fff',
              border: '1px solid #E7E8EC', borderRadius: 10, padding: '13px 14px',
              display: 'flex', alignItems: 'center', gap: 11, transition: 'border-color .15s, box-shadow .15s'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = PALETTE.lightMagenta;e.currentTarget.style.boxShadow = '0 2px 10px rgba(55,57,83,0.07)';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = '#E7E8EC';e.currentTarget.style.boxShadow = 'none';}}>
                <span style={{ width: 26, height: 26, flexShrink: 0, borderRadius: '50%', background: PALETTE.beige, color: PALETTE.darkMagenta, fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{p.num}</span>
                <span style={{ fontSize: 14, fontWeight: 500, color: PALETTE.darkGrey, lineHeight: 1.3 }}>{p.name}</span>
                <span style={{ marginLeft: 'auto', color: PALETTE.lightMagenta, fontSize: 16, lineHeight: 1, flexShrink: 0 }}>›</span>
              </button>
            )}
          </div>
        </div>
        <p style={methP}>
          {methRich(tr('methodology.foundation.p2'), { 1: methEm('methodology.foundation.p2_emph1'), 2: methEm('methodology.foundation.p2_emph2') })}
        </p>
      </MethSection>

      <MethSection kicker={tr('methodology.step1.kicker')} title={tr('methodology.step1.title')} id="meth-step1">
        <p style={methP}>
          {methRich(tr('methodology.step1.p1'), { 1: methEm('methodology.step1.p1_emph1') })}
        </p>

        <FormulaCard label={tr('methodology.formula.positive')}>
          <span style={{ fontStyle: 'normal' }}>{tr('common.score')}&nbsp;=&nbsp;</span>
          <span>9 ×</span>
          <Fraction num={tr('methodology.formula.raw_min')} den={tr('methodology.formula.max_min')} />
          <span>+ 1</span>
        </FormulaCard>

        <FormulaCard label={tr('methodology.formula.negative')}>
          <span style={{ fontStyle: 'normal' }}>{tr('common.score')}&nbsp;=&nbsp;</span>
          <span>−9 ×</span>
          <Fraction num={tr('methodology.formula.raw_min')} den={tr('methodology.formula.max_min')} />
          <span>+ 10</span>
        </FormulaCard>

        <Callout>
          {methRich(tr('methodology.step1.inflation'), { 1: methEm('methodology.step1.inflation_emph1') })}
        </Callout>
      </MethSection>

      <MethSection kicker={tr('methodology.step2.kicker')} title={tr('methodology.step2.title')} id="meth-step2">
        <p style={methP}>
          {methRich(tr('methodology.step2.p1'), { 1: methEm('methodology.step2.p1_emph1'), 2: methEm('methodology.step2.p1_emph2') })}
        </p>
        <p style={methP}>
          {methRich(tr('methodology.step2.p2'), { 1: methEm('methodology.step2.p2_emph1') })}
        </p>
      </MethSection>

      <MethSection kicker={tr('methodology.step3.kicker')} title={tr('methodology.step3.title')} id="meth-step3">
        <p style={methP}>
          {methRich(tr('methodology.step3.p1'), { 1: methEm('methodology.step3.p1_emph1') })}
        </p>
        <p style={methP}>
          {methRich(tr('methodology.step3.p2'), { 1: methEm('methodology.step3.p2_emph1') })}
        </p>
      </MethSection>

      <MethSection kicker={tr('methodology.step4.kicker')} title={tr('methodology.step4.title')} id="meth-step4">
        <p style={methP}>
          {methRich(tr('methodology.step4.p1'), { 1: methEm('methodology.step4.p1_emph1') })}
        </p>
      </MethSection>

      <MethSection kicker={tr('methodology.structure.kicker')} title={tr('methodology.structure.title')} id="meth-structure">
        <p style={methP}>
          {tr('methodology.structure.p1')}
        </p>
        <WeightsTable feedback={feedback} onFeedback={onFeedback} pillars={pillars} onPillarInfo={setOpenPillar} />
      </MethSection>

      <MethSection kicker={tr('methodology.roadmap.kicker')} title={tr('methodology.roadmap.title')} id="meth-roadmap">
        <p style={methP}>
          {methRich(tr('methodology.roadmap.p1'), { 1: methEm('methodology.roadmap.p1_emph1') })}
        </p>
        <p style={{ ...methP, margin: '0 0 12px' }}>
          {methRich(tr('methodology.roadmap.p2'), { 1: methEm('methodology.roadmap.p2_emph1') })}
        </p>
        <ul style={{ margin: '0 0 4px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
          <span>{methRich(tr('methodology.roadmap.item1'), { 1: methEm('methodology.roadmap.item1_emph1') })}</span>,
          <span>{methRich(tr('methodology.roadmap.item2'), { 1: methEm('methodology.roadmap.item2_emph1') })}</span>,
          <span>{methRich(tr('methodology.roadmap.item3'), { 1: methEm('methodology.roadmap.item3_emph1') })}</span>].
          map((node, i) =>
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 15, lineHeight: 1.62, color: PALETTE.midGrey, textWrap: 'pretty' }}>
              <span style={{ flexShrink: 0, width: 6, height: 6, marginTop: 9, borderRadius: '50%', background: PALETTE.lightMoss }}></span>
              <span style={{ flex: 1 }}>{node}</span>
            </li>
          )}
        </ul>
      </MethSection>

      <div style={{ marginTop: 8, paddingTop: 24, borderTop: '1px solid #EEEFF2' }}>
        <div style={{ fontFamily: 'Poppins, sans-serif', fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: PALETTE.midGrey, marginBottom: 14 }}>{tr('methodology.references_heading')}</div>
        <ol style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <li style={{ fontSize: 13, lineHeight: 1.6, color: PALETTE.midGrey, paddingLeft: 24, textIndent: -24 }}>
            <a href="https://knowledge4policy.ec.europa.eu/composite-indicators/2025-jrc-week-composite-indicators-scoreboards_en#streaming" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none' }}>
              JRC European Commission. (2025, December). <em>Step 3 — Data treatment</em> [Slide show]. JRC Week on Composite Indicators and Scoreboards. European Commission.<span style={{ fontSize: '0.82em', marginLeft: 3, color: PALETTE.darkMagenta }}>↗</span>
            </a>
          </li>
          <li style={{ fontSize: 13, lineHeight: 1.6, color: PALETTE.midGrey, paddingLeft: 24, textIndent: -24 }}>
            <a href="https://doi.org/10.1787/9789264043466-en" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none' }}>
              OECD/European Union/EC-JRC. (2008). <em>Handbook on Constructing Composite Indicators: Methodology and User Guide.</em> OECD Publishing.<span style={{ fontSize: '0.82em', marginLeft: 3, color: PALETTE.darkMagenta }}>↗</span>
            </a>
          </li>
        </ol>
      </div>

      <PillarPanel pillar={openPillar} onClose={() => setOpenPillar(null)} feedback={feedback} onFeedback={onFeedback} />
    </div>);

}

window.Methodology = Methodology;