// Cities showcase – 6 destination cards with full-bleed photography
// (sunsets, ocean, skyline). Rendered as a horizontal slider with
// drag-to-scroll. Replaces the cost-of-living grid that used to be on home.
// Full drill-down (districts + schools) lives on /relocate.

const SHOWCASE_CITIES = [
  {
    id: 'lisbon',
    flag: '🇵🇹',
    name:    { ru: 'Лиссабон / Кашкайш', en: 'Lisbon / Cascais' },
    country: { ru: 'Португалия',       en: 'Portugal' },
    pitch:   { ru: 'Океан, мягкая зима, один из самых безопасных городов Европы',
               en: 'Ocean, mild winters, one of Europe\'s safest cities' },
    family4: { ru: '≈ €4 000/мес', en: '≈ €4,000/mo' },
    photo: 'assets/photos/lisbon.webp',
    program: 'portugal-golden',
  },
  {
    id: 'porto',
    flag: '🇵🇹',
    name:    { ru: 'Порту',            en: 'Porto' },
    country: { ru: 'Португалия',       en: 'Portugal' },
    pitch:   { ru: 'Камернее и доступнее Лиссабона, те же океан и безопасность',
               en: 'Cosier and cheaper than Lisbon, same ocean and safety' },
    family4: { ru: '≈ €3 200/мес', en: '≈ €3,200/mo' },
    photo: 'https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=1600&q=80&auto=format&fit=crop',
    program: 'portugal-golden',
  },
  {
    id: 'florianopolis',
    flag: '🇧🇷',
    name:    { ru: 'Флорианополис',    en: 'Florianópolis' },
    country: { ru: 'Бразилия',         en: 'Brazil' },
    pitch:   { ru: 'Остров на юге Бразилии, IT-сектор, океан, сёрф',
               en: 'Island in southern Brazil, IT sector, ocean, surf' },
    family4: { ru: '≈ $3 200/мес', en: '≈ $3,200/mo' },
    photo: 'assets/photos/florianopolis.webp',
    program: 'brazil',
  },
  {
    id: 'barcelona',
    flag: '🇪🇸',
    name:    { ru: 'Барселона',        en: 'Barcelona' },
    country: { ru: 'Испания',          en: 'Spain' },
    pitch:   { ru: 'Море и горы, средиземноморский ритм, сильные школы',
               en: 'Sea and mountains, Mediterranean rhythm, strong schools' },
    family4: { ru: '≈ €3 800/мес', en: '≈ €3,800/mo' },
    photo: 'assets/photos/barcelona.webp',
    program: 'spain',
  },
  {
    id: 'athens',
    flag: '🇬🇷',
    name:    { ru: 'Афины',            en: 'Athens' },
    country: { ru: 'Греция',           en: 'Greece' },
    pitch:   { ru: 'Тёплое море, семьи селятся на побережье',
               en: 'Warm sea, families settle along the coast' },
    family4: { ru: '≈ €2 900/мес', en: '≈ €2,900/mo' },
    photo: 'assets/photos/athens.webp',
    program: 'greece',
  },
  {
    id: 'limassol',
    flag: '🇨🇾',
    name:    { ru: 'Лимасол',          en: 'Limassol' },
    country: { ru: 'Кипр',             en: 'Cyprus' },
    pitch:   { ru: 'Большое комьюнити на берегу моря, удобно для работы',
               en: 'A large seaside community, convenient for work' },
    family4: { ru: '≈ €3 600/мес', en: '≈ €3,600/mo' },
    photo: 'assets/photos/limassol.webp',
    program: 'cyprus',
  },
  {
    id: 'san-jose',
    flag: '🇨🇷',
    name:    { ru: 'Сан-Хосе',         en: 'San José' },
    country: { ru: 'Коста-Рика',       en: 'Costa Rica' },
    pitch:   { ru: 'Тропики и философия «pura vida», размеренная жизнь',
               en: 'Tropics and the "pura vida" philosophy, an unhurried life' },
    family4: { ru: '≈ $2 600/мес', en: '≈ $2,600/mo' },
    photo: 'https://images.unsplash.com/photo-1518495973542-4542c06a5843?w=1600&q=80&auto=format&fit=crop',
    program: 'costa-rica',
  },
];

