// Tools section + Calculator + AI Chat modal
function Calculator({ lang, setRoute, openCallback }) {
  const all = [...window.MIGRONIS_DATA.citizenship, ...window.MIGRONIS_DATA.residency];
  const [programId, setProgramId] = React.useState('grenada');
  const [family, setFamily] = React.useState(2);
  const [route, setRouteOpt] = React.useState('donation'); // donation | realestate

  const p = all.find((x) => x.id === programId);
  const isCBI = window.MIGRONIS_DATA.citizenship.includes(p);

  // Fee model (simplified, indicative)
  const familyAdd = Math.max(0, family - 1) * (isCBI ? 25000 : 15000);
  const govFees = isCBI ? 12000 : 6000;
  const ddFees = 7500 * Math.max(1, family);
  const migronisFee = isCBI ? 30000 : 22000;
  const base = route === 'realestate' ? Math.round(p.minInvest * 1.15) : p.minInvest;
  const total = base + familyAdd + govFees + ddFees + migronisFee;
  const cur = p.currency === 'USD' ? '$' : '€';

  const fmt = (n) => cur + n.toLocaleString('en-US');

  return (
    <div className="glass" style={{
      padding: 28, borderRadius: 'var(--r-xl)',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
    }}>
      {/* Left: controls */}
      <div>
        <div className="eyebrow">{lang === 'ru' ? 'Калькулятор полной стоимости' : 'Full-cost calculator'}</div>
        <h3 className="display" style={{ fontSize: 28, marginTop: 8 }}>
          {lang === 'ru' ? 'Сколько это стоит на самом деле?' : 'What it actually costs'}
        </h3>

        <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <label style={{ fontSize: 12, color: 'var(--fg-muted)', marginBottom: 6, display: 'block' }}>
              {lang === 'ru' ? 'Программа' : 'Program'}
            </label>
            <div className="field">
              <select value={programId} onChange={(e) => setProgramId(e.target.value)}>
                <optgroup label={lang === 'ru' ? 'Гражданство' : 'Citizenship'}>
                  {window.MIGRONIS_DATA.citizenship.map((x) => (
                    <option key={x.id} value={x.id}>{window.cn(x, lang)}</option>
                  ))}
                </optgroup>
                <optgroup label={lang === 'ru' ? 'Резидентство' : 'Residency'}>
                  {window.MIGRONIS_DATA.residency.map((x) => (
                    <option key={x.id} value={x.id}>{window.cn(x, lang)}</option>
                  ))}
                </optgroup>
              </select>
            </div>
          </div>

          <div>
            <label style={{ fontSize: 12, color: 'var(--fg-muted)', marginBottom: 6, display: 'block' }}>
              {lang === 'ru' ? `Состав семьи: ${family} чел.` : `Family size: ${family}`}
            </label>
            <input type="range" min="1" max="8" value={family}
                   onChange={(e) => setFamily(+e.target.value)}
                   style={{ width: '100%', accentColor: 'var(--accent)' }} />
          </div>

          <div>
            <label style={{ fontSize: 12, color: 'var(--fg-muted)', marginBottom: 6, display: 'block' }}>
              {lang === 'ru' ? 'Тип инвестиции' : 'Investment type'}
            </label>
            <div className="tabs" style={{ width: '100%' }}>
              <button className={`tab ${route === 'donation' ? 'is-active' : ''}`} style={{ flex: 1 }}
                      onClick={() => setRouteOpt('donation')}>
                {lang === 'ru' ? 'Взнос (донация)' : 'Donation'}
              </button>
              <button className={`tab ${route === 'realestate' ? 'is-active' : ''}`} style={{ flex: 1 }}
                      onClick={() => setRouteOpt('realestate')}>
                {lang === 'ru' ? 'Недвижимость' : 'Real estate'}
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Right: breakdown */}
      <div style={{
        background: 'var(--bg-elev)', border: '1px solid var(--border)',
        borderRadius: 'var(--r-lg)', padding: 22,
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div style={{ fontSize: 12, color: 'var(--fg-dim)' }}>{window.cn(p, lang)}</div>
            <div className="display" style={{ fontSize: 36, color: 'var(--accent)', marginTop: 4 }}>
              {fmt(total)}
            </div>
          </div>
          <span className="chip mono">{window.termLabel(p.term, lang)}</span>
        </div>

        <div className="hr" />

        {[
          { k: lang === 'ru' ? `Инвестиция (${route === 'donation' ? 'донация' : 'недвижимость'})` : `Investment (${route === 'donation' ? 'donation' : 'real estate'})`, v: base },
          { k: lang === 'ru' ? `Доплата за семью ×${family}` : `Family premium ×${family}`, v: familyAdd },
          { k: lang === 'ru' ? 'Гос. пошлины' : 'Government fees', v: govFees },
          { k: lang === 'ru' ? 'Due diligence' : 'Due diligence', v: ddFees },
          { k: lang === 'ru' ? 'Сопровождение Migronis' : 'Migronis advisory', v: migronisFee },
        ].map((row) => (
          <div key={row.k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
            <span style={{ color: 'var(--fg-muted)' }}>{row.k}</span>
            <span className="mono">{fmt(row.v)}</span>
          </div>
        ))}

        <div className="hr" />

        <div style={{ fontSize: 12, color: 'var(--fg-dim)' }}>
          {lang === 'ru'
            ? '* Юр. сопровождение, легализация документов, перевод включены. Возврат по недвижимости – через 5–7 лет на вторичном рынке.'
            : '* Legal counsel, document legalisation and translation included. Real-estate exit on the secondary market after 5–7 years.'}
        </div>

        <button className="btn btn-primary" style={{ marginTop: 4 }}
                onClick={() => openCallback ? openCallback({ programId }) : setRoute({ name: 'apply', programId })}>
          {lang === 'ru' ? 'Обсудить с менеджером бесплатно' : 'Discuss with an advisor (free)'} →
        </button>
      </div>
    </div>
  );
}

function ToolsSection({ lang, setRoute, openAI, openQuiz, openCallback }) {
  return (
    <section id="tools" className="section" style={{ paddingTop: 56 }}>
      <div className="container-wide">
        <div style={{ marginBottom: 32 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>
            {lang === 'ru' ? '– Инструменты выбора' : '– Selection tools'}
          </div>
          <h2 className="display h-2" style={{ margin: 0, maxWidth: 720 }}>
            {lang === 'ru' ? <>Подберите программу <em>и узнайте бюджет</em></> : <>Find your program <em>and the budget</em></>}
          </h2>
          <p style={{ color: 'var(--fg-muted)', fontSize: 16, marginTop: 14, maxWidth: 600, lineHeight: 1.55 }}>
            {lang === 'ru'
              ? '20 программ, у каждой свои условия и сроки. Вот несколько инструментов, которые помогут сориентироваться в выборе. Можно начать с любого.'
              : '20 programs, each with its own terms and timelines. Here are a few tools to help you navigate the choice. Start with any of them.'}
          </p>
        </div>

        <Calculator lang={lang} setRoute={setRoute} openCallback={openCallback} />

        {/* Quick-access tools strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 16,
        }}>
          <ToolCard
            icon="◐"
            title={lang === 'ru' ? 'Квиз-визард' : 'Quiz wizard'}
            desc={lang === 'ru' ? 'Подбор программы за 60 секунд' : '60-second program matchmaker'}
            cta={lang === 'ru' ? 'Запустить' : 'Start'}
            onClick={openQuiz}
          />
          <ToolCard
            icon="◇"
            title={lang === 'ru' ? 'AI-консультант' : 'AI advisor'}
            desc={lang === 'ru' ? 'Текстовый чат · 24/7' : 'Text chat · 24/7'}
            cta={lang === 'ru' ? 'Спросить' : 'Ask'}
            onClick={() => openAI()}
          />
          <ToolCard
            icon="≡"
            title={lang === 'ru' ? 'Сравнение паспортов' : 'Passport comparison'}
            desc={lang === 'ru' ? 'Безвиз, налоги, сроки в одной таблице' : 'Visa-free, tax, terms in one table'}
            cta={lang === 'ru' ? 'Открыть' : 'Open'}
            onClick={() => setRoute({ name: 'compare' })}
          />
        </div>
      </div>
    </section>
  );
}

function ToolCard({ icon, title, desc, cta, onClick, accent }) {
  return (
    <button onClick={onClick} className="lift"
      style={{
        textAlign: 'left', padding: 22,
        background: accent ? 'var(--accent-soft)' : 'var(--bg-elev)',
        border: '1px solid', borderColor: accent ? 'var(--accent)' : 'var(--border)',
        borderRadius: 'var(--r-lg)',
        display: 'flex', flexDirection: 'column', gap: 14,
        minHeight: 160,
      }}>
      <div style={{
        width: 40, height: 40, borderRadius: 12,
        background: 'var(--bg)', display: 'grid', placeItems: 'center',
        fontFamily: 'var(--f-display)', fontSize: 22, color: 'var(--accent)',
      }}>{icon}</div>
      <div>
        <div style={{ fontWeight: 500, fontSize: 18 }}>{title}</div>
        <div style={{ color: 'var(--fg-muted)', fontSize: 13, marginTop: 4 }}>{desc}</div>
      </div>
      <div style={{ flex: 1 }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--accent)', fontSize: 13 }}>
        {cta} <span>→</span>
      </div>
    </button>
  );
}

window.ToolsSection = ToolsSection;
window.Calculator = Calculator;