// CBI / RBI dedicated-page extras: tools strip, scoped FAQ, final CTA.
// Used at the bottom of CitizenshipPage and ResidencyPage per Nastya's spec.

// ─── Tools strip per category ────────────────────────────────────────────
function CategoryToolsStrip({ lang, kind, openAI, openCallback, setRoute }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  const isCBI = kind === 'cbi';
  return (
    <section className="section" style={{ paddingTop: 56, paddingBottom: 24 }}>
      <div className="container-wide">
        <div className="eyebrow" style={{ marginBottom: 14 }}>
          – {t('Инструменты', 'Tools')}
        </div>
        <h2 className="display h-2" style={{ margin: 0, maxWidth: 720 }}>
          {isCBI
            ? (lang === 'ru' ? <>Узнайте, какая <em>программа</em> подходит вам</> : <>Find out which <em>program</em> fits you</>)
            : (lang === 'ru' ? <>Какая <em>страна</em> подходит вам?</> : <>Which <em>country</em> fits you?</>)}
        </h2>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))', gap: 20, marginTop: 26,
        }}>
          {[
            {
              icon: '◐',
              title: t('Калькулятор', 'Calculator'),
              desc: isCBI
                ? t('Посчитайте полную стоимость на вашу семью', 'Calculate the full cost for your family')
                : t('Посчитайте расходы на семью', 'Calculate the family costs'),
              cta: t('Открыть', 'Open'),
              onClick: () => setRoute && setRoute({ name: 'home', scrollTo: 'tools' }),
            },
            {
              icon: '◇',
              title: t('AI-консультант', 'AI Advisor'),
              desc: isCBI
                ? t('Расспросите его про любую из 9 программ', 'Ask it about any of the 9 programs')
                : t('Расспросите его про любую из 11 программ', 'Ask it about any of the 11 programs'),
              cta: t('Спросить', 'Ask'),
              onClick: () => openAI && openAI(),
            },
            {
              icon: '≡',
              title: t('Сравнение программ', 'Compare programs'),
              desc: isCBI
                ? t('Сравните программы по стоимости, силе паспорта и срокам оформления', 'Compare programs by cost, passport strength and processing time')
                : t('Сравните ВНЖ по стоимости, налогам и срокам оформления', 'Compare residencies by cost, tax and processing time'),
              cta: t('Сравнить', 'Compare'),
              onClick: () => setRoute && setRoute({ name: 'compare', kind: isCBI ? 'cbi' : 'rbi' }),
            },
          ].map((c, i) => (
            <button key={i} onClick={c.onClick} className="lift card-surface"
              style={{
                textAlign: 'left', padding: 22,
                display: 'flex', flexDirection: 'column', gap: 12,
                minHeight: 180, cursor: 'pointer',
              }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12,
                background: 'var(--bg)', display: 'grid', placeItems: 'center',
                fontFamily: 'var(--f-display)', fontSize: 22, color: 'var(--accent)',
              }}>{c.icon}</div>
              <div style={{ fontWeight: 500, fontSize: 18, minHeight: 24 }}>{c.title}</div>
              <div style={{ color: 'var(--fg-muted)', fontSize: 13, lineHeight: 1.45, minHeight: 38 }}>{c.desc}</div>
              <div style={{ flex: 1 }} />
              <div style={{ color: 'var(--accent)', fontSize: 13 }}>{c.cta} →</div>
            </button>
          ))}
        </div>
        {openCallback && (
          <div style={{ marginTop: 16, textAlign: 'right' }}>
            <button onClick={openCallback} className="btn btn-ghost btn-sm">
              {t('Или сразу запишитесь на консультацию →', 'Or book a consultation right away →')}
            </button>
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Category-scoped FAQ ──────────────────────────────────────────────────
function CategoryFaqSection({ lang, kind }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  const [openIdx, setOpenIdx] = React.useState(0);
  const isCBI = kind === 'cbi';

  // Nastya brief – ECCIRA changes, visa-free volatility, mandatory residency,
  // dual citizenship retention, hereditary transfer.
  const CBI_FAQ = lang === 'ru' ? [
    {
      q: 'Что такое ECCIRA и как новые правила влияют на Карибы?',
      a: 'ECCIRA — Eastern Caribbean Citizenship by Investment Regulatory Authority, новый единый регулятор для 5 карибских программ (Гренада, Сент-Китс, Антигуа, Доминика, Сент-Люсия). Он вводит новые правила проверки заявителей. Часть из них уже вступили в силу: более строгая проверка заявителей, обязательное интервью для основного заявителя, выровненные минимальные взносы. Также Сент-Китс ввёл обязательную сдачу биометрии. В будущем появится общая база проверок заявителей. Эти изменения влияют на сроки и стоимость.',
    },
    {
      q: 'Может ли список стран с безвизовым доступом поменяться после получения паспорта?',
      a: 'Да, как и любой другой паспорт, паспорта, полученные через инвестиции, не застрахованы от новых норм, которые принимают другие страны в отношении своих границ. Мы следим за актуальными правилами и сообщаем о них до подачи.',
    },
    {
      q: 'Нужно ли жить в стране после получения паспорта?',
      a: 'Для поддержания статуса гражданина жить в стране не нужно. Пока единственное исключение — Антигуа: нужно провести в стране 5 дней за первые 5 лет. Вероятно, аналогичные правила в ближайшие годы появятся и у других Карибских стран.',
    },
    {
      q: 'Сохраняется ли первое гражданство после получения паспорта за инвестиции?',
      a: 'Чаще всего да. Сами страны, дающие гражданство за инвестиции, разрешают иметь двойное гражданство. Ограничения могут быть связаны со страной, паспорт которой у вас уже есть.',
    },
    {
      q: 'Можно ли передать гражданство детям?',
      a: 'Да, во всех программах паспорт наследуется. Дети, родившиеся после получения, автоматически становятся гражданами. Уже родившихся детей можно включить в вашу заявку — условия по возрасту зависят от программы.',
    },
    {
      q: 'Какие документы нужны?',
      a: 'Базово: загранпаспорт, свидетельство о рождении, справка о несудимости, выписки за последние 12 месяцев и подтверждение происхождения средств. Для семьи — свидетельства о браке и о рождении детей. Легализацию и перевод под нужную программу берём на себя.',
    },
  ] : [
    {
      q: 'What is ECCIRA and how do the new rules affect the Caribbean?',
      a: 'ECCIRA – Eastern Caribbean Citizenship by Investment Regulatory Authority, the unified regulator for the 5 Caribbean programs (Grenada, St Kitts, Antigua, Dominica, St Lucia). Some rules already in force: higher DD standards, mandatory interviews for main applicants, aligned minimum contributions. More changes coming (shared DD database, common sanctions check). Already affects price and timing – we map it to your case on the call.',
    },
    {
      q: 'Does visa-free access change after issuance?',
      a: 'Yes, treaties are volatile. In the past 3 years Schengen introduced ETIAS, UK tightened entry from several Caribbean passports, Canada revised its list. We track the active visa-free list and flag trends before filing.',
    },
    {
      q: 'Do I have to live in the country after the passport?',
      a: 'For CBI programs – no, physical residency is not required. Exception: Antigua requires 5 days of presence over 5 years. The rest of the Caribbean – zero. Türkiye also has no presence requirement. São Tomé, Vanuatu, Nauru – no obligation. This is the key difference vs RBI.',
    },
    {
      q: 'Can I keep my first citizenship?',
      a: 'In most programs – yes. Dual citizenship is allowed in all Caribbean CBIs, in Türkiye, São Tomé, Vanuatu, Nauru. We check the source-passport side individually for every client.',
    },
    {
      q: 'Can citizenship be passed to children?',
      a: 'Yes, all CBI programs allow hereditary transfer. Kids born after issuance receive citizenship automatically. Existing kids can be added to the main application (age and dependency limits vary by program).',
    },
    {
      q: 'What documents do I need for CBI?',
      a: 'Baseline: passport, birth certificate, police-clearance certificate, 12-month bank statements, source of funds. For family: marriage and kids birth certificates. All legalised and translated by us.',
    },
  ];

  const RBI_FAQ = lang === 'ru' ? [
    {
      q: 'Чем отличается ВНЖ от ПМЖ?',
      a: 'ВНЖ – временный статус (обычно 2–5 лет, продлевается). ПМЖ – постоянный, без необходимости продления. Большинство европейских программ дают сначала ВНЖ, через 5 лет – ПМЖ, через 10 лет – гражданство. Кипр уникален – даёт ПМЖ сразу.',
    },
    {
      q: 'Сколько нужно жить в стране для поддержания статуса?',
      a: 'Зависит от программы. Португалия Golden Visa – 7 дней в год. Греция, Кипр – нет требования. Испания DNV – 183 дня в год (для налогового резидентства). США EB-5 – фактически больше половины года. Перед подачей рисуем календарь физ.присутствия.',
    },
    {
      q: 'Можно ли работать в стране по ВНЖ?',
      a: 'По большинству RBI – да. Португалия и Греция Golden Visa дают полное право работать и вести бизнес. Кипр и Испания – тоже. EB-5 даёт Green Card с правом работы. Digital Nomad визы (Испания) ограничены работой на иностранных работодателей.',
    },
    {
      q: 'Когда можно претендовать на гражданство?',
      a: 'Португалия – 5 лет, Греция – 7, Испания – 10, Кипр – 7 (ПМЖ за 7 лет, гражданство ещё позже). США EB-5 – 5 лет после Green Card. Уругвай – 3 года, один из самых быстрых путей. Бразилия – 4 года.',
    },
    {
      q: 'Включена ли семья?',
      a: 'Во всех программах – да. Супруг(а), дети до 18 (часто до 26-30 если на иждивении и учатся), часто родители 55+. По Бразилии – вообще без возрастных ограничений на детей.',
    },
    {
      q: 'Что с налогами при получении ВНЖ?',
      a: 'Налоговое резидентство – отдельная история от иммиграционного статуса. Получение ВНЖ не делает вас автоматически налоговым резидентом. Триггер – обычно 183 дня присутствия в году. Перед переездом мы рисуем налоговую карту: NHR 2.0 (Португалия), Beckham (Испания), Non-dom (Кипр), Territorial (Коста-Рика).',
    },
  ] : [
    {
      q: 'Residency vs PR – what is the difference?',
      a: 'Residency is a temporary status (2–5 years, renewable). PR is permanent, no renewals needed. Most European programs start with residency, give PR after 5 years, citizenship after 10. Cyprus is unique – PR immediately.',
    },
    {
      q: 'How much time do I need to spend to maintain status?',
      a: 'Depends on the program. Portugal Golden Visa – 7 days/year. Greece, Cyprus – no requirement. Spain DNV – 183 days/year (for tax residency). US EB-5 – effectively more than half a year. We map your physical-presence calendar before filing.',
    },
    {
      q: 'Can I work in-country on residency?',
      a: 'Most RBI – yes. Portugal and Greece Golden Visa give full work + business rights. Cyprus and Spain too. EB-5 grants a Green Card with work rights. Digital Nomad visas (Spain) are restricted to foreign employers.',
    },
    {
      q: 'When can I apply for citizenship?',
      a: 'Portugal – 5 years, Greece – 7, Spain – 10, Cyprus – 7+ (PR in 7, citizenship later). US EB-5 – 5 years after Green Card. Uruguay – 3 years, one of the fastest. Brazil – 4 years.',
    },
    {
      q: 'Is family included?',
      a: 'Every program – yes. Spouse, kids under 18 (often under 26-30 if dependent and studying), often parents 55+. Brazil has no age caps on kids.',
    },
    {
      q: 'What about tax once I hold residency?',
      a: 'Tax residency is a separate story from immigration status. Holding residency does not make you a tax resident automatically. Trigger is usually 183 days of physical presence. Before any move we draw a tax map: NHR 2.0 (Portugal), Beckham (Spain), Non-dom (Cyprus), Territorial (Costa Rica).',
    },
  ];

  const items = isCBI ? CBI_FAQ : RBI_FAQ;

  return (
    <section className="section" style={{ paddingTop: 56 }}>
      <div className="container-wide">
        <div className="eyebrow" style={{ marginBottom: 14 }}>
          {isCBI ? t('– Что важно знать про CBI в 2026', '– What you need to know about CBI in 2026')
                 : t('– Что важно знать про резидентство в 2026', '– What you need to know about residency in 2026')}
        </div>
        <h2 className="display h-2" style={{ margin: '0 0 32px' }}>
          {isCBI
            ? (lang === 'ru' ? <>CBI в <em>2026</em></> : <>CBI in <em>2026</em></>)
            : (lang === 'ru' ? <>Резидентство в <em>2026</em></> : <>Residency in <em>2026</em></>)}
        </h2>

        <div style={{ borderTop: '1px solid var(--border)' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--border)' }}>
              <button
                onClick={() => setOpenIdx(openIdx === i ? -1 : i)}
                style={{
                  width: '100%', textAlign: 'left', padding: '20px 0',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  color: 'var(--fg)',
                }}>
                <span style={{ fontSize: 16, fontWeight: 500 }}>{it.q}</span>
                <span style={{
                  width: 26, height: 26, borderRadius: 999, border: '1px solid var(--border-strong)',
                  display: 'grid', placeItems: 'center', color: 'var(--accent)',
                  transition: 'transform .3s var(--ease-out)',
                  transform: openIdx === i ? 'rotate(45deg)' : 'rotate(0)',
                  flexShrink: 0, fontSize: 14,
                }}>+</span>
              </button>
              <div style={{
                maxHeight: openIdx === i ? 300 : 0, overflow: 'hidden',
                transition: 'max-height .4s var(--ease-out)',
              }}>
                <div style={{ paddingBottom: 20, color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.6, maxWidth: 760 }}>
                  {it.a}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Final CTA per category ───────────────────────────────────────────────
function CategoryFinalCTA({ lang, kind, openCallback }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  const isCBI = kind === 'cbi';
  return (
    <section style={{
      background: '#191C1F', color: '#FFFFFF',
      padding: '72px 0',
      borderTop: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div className="container-wide" style={{
        display: 'grid', gridTemplateColumns: '1.4fr auto',
        gap: 32, alignItems: 'center',
      }}>
        <div>
          <div className="mono" style={{
            fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.6)', marginBottom: 14,
          }}>– {isCBI ? t('Готовы выбрать паспорт?', 'Ready to pick your passport?')
                      : t('Готовы выбрать страну?',  'Ready to pick your country?')}</div>
          <h3 className="display" style={{
            margin: 0, fontSize: 'clamp(28px, 3vw, 44px)', lineHeight: 1.05,
            letterSpacing: '-0.03em', fontWeight: 800, color: '#FFFFFF',
            maxWidth: 760, textTransform: 'uppercase',
          }}>
            {isCBI
              ? (lang === 'ru'
                  ? <>Не уверены, какой <em style={{ color: 'rgba(255,232,192,0.78)', fontStyle: 'normal' }}>паспорт</em> ваш?</>
                  : <>Not sure which <em style={{ color: 'rgba(255,232,192,0.78)', fontStyle: 'normal' }}>passport</em> is yours?</>)
              : (lang === 'ru'
                  ? <>Обсудим, какая <em style={{ color: 'rgba(255,232,192,0.78)', fontStyle: 'normal' }}>страна</em> подходит вашей семье</>
                  : <>Let's pick the <em style={{ color: 'rgba(255,232,192,0.78)', fontStyle: 'normal' }}>country</em> that fits your family</>)}
          </h3>
          <p style={{ margin: '14px 0 0', color: 'rgba(255,255,255,0.74)', fontSize: 15, lineHeight: 1.55, maxWidth: 560 }}>
            {isCBI
              ? t('30 минут с лицензированным агентом. Соберём короткий список под безвиз, бюджет и срок – с честными оговорками.',
                  '30 minutes with a licensed agent. We will build a shortlist for visa-free, budget and timeline – with honest caveats.')
              : t('30 минут со специалистом Migronis. Обсудим ваш кейс и ответим на вопросы по конкретным странам.',
                  '30 minutes with a Migronis specialist. We will go through your case and answer questions about specific countries.')}
          </p>
        </div>
        <button onClick={openCallback}
          style={{
            height: 56, padding: '0 28px',
            background: '#FFFFFF', color: '#191C1F', border: '1px solid #FFFFFF',
            fontSize: 13, fontWeight: 600, letterSpacing: '0.04em',
            textTransform: 'uppercase', fontFamily: 'var(--f-sans)',
            cursor: 'pointer', whiteSpace: 'nowrap',
          }}>
          {t('Бесплатная консультация →', 'Free consultation →')}
        </button>
      </div>
    </section>
  );
}

// ─── Cities teaser (for /residency, points to /relocate) ──────────────────
function CitiesTeaser({ lang, setRoute }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  const CITIES = [
    { flag: '🇵🇹', city: t('Лиссабон',        'Lisbon'),         family4: t('≈ €4 000/мес', '≈ €4,000/mo') },
    { flag: '🇧🇷', city: t('Флорианополис',   'Florianópolis'),  family4: t('≈ $3 200/мес', '≈ $3,200/mo') },
    { flag: '🇪🇸', city: t('Барселона',       'Barcelona'),      family4: t('≈ €3 800/мес', '≈ €3,800/mo') },
    { flag: '🇨🇷', city: t('Сан-Хосе',        'San José'),       family4: t('≈ $2 600/мес', '≈ $2,600/mo') },
  ];
  return (
    <section className="section" style={{ paddingTop: 56 }}>
      <div className="container-wide">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 22 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>{t('– Куда переезжают наши клиенты', '– Where our clients move')}</div>
            <h3 className="display" style={{ margin: 0, fontSize: 'clamp(24px, 2.6vw, 36px)', fontWeight: 700, letterSpacing: '-0.02em' }}>
              {lang === 'ru' ? <>Места для <em>жизни</em></> : <>Places to <em>live</em></>}
            </h3>
          </div>
          <button className="btn btn-line btn-sm" onClick={() => setRoute({ name: 'relocate' })}>
            {t('Все города', 'All cities')} →
          </button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 20 }}>
          {CITIES.map((c) => (
            <button key={c.city} onClick={() => setRoute({ name: 'relocate' })}
              className="lift" style={{
                textAlign: 'left', padding: 18,
                background: 'var(--bg-elev)', border: '1px solid var(--border)',
                cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 6,
              }}>
              <window.FlagIcon emoji={c.flag} size={20} />
              <div className="display" style={{ fontSize: 18, lineHeight: 1.2 }}>{c.city}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--fg-muted)' }}>
                {t('Семья 4', 'Family 4')}: <span style={{ color: 'var(--accent)' }}>{c.family4}</span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Schools teaser (for /residency) ──────────────────────────────────────
function SchoolsTeaser({ lang, setRoute }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  const SCHOOLS = [
    { city: t('Лиссабон',       'Lisbon'),       name: 'St. Julian\'s School',    type: 'IB',         tuition: '€18k/yr' },
    { city: t('Афины',          'Athens'),       name: 'American Community School', type: 'AP / IB',  tuition: '€14k/yr' },
    { city: t('Барселона',      'Barcelona'),    name: 'British School of Barcelona', type: 'British', tuition: '€12k/yr' },
  ];
  return (
    <section className="section" style={{ paddingTop: 24, paddingBottom: 24 }}>
      <div className="container-wide">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 22 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>{t('– Школы — часть решения про ВНЖ', '– Schools – part of the residency decision')}</div>
            <h3 className="display" style={{ margin: 0, fontSize: 'clamp(24px, 2.6vw, 36px)', fontWeight: 700, letterSpacing: '-0.02em' }}>
              {lang === 'ru' ? <>Где будут учиться <em>ваши дети</em>?</> : <>Where will <em>your kids</em> study?</>}
            </h3>
          </div>
          <button className="btn btn-line btn-sm" onClick={() => setRoute({ name: 'relocate' })}>
            {t('Подробнее на странице Переезд', 'See on the Relocation tab')} →
          </button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 20 }}>
          {SCHOOLS.map((s) => (
            <div key={s.name} style={{
              padding: 18, background: 'var(--bg-elev)', border: '1px solid var(--border)',
              display: 'flex', flexDirection: 'column', gap: 6,
            }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-dim)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                {s.city}
              </div>
              <div style={{ fontWeight: 500, fontSize: 16 }}>{s.name}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--fg-muted)' }}>
                <span>{s.type}</span>
                <span className="mono" style={{ color: 'var(--accent)' }}>{s.tuition}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.CategoryToolsStrip = CategoryToolsStrip;
window.CategoryFaqSection  = CategoryFaqSection;
window.CategoryFinalCTA    = CategoryFinalCTA;
window.CitiesTeaser        = CitiesTeaser;
window.SchoolsTeaser       = SchoolsTeaser;