function CitiesShowcase({ lang, setRoute }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);
  return (
    <section className="section" style={{ paddingTop: 72, paddingBottom: 32 }}>
      <div className="container-wide">
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          flexWrap: 'wrap', gap: 24, marginBottom: 28,
        }}>
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>
              {t('– Жить здесь', '– Live here')}
            </div>
            <h2 className="display h-2" style={{ margin: 0 }}>
              {lang === 'ru'
                ? <>Места, куда <em>едут жить</em></>
                : <>Places people <em>actually live</em></>}
            </h2>
            <p style={{ color: 'var(--fg-muted)', fontSize: 16, marginTop: 16, maxWidth: 560, lineHeight: 1.55 }}>
              {t('После переезда начинается обычная жизнь: куда отдать детей в школу, сколько стоит аренда, тёплое ли море в ноябре. Города, куда реально переезжают наши клиенты — с актуальными бюджетами.',
                 'After the move, ordinary life begins: where to send the kids to school, how much rent costs, whether the sea is warm in November. Cities our clients actually move to — with up-to-date budgets.')}
            </p>
          </div>
          <button className="btn btn-line btn-sm" onClick={() => setRoute({ name: 'relocate' })}>
            {t('Все детали в разделе «Переезд»', "All details on the Relocation tab")} →
          </button>
        </div>

        <window.DragScrollRail>
          {SHOWCASE_CITIES.map((c) => (
            <article key={c.id}
              onClick={() => setRoute({ name: 'relocate' })}
              className="lift"
              style={{
                flex: '0 0 360px', scrollSnapAlign: 'start',
                position: 'relative', overflow: 'hidden',
                aspectRatio: '4 / 5',
                cursor: 'pointer',
                background: '#2A2E33',
                border: '1px solid var(--border)',
              }}>
              <img src={c.photo} alt={c.name[lang]} loading="eager" draggable="false"
                   onError={(e) => { e.currentTarget.src = `https://picsum.photos/seed/migronis-city-${c.id}/1200/1500`; }}
                   style={{
                     position: 'absolute', inset: 0,
                     width: '100%', height: '100%', objectFit: 'cover',
                     filter: 'saturate(1.08) brightness(0.92)',
                   }} />
              {/* Gradient overlay for legibility */}
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, rgba(25,28,31,0.08) 0%, rgba(25,28,31,0.05) 38%, rgba(25,28,31,0.62) 78%, rgba(25,28,31,0.86) 100%)',
              }} />
              {/* Top chip */}
              <div style={{
                position: 'absolute', top: 16, left: 16,
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 12px',
                background: 'rgba(0,0,0,0.42)',
                backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
                color: '#FFFFFF', fontSize: 12,
                fontFamily: 'var(--f-mono)', textTransform: 'uppercase', letterSpacing: '0.08em',
              }}>
                <window.FlagIcon emoji={c.flag} size={14} />
                <span>{c.country[lang]}</span>
              </div>
              {/* Family-4 budget chip */}
              <div style={{
                position: 'absolute', top: 16, right: 16,
                padding: '6px 12px',
                background: 'rgba(0,0,0,0.42)',
                backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
                color: '#FFFFFF',
              }}>
                <div className="mono" style={{ fontSize: 9, opacity: 0.7, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                  {t('семья 4', 'family 4')}
                </div>
                <div className="mono" style={{ fontSize: 13, color: '#FFE8C0', marginTop: 2, whiteSpace: 'nowrap' }}>{c.family4[lang]}</div>
              </div>
              {/* Bottom: name + pitch */}
              <div style={{
                position: 'absolute', left: 0, right: 0, bottom: 0,
                padding: 24, color: '#FFFFFF',
              }}>
                <h3 className="display" style={{
                  margin: 0, fontSize: 'clamp(22px, 2.3vw, 32px)',
                  letterSpacing: '-0.02em', lineHeight: 1.05,
                  textTransform: 'uppercase', fontWeight: 800, color: '#FFFFFF',
                }}>
                  {c.name[lang]}
                </h3>
                <p style={{ margin: '10px 0 0', color: 'rgba(255,255,255,0.86)', fontSize: 14, lineHeight: 1.45, minHeight: 40 }}>
                  {c.pitch[lang]}
                </p>
                <div className="mono" style={{
                  marginTop: 14, fontSize: 11, color: '#FFE8C0',
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                }}>
                  {t('Подробнее', 'Open details')} →
                </div>
              </div>
            </article>
          ))}
        </window.DragScrollRail>

        <div className="mono" style={{ marginTop: 10, fontSize: 11, color: 'var(--fg-dim)' }}>
          {t('← перетащите карточки →', '← drag the cards →')}
        </div>
      </div>
    </section>
  );
}

window.CitiesShowcase = CitiesShowcase;