// "Инвестиции" / Investments screen — rebuilt to Nastya's spec.
// Self-contained blocks (no RealEstateSection, which duplicated the header
// and showed a property catalogue we can't display yet). Catalogue is
// replaced with a "Скоро на Migronis" placeholder per her note.
function InvestPage({ lang, setRoute, openCallback }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);

  const VERTICALS = [
    {
      flag: '🇧🇷',
      label: t('Недвижимость Migronis · Бразилия', 'Migronis Real Estate · Brazil'),
      location: t('Флорианополис, штат Санта-Катарина', 'Florianópolis, Santa Catarina'),
      status: t('Активные продажи', 'Active sales'),
      yield: t('Доходность: 5–6% аренда, +20–30% перепродажа', 'Returns: 5–6% rental, +20–30% resale'),
      bullets: [
        t('Лицензированное агентство во Флорианополисе', 'Licensed agency in Florianópolis'),
        t('Свой сервис безопасных расчётов (эскроу)', 'Own secure-settlement (escrow) service'),
        t('Команда Migronis живёт на месте', 'The Migronis team lives on site'),
        t('Помогаем с бразильской визой инвестора', 'We help with the Brazilian investor visa'),
      ],
      cta: t('Подробнее', 'Learn more'),
    },
    {
      flag: '🇵🇹',
      label: t('Фонд Migronis · Португалия', 'Migronis Fund · Portugal'),
      location: t('Лиссабон · Кашкайш', 'Lisbon · Cascais'),
      status: t('Доходность: 4–7% годовых', 'Returns: 4–7% p.a.'),
      yield: '',
      bullets: [
        t('Под надзором регулятора Португалии (CMVM)', 'Supervised by the Portuguese regulator (CMVM)'),
        t('Подходит для «Золотой визы»', 'Eligible for the Golden Visa'),
        t('Разные направления: турсектор, агросектор, здравоохранение и др.', 'Various sectors: tourism, agri, healthcare and more'),
        t('Доступ через Migronis', 'Access through Migronis'),
      ],
      cta: t('Запросить презентацию', 'Request the deck'),
    },
  ];

  const TAX_EXAMPLES = [
    { title: t('Португалия (IFICI)', 'Portugal (IFICI)'),         body: t('Льготы на 10 лет для занятых в IT, науке', '10-year incentives for IT and science roles') },
    { title: t('Испания (R&D, закон Бекхэма)', 'Spain (R&D, Beckham law)'), body: t('Фиксированные 24% на 6 лет для новых резидентов', 'Flat 24% for 6 years for incoming residents') },
    { title: t('Коста-Рика', 'Costa Rica'),                        body: t('Налог только на доход внутри страны', 'Tax only on income sourced inside the country') },
    { title: t('Кипр (non-dom)', 'Cyprus (non-dom)'),             body: t('0% на дивиденды', '0% on dividends') },
  ];

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

      {/* Hero (single top header — no duplicate) */}
      <section className="section" style={{ paddingTop: 40 }}>
        <div className="container-wide">
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t('– Инвестиции', '– Investments')}</div>
          <h1 className="display" style={{
            fontSize: 'clamp(34px, 4.6vw, 64px)', margin: 0, maxWidth: 960,
            fontWeight: 800, lineHeight: 1.03, letterSpacing: '-0.03em',
          }}>
            {lang === 'ru'
              ? <>С нами можно не только оформить документы, но и <em>инвестировать</em></>
              : <>With us you can not only file documents, but also <em>invest</em></>}
          </h1>
          <p style={{ color: 'var(--fg-muted)', fontSize: 17, marginTop: 22, maxWidth: 720, lineHeight: 1.55 }}>
            {t('Мы работаем напрямую с фондами в Португалии и имеем агентство недвижимости в Бразилии и Уругвае, а также партнёрства в других странах.',
               'We work directly with funds in Portugal and run a real-estate agency in Brazil and Uruguay, plus partnerships in other countries.')}
          </p>
        </div>
      </section>

      {/* Two verticals */}
      <section className="section" style={{ paddingTop: 16 }}>
        <div className="container-wide">
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: 0,
            borderTop: '1px solid var(--border-strong)', borderBottom: '1px solid var(--border-strong)',
          }}>
            {VERTICALS.map((v, i) => (
              <div key={i} style={{
                padding: '32px 36px',
                borderRight: i === 0 ? '1px solid var(--border)' : '0',
                background: 'var(--bg-elev)',
                display: 'flex', flexDirection: 'column', gap: 18,
              }}>
                <div>
                  <window.FlagIcon emoji={v.flag} size={26} />
                  <h3 className="display" style={{ fontSize: 26, marginTop: 10, fontWeight: 700, lineHeight: 1.05 }}>{v.label}</h3>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 8 }}>
                    {v.location} · {v.status}
                  </div>
                  {v.yield && (
                    <div style={{ fontSize: 13, color: 'var(--accent)', marginTop: 8 }}>{v.yield}</div>
                  )}
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {v.bullets.map((b, j) => (
                    <li key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13.5, color: 'var(--fg-muted)' }}>
                      <span style={{ flexShrink: 0, marginTop: 7, width: 4, height: 4, background: 'var(--accent)' }} />
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
                <button className="btn btn-line btn-sm" style={{ alignSelf: 'flex-start', marginTop: 'auto' }}
                        onClick={() => openCallback && openCallback()}>
                  {v.cta} →
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Consultation slab: real estate vs fund */}
      <window.CTABanner lang={lang} openCallback={() => openCallback && openCallback()}
        variant="dark"
        kicker={lang === 'ru' ? 'Обсудить инвестиции' : 'Discuss investments'}
        title={lang === 'ru'
          ? <>Недвижимость или фонд, <em>что выбрать</em>?</>
          : <>Real estate or a fund — <em>which one</em>?</>}
        body={lang === 'ru'
          ? 'Обсудите со специалистом Migronis, что подходит именно для вашего кейса. Это бесплатно.'
          : 'Talk to a Migronis specialist about what fits your case. Free of charge.'}
        cta={lang === 'ru' ? 'Бесплатная консультация →' : 'Free consultation →'} />

      {/* Catalogue — placeholder ("Скоро на Migronis") per Nastya */}
      <section className="section" style={{ paddingTop: 56 }}>
        <div className="container-wide">
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            {t('– Каталог объектов для инвестиций', '– Investment property catalogue')}
          </div>
          <div style={{
            padding: '48px 32px', textAlign: 'center',
            background: 'var(--bg-elev)', border: '1px dashed var(--border-strong)',
          }}>
            <div className="display" style={{ fontSize: 28, color: 'var(--fg)' }}>
              {t('Скоро на Migronis', 'Coming soon on Migronis')}
            </div>
            <p style={{ color: 'var(--fg-muted)', fontSize: 14, marginTop: 10, maxWidth: 520, marginInline: 'auto' }}>
              {t('Готовим витрину объектов, доступных для инвестиций через Migronis. Пока — обсудим варианты на консультации.',
                 'We are building a showcase of properties available for investment through Migronis. For now — let\'s discuss options on a call.')}
            </p>
          </div>
          <div style={{
            marginTop: 14, padding: '10px 14px',
            background: 'var(--surface)', border: '1px solid var(--border)',
            fontSize: 12, color: 'var(--fg-dim)',
          }}>
            {t('Доходность и сроки — ориентировочные, на основе исторических данных и прогнозов.',
               'Returns and timelines are indicative, based on historical data and forecasts.')}
          </div>
        </div>
      </section>

      {/* Tax section */}
      <section className="section" style={{ paddingTop: 40 }}>
        <div className="container-wide">
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t('– Налоги', '– Tax')}</div>
          <h2 className="display h-2" style={{ margin: 0, maxWidth: 760 }}>
            {lang === 'ru'
              ? <>Обсуждаем налоги <em>до подачи</em> на паспорт/ВНЖ</>
              : <>We discuss tax <em>before you apply</em> for a passport/residency</>}
          </h2>
          <p style={{ color: 'var(--fg-muted)', fontSize: 16, marginTop: 14, maxWidth: 640, lineHeight: 1.55 }}>
            {t('Расскажем, при каких условиях вы меняете налоговое резидентство и где есть выгодные для вас налоговые режимы.',
               'We explain when you actually change tax residency and where the favourable regimes are for you.')}
          </p>

          <div style={{ marginTop: 28, fontSize: 15, fontWeight: 500 }}>
            {t('Несколько примеров льготных режимов', 'A few examples of favourable regimes')}
          </div>
          <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 12 }}>
            {TAX_EXAMPLES.map((x, i) => (
              <div key={i} style={{ padding: 20, background: 'var(--bg-elev)', border: '1px solid var(--border)' }}>
                <div style={{ fontWeight: 600, fontSize: 15 }}>{x.title}</div>
                <div style={{ color: 'var(--fg-muted)', fontSize: 13.5, marginTop: 6, lineHeight: 1.5 }}>{x.body}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <window.CTABanner lang={lang} openCallback={() => openCallback && openCallback()}
        variant="light"
        kicker={lang === 'ru' ? 'Обсудить детали' : 'Discuss details'}
        title={lang === 'ru'
          ? <>Разберём вашу <em>ситуацию</em></>
          : <>Let's go through your <em>situation</em></>}
        body={lang === 'ru'
          ? 'Расскажем о подходящих объектах, фондах и выгодных налоговых режимах. 30 минут с юристом.'
          : 'We will cover suitable properties, funds and favourable tax regimes. 30 minutes with a lawyer.'}
        cta={lang === 'ru' ? 'Бесплатная консультация →' : 'Free consultation →'} />
    </div>
  );
}

window.InvestPage = InvestPage;