const { SectionHead, BenefitPill, Icon, Button, MicroCta } = window.CoolZoneSolutionDesignSystem_12e696;
const AUD_IMAGES = ['assets/audience/private-home.jpg', 'assets/audience/business-office.jpg'];

function Audience({ t, images }) {
  const { ov } = React.useContext(AdminEditContext);
  return (
    <section className="section section-alt" id="dla-kogo">
      <div className="container">
        <SectionHead
          tag={<EditableText fieldKey="audTag">{t.audTag}</EditableText>}
          title={<EditableText fieldKey="audH2">{t.audH2}</EditableText>}
          body={<EditableText fieldKey="audP" multiline>{t.audP}</EditableText>}
        />
        <div className="audience">
          {t.aud.map((a, i) => (
            <article key={i} className={'aud-card aud-card-photo' + (i === 1 ? ' aud-card-dark' : '')}>
              <div className="aud-card-media">
                <img src={(images && images['aud_' + (i + 1)]) || AUD_IMAGES[i]} alt="" loading="lazy" />
                <ImageEditPencil slot={'aud_' + (i + 1)} label={a[0]} />
              </div>
              <div className="aud-card-body">
                <div className="aud-top">
                  <div className="aud-icon"><Icon name={i === 0 ? 'home' : 'office'} /></div>
                  <div>
                    <h3><EditableText fieldKey={'aud_' + i + '_title'}>{ov('aud_' + i + '_title', a[0])}</EditableText></h3>
                    <p className="aud-sub"><EditableText fieldKey={'aud_' + i + '_sub'}>{ov('aud_' + i + '_sub', a[1])}</EditableText></p>
                  </div>
                </div>
                <p><EditableText fieldKey={'aud_' + i + '_desc'} multiline>{ov('aud_' + i + '_desc', a[2])}</EditableText></p>
                {a[3] && a[3].length ? (
                  <ul className="ticks">
                    {a[3].map((x, j) => <li key={j}><Icon name="check" />{x}</li>)}
                  </ul>
                ) : null}
              </div>
            </article>
          ))}
        </div>
        <div className="benefit-strip">
          {t.ben.map((b, i) => (
            <BenefitPill key={i} accent={i % 2 === 1} icon={['snow', 'bolt', 'sparkle', 'leaf', 'modern'][i]}>{b}</BenefitPill>
          ))}
        </div>
        <MicroCta text={t.mAudience} link={t.lProcess} href="#proces" />
      </div>
    </section>
  );
}

function ProblemResult({ t }) {
  return (
    <section className="section" id="problem">
      <div className="container">
        <SectionHead
          tag={<EditableText fieldKey="probTag">{t.probTag}</EditableText>}
          title={<EditableText fieldKey="probH2">{t.probH2}</EditableText>}
          body={<EditableText fieldKey="probP" multiline>{t.probP}</EditableText>}
        />
        <div className="pb-grid">
          <div className="pb-col pb-problem">
            <span className="pb-label">{t.probLabel}</span>
            <h3>{t.probH3}</h3>
            <ul className="pb-list">{t.probs.map((p, i) => <li key={i}><span className="x"></span><span>{p}</span></li>)}</ul>
          </div>
          <div className="pb-col pb-result">
            <span className="pb-label light">{t.resLabel}</span>
            <h3>{t.resH3}</h3>
            <ul className="pb-list ok">{t.res.map((p, i) => <li key={i}><Icon name="check" /><span>{p}</span></li>)}</ul>
            <div style={{ marginTop: '28px', position: 'relative' }}>
              <Button variant="orange" href="#kontakt" icon="arrow">{t.resBtn}</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Audience, ProblemResult });