// Trust section + FAQ + Footer + How-it-works

function HowItWorks({ lang }) {
  const STEPS = lang === 'ru' ? [
    { n: '01', title: 'Бесплатная консультация', desc: 'Разбираем цели, бюджет, состав семьи. 30 минут.' },
    { n: '02', title: 'Due diligence pre-check', desc: 'Проверяем кейс на соответствие требованиям – до того, как вы потратитесь на госпошлины.' },
    { n: '03', title: 'Сбор и подача документов', desc: 'Легализация, переводы, апостили – берём на себя всё.' },
    { n: '04', title: 'Инвестиции и финансы', desc: 'Помогаем выбрать фонд или приобрести объект недвижимости. Открываем счёт и консультируем по налогам.' },
    { n: '05', title: 'Паспорт / ВНЖ / ПМЖ', desc: 'Организуем сдачу биометрии. Получаем документ и доставляем вам.' },
  ] : [
    { n: '01', title: 'Free consultation', desc: 'We map goals, budget and family. 30 minutes.' },
    { n: '02', title: 'Due diligence pre-check', desc: 'We pre-vet your case before you spend a cent on government fees.' },
    { n: '03', title: 'Document collection & filing', desc: 'Legalisation, translation, apostilles – we handle all of it.' },
    { n: '04', title: 'Investment & finance', desc: 'We help pick a fund or property. Open the bank account, advise on tax.' },
    { n: '05', title: 'Passport / Residency / PR', desc: 'We arrange biometrics, collect the document and deliver it to you.' },
  ];

  return (
    <section className="section" style={{ paddingTop: 64 }}>
      <div className="container-wide">
        <div style={{ marginBottom: 36 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>
            {lang === 'ru' ? '– Как мы работаем' : '– How we work'}
          </div>
          <h2 className="display h-2" style={{ margin: 0, maxWidth: 720 }}>
            {lang === 'ru' ? <>Пять <em>шагов</em><br/>Один менеджер</> : <>Five <em>steps</em><br/>One advisor</>}
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
          gap: 0,
          border: '1px solid var(--border)', borderRadius: 'var(--r-lg)',
          overflow: 'hidden',
        }}
        className="how-grid"
        >
          {STEPS.map((s, i) => (
            <div key={s.n} style={{
              padding: 24,
              borderRight: i < STEPS.length - 1 ? '1px solid var(--border)' : 'none',
              background: 'var(--bg-elev)',
              position: 'relative',
              minHeight: 220,
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{s.n}</div>
                <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
                {i < STEPS.length - 1 && (
                  <div style={{ color: 'var(--fg-dim)', fontSize: 11 }}>→</div>
                )}
              </div>
              <div style={{ fontWeight: 500, fontSize: 16, marginBottom: 8 }}>{s.title}</div>
              <div style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.55, flex: 1 }}>{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TrustSection({ lang }) {
  const LOGOS = window.MIGRONIS_DATA.press;
  const TESTIMONIALS = window.MIGRONIS_DATA.testimonials;
  const AWARDS = window.MIGRONIS_DATA.awards;

  return (
    <section className="section" style={{ paddingTop: 72, paddingBottom: 56 }}>
      <div className="container-wide">
        <div style={{ marginBottom: 28 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>
            {lang === 'ru' ? '– Что говорят клиенты' : '– What clients say'}
          </div>
          <h2 className="display h-2" style={{ margin: 0, maxWidth: 720 }}>
            {lang === 'ru' ? <>Отзывы наших <em>клиентов</em></> : <>What our <em>clients</em> say</>}
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="lift" style={{
              padding: 26, background: 'var(--bg-elev)',
              border: '1px solid var(--border)', borderRadius: 'var(--r-lg)',
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              <div style={{ fontFamily: 'var(--f-display)', fontSize: 32, color: 'var(--accent)', lineHeight: 0.6 }}>"</div>
              <div style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--fg)', flex: 1 }}>
                {t.quote[lang]}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div className="img-ph" style={{ width: 40, height: 40, borderRadius: 999 }} />
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{t.who}</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{t.role[lang]}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Awards row */}
        <div style={{
          marginTop: 32, padding: 22, background: 'var(--bg-elev)',
          border: '1px solid var(--border)', borderRadius: 'var(--r-lg)',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {AWARDS.map((a, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start',
                borderLeft: i > 0 ? '1px solid var(--border)' : 'none', paddingLeft: i > 0 ? 24 : 0 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 999, flexShrink: 0,
                background: 'var(--accent-soft)', color: 'var(--accent)',
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--f-display)', fontSize: 18, fontStyle: 'italic',
              }}>★</div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500, lineHeight: 1.4 }}>{a.title}</div>
                <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 4 }}>{a.by}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Press marquee */}
        <div style={{ marginTop: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 18, textAlign: 'center' }}>
            {lang === 'ru' ? 'Упоминания в прессе' : 'Featured in'}
          </div>
          <div style={{ overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)' }}>
            <div style={{
              display: 'flex', gap: 48, animation: 'marquee 32s linear infinite', width: 'max-content',
            }}>
              {[...LOGOS, ...LOGOS].map((l, i) => (
                <div key={i} style={{
                  fontFamily: 'var(--f-display)', fontSize: 28, color: 'var(--fg-muted)', opacity: .7,
                  whiteSpace: 'nowrap',
                }}>{l}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FaqSection({ lang }) {
  const [open, setOpen] = React.useState(0);
  const items = window.MIGRONIS_DATA.faq;

  return (
    <section className="section" style={{ paddingTop: 56 }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>
              {lang === 'ru' ? '– Частые вопросы' : '– FAQ'}
            </div>
            <h2 className="display h-2" style={{ margin: 0 }}>
              {lang === 'ru' ? <>Шесть вопросов,<br/>которые <em>задают</em><br/>чаще всего</> : <>The six questions<br/>asked most <em>often</em></>}
            </h2>
            <p style={{ color: 'var(--fg-muted)', marginTop: 22, maxWidth: 360 }}>
              {lang === 'ru'
                ? 'Не нашли ответа? Спросите AI-консультанта или забронируйте звонок.'
                : "Did not find the answer? Ask the AI advisor or book a call."}
            </p>
          </div>

          <div style={{ borderTop: '1px solid var(--border)' }}>
            {items.map((it, i) => (
              <div key={i} style={{ borderBottom: '1px solid var(--border)' }}>
                <button
                  onClick={() => setOpen(open === i ? -1 : i)}
                  style={{
                    width: '100%', textAlign: 'left', padding: '22px 0',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                    color: 'var(--fg)',
                  }}>
                  <span style={{ fontSize: 17, fontWeight: 500 }}>{it.q[lang]}</span>
                  <span style={{
                    width: 28, height: 28, borderRadius: 999, border: '1px solid var(--border-strong)',
                    display: 'grid', placeItems: 'center', color: 'var(--accent)',
                    transition: 'transform .3s var(--ease-out)',
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    flexShrink: 0,
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: open === i ? 200 : 0, overflow: 'hidden',
                  transition: 'max-height .4s var(--ease-out)',
                }}>
                  <div style={{ paddingBottom: 22, color: 'var(--fg-muted)', fontSize: 15, lineHeight: 1.6, maxWidth: 640 }}>
                    {it.a[lang]}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ lang, setRoute }) {
  const offices = window.MIGRONIS_DATA.offices;
  const navCols = [
    {
      title: lang === 'ru' ? 'Программы' : 'Programs',
      links: [
        { l: lang === 'ru' ? 'Все 20'      : 'All 20',       to: { name: 'home', scrollTo: 'citizenship' } },
        { l: lang === 'ru' ? 'Гражданство' : 'Citizenship', to: { name: 'citizenship' } },
        { l: lang === 'ru' ? 'Резидентство': 'Residency',   to: { name: 'residency' } },
        { l: lang === 'ru' ? 'Переезд'     : 'Relocation',  to: { name: 'relocate' } },
        { l: lang === 'ru' ? 'Инвестиции'  : 'Investments', to: { name: 'invest' } },
        { l: lang === 'ru' ? 'Сравнить'    : 'Compare',     to: { name: 'compare' } },
      ],
    },
    {
      title: lang === 'ru' ? 'Инструменты' : 'Tools',
      links: [
        { l: lang === 'ru' ? 'Калькулятор' : 'Calculator',     to: { name: 'home', scrollTo: 'tools' } },
        { l: lang === 'ru' ? 'AI-консультант' : 'AI advisor',  to: { name: 'home', scrollTo: 'tools' } },
        { l: lang === 'ru' ? 'Квиз' : 'Quiz',                 to: { name: 'home', scrollTo: 'tools' } },
        { l: lang === 'ru' ? 'Личный кабинет' : 'Dashboard',  to: { name: 'dashboard' } },
      ],
    },
    {
      title: lang === 'ru' ? 'Компания' : 'Company',
      links: [
        { l: lang === 'ru' ? 'О компании' : 'About',        to: { name: 'about' } },
        { l: lang === 'ru' ? 'Команда' : 'Team',            to: { name: 'about' } },
        { l: lang === 'ru' ? 'Блог' : 'Blog',                to: { name: 'about' } },
        { l: lang === 'ru' ? 'Связаться' : 'Contact',        to: { name: 'apply' } },
      ],
    },
  ];

  return (
    <footer style={{ background: 'var(--bg-elev-2)', borderTop: '1px solid var(--border-strong)', marginTop: 56 }}>
      <div className="container-wide" style={{ padding: '64px 32px 28px' }}>
        {/* Row 1 – brand + nav columns. Brand sits on a column flex, nav columns flex bottom-anchored so last link aligns with brand chips. */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40, alignItems: 'stretch' }}>
          {/* Brand */}
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: 18 }}>
              <window.MigronisLogo height={30} color="var(--fg)" />
            </div>
            <p style={{ color: 'var(--fg-muted)', fontSize: 14, maxWidth: 360, lineHeight: 1.6, margin: 0 }}>
              {lang === 'ru'
                ? 'Licensed citizenship & residency agent. С 2012 года провели 2,400+ семей через программы инвестиционной иммиграции в 20+ странах мира.'
                : 'Licensed citizenship & residency agent. Since 2012 we have guided 2,400+ families through investment migration programs in 20+ countries.'}
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 'auto', paddingTop: 22, flexWrap: 'wrap' }}>
              <span className="chip mono">Global Law Experts 2021</span>
              <span className="chip mono">UGLOBAL TOP-25</span>
            </div>
          </div>

          {navCols.map((col, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column' }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{col.title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {col.links.map((lk) => (
                  <a key={lk.l} href="#"
                     onClick={(e) => { e.preventDefault(); setRoute(lk.to); }}
                     style={{ color: 'var(--fg-muted)', fontSize: 14 }}
                     onMouseEnter={(e) => e.currentTarget.style.color = 'var(--fg)'}
                     onMouseLeave={(e) => e.currentTarget.style.color = 'var(--fg-muted)'}>
                    {lk.l}
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Row 2 – offices, full width */}
        <div style={{ marginTop: 56, paddingTop: 32, borderTop: '1px solid var(--border)' }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            {lang === 'ru' ? 'Офисы' : 'Offices'}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${offices.length}, 1fr)`, gap: 32 }}>
            {offices.map((o) => (
              <div key={o.city}>
                <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>{o.city}</div>
                <div style={{ color: 'var(--fg-muted)', fontSize: 13, lineHeight: 1.5 }}>{o.addr}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Row 3 – legal strip */}
        <div style={{
          marginTop: 40, paddingTop: 20, borderTop: '1px solid var(--border)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap',
          gap: 16, fontSize: 12, color: 'var(--fg-dim)',
        }}>
          <div>© 2012–2026 Migronis Citizenship · {lang === 'ru' ? 'Все права защищены' : 'All rights reserved'}</div>
          <div style={{ display: 'flex', gap: 28 }}>
            <a href="#" style={{ color: 'inherit' }}>Privacy Policy</a>
            <a href="#" style={{ color: 'inherit' }}>Terms and Conditions</a>
            <a href="#" style={{ color: 'inherit' }}>Terms of Use</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.HowItWorks = HowItWorks;
window.TrustSection = TrustSection;
window.FaqSection = FaqSection;
window.Footer = Footer;