/* Bilermen site - About + 5 advantage sub-pages */

function AboutScreen({ navigate }) {
  const advantages = window.SITE_DATA.ADVANTAGES;
  const lang = window.SITE_LANG || 'en';
  const L = {
    home: lang === 'ru' ? '← Главная' : '← Home',
    whoWe: lang === 'ru' ? 'Кто мы' : 'Who we are',
    headline: lang === 'ru'
      ? 'Создано для клиентов, рассматривающих Туркменистан как стратегический рынок.'
      : 'Built for clients who treat Turkmenistan as a strategic market.',
    lede: lang === 'ru'
      ? 'Bilermen Hyzmatdashlar LLP - партнёрская консалтинговая фирма со штаб-квартирой в Ашхабаде, командой руководителей-граждан Туркменистана и международным портфелем клиентов.'
      : 'Bilermen Hyzmatdashlar LLP is a partner-led advisory firm based in Ashgabat, with a Turkmen-national leadership team and an international client roster.',
    fiveAdvEyebrow: lang === 'ru' ? 'Пять преимуществ' : 'Five advantages',
    fiveAdvTitle: lang === 'ru' ? 'Почему клиенты работают с нами.' : 'Why clients work with us.',
    fiveAdvDesc: lang === 'ru'
      ? 'Причины, по которым клиенты выбирают нас для долгосрочной работы на сложном рынке.'
      : 'The reasons clients choose us for demanding, long-term work in a complex market.',
    learnMore: lang === 'ru' ? 'Подробнее' : 'Learn more',
    whyLocalEyebrow: lang === 'ru' ? 'Зачем локальный партнёр' : 'Why a local partner',
    whyLocalTitle: lang === 'ru'
      ? 'Дистанция - это цена ошибки в Туркменистане.'
      : 'Distance is the cost of getting Turkmenistan wrong.',
    whyLocalP1: lang === 'ru'
      ? 'Выход на туркменский рынок требует глубокого понимания местного регулирования, институционального доступа и строгого соблюдения требований. Отраслевые процессы во многом строятся на прямых отношениях и личном взаимодействии. Это рабочая среда, в которой ориентируется местный партнёр.'
      : 'Entering the Turkmen market requires strong regulatory knowledge, institutional access, and strict compliance. Many processes rely on direct relationships and personal engagement. This is the operating environment a local partner is built to navigate.',
    whyLocalP2: lang === 'ru'
      ? 'Местный партнёр, который понимает эти условия изнутри, помогает иностранной компании избежать дорогостоящих ошибок и действовать уверенно с первого шага.'
      : 'A local partner who understands these conditions from the inside helps a foreign company avoid costly mistakes and act with confidence from the very first step.',
    whyLocalP3: lang === 'ru'
      ? 'Bilermen - этот партнёр. Мы сочетаем глубокую локальную экспертизу, международные стандарты соответствия и многоязычную команду, чтобы ваш выход на рынок был предсказуемым и управляемым.'
      : 'Bilermen is that partner. We combine deep local expertise, international compliance standards, and a multilingual team to make your market entry predictable and manageable.',
    trackEyebrow: lang === 'ru' ? 'Опыт' : 'Track record',
    trackTitle: lang === 'ru' ? 'Компании, которые нам доверяли.' : 'Companies that have trusted us.',
    trackDesc: lang === 'ru'
      ? 'Большинство наших проектов конфиденциальны. Компании ниже указаны с согласия клиентов.'
      : 'Most of our engagements are confidential. The companies below are shown with client consent.',
    trustedWorldwide: lang === 'ru' ? 'Нам доверяют по всему миру' : 'Trusted Worldwide',
    partnersClients: lang === 'ru' ? 'Партнёры и Клиенты' : 'Partners and Clients',
  };
  return (
    <>
      <section className="subhero" data-screen-label="About - Overview">
        <div className="container">
          <FadeIn>
            <a className="crumb" onClick={() => navigate('/')}>{L.home}</a>
            <Eyebrow>{L.whoWe}</Eyebrow>
            <h1 className="display-xl">{L.headline}</h1>
            <p className="lede">{L.lede}</p>
          </FadeIn>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <FadeIn>
            <div className="section-title">
              <Eyebrow>{L.fiveAdvEyebrow}</Eyebrow>
              <h2 className="display-lg">{L.fiveAdvTitle}</h2>
              <p>{L.fiveAdvDesc}</p>
            </div>
          </FadeIn>
          <div className="advantages-grid">
            {advantages.map((a, i) => {
              const title = a['title_' + lang] || a.title;
              const short = a['short_' + lang] || a.short;
              return (
                <FadeIn key={a.slug} delay={i * 60}>
                  <div className="advantage-card" onClick={() => navigate('/about/' + a.slug)}>
                    <div className="advantage-art" style={{ background: '#f5f4ef' }}>
                      <img src={a['image_' + lang] || a.image} alt={title} loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                    </div>
                    <div className="body">
                      <div className="no">{a.no}</div>
                      <h3>{fmtAmp(title)}</h3>
                      <p>{short}</p>
                      <span className="more">{L.learnMore} <span>→</span></span>
                    </div>
                  </div>
                </FadeIn>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section section-soft">
        <div className="container">
          <FadeIn>
            <div className="about-why">
              <div>
                <Eyebrow>{L.whyLocalEyebrow}</Eyebrow>
                <h2 className="display-lg">{L.whyLocalTitle}</h2>
              </div>
              <div>
                <p>{L.whyLocalP1}</p>
                <p>{L.whyLocalP2}</p>
                <p>{L.whyLocalP3}</p>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      <section className="section-dark" style={{ padding: '96px 0', background: '#02383b' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <FadeIn>
            <Eyebrow onDark>{lang === 'ru' ? 'В цифрах' : 'By the numbers'}</Eyebrow>
            <h2 className="display-lg" style={{ color: 'var(--color-on-dark)', maxWidth: 720, margin: '0 auto 56px' }}>
              {lang === 'ru' ? 'Наш фокус - и рынок, на котором мы работаем.' : 'Our focus - and the market we work in.'}
            </h2>
          </FadeIn>
          <div className="stats-grid">
            {[
              { num: '4', lbl: lang === 'ru' ? 'интегрированные услуги' : 'integrated services' },
              { num: '4', lbl: lang === 'ru' ? 'приоритетных сектора' : 'priority sectors' },
              { num: lang === 'ru' ? '4-е' : '4th', lbl: lang === 'ru' ? 'место в мире по запасам природного газа' : 'globally by natural-gas reserves' },
              { num: '5', lbl: lang === 'ru' ? 'стандартов международных партнёров по развитию' : 'international development-partner standards' },
            ].map((s, i) => (
              <FadeIn key={i} delay={i * 100}>
                <div style={{ padding: '0 16px' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1, letterSpacing: '-1.5px', color: 'var(--color-primary-soft)', marginBottom: 14 }}>{s.num}</div>
                  <div style={{ font: '400 14px/1.55 var(--font-sans)', color: 'var(--color-on-dark-soft)', maxWidth: 200, margin: '0 auto' }}>{s.lbl}</div>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <FadeIn>
            <div className="section-title">
              <Eyebrow>{L.trackEyebrow}</Eyebrow>
              <h2 className="display-lg">{L.trackTitle}</h2>
              <p>{L.trackDesc}</p>
            </div>
          </FadeIn>
        </div>
        <LogoCarousel
          eyebrow={L.trustedWorldwide}
          heading={L.partnersClients}
          subtitle="" />
      </section>

      <CtaDark navigate={navigate} />
    </>
  );
}

function AdvantageDetail({ slug, navigate }) {
  const a = window.SITE_DATA.ADVANTAGES.find(x => x.slug === slug);
  if (!a) return null;
  const lang = window.SITE_LANG || 'en';
  const others = window.SITE_DATA.ADVANTAGES.filter(x => x.slug !== slug);
  const title = a['title_' + lang] || a.title;
  const short = a['short_' + lang] || a.short;
  const deep = a['deep_' + lang] || a.deep;
  const L = {
    crumb: lang === 'ru' ? '← О нас' : '← About',
    label: lang === 'ru' ? 'Преимущество' : 'Advantage',
    ref: lang === 'ru' ? 'Номер' : 'Reference no.',
    refOf: lang === 'ru' ? ' из 05' : ' of 05',
    updated: lang === 'ru' ? 'Обновлено' : 'Updated',
    updatedVal: lang === 'ru' ? 'Апрель 2026' : 'April 2026',
    other4: lang === 'ru' ? 'Остальные четыре преимущества' : 'The other four advantages',
  };
  return (
    <>
      <section className="subhero" data-screen-label={'About - ' + title} style={{ position: 'relative', overflow: 'hidden', color: 'var(--color-on-dark)' }}>
        {a.image && <img src={a['image_' + lang] || a.image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(6,52,58,0.86) 0%, rgba(10,31,38,0.50) 55%, rgba(0,109,119,0.30) 100%)' }}></div>
        <div className="container" style={{ position: 'relative', zIndex: 1 }}>
          <FadeIn>
            <a className="crumb" style={{ color: 'var(--color-on-dark-soft)' }} onClick={() => navigate('/about')}>{L.crumb}</a>
            <Eyebrow onDark>{a.no} · {L.label}</Eyebrow>
            <h1 className="display-xl" style={{ color: '#fff' }}>{fmtAmp(title)}</h1>
            <p className="lede" style={{ color: 'var(--color-on-dark-soft)' }}>{short}</p>
          </FadeIn>
        </div>
      </section>
      <section>
        <div className="container">
          <div className="detail-body">
            <div className="sidebar">
              <h6>{L.label}</h6>
              <div className="meta">
                <div><small>{L.ref}</small><strong>{a.no}{L.refOf}</strong></div>
                <div><small>{L.updated}</small><strong>{L.updatedVal}</strong></div>
              </div>
            </div>
            <div>
              <FadeIn>
                <p className="lede-serif">{short}</p>
                <p>{deep}</p>
              </FadeIn>
              <FadeIn>
                <div style={{ marginTop: 48, paddingTop: 32, borderTop: '1px solid var(--color-hairline)' }}>
                  <Eyebrow>{L.other4}</Eyebrow>
                  <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 8 }}>
                    {others.map(o => (
                      <a key={o.slug} className="text-link" onClick={() => navigate('/about/' + o.slug)}>{o['title_' + lang] || o.title} <span>→</span></a>
                    ))}
                  </div>
                </div>
              </FadeIn>
            </div>
          </div>
        </div>
      </section>
      <CtaDark navigate={navigate} />
    </>
  );
}

window.AboutScreen = AboutScreen;
window.AdvantageDetail = AdvantageDetail;