// Hero – 3 variants: map / quiz / AI. Shares a left value-prop column.
const T = (lang, ru, en) => (lang === 'ru' ? ru : en);

function HeroEyebrow({ lang }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{
        width: 8, height: 8, borderRadius: 999, background: 'var(--accent)',
        boxShadow: '0 0 12px var(--accent)',
      }} />
      <span className="eyebrow">
        {T(lang,'20 программ гражданства и резидентства · полное сопровождение · с 2012','20 citizenship & residency programs · full support · since 2012')}
      </span>
    </div>
  );
}

function HeroHeadline({ lang }) {
  return (
    <h1 className="display h-1" style={{ margin: '24px 0 18px', maxWidth: 720 }}>
      {lang === 'ru' ? (
        <>Второй паспорт <span className="ds">·</span> <em>один</em> процесс <br/>без сюрпризов</>
      ) : (
        <>A second passport <span className="ds">·</span> <em>one</em> process <br/>zero surprises</>
      )}
    </h1>
  );
}

function HeroLede({ lang }) {
  return (
    <p style={{
      margin: 0, color: 'var(--fg-muted)', fontSize: 18, maxWidth: 540, lineHeight: 1.55,
    }}>
      {T(lang,
        '20 программ под ключ. Лицензированный агент с 2012 года – 97% approval rate на 2 400+ кейсах.',
        '20 turnkey programs. Licensed agent since 2012 – 97% approval rate on 2,400+ cases.'
      )}
    </p>
  );
}

