// Pair of teaser cards on the home page that link to dedicated tabs:
// "Куда переезжать" and "Инвестиции". The full content of those sections
// lives on /relocate and /invest – home keeps the short pitch only.

function HomeTeasers({ lang, setRoute }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);

  const CARDS = [
    {
      route: 'relocate',
      kicker: t('Куда переезжать', 'Relocation'),
      title: t('Места для жизни, школы, первый год на месте',
              'Places to live, schools, the first year on the ground'),
      body: t('Локации, куда переезжают наши клиенты. Реальные расходы, подборки школ и помощь в юридических вопросах.',
              'The locations our clients move to. Real costs, school shortlists and help with legal matters.'),
      bullets: [
        t('Топ городов для экспатов · стоимость жизни на семью', 'Top expat cities · family cost of living'),
        t('Школы: AP / IB / британские / американские', 'Schools: AP / IB / British / American'),
        t('Помощь с открытием банковских счетов', 'Help opening bank accounts'),
      ],
      cta: t('Открыть раздел «Переезд» →', 'Open the Relocation tab →'),
      accent: '#2F6A6B',
    },
    {
      route: 'invest',
      kicker: t('Во что инвестировать', 'What to invest in'),
      title: t('Недвижимость в Латинской Америке и фонд в Португалии',
              'Real estate in Latin America and a fund in Portugal'),
      body: t('Migronis — это не только документы. У нас есть собственный каталог объектов, которые подходят под требования CBI и RBI, а также просто для инвестирования. Кроме того, мы работаем с инвестфондами.',
              'Migronis is not only documents. We have our own catalogue of properties that qualify for CBI and RBI, and for plain investment too. We also work with investment funds.'),
      bullets: [
        t('Недвижимость во Флорианополисе (Бразилия), Уругвае, Коста-Рике (Увита) и на Азорах', 'Real estate in Florianópolis (Brazil), Uruguay, Costa Rica (Uvita) and the Azores'),
        t('Фондовые инвестиции в Португалии (Золотая виза и HQA)', 'Fund investments in Portugal (Golden Visa and HQA)'),
      ],
      cta: t('Открыть раздел «Инвестиции» →', 'Open the Investments tab →'),
      accent: '#7A3F2E',
    },
  ];

  return (
    <section className="section" style={{ paddingTop: 64, paddingBottom: 32 }}>
      <div className="container-wide">
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 20,
        }}>
          {CARDS.map((c) => (
            <button key={c.route} className="lift" onClick={() => setRoute({ name: c.route })}
              style={{
                textAlign: 'left',
                position: 'relative', overflow: 'hidden',
                padding: 32,
                background: 'var(--bg-elev)', border: '1px solid var(--border)',
                cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 18,
                minHeight: 320, color: 'var(--fg)',
              }}>
              {/* Accent bar */}
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: 3,
                background: `linear-gradient(90deg, ${c.accent}, transparent 70%)`,
              }} />

              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: c.accent, marginBottom: 4,
              }}>– {c.kicker}</div>

              <div className="display" style={{
                fontSize: 'clamp(24px, 2.4vw, 32px)', lineHeight: 1.1,
                letterSpacing: '-0.02em', fontWeight: 700,
                maxWidth: 520, minHeight: 72,
              }}>
                {c.title}
              </div>

              <p style={{ margin: 0, color: 'var(--fg-muted)', fontSize: 15, lineHeight: 1.55, maxWidth: 520, minHeight: 70 }}>
                {c.body}
              </p>

              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {c.bullets.map((b, i) => (
                  <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: 'var(--fg)' }}>
                    <span style={{ flexShrink: 0, marginTop: 7, width: 4, height: 4, background: c.accent }} />
                    <span>{b}</span>
                  </li>
                ))}
              </ul>

              <div style={{ flex: 1 }} />

              <div className="mono" style={{
                fontSize: 12, letterSpacing: '0.04em', textTransform: 'uppercase',
                color: c.accent, paddingTop: 14, borderTop: '1px solid var(--border)',
              }}>
                {c.cta}
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

window.HomeTeasers = HomeTeasers;