/* Bilermen site - Sectors overview + 4 detail pages */

function SectorsOverview({ navigate }) {
  const sectors = window.SITE_DATA.SECTORS;
  const lang = window.SITE_LANG || 'en';
  return (
    <>
      <section className="subhero" data-screen-label="Sectors - Overview">
        <div className="container">
          <FadeIn>
            <a className="crumb" onClick={() => navigate('/')}>{t('sub.home')}</a>
            <Eyebrow>{t('sub.sectors.eyebrow')}</Eyebrow>
            <h1 className="display-xl">{t('sub.sectors.title')}</h1>
            <p className="lede">{t('sub.sectors.lede')}</p>
          </FadeIn>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="sector-grid">
            {sectors.map((s, i) => {
              const title = s['title_' + lang] || s.title;
              const tag = s['tag_' + lang] || s.tag;
              const short = s['short_' + lang] || s.short;
              return (
                <FadeIn key={s.slug} delay={i * 70}>
                  <div className="sector-card" onClick={() => navigate('/sectors/' + s.slug)}>
                    <SectorPhotoArt slug={s.slug} />
                    <div className="body">
                      <small>{tag}</small>
                      <h4>{fmtAmp(title)}</h4>
                      <p style={{ font: '400 14px/1.55 var(--font-sans)', color: 'var(--color-body)', margin: '12px 0 16px' }}>{short}</p>
                      <span className="text-link" style={{ fontSize: 13 }}>{t('sub.services.explore')} <span>→</span></span>
                    </div>
                  </div>
                </FadeIn>
              );
            })}
          </div>
        </div>
      </section>
      <CtaDark navigate={navigate} />
    </>
  );
}

function SectorDetail({ slug, navigate }) {
  const s = window.SITE_DATA.SECTORS.find(x => x.slug === slug);
  if (!s) return null;
  const lang = window.SITE_LANG || 'en';
  const others = window.SITE_DATA.SECTORS.filter(x => x.slug !== slug);
  const title = s['title_' + lang] || s.title;
  const tag = s['tag_' + lang] || s.tag;
  const short = s['short_' + lang] || s.short;
  const opportunity = s['opportunity_' + lang] || s.opportunity;
  const valueAdd = s['valueAdd_' + lang] || s.valueAdd;
  const L = {
    crumb: lang === 'ru' ? '← Сектора' : '← Sectors',
    brief: lang === 'ru' ? 'О секторе' : 'Sector brief',
    focus: lang === 'ru' ? 'Фокус' : 'Focus',
    focusVal: lang === 'ru' ? 'Выход на рынок и операции' : 'Market entry & operations',
    lead: lang === 'ru' ? 'Руководитель практики' : 'Practice lead',
    leadVal: lang === 'ru' ? 'Уровень партнёра' : 'Partner-level',
    standards: lang === 'ru' ? 'Стандарты' : 'Standards',
    standardsVal: lang === 'ru' ? 'Международное соответствие' : 'International compliance',
    opportunity: lang === 'ru' ? 'Возможности' : 'The opportunity',
    valueAdd: lang === 'ru' ? 'Как Bilermen добавляет ценность' : 'How Bilermen adds value',
    other: lang === 'ru' ? 'Другие сектора' : 'Other sectors',
    ctaHead: lang === 'ru'
      ? 'Обсудите мандат в секторе "' + title.split(' и')[0].toLowerCase() + '".'
      : 'Discuss a ' + s.title.split(' &')[0].toLowerCase() + ' mandate.',
    ctaBody: lang === 'ru'
      ? 'Большинство отраслевых проектов начинается с конфиденциального брифинга. Мы обозначим путь вперёд уже на первом созвоне.'
      : 'Most sector engagements begin with a confidential briefing. We will scope a path forward in our first call.',
    seeServices: lang === 'ru' ? 'Наши услуги' : 'See our services',
  };
  return (
    <>
      <section className="subhero-dark" data-screen-label={'Sector - ' + title} style={{ position: 'relative', overflow: 'hidden' }}>
        {s.image && <img src={s['image_' + lang] || s.image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, #02383b, rgba(2,56,59,0.85))' }}></div>
        <div className="container" style={{ position: 'relative', zIndex: 1 }}>
          <FadeIn>
            <a className="crumb" style={{ color: 'var(--color-on-dark-soft)' }} onClick={() => navigate('/sectors')}>{L.crumb}</a>
            <Eyebrow onDark>{tag}</Eyebrow>
            <h1 className="display-xl" style={{ color: '#fff' }}>{fmtAmp(title)}</h1>
            <p className="lede" style={{ color: 'var(--color-on-dark-soft)' }}>{short}</p>
          </FadeIn>
          {s.stats && s.stats.length > 0 && (
          <FadeIn delay={160}>
            <div className="sector-stats">
              {s.stats.map((st, i) => (
                <div key={i} className="stat">
                  <div className="num">{(lang === 'ru' && st.num_ru) ? st.num_ru : st.num}</div>
                  <div className="lbl">{st['lbl_' + lang] || st.lbl}</div>
                </div>
              ))}
            </div>
          </FadeIn>
          )}
        </div>
      </section>
      <section>
        <div className="container">
          <div className="detail-body">
            <div className="sidebar">
              <h6>{L.brief}</h6>
              <div className="meta">
                <div><small>{L.focus}</small><strong>{L.focusVal}</strong></div>
                <div><small>{L.lead}</small><strong>{L.leadVal}</strong></div>
                <div><small>{L.standards}</small><strong>{L.standardsVal}</strong></div>
              </div>
            </div>
            <div>
              <FadeIn>
                <h2>{L.opportunity}</h2>
                <p>{opportunity}</p>
              </FadeIn>
              <FadeIn>
                <h2>{L.valueAdd}</h2>
                <ul className="editorial">
                  {valueAdd.map((v, i) => <li key={i}>{v}</li>)}
                </ul>
              </FadeIn>
              <FadeIn>
                <div style={{ marginTop: 48, paddingTop: 32, borderTop: '1px solid var(--color-hairline)' }}>
                  <Eyebrow>{L.other}</Eyebrow>
                  <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 8 }}>
                    {others.map(o => {
                      const otherTitle = o['title_' + lang] || o.title;
                      return (
                        <a key={o.slug} className="text-link" onClick={() => navigate('/sectors/' + o.slug)}>{otherTitle.split(lang === 'ru' ? ' и' : ' &')[0]} <span>→</span></a>
                      );
                    })}
                  </div>
                </div>
              </FadeIn>
            </div>
          </div>
        </div>
      </section>
      <CtaDark navigate={navigate}
        heading={L.ctaHead}
        body={L.ctaBody}
        secondary={L.seeServices} secondaryTo="/services" />
    </>
  );
}

window.SectorsOverview = SectorsOverview;
window.SectorDetail = SectorDetail;