// Programs section – Citizenship + Residency groups with multi-filter bar
function ProgramCard({ p, lang, setRoute, kind }) {
  const cur = p.currency === 'USD' ? '$' : '€';
  return (
    <button
      onClick={() => setRoute({ name: 'program', id: p.id })}
      className="lift card-surface"
      style={{
        textAlign: 'left', position: 'relative', overflow: 'hidden',
        padding: 22,
        display: 'flex', flexDirection: 'column', gap: 14,
        height: '100%', width: '100%', minHeight: 240, cursor: 'pointer',
      }}>
      {/* Accent bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 3,
        background: `linear-gradient(90deg, ${p.colorAccent || 'var(--accent)'}, transparent 80%)`,
      }} />

      {/* Top row – flag · "Новая" tag · CBI/RBI chip. The "Новая" tag is
          rendered to the LEFT of the kind chip so total height is constant
          across cards (some have it, some don't). */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, minHeight: 28 }}>
        <window.FlagIcon emoji={p.flag} size={22} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'nowrap' }}>
          {p.isNew && (
            <span className="mono" style={{
              fontSize: 10, height: 22, padding: '0 9px',
              display: 'inline-flex', alignItems: 'center', borderRadius: 999,
              background: 'color-mix(in oklch, var(--accent) 15%, transparent)',
              color: 'var(--accent)', border: '1px solid color-mix(in oklch, var(--accent) 35%, transparent)',
              letterSpacing: '0.04em', whiteSpace: 'nowrap',
            }}>
              {lang === 'ru' ? 'Новая' : 'New'}
            </span>
          )}
          <span className="chip mono" style={{ fontSize: 11, height: 24, whiteSpace: 'nowrap' }}>
            {kind === 'cbi' ? 'CBI · ' + (lang === 'ru' ? 'паспорт' : 'passport') : 'RBI · ' + (lang === 'ru' ? 'ВНЖ' : 'residency')}
          </span>
        </div>
      </div>

      <div>
        {/* Fixed-height title (2 lines) + tagline (2 lines) so cards align across rows */}
        <div className="display" style={{ fontSize: 24, lineHeight: 1.15, minHeight: 56, display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2, overflow: 'hidden' }}>
          {window.cn(p, lang)}
        </div>
        <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 6, lineHeight: 1.45, minHeight: 38, display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2, overflow: 'hidden' }}>
          {p.tagline[lang]}
        </div>
      </div>

      <div className="hr" style={{ marginTop: 'auto' }} />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
        <div>
          <div style={{ fontSize: 11, color: 'var(--fg-dim)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
            {lang === 'ru' ? 'от' : 'from'}
          </div>
          <div className="mono" style={{ color: 'var(--accent)', fontSize: 16, marginTop: 2 }}>
            {cur}{(p.minInvest / 1000).toFixed(0)}k
          </div>
        </div>
        <div>
          <div style={{ fontSize: 11, color: 'var(--fg-dim)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
            {lang === 'ru' ? 'срок' : 'term'}
          </div>
          <div className="mono" style={{ fontSize: 13, marginTop: 2, whiteSpace: 'nowrap' }}>{window.termLabel(p.term, lang)}</div>
        </div>
        <div>
          <div style={{ fontSize: 11, color: 'var(--fg-dim)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
            {lang === 'ru' ? 'безвиз' : 'visa-free'}
          </div>
          <div className="mono" style={{ fontSize: 13, marginTop: 2 }}>{p.visaFree}</div>
        </div>
      </div>
    </button>
  );
}

// Localised region labels (RU build shows Russian regions per Nastya).
const REGION_LABEL = {
  'Caribbean':      { ru: 'Карибы',            en: 'Caribbean' },
  'Europe':         { ru: 'Европа',            en: 'Europe' },
  'Asia / Pacific': { ru: 'Азия/ТА',           en: 'Asia/Pacific' },
  'Africa':         { ru: 'Африка',            en: 'Africa' },
  'USA':            { ru: 'США',               en: 'USA' },
  'Latin America':  { ru: 'Латинская Америка', en: 'Latin America' },
};
const regionLabel = (r, lang) => (REGION_LABEL[r] ? REGION_LABEL[r][lang] : r);

// Heuristic goal matching. NOTE: visa-free EU/UK use a visaFree threshold as a
// proxy (strong passport ≈ Schengen/UK access); exact per-program visa-free
// tags to be confirmed with Nastya.
function matchesGoal(p, goal) {
  if (goal === 'any') return true;
  const txt = (
    (p.tagline ? p.tagline.ru + ' ' + p.tagline.en : '') + ' ' +
    (p.highlights ? p.highlights.en.join(' ') : '') + ' ' +
    (p.route || '')
  ).toLowerCase();
  switch (goal) {
    case 'eu':       return p.visaFree >= 140;                       // EU/Schengen access
    case 'uk':       return p.visaFree >= 140;                       // UK access (proxy)
    case 'us':       return /e-2|eb-5|сша|\bus\b/i.test(txt);        // US visa/access route
    case 'realty':   return /real estate|недвижим|fund|фонд/i.test(txt);
    case 'invest':   return /real estate|недвижим|fund|фонд|investment|инвест/i.test(txt);
    case 'business': return /business|бизнес/i.test(txt);
    case 'nomad':    return /nomad|кочевник/i.test(txt);
    case 'jussoli':  return p.region === 'Latin America' || p.region === 'USA';
    case 'budget':   return p.minInvest <= 200000;
    default:         return true;
  }
}
function matchesTerm(p, t) {
  if (t === 'any') return true;
  const first = parseInt(p.term, 10);
  if (t === 'fast') return first <= 4;
  if (t === 'med')  return first >= 4 && first <= 9;
  return true;
}

function ProgramGroup({ id, kind, lang, programs, setRoute, label, sublabel, featured = false }) {
  const [region, setRegion] = React.useState('all');
  const [goal, setGoal] = React.useState('any');
  const [term, setTerm] = React.useState('any');
  const maxBudget = Math.max(...programs.map((p) => p.minInvest));
  const minBudget = Math.min(...programs.map((p) => p.minInvest));
  const [budget, setBudget] = React.useState(maxBudget);

  const regions = ['all', ...new Set(programs.map((p) => p.region))];
  let filtered = programs.filter((p) => {
    if (region !== 'all' && p.region !== region) return false;
    if (p.minInvest > budget) return false;
    if (!matchesGoal(p, goal)) return false;
    if (!matchesTerm(p, term)) return false;
    return true;
  });

  // Featured mode (home page) = all programs in a horizontal scroll rail.
  // Full filter UI lives on /citizenship and /residency dedicated pages.
  if (featured) filtered = programs;

  const cur = (n) => (n >= 1000000 ? `$${(n/1e6).toFixed(2)}M` : `$${(n/1000).toFixed(0)}k`);

  // Goal filters differ for CBI vs RBI per Nastya's spec.
  const GOALS = kind === 'cbi' ? [
    { v: 'any',    ru: 'Любая',                  en: 'Any' },
    { v: 'eu',     ru: 'Безвиз с ЕС',            en: 'EU visa-free' },
    { v: 'uk',     ru: 'Безвиз с Британией',     en: 'UK visa-free' },
    { v: 'us',     ru: 'Доступ в США',           en: 'US access' },
    { v: 'realty', ru: 'Инвестиции в недвижимость', en: 'Real estate' },
    { v: 'budget', ru: 'Минимальный бюджет',     en: 'Lowest budget' },
  ] : [
    { v: 'any',      ru: 'Любая',          en: 'Any' },
    { v: 'eu',       ru: 'Безвиз в ЕС',    en: 'EU visa-free' },
    { v: 'uk',       ru: 'Безвиз в Британию', en: 'UK visa-free' },
    { v: 'us',       ru: 'Безвиз в США',   en: 'US visa-free' },
    { v: 'invest',   ru: 'Инвестиции',     en: 'Investment' },
    { v: 'business', ru: 'Бизнес',         en: 'Business' },
    { v: 'nomad',    ru: 'Digital Nomad',  en: 'Digital Nomad' },
    { v: 'jussoli',  ru: 'Гражданство детям по рождению', en: 'Birthright citizenship' },
  ];
  const TERMS = [
    { v: 'any',  ru: 'Любой',   en: 'Any' },
    { v: 'fast', ru: '≤ 4 мес', en: '≤ 4 mo' },
    { v: 'med',  ru: '4–9 мес', en: '4–9 mo' },
  ];

  const filtersActive = region !== 'all' || goal !== 'any' || term !== 'any' || budget < maxBudget;

  return (
    <section id={id} className="section" style={{ paddingTop: 56, paddingBottom: 56 }}>
      <div className="container-wide">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 32 }}>
          <div style={{ maxWidth: 760 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>
              {kind === 'cbi'
                ? (lang === 'ru' ? '– Гражданство за инвестиции' : '– Citizenship by investment')
                : (lang === 'ru' ? '– Резидентство за инвестиции' : '– Residency by investment')}
            </div>
            <h2 className="display h-2" style={{ margin: 0 }}>{label}</h2>
            <p style={{ color: 'var(--fg-muted)', marginTop: 14, fontSize: 16, maxWidth: 540 }}>
              {sublabel}
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 }}>
            {featured ? (
              <button className="btn btn-primary btn-sm"
                onClick={() => setRoute({ name: kind === 'cbi' ? 'citizenship' : 'residency' })}>
                {lang === 'ru' ? `Все ${programs.length} программ` : `Browse all ${programs.length}`} →
              </button>
            ) : (
              <>
                <div className="chip mono" style={{ height: 32 }}>
                  <span style={{ color: 'var(--accent)' }}>●</span>
                  {filtered.length} / {programs.length} {lang === 'ru' ? 'программ' : 'programs'}
                </div>
                {filtersActive && (
                  <button className="btn btn-line btn-sm"
                    onClick={() => { setRegion('all'); setGoal('any'); setTerm('any'); setBudget(maxBudget); }}
                    style={{ height: 30, padding: '0 12px', fontSize: 12 }}>
                    ↻ {lang === 'ru' ? 'Сбросить фильтры' : 'Reset filters'}
                  </button>
                )}
              </>
            )}
          </div>
        </div>

        {/* Filter bar – only on full category page, not featured */}
        {!featured && (
        <div className="lift filter-bar" style={{
          padding: '18px 22px',
          background: 'var(--bg-elev)', border: '1px solid var(--border)',
          borderRadius: 'var(--r-lg)', marginBottom: 24,
          display: 'grid', gridTemplateColumns: '1.2fr 1.3fr 1fr 1.5fr', gap: 24, alignItems: 'center',
        }}>
          {/* Region */}
          <div>
            <div className="eyebrow" style={{ fontSize: 10, marginBottom: 8 }}>
              {lang === 'ru' ? 'Регион' : 'Region'}
            </div>
            <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
              {regions.map((r) => (
                <button key={r} onClick={() => setRegion(r)}
                  style={{
                    padding: '6px 12px', borderRadius: 999, fontSize: 12,
                    background: region === r ? 'var(--accent)' : 'transparent',
                    color: region === r ? '#FFF8E6' : 'var(--fg-muted)',
                    border: `1px solid ${region === r ? 'var(--accent)' : 'var(--border)'}`,
                    transition: 'all .15s',
                  }}>
                  {r === 'all' ? (lang === 'ru' ? 'Все' : 'All') : regionLabel(r, lang)}
                </button>
              ))}
            </div>
          </div>

          {/* Goal */}
          <div>
            <div className="eyebrow" style={{ fontSize: 10, marginBottom: 8 }}>
              {lang === 'ru' ? 'Цель' : 'Goal'}
            </div>
            <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
              {GOALS.map((g) => (
                <button key={g.v} onClick={() => setGoal(g.v)}
                  style={{
                    padding: '6px 12px', borderRadius: 999, fontSize: 12,
                    background: goal === g.v ? 'var(--accent)' : 'transparent',
                    color: goal === g.v ? '#FFF8E6' : 'var(--fg-muted)',
                    border: `1px solid ${goal === g.v ? 'var(--accent)' : 'var(--border)'}`,
                    transition: 'all .15s',
                  }}>
                  {g[lang]}
                </button>
              ))}
            </div>
          </div>

          {/* Term */}
          <div>
            <div className="eyebrow" style={{ fontSize: 10, marginBottom: 8 }}>
              {lang === 'ru' ? 'Срок оформления' : 'Processing time'}
            </div>
            <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
              {TERMS.map((t) => (
                <button key={t.v} onClick={() => setTerm(t.v)}
                  style={{
                    padding: '6px 12px', borderRadius: 999, fontSize: 12,
                    background: term === t.v ? 'var(--accent)' : 'transparent',
                    color: term === t.v ? '#FFF8E6' : 'var(--fg-muted)',
                    border: `1px solid ${term === t.v ? 'var(--accent)' : 'var(--border)'}`,
                    transition: 'all .15s',
                  }}>
                  {t[lang]}
                </button>
              ))}
            </div>
          </div>

          {/* Budget */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
              <span className="eyebrow" style={{ fontSize: 10 }}>
                {lang === 'ru' ? 'Бюджет до' : 'Budget up to'}
              </span>
              <span className="mono" style={{ fontSize: 13, color: 'var(--accent)' }}>{cur(budget)}</span>
            </div>
            <input type="range"
              min={minBudget} max={maxBudget} step="10000"
              value={budget} onChange={(e) => setBudget(+e.target.value)}
              style={{ width: '100%', accentColor: 'var(--accent)' }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--fg-dim)', fontFamily: 'var(--f-mono)', marginTop: 2 }}>
              <span>{cur(minBudget)}</span>
              <span>{cur(maxBudget)}</span>
            </div>
          </div>
        </div>
        )}

        {filtered.length === 0 ? (
          <div style={{ padding: 48, textAlign: 'center', color: 'var(--fg-muted)', background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)' }}>
            {lang === 'ru' ? 'Под ваши фильтры ничего не подходит. Попробуйте сбросить.' : 'Nothing matches your filters. Try resetting.'}
          </div>
        ) : featured ? (
          /* Horizontal scroll rail – home page only. Drag-to-scroll with grab cursor. */
          <window.DragScrollRail>
            {filtered.map((p) => (
              <div key={p.id} style={{ flex: '0 0 360px', scrollSnapAlign: 'start', display: 'flex' }}>
                <ProgramCard p={p} lang={lang} setRoute={setRoute} kind={kind} />
              </div>
            ))}
          </window.DragScrollRail>
        ) : (
          /* Full grid – dedicated category page */
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))',
            gap: 20,
          }}>
            {filtered.map((p) => (
              <ProgramCard key={p.id} p={p} lang={lang} setRoute={setRoute} kind={kind} />
            ))}
          </div>
        )}

        <div style={{ marginTop: 22, fontSize: 13, color: 'var(--fg-dim)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            {lang === 'ru'
              ? '* Указаны минимальные инвестиции и стандартные сроки.'
              : '* Minimum investments and standard timelines shown.'}
          </div>
          <button className="btn btn-line btn-sm" onClick={() => setRoute({ name: 'compare', kind })}>
            {lang === 'ru' ? 'Сравнить программы' : 'Compare programs'} →
          </button>
        </div>
      </div>
    </section>
  );
}

function ProgramsSections({ lang, setRoute, featured = false }) {
  return (
    <>
      <div data-accent="green">
        <ProgramGroup
          id="citizenship"
          kind="cbi"
          lang={lang}
          programs={window.MIGRONIS_DATA.citizenship}
          setRoute={setRoute}
          featured={featured}
          label={lang === 'ru' ? <>Второй <em>паспорт</em>. Девять юрисдикций</> : <>A second <em>passport</em>. Nine jurisdictions</>}
          sublabel={lang === 'ru'
            ? 'Гражданство через инвестиции для всей семьи. Срок — 3–12 месяцев, бюджет — от $90k.'
            : 'Citizenship-by-investment for the whole family. Timeline — 3–12 months, budget — from $90k.'}
        />
      </div>
      <div data-accent="teal">
        <ProgramGroup
          id="residency"
          kind="rbi"
          lang={lang}
          programs={window.MIGRONIS_DATA.residency}
          setRoute={setRoute}
          featured={featured}
          label={lang === 'ru' ? <>ВНЖ и ПМЖ через инвестиции. <em>Одиннадцать</em> программ</> : <>Residency & PR by investment. <em>Eleven</em> programs</>}
          sublabel={lang === 'ru'
            ? 'Право жить и работать в стране для всей семьи. Возможность получить гражданство в будущем.'
            : 'The right to live and work for the whole family. Path to citizenship down the road.'}
        />
      </div>
    </>
  );
}

function CitizenshipPage({ lang, setRoute, openAI, openCallback }) {
  return (
    <div style={{ paddingTop: 32 }} data-accent="green">
      <div className="container-wide" style={{ marginBottom: 8 }}>
        <window.BackButton lang={lang} />
      </div>
      <ProgramGroup
        id="citizenship"
        kind="cbi"
        lang={lang}
        programs={window.MIGRONIS_DATA.citizenship}
        setRoute={setRoute}
        featured={false}
        label={lang === 'ru' ? <><em>Гражданство</em> за инвестиции</> : <><em>Citizenship</em> by investment</>}
        sublabel={lang === 'ru'
          ? 'Гражданство через инвестиции для всей семьи. Срок — 3–12 месяцев, бюджет — от $90k.'
          : 'Citizenship-by-investment for the whole family. Timeline — 3–12 months, budget — from $90k.'}
      />
      <window.CategoryToolsStrip lang={lang} kind="cbi" openAI={openAI} openCallback={openCallback} setRoute={setRoute} />
      {openCallback && (
        <window.CTABanner lang={lang} openCallback={() => openCallback()}
          variant="light"
          kicker={lang === 'ru' ? 'Узнать больше' : 'Learn more'}
          title={lang === 'ru'
            ? <>Не уверены, <em>что выбрать</em>?</>
            : <>Not sure <em>what to choose</em>?</>}
          body={lang === 'ru'
            ? 'Специалист Migronis расскажет о вариантах, которые подойдут именно вашей семье. 30 минут. Бесплатно.'
            : 'A Migronis specialist will walk you through the options that fit your family. 30 minutes. Free.'} />
      )}
      <window.VideoStoriesSection lang={lang} setRoute={setRoute} filterKind="cbi" />
      <window.CategoryFaqSection lang={lang} kind="cbi" />
      {openCallback && <window.CategoryFinalCTA lang={lang} kind="cbi" openCallback={openCallback} />}
    </div>
  );
}

function ResidencyPage({ lang, setRoute, openAI, openCallback }) {
  return (
    <div style={{ paddingTop: 32 }} data-accent="teal">
      <div className="container-wide" style={{ marginBottom: 8 }}>
        <window.BackButton lang={lang} />
      </div>
      <ProgramGroup
        id="residency"
        kind="rbi"
        lang={lang}
        programs={window.MIGRONIS_DATA.residency}
        setRoute={setRoute}
        featured={false}
        label={lang === 'ru' ? <><em>Резидентство</em> за инвестиции</> : <><em>Residency</em> by investment</>}
        sublabel={lang === 'ru'
          ? 'Право жить и работать в стране для всей семьи. Возможность получить гражданство в будущем.'
          : 'The right to live and work for the whole family. Path to citizenship down the road.'}
      />
      <window.CategoryToolsStrip lang={lang} kind="rbi" openAI={openAI} openCallback={openCallback} setRoute={setRoute} />
      <window.CitiesTeaser lang={lang} setRoute={setRoute} />
      <window.SchoolsTeaser lang={lang} setRoute={setRoute} />
      <window.VideoStoriesSection lang={lang} setRoute={setRoute} filterKind="rbi" />
      <window.CategoryFaqSection lang={lang} kind="rbi" />
      {openCallback && <window.CategoryFinalCTA lang={lang} kind="rbi" openCallback={openCallback} />}
    </div>
  );
}

window.ProgramsSections = ProgramsSections;
window.CitizenshipPage = CitizenshipPage;
window.ResidencyPage = ResidencyPage;
window.regionLabel = regionLabel;