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

function ServicesOverview({ navigate }) {
  const services = window.SITE_DATA.SERVICES;
  const lang = window.SITE_LANG || 'en';
  const colors = [
    { from: '#006D77', to: '#0E8B95' },
    { from: '#1B4E7A', to: '#2D6BA1' },
    { from: '#2D5F3C', to: '#3F7A4E' },
    { from: '#5B3D7A', to: '#7B5BA8' },
  ];
  return (
    <>
      <section className="subhero" data-screen-label="Services - Overview">
        <div className="container">
          <FadeIn>
            <a className="crumb" onClick={() => navigate('/')}>{t('sub.home')}</a>
            <Eyebrow>{t('sub.services.eyebrow')}</Eyebrow>
            <h1 className="display-xl">{t('sub.services.title')}</h1>
            <p className="lede">{t('sub.services.lede')}</p>
          </FadeIn>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="services-grid-pro">
            {services.map((s, i) => {
              const title = s['title_' + lang] || s.title;
              const short = s['short_' + lang] || s.short;
              const img = s['image_' + lang] || s.image;
              return (
                <FadeIn key={s.slug} delay={i * 80}>
                  <div className="service-pro-card" onClick={() => navigate('/services/' + s.slug)}>
                    <div className="service-pro-header" style={{ position: 'relative', overflow: 'hidden', minHeight: '180px' }}>
                      {img && <img src={img} alt="" loading="lazy" decoding="async" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}
                      <div className="service-pro-overlay" style={{ position: 'absolute', inset: 0, background: `linear-gradient(135deg, rgba(0,109,119,0.9), rgba(14,139,149,0.9))`, opacity: 0, transition: 'opacity 0.3s ease' }}></div>
                    </div>
                    <div className="service-pro-body" style={{ padding: '24px 32px 32px' }}>
                      <div className="service-pro-num" style={{ font: '700 12px/1 var(--font-sans)', letterSpacing: '2px', color: 'var(--color-primary)', marginBottom: '8px' }}>{s.no}</div>
                      <h3 className="service-pro-title" style={{ fontFamily: 'var(--font-serif)', fontSize: '22px', color: 'var(--color-ink)', margin: '0 0 12px' }}>{fmtAmp(title)}</h3>
                      <p>{short}</p>
                      <div className="service-pro-deliverables">
                        <h6>{t('sub.services.keyDeliverables')}</h6>
                        <ul>{(s['deliverables_' + lang] || s.deliverables).slice(0, 3).map((d, j) => <li key={j}>{d.split(' - ')[0]}</li>)}</ul>
                      </div>
                      <div className="service-pro-cta">{t('sub.services.explore')} <span>&rarr;</span></div>
                    </div>
                  </div>
                </FadeIn>
              );
            })}
          </div>
        </div>
      </section>
      <CtaDark navigate={navigate} />
    </>
  );
}

function ServiceDetail({ slug, navigate }) {
  const s = window.SITE_DATA.SERVICES.find(x => x.slug === slug);
  if (!s) return null;
  const lang = window.SITE_LANG || 'en';
  const others = window.SITE_DATA.SERVICES.filter(x => x.slug !== slug);
  const title = s['title_' + lang] || s.title;
  const hero = s['hero_' + lang] || s.hero;
  const lede = s['lede_' + lang] || s.lede;
  const deliverables = s['deliverables_' + lang] || s.deliverables;
  const examples = s['examples_' + lang] || s.examples;
  const L = {
    crumb: lang === 'ru' ? '← Услуги' : '← Services',
    serviceLabel: lang === 'ru' ? 'Услуга' : 'Service',
    about: lang === 'ru' ? 'Об этой услуге' : 'About this service',
    lead: lang === 'ru' ? 'Руководитель практики' : 'Practice lead',
    leadVal: lang === 'ru' ? 'Уровень партнёра' : 'Partner-level',
    length: lang === 'ru' ? 'Длительность' : 'Engagement length',
    lengthVal: lang === 'ru' ? '4 недели - 24 месяца' : '4 weeks - 24 months',
    form: lang === 'ru' ? 'Формат' : 'Standard form',
    formVal: lang === 'ru' ? 'Мандатное письмо + NDA' : 'Mandate letter + NDA',
    deliver: lang === 'ru' ? 'Что мы предоставляем' : 'What we deliver',
    examples: lang === 'ru' ? 'Примеры проектов' : 'Engagement examples',
    other: lang === 'ru' ? 'Другие услуги' : 'Other services',
    ctaHead: lang === 'ru' ? 'Начните с одного мандата.' : 'Start with a single mandate.',
    ctaBody: lang === 'ru'
      ? 'Привлеките Bilermen для проекта в рамках "' + title.toLowerCase() + '". Мы ответим в течение двух рабочих дней.'
      : 'Engage Bilermen on a defined ' + s.title.toLowerCase() + ' scope. We will respond within two business days.',
  };
  return (
    <>
      <section className="subhero" data-screen-label={'Service - ' + title} style={{ position: 'relative', overflow: 'hidden', color: 'var(--color-on-dark)' }}>
        {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('/services')}>{L.crumb}</a>
            <Eyebrow onDark>{s.no} · {L.serviceLabel}</Eyebrow>
            <h1 className="display-xl" style={{ color: '#fff' }}>{fmtAmp(title)}</h1>
            <p className="lede" style={{ color: 'var(--color-on-dark-soft)' }}>{hero}</p>
          </FadeIn>
        </div>
      </section>
      <section>
        <div className="container">
          <div className="detail-body">
            <div className="sidebar">
              <h6>{L.about}</h6>
              <div className="meta">
                <div><small>{L.lead}</small><strong>{L.leadVal}</strong></div>
                <div><small>{L.length}</small><strong>{L.lengthVal}</strong></div>
                <div><small>{L.form}</small><strong>{L.formVal}</strong></div>
              </div>
            </div>
            <div>
              <FadeIn>
                <p className="lede-serif">{lede}</p>
              </FadeIn>
              <FadeIn>
                <h2>{L.deliver}</h2>
                <ul className="editorial">
                  {deliverables.map((d, i) => <li key={i}>{d}</li>)}
                </ul>
              </FadeIn>
              {examples && examples.length > 0 && (
              <FadeIn>
                <h2>{L.examples}</h2>
                {examples.map((e, i) => (
                  <p key={i}><strong style={{ color: 'var(--color-ink)' }}>{e.client}.</strong> {e.work}</p>
                ))}
              </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 => (
                      <a key={o.slug} className="text-link" onClick={() => navigate('/services/' + o.slug)}>{o['title_' + lang] || o.title} <span>→</span></a>
                    ))}
                  </div>
                </div>
              </FadeIn>
            </div>
          </div>
        </div>
      </section>
      <CtaDark navigate={navigate} heading={L.ctaHead} body={L.ctaBody} />
    </>
  );
}

window.ServicesOverview = ServicesOverview;
window.ServiceDetail = ServiceDetail;