// "Куда переезжать" / Relocation screen.
// City content authored by Anastasia (final, replaces the research draft).
// Per Nastya: no "first 30 days" / "11 months" sections; schools listed by
// name only (no fabricated tuition); move away from a fixed city count.
function RelocatePage({ lang, setRoute, openCallback }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);

  const CITIES = [
    {
      flag: '🇵🇹', city: t('Лиссабон / Кашкайш', 'Lisbon / Cascais'),
      country: t('Португалия', 'Portugal'), program: 'portugal-golden',
      pitch: t('Океан, мягкая зима и один из самых безопасных городов Европы. Экспаты живут как в самом городе, так и в пригороде на побережье.',
               'Ocean, mild winters and one of the safest cities in Europe. Expats live both in the city and in the coastal suburbs.'),
      rent: t('€1 300–3 500/мес', '€1,300–3,500/mo'), school: t('€8–18 тыс./год', '€8–18k/yr'), family4: t('≈ €4 000/мес', '≈ €4,000/mo'),
      districts: [
        t('Авенидаш-Новаш · элитный район с инфраструктурой для семей', 'Avenidas Novas · upscale, family infrastructure'),
        t('Парк-Наций · современная застройка, у реки', 'Parque das Nações · modern, riverside'),
        t('Лапа / Эштрела · зелёный центр, опция подешевле', 'Lapa / Estrela · green centre, cheaper option'),
        t('Кампу-де-Орике · «деревня в городе», семейный', 'Campo de Ourique · "village in the city", family'),
        t('Оейраш / Каркавелуш / Эшторил · побережье, для семей', 'Oeiras / Carcavelos / Estoril · coast, families'),
      ],
      schools: ["St Julian's", 'PaRK', 'IPS Cascais'],
    },
    {
      flag: '🇵🇹', city: t('Порту', 'Porto'),
      country: t('Португалия', 'Portugal'), program: 'portugal-golden',
      pitch: t('Камернее и доступнее Лиссабона. Те же океан и безопасность, но тише.',
               'Cosier and cheaper than Lisbon. Same ocean and safety, but quieter.'),
      rent: t('≈ €1 100–2 800/мес', '≈ €1,100–2,800/mo'), school: t('уточняется', 'TBC'), family4: t('≈ €3 200/мес', '≈ €3,200/mo'),
      districts: [
        t('Фож-ду-Дору · премиум у океана, для семей', 'Foz do Douro · premium oceanfront, families'),
        t('Боавишта · деловой центр, международные школы', 'Boavista · business centre, international schools'),
        t('Матозиньюш · приморский, сёрф, демократичнее', 'Matosinhos · seaside, surf, more affordable'),
        t('Вила-Нова-ди-Гая · через реку, тихо и дешевле', 'Vila Nova de Gaia · across the river, quiet and cheaper'),
      ],
      schools: ['CLIP', 'Oporto British School'],
    },
    {
      flag: '🇪🇸', city: t('Барселона', 'Barcelona'),
      country: t('Испания', 'Spain'), program: 'spain',
      pitch: t('Море и горы, средиземноморский ритм и сильные международные школы.',
               'Sea and mountains, a Mediterranean rhythm and strong international schools.'),
      rent: t('€1 500–3 200/мес', '€1,500–3,200/mo'), school: t('€6–14 тыс./год', '€6–14k/yr'), family4: t('≈ €3 800/мес', '≈ €3,800/mo'),
      districts: [
        t('Эшампле · центральный и красивый, всё рядом', 'Eixample · central and handsome, everything nearby'),
        t('Зона-Альта (Саррия) · престижный, семейный', 'Zona Alta (Sarrià) · prestige, family'),
        t('Диагональ-Дель-Мар · новый, у моря', 'Diagonal Mar · new, by the sea'),
        t('Побленоу · бывший индустриальный, модный', 'Poblenou · ex-industrial, trendy'),
      ],
      schools: ['British School of Barcelona', 'American School of Barcelona', 'Aula Escola Europea'],
    },
    {
      flag: '🇬🇷', city: t('Афины / Глифада', 'Athens / Glyfada'),
      country: t('Греция', 'Greece'), program: 'greece',
      pitch: t('Тёплое море. Семьи селятся, в основном, на побережье.',
               'Warm sea. Families settle mostly along the coast.'),
      rent: t('€1 200–2 500/мес', '€1,200–2,500/mo'), school: t('€6–12 тыс./год', '€6–12k/yr'), family4: t('≈ €2 900/мес', '≈ €2,900/mo'),
      districts: [
        t('Вула · на побережье, семейный', 'Voula · coastal, family'),
        t('Палео-Фалиро · на побережье, семейный', 'Palaio Faliro · coastal, family'),
        t('Эллинико · новый, только достраивается', 'Elliniko · new, still being built'),
        t('Алимос · марина, спокойный', 'Alimos · marina, calm'),
      ],
      schools: ['American Community School', 'Campion School', "St Catherine's British"],
    },
    {
      flag: '🇧🇷', city: t('Флорианополис', 'Florianópolis'),
      country: t('Бразилия', 'Brazil'), program: 'brazil',
      pitch: t('Остров на юге Бразилии, столица штата Санта-Катарина — самого безопасного в стране. IT-сектор, океан, сёрф.',
               'An island in southern Brazil, capital of Santa Catarina — the safest state. IT sector, ocean, surf.'),
      rent: t('$1 400–2 900/мес', '$1,400–2,900/mo'), school: t('$4–10 тыс./год', '$4–10k/yr'), family4: t('≈ $3 200/мес', '≈ $3,200/mo'),
      districts: [
        t('Журере · семейный, у пляжей', 'Jurerê · family, by the beaches'),
        t('Журере-Интернасьонал · премиум, инфраструктура', 'Jurerê Internacional · premium, infrastructure'),
        t('Кампече · сёрф-комьюнити, доступнее', 'Campeche · surf community, more affordable'),
        t('Инглезеш · пляжный, инфраструктура', 'Ingleses · beachside, infrastructure'),
      ],
      schools: ['Colégio Aplicação UFSC', 'Escola Dinâmica', 'Colégio Vila Olímpia'],
    },
    {
      flag: '🇨🇾', city: t('Лимасол', 'Limassol'),
      country: t('Кипр', 'Cyprus'), program: 'cyprus',
      pitch: t('Большое русскоязычное комьюнити на берегу моря. Удобно работать на международные компании.',
               'A large international community by the sea. Convenient for working with global companies.'),
      rent: t('€1 800–2 900/мес', '€1,800–2,900/mo'), school: t('€8–15 тыс./год', '€8–15k/yr'), family4: t('≈ €3 600/мес', '≈ €3,600/mo'),
      districts: [
        t('Германасойя · топ у экспатов, у моря', 'Germasogeia · expat favourite, seaside'),
        t('Айос-Тихонас · люкс-сегмент, тихий', 'Agios Tychonas · luxury, quiet'),
        t('Меса-Гитония · для семей, дешевле и ближе к школам', 'Mesa Geitonia · families, cheaper and near schools'),
      ],
      schools: ['The Heritage', 'American Academy'],
    },
    {
      flag: '🇨🇷', city: t('Сан-Хосе / Эредия', 'San José / Heredia'),
      country: t('Коста-Рика', 'Costa Rica'), program: 'costa-rica',
      pitch: t('Тропики и философия «pura vida» — про спокойную, размеренную жизнь.',
               'Tropics and the "pura vida" philosophy — about a calm, unhurried life.'),
      rent: t('$1 000–2 300/мес', '$1,000–2,300/mo'), school: t('$5–11 тыс./год', '$5–11k/yr'), family4: t('≈ $2 600/мес', '≈ $2,600/mo'),
      districts: [
        t('Эскасу · главный экспатский район', 'Escazú · the main expat district'),
        t('Санта-Ана · молодые семьи, закрытые комьюнити', 'Santa Ana · young families, gated communities'),
        t('Курридабат · семейный, безопасный', 'Curridabat · family, safe'),
      ],
      schools: ['Country Day School', 'Lincoln School', 'British School of Costa Rica'],
    },
  ];

  const [openCity, setOpenCity] = React.useState(null);

  return (
    <div style={{ paddingTop: 32, paddingBottom: 80, animation: 'fade-up .4s var(--ease-out)' }} data-accent="ocean">
      <div className="container-wide" style={{ marginBottom: 8 }}>
        <window.BackButton lang={lang} />
      </div>

      {/* Hero */}
      <section className="section" style={{ paddingTop: 40 }}>
        <div className="container-wide">
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t('– Куда переезжают', '– Where clients move')}</div>
          <h1 className="display" style={{
            fontSize: 'clamp(36px, 5vw, 72px)', margin: 0, maxWidth: 920,
            fontWeight: 800, lineHeight: 1.0, letterSpacing: '-0.03em',
          }}>
            {lang === 'ru' ? <>Места для <em>жизни</em></> : <>Places to <em>live</em></>}
          </h1>
          <p style={{ color: 'var(--fg-muted)', fontSize: 17, marginTop: 22, maxWidth: 680, lineHeight: 1.55 }}>
            {t('В каких городах и конкретных районах живут экспаты? Сколько стоит жизнь на самом деле? А что со школами? У нас есть ответы.',
               'Which cities and exact districts do expats live in? What does life really cost? And what about schools? We have answers.')}
          </p>
        </div>
      </section>

      {/* Cities */}
      <section className="section" style={{ paddingTop: 24 }}>
        <div className="container-wide">
          <div className="eyebrow" style={{ marginBottom: 18 }}>{t('– Города, куда переезжают наши клиенты', '– Cities our clients move to')}</div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))', gap: 20,
            alignItems: 'start',
          }}>
            {CITIES.map((c) => {
              const expanded = openCity === c.city;
              return (
                <article key={c.city} className="lift card-surface" style={{
                  padding: 24, display: 'flex', flexDirection: 'column', gap: 14,
                  cursor: 'pointer',
                  borderColor: expanded ? 'var(--accent)' : 'var(--border)',
                  background: expanded ? 'var(--bg-elev-2)' : 'var(--bg-elev)',
                }}
                  onClick={() => setOpenCity(expanded ? null : c.city)}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <window.FlagIcon emoji={c.flag} size={24} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="display" style={{ fontSize: 20, lineHeight: 1.1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.city}</div>
                      <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 3 }}>{c.country}</div>
                    </div>
                    <span style={{
                      width: 28, height: 28, borderRadius: 999, flexShrink: 0,
                      border: '1px solid var(--border-strong)',
                      display: 'grid', placeItems: 'center', color: 'var(--accent)', fontSize: 14,
                      transition: 'transform .3s', transform: expanded ? 'rotate(45deg)' : 'rotate(0)',
                    }}>+</span>
                  </div>
                  <p style={{ margin: 0, color: 'var(--fg-muted)', fontSize: 13.5, lineHeight: 1.55, minHeight: 84 }}>
                    {c.pitch}
                  </p>
                  <div className="hr" />
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, fontSize: 12 }}>
                    <div>
                      <div className="eyebrow" style={{ fontSize: 9, marginBottom: 4 }}>{t('Аренда', 'Rent')}</div>
                      <div className="mono" style={{ fontSize: 11 }}>{c.rent}</div>
                    </div>
                    <div>
                      <div className="eyebrow" style={{ fontSize: 9, marginBottom: 4 }}>{t('Школа', 'School')}</div>
                      <div className="mono" style={{ fontSize: 11 }}>{c.school}</div>
                    </div>
                    <div>
                      <div className="eyebrow" style={{ fontSize: 9, marginBottom: 4 }}>{t('Семья 4', 'Family 4')}</div>
                      <div className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{c.family4}</div>
                    </div>
                  </div>

                  {/* Drilldown – districts + schools */}
                  {expanded && (
                    <div style={{ animation: 'fade-up .25s var(--ease-out)', display: 'flex', flexDirection: 'column', gap: 14, paddingTop: 4 }}>
                      <div>
                        <div className="eyebrow" style={{ fontSize: 10, marginBottom: 10 }}>{t('Районы', 'Districts')}</div>
                        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                          {c.districts.map((d, i) => (
                            <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 13, color: 'var(--fg)' }}>
                              <span style={{ flexShrink: 0, marginTop: 7, width: 4, height: 4, background: 'var(--accent)' }} />
                              <span>{d}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div>
                        <div className="eyebrow" style={{ fontSize: 10, marginBottom: 10 }}>{t('Школы', 'Schools')}</div>
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                          {c.schools.map((s, i) => (
                            <span key={i} className="chip" style={{ fontSize: 11, height: 26 }}>{s}</span>
                          ))}
                        </div>
                      </div>
                      <button onClick={(e) => { e.stopPropagation(); setRoute({ name: 'program', id: c.program }); }}
                        className="btn btn-line btn-sm" style={{ alignSelf: 'flex-start', marginTop: 4 }}>
                        {t('К программе', 'See the program')} →
                      </button>
                    </div>
                  )}

                  {!expanded && (
                    <div className="mono" style={{ marginTop: 4, fontSize: 11, color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                      {t('Подробнее: районы и школы', 'Open: districts and schools')} →
                    </div>
                  )}
                </article>
              );
            })}
          </div>
          <div style={{ marginTop: 14, fontSize: 12, color: 'var(--fg-dim)' }}>
            {t('* Семейный бюджет ориентировочный, на 4 человек. Финальные цифры зависят от района, школы и образа жизни.',
               '* Family budget is indicative, for 4 people. Final figures depend on district, school and lifestyle.')}
          </div>
        </div>
      </section>

      {/* Schools finder (kept). 360° panorama hidden for release per Nastya
          (11.06): non-priority; will return as a Google Street View walk
          ("человечек с гугл мэпс") in a chosen district after launch. */}
      <div data-accent="magenta">
        <window.SchoolsFinderSection lang={lang} />
      </div>

      {/* Final CTA */}
      <window.CTABanner lang={lang} openCallback={() => openCallback && openCallback()}
        variant="dark"
        kicker={lang === 'ru' ? 'Сценарий переезда' : 'Relocation plan'}
        title={lang === 'ru'
          ? <>Не знаете, что <em>выбрать</em>?</>
          : <>Not sure what to <em>choose</em>?</>}
        body={lang === 'ru'
          ? 'Юрист Migronis ответит на ваши вопросы о переезде и способах получения ВНЖ. Это бесплатно.'
          : 'A Migronis lawyer will answer your questions about relocation and residency routes. Free of charge.'}
        cta={lang === 'ru' ? 'Бесплатная консультация →' : 'Free consultation →'} />
    </div>
  );
}

window.RelocatePage = RelocatePage;