function HeroStatsRow({ lang }) {
  const stats = window.MIGRONIS_DATA.trust.metrics;
  return (
    <div style={{ display: 'flex', gap: 36, marginTop: 36, flexWrap: 'wrap' }}>
      {stats.map((s, i) => (
        <div key={i}>
          <div className="display" style={{ fontSize: 32, color: 'var(--fg)' }}>{s.value}</div>
          <div style={{ fontSize: 12, color: 'var(--fg-dim)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>
            {s.label[lang]}
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── Variant A: World Map ───
function HeroMap({ lang, setRoute }) {
  const all = [...window.MIGRONIS_DATA.citizenship, ...window.MIGRONIS_DATA.residency];
  const [hovered, setHovered] = React.useState('grenada');
  const [filter, setFilter] = React.useState('all'); // all | cbi | rbi
  const visible = filter === 'cbi' ? window.MIGRONIS_DATA.citizenship
                : filter === 'rbi' ? window.MIGRONIS_DATA.residency
                : all;
  const active = all.find((p) => p.id === hovered);

  return (
    <div className="glass" style={{
      padding: 18, height: 480, position: 'relative', overflow: 'hidden',
      borderRadius: 'var(--r-xl)',
    }}>
      {/* Top bar */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <div className="tabs">
          {[
            { id: 'all', label: T(lang, 'Все 20', 'All 20') },
            { id: 'cbi', label: T(lang, 'Гражданство', 'Citizenship') },
            { id: 'rbi', label: T(lang, 'ВНЖ', 'Residency') },
          ].map((tab) => (
            <button key={tab.id}
              className={`tab ${filter === tab.id ? 'is-active' : ''}`}
              onClick={() => setFilter(tab.id)}>{tab.label}</button>
          ))}
        </div>
        <div className="chip mono" style={{ height: 32 }}>
          <span style={{ color: 'var(--accent)' }}>●</span>
          {visible.length} {T(lang, 'юрисдикций активны', 'jurisdictions live')}
        </div>
      </div>

      {/* Map */}
      <div style={{ position: 'absolute', inset: 60, opacity: .96 }}>
        <window.WorldMap
          programs={visible}
          activeId={hovered}
          onHover={setHovered}
          onSelect={(p) => setRoute({ name: 'program', id: p.id })}
        />
      </div>

      {/* Active program callout */}
      {active && (
        <div className="glass-thin" style={{
          position: 'absolute', left: 24, bottom: 18, padding: '12px 16px',
          background: 'var(--bg-elev)', border: '1px solid var(--border-strong)',
          borderRadius: 'var(--r-md)', minWidth: 280, animation: 'fade-up .25s var(--ease-out)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <window.FlagIcon emoji={active.flag} size={16} />
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 500 }}>{window.cn(active, lang)}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{active.tagline[lang]}</div>
            </div>
            <span className="chip" style={{ height: 24, fontSize: 11 }}>
              {window.MIGRONIS_DATA.citizenship.includes(active) ? T(lang,'CBI','CBI') : T(lang,'ВНЖ','RBI')}
            </span>
          </div>
          <div className="hr" style={{ margin: '10px 0' }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, fontSize: 12 }}>
            <div>
              <div style={{ color: 'var(--fg-dim)' }}>{T(lang,'от','from')}</div>
              <div className="mono" style={{ color: 'var(--accent)' }}>
                {active.currency === 'USD' ? '$' : '€'}{(active.minInvest/1000).toFixed(0)}k
              </div>
            </div>
            <div>
              <div style={{ color: 'var(--fg-dim)' }}>{T(lang,'срок','term')}</div>
              <div className="mono">{window.termLabel(active.term, lang)}</div>
            </div>
            <div>
              <div style={{ color: 'var(--fg-dim)' }}>{T(lang,'безвиз','visa-free')}</div>
              <div className="mono">{active.visaFree}</div>
            </div>
          </div>
          <button className="btn btn-line btn-sm" style={{ marginTop: 12, width: '100%' }}
                  onClick={() => setRoute({ name: 'program', id: active.id })}>
            {T(lang,'Подробнее о программе','See full program')} →
          </button>
        </div>
      )}

      {/* Legend */}
      <div style={{ position: 'absolute', right: 24, bottom: 18, fontSize: 11, color: 'var(--fg-dim)' }}>
        {T(lang,'Наведите на точку – программы по миру','Hover a pin – global programs')}
      </div>
    </div>
  );
}

// ─── Variant B: Quiz Wizard ───
function HeroQuiz({ lang, setRoute, openCallback }) {
  const [step, setStep] = React.useState(0);
  const [ans, setAns] = React.useState({});

  const STEPS = [
    {
      key: 'goal',
      q: T(lang, 'Какая основная цель?', 'What is your main goal?'),
      opts: [
        { v: 'travel',  ru: 'Безвизовые путешествия', en: 'Visa-free travel' },
        { v: 'tax',     ru: 'Налоговая оптимизация',  en: 'Tax optimisation' },
        { v: 'family',  ru: 'Релокация семьи',        en: 'Family relocation' },
        { v: 'planb',   ru: 'Запасной аэродром',      en: 'Plan B' },
      ],
    },
    {
      key: 'budget',
      q: T(lang, 'Бюджет на программу?', 'Budget for the program?'),
      opts: [
        { v: 'lt250',  ru: 'до $250k', en: 'up to $250k' },
        { v: '250-500', ru: '$250–500k', en: '$250–500k' },
        { v: '500-1m', ru: '$500k – $1M', en: '$500k – $1M' },
        { v: 'gt1m',   ru: 'свыше $1M', en: '$1M+' },
      ],
    },
    {
      key: 'time',
      q: T(lang, 'Когда хотите получить статус?', 'When do you want the status?'),
      opts: [
        { v: 'fast',   ru: '1–3 мес', en: '1–3 months' },
        { v: 'med',    ru: '4–9 мес', en: '4–9 months' },
        { v: 'slow',   ru: '12+ мес ОК', en: '12+ months OK' },
        { v: 'flex',   ru: 'Не важно', en: 'Flexible' },
      ],
    },
    {
      key: 'region',
      q: T(lang, 'Предпочтения по региону?', 'Region preference?'),
      opts: [
        { v: 'eu',     ru: 'ЕС / Шенген', en: 'EU / Schengen' },
        { v: 'carib',  ru: 'Карибы',       en: 'Caribbean' },
        { v: 'mena',   ru: 'ОАЭ / MENA',   en: 'UAE / MENA' },
        { v: 'any',    ru: 'Любой',        en: 'Any' },
      ],
    },
  ];

  const total = STEPS.length;
  const current = STEPS[step];
  const done = step >= total;

  // Naive recommendation
  const recommend = () => {
    const all = [...window.MIGRONIS_DATA.citizenship, ...window.MIGRONIS_DATA.residency];
    let pool = all;
    if (ans.region === 'eu') pool = pool.filter((p) => p.region === 'Europe');
    if (ans.region === 'carib') pool = pool.filter((p) => p.region === 'Caribbean');
    if (ans.region === 'mena') pool = pool.filter((p) => p.region === 'MENA' || p.region === 'MENA / Asia');
    if (ans.budget === 'lt250') pool = pool.filter((p) => p.minInvest <= 250000);
    if (ans.budget === '250-500') pool = pool.filter((p) => p.minInvest > 200000 && p.minInvest <= 500000);
    if (ans.budget === '500-1m') pool = pool.filter((p) => p.minInvest > 400000 && p.minInvest <= 1000000);
    if (ans.time === 'fast') pool = pool.filter((p) => /^[1-3]/.test(p.term));
    if (pool.length === 0) pool = all.slice(0, 3);
    return pool.slice(0, 3);
  };

  return (
    <div className="glass" style={{
      padding: 28, height: 480, borderRadius: 'var(--r-xl)',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span className="eyebrow">{T(lang,'Подбор программы за 60 секунд','60-second matchmaker')}</span>
        <span className="mono" style={{ fontSize: 11, color: 'var(--fg-muted)' }}>
          {Math.min(step + 1, total)}/{total}
        </span>
      </div>

      {/* Progress */}
      <div style={{ marginTop: 14, height: 3, background: 'var(--surface)', borderRadius: 3, overflow: 'hidden' }}>
        <div style={{
          height: '100%', width: `${Math.min(step / total, 1) * 100}%`,
          background: 'var(--accent)', transition: 'width .4s var(--ease-out)',
        }} />
      </div>

      {!done ? (
        <div key={step} style={{ marginTop: 30, flex: 1, animation: 'fade-up .35s var(--ease-out)' }}>
          <div className="display" style={{ fontSize: 32, marginBottom: 26 }}>{current.q}</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {current.opts.map((o) => (
              <button key={o.v}
                onClick={() => {
                  setAns({ ...ans, [current.key]: o.v });
                  setTimeout(() => setStep(step + 1), 200);
                }}
                className="lift"
                style={{
                  textAlign: 'left', padding: '16px 18px',
                  background: ans[current.key] === o.v ? 'var(--accent-soft)' : 'var(--surface)',
                  border: '1px solid', borderColor: ans[current.key] === o.v ? 'var(--accent)' : 'var(--border)',
                  borderRadius: 'var(--r-md)', color: 'var(--fg)', fontSize: 15,
                  transition: 'all .2s',
                }}>
                {o[lang]}
              </button>
            ))}
          </div>
        </div>
      ) : (
        <div style={{ marginTop: 24, flex: 1, animation: 'fade-up .4s var(--ease-out)', display: 'flex', flexDirection: 'column' }}>
          <div className="display" style={{ fontSize: 28 }}>
            {T(lang,'Топ-3 под вас','Top 3 matches')} <em>→</em>
          </div>
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
            {recommend().map((p, i) => (
              <button key={p.id} onClick={() => setRoute({ name: 'program', id: p.id })}
                className="lift"
                style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: 14, background: 'var(--surface)', border: '1px solid var(--border)',
                  borderRadius: 'var(--r-md)', textAlign: 'left',
                }}>
                <window.FlagIcon emoji={p.flag} size={18} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 500 }}>{window.cn(p, lang)}</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{p.tagline[lang]}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="mono" style={{ color: 'var(--accent)' }}>
                    {p.currency === 'USD' ? '$' : '€'}{(p.minInvest/1000).toFixed(0)}k
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--fg-dim)' }}>{window.termLabel(p.term, lang)}</div>
                </div>
                <span style={{ color: 'var(--fg-muted)' }}>→</span>
              </button>
            ))}
          </div>
          {/* Post-quiz CTA – consultation handover per Nastya */}
          {openCallback && (
            <button className="btn btn-primary"
              onClick={() => openCallback()}
              style={{ marginTop: 12, width: '100%', height: 48 }}>
              {T(lang,'Обсудить варианты с менеджером →','Discuss the options with an advisor →')}
            </button>
          )}
          <button className="btn btn-line btn-sm" onClick={() => { setStep(0); setAns({}); }} style={{ marginTop: 8 }}>
            ↻ {T(lang,'Пройти заново','Start over')}
          </button>
        </div>
      )}
    </div>
  );
}

// ─── Variant C: AI consultant in hero ───
function HeroAI({ lang, openAI }) {
  const [input, setInput] = React.useState('');
  const SAMPLES = lang === 'ru' ? [
    'Хочу безвиз в США и налог 0% – что подойдёт?',
    'Семья 4 человека, бюджет $300k, как можно быстрее',
    'Сравни Гренаду и Saint Kitts по налогам',
  ] : [
    'I need US visa-free + 0% tax. What fits?',
    'Family of 4, $300k budget, as fast as possible',
    'Compare Grenada vs Saint Kitts on tax treatment',
  ];

  return (
    <div className="glass" style={{
      padding: 24, height: 480, borderRadius: 'var(--r-xl)',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{
          width: 36, height: 36,
          background: 'var(--accent)',
          display: 'grid', placeItems: 'center', color: '#FFFFFF',
        }}>
          <span style={{ fontFamily: 'var(--f-sans)', fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em' }}>M</span>
        </span>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 500 }}>Migronis AI</div>
          <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>
            {T(lang,'обучен на 20 программах и 2,400+ кейсах','trained on 20 programs and 2,400+ cases')}
          </div>
        </div>
        <span className="chip chip-accent mono" style={{ fontSize: 11 }}>BETA</span>
      </div>

      {/* AI message */}
      <div className="glass-thin" style={{
        marginTop: 18, padding: 16, background: 'var(--surface)', border: '1px solid var(--border)',
        borderRadius: 'var(--r-md)',
      }}>
        <div style={{ fontSize: 15, lineHeight: 1.55 }}>
          {T(lang,
            'Расскажите коротко: чего хотите достичь? Я подберу 2–3 программы за ~10 секунд, объясню риски и сразу покажу бюджет.',
            'Tell me briefly what you want to achieve. I will match 2–3 programs in ~10 seconds, explain the risks and show the budget upfront.'
          )}
        </div>
        <div className="hr" style={{ margin: '14px 0' }} />
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {SAMPLES.map((s, i) => (
            <button key={i} className="chip lift" onClick={() => { setInput(s); openAI(s); }}
              style={{ background: 'var(--bg-elev)', height: 30 }}>
              {s}
            </button>
          ))}
        </div>
      </div>

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

      {/* Input – solid bordered surface, button fully inset */}
      <form onSubmit={(e) => { e.preventDefault(); if (input.trim()) openAI(input); }}
            style={{
              display: 'flex', alignItems: 'stretch', gap: 0,
              height: 56,
              background: 'var(--bg-elev-2)',
              border: '1px solid var(--border-strong)',
            }}>
        <input value={input} onChange={(e) => setInput(e.target.value)}
               placeholder={T(lang,'Опишите вашу ситуацию...','Describe your situation...')}
               style={{
                 flex: 1, border: 0, background: 'transparent', outline: 'none',
                 padding: '0 20px', fontSize: 15, fontFamily: 'var(--f-sans)', color: 'var(--fg)',
               }} />
        <button type="submit" className="btn btn-primary" style={{ height: 'auto', padding: '0 26px' }}>
          {T(lang,'Спросить','Ask')} ↑
        </button>
      </form>
      <div style={{ marginTop: 12, fontSize: 11, color: 'var(--fg-dim)', textAlign: 'center' }}>
        {T(lang,'Без email и регистрации. Конфиденциально. Лицензированный агент с 2012 г.','No email or signup. Confidential. Licensed agent since 2012.')}
      </div>
    </div>
  );
}

function Hero({ lang, heroVariant, setRoute, openAI, openCallback }) {
  return (
    <>
      {/* ── A. Full-bleed photo hero – Borderless treatment ── */}
      <section style={{
        position: 'relative',
        minHeight: 'min(640px, 86vh)',
        marginTop: -1,
        background: '#2A2E33',
        overflow: 'hidden',
        isolation: 'isolate',
      }}>
        <img
          src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=2400&q=80&auto=format&fit=crop"
          alt=""
          loading="eager"
          onError={(e) => { e.currentTarget.src = 'https://picsum.photos/seed/migronis-hero/2400/1400'; }}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover',
            opacity: 0.82,
            filter: 'grayscale(0.1)',
            zIndex: -1,
          }}
        />
        {/* Bottom gradient for legibility – lighter, airier */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(25,28,31,0.18) 0%, rgba(25,28,31,0.0) 38%, rgba(25,28,31,0.32) 82%, rgba(25,28,31,0.62) 100%)',
          zIndex: -1,
        }} />

        <div className="container-wide" style={{
          minHeight: 'min(640px, 86vh)',
          display: 'flex', flexDirection: 'column',
          padding: '104px 32px 48px',
          color: '#FFFFFF',
        }}>
          {/* Top eyebrow */}
          <div className="mono" style={{
            fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.78)', display: 'flex', gap: 16, flexWrap: 'wrap',
            marginBottom: 56,
          }}>
            <span>– {T(lang, 'Licensed CBI / RBI agent, est. 2012', 'Licensed CBI / RBI agent, est. 2012')}</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span>{T(lang, '20 программ', '20 programs')}</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span>{T(lang, '2 400+ кейсов', '2,400+ cases')}</span>
          </div>

          {/* Headline */}
          <div style={{ maxWidth: 1200 }}>
            <h1 className="display" style={{
              margin: 0, color: '#FFFFFF',
              fontWeight: 800,
              fontSize: 'clamp(40px, 6.5vw, 92px)',
              lineHeight: 0.96,
              letterSpacing: '-0.035em',
              textTransform: 'uppercase',
            }}>
              {lang === 'ru' ? <>Жизнь<br/><em style={{ color: 'rgba(255,232,192,0.78)', fontStyle: 'normal', fontWeight: 'inherit' }}>без</em> границ</>
                            : <>A life<br/><em style={{ color: 'rgba(255,232,192,0.78)', fontStyle: 'normal', fontWeight: 'inherit' }}>without</em> borders</>}
            </h1>
            <p style={{
              marginTop: 20, maxWidth: 580,
              color: 'rgba(255,255,255,0.84)', fontSize: 18, lineHeight: 1.5,
              fontWeight: 400,
            }}>
              {T(lang,
                '20 программ под ключ. Лицензированный агент с 2012 года, 97% approval rate.',
                '20 programs turnkey. Licensed agent since 2012, 97% approval rate.'
              )}
            </p>
          </div>

          {/* CTAs – tight gap to the lede above (was a huge space-between gap) */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32, marginTop: 28 }}>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
              {/* 1. Primary — filled */}
              <button onClick={() => openCallback ? openCallback() : setRoute({ name: 'apply' })} 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', transition: 'background .2s',
              }}
                onMouseEnter={(e) => { e.currentTarget.style.background = '#F4F4F2'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = '#FFFFFF'; }}
              >
                {T(lang,'Бесплатная консультация','Free consultation')} →
              </button>
              {/* 2. Secondary — outlined */}
              <button onClick={() => openAI()} style={{
                height: 56, padding: '0 24px',
                background: 'transparent', color: '#FFFFFF', border: '1px solid rgba(255,255,255,0.5)',
                fontSize: 13, fontWeight: 500, letterSpacing: '0.04em',
                textTransform: 'uppercase', fontFamily: 'var(--f-sans)',
                cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10,
                transition: 'border-color .2s, background .2s',
              }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#FFFFFF'; e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.5)'; e.currentTarget.style.background = 'transparent'; }}
              >
                <span style={{ width: 6, height: 6, borderRadius: 999, background: '#1F4A2E', boxShadow: '0 0 8px #1F4A2E' }} />
                {T(lang,'AI-консультант','AI Advisor')}
              </button>
              {/* 3. Tertiary — text link */}
              <button onClick={() => setRoute({ name: 'home', scrollTo: 'citizenship' })} style={{
                height: 56, padding: '0 6px',
                background: 'transparent', color: '#FFFFFF', border: 0,
                fontSize: 13, fontWeight: 500, letterSpacing: '0.04em',
                textTransform: 'uppercase', fontFamily: 'var(--f-sans)',
                cursor: 'pointer', borderBottom: '1px solid transparent',
              }}
                onMouseEnter={(e) => { e.currentTarget.style.borderBottom = '1px solid #FFFFFF'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderBottom = '1px solid transparent'; }}
              >
                {T(lang,'Посмотреть программы','See programs')} →
              </button>
            </div>

            {/* Stats strip – Swiss grid baseline, pinned to bottom */}
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
              borderTop: '1px solid rgba(255,255,255,0.22)',
              paddingTop: 24, marginTop: 'auto',
            }}>
              {window.MIGRONIS_DATA.trust.metrics.map((s, i) => (
                <div key={i} style={{ borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.18)' : 0, paddingLeft: i > 0 ? 28 : 0 }}>
                  <div style={{
                    fontFamily: 'var(--f-sans)', fontWeight: 700,
                    fontSize: 'clamp(28px, 3.4vw, 56px)', color: '#FFFFFF',
                    letterSpacing: '-0.02em', lineHeight: 1,
                  }}>{s.value}</div>
                  <div className="mono" style={{
                    fontSize: 11, color: 'rgba(255,255,255,0.6)',
                    marginTop: 10, textTransform: 'uppercase', letterSpacing: '0.08em',
                  }}>{s.label[lang]}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── B. Interactive navigator (map / quiz / AI) – below the photo hero ── */}
      <section className="section-sm" style={{ background: '#FFFFFF', borderBottom: '1px solid var(--border)' }}>
        <div className="container-wide">
          <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.4fr', gap: 56, alignItems: 'center' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>
                – {T(lang, 'Навигатор', 'Navigator')}
              </div>
              <h2 className="display" style={{
                margin: 0, fontSize: 'clamp(32px, 3.4vw, 56px)', fontWeight: 700,
                lineHeight: 1.0, letterSpacing: '-0.03em',
              }}>
                {lang === 'ru'
                  ? <>Найдите программу<br/><em>за 30 секунд</em></>
                  : <>Find your program<br/><em>in 30 seconds</em></>}
              </h2>
              <p style={{ color: 'var(--fg-muted)', fontSize: 16, marginTop: 18, maxWidth: 420, lineHeight: 1.55 }}>
                {T(lang,
                  'Опишите ситуацию в одной строке – AI подберёт 2–3 точных программы под ваш бюджет, сроки и семью.',
                  'Describe your situation in one line – the AI returns 2–3 precise programs for your budget, timing and family.'
                )}
              </p>
            </div>
            <div>
              {heroVariant === 'map'  && <HeroMap  lang={lang} setRoute={setRoute} />}
              {heroVariant === 'quiz' && <HeroQuiz lang={lang} setRoute={setRoute} openCallback={openCallback} />}
              {heroVariant === 'ai'   && <HeroAI   lang={lang} openAI={openAI} />}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.Hero = Hero;
window.HeroQuiz = HeroQuiz;
window.HeroMap = HeroMap;
window.HeroAI = HeroAI;