const { SectionHead, ServiceCard, Icon } = window.CoolZoneSolutionDesignSystem_12e696;
const SVC_ICONS = ['snow', 'pump', 'service', 'diag', 'water', 'modern'];
// The 2nd image reuses the gallery's brand-free heat pump shot — every
// other clean candidate found for this card showed a competitor logo.
const SVC_IMAGES = ['assets/services/ac-service.jpg', 'assets/projects/heat-pump-unit.jpg'];

function Services({ t, images }) {
  const { ov } = React.useContext(AdminEditContext);
  return (
    <section className="section" id="uslugi">
      <div className="container">
        <SectionHead
          tag={<EditableText fieldKey="svcTag">{t.svcTag}</EditableText>}
          title={<EditableText fieldKey="svcH2">{t.svcH2}</EditableText>}
          body={<EditableText fieldKey="svcP" multiline>{t.svcP}</EditableText>}
        />
        <div className="services">
          {t.svc.map((s, i) => i < 2 ? (
            <article key={i} className="svc svc-feature svc-photo" style={{ gridColumn: 'span 2' }}>
              <span className={'svc-badge' + (i === 1 ? ' orange' : '')}>{t.svcBadge}</span>
              <div className="svc-card-media">
                <img src={(images && images['svc_' + (i + 1)]) || SVC_IMAGES[i]} alt="" loading="lazy" />
                <ImageEditPencil slot={'svc_' + (i + 1)} label={'Karte ' + (i + 1)} />
              </div>
              <div className="svc-card-body">
                <div className={'svc-icon' + (i === 1 ? ' orange' : '')}><Icon name={SVC_ICONS[i]} /></div>
                <h3><EditableText fieldKey={'svc_' + i + '_title'}>{ov('svc_' + i + '_title', s[0])}</EditableText></h3>
                <p><EditableText fieldKey={'svc_' + i + '_desc'} multiline>{ov('svc_' + i + '_desc', s[1])}</EditableText></p>
                {s[2] && s[2].length ? (
                  <ul className={'svc-list' + (i === 1 ? ' accent' : '')}>
                    {s[2].map((x, j) => <li key={j}><Icon name="check" /><span>{x}</span></li>)}
                  </ul>
                ) : null}
                <a className={'svc-link' + (i === 1 ? ' accent' : '')} href="#kontakt"><span>{t.svcLink}</span><Icon name="arrow" /></a>
              </div>
            </article>
          ) : (
            <ServiceCard
              key={i}
              icon={SVC_ICONS[i]}
              title={<EditableText fieldKey={'svc_' + i + '_title'}>{ov('svc_' + i + '_title', s[0])}</EditableText>}
              description={<EditableText fieldKey={'svc_' + i + '_desc'} multiline>{ov('svc_' + i + '_desc', s[1])}</EditableText>}
              items={s[2]}
              style={{ gridColumn: 'span 2' }}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Services });