const { SectionHead, TimelineStep, StatBlock, FeatureCard, MicroCta } = window.CoolZoneSolutionDesignSystem_12e696;

function Process({ t }) {
  const { ov } = React.useContext(AdminEditContext);
  return (
    <section className="section section-dark" id="proces">
      <div className="container">
        <SectionHead
          light
          tag={<EditableText fieldKey="procTag">{t.procTag}</EditableText>}
          title={<EditableText fieldKey="procH2">{t.procH2}</EditableText>}
          body={<EditableText fieldKey="procP" multiline>{t.procP}</EditableText>}
        />
        <ol className="timeline">
          {t.steps.map((s, i) => (
            <TimelineStep
              key={i}
              number={String(i + 1).padStart(2, '0')}
              title={<EditableText fieldKey={'step_' + i + '_title'}>{ov('step_' + i + '_title', s[0])}</EditableText>}
              description={<EditableText fieldKey={'step_' + i + '_desc'} multiline>{ov('step_' + i + '_desc', s[1])}</EditableText>}
              last={i === t.steps.length - 1}
            />
          ))}
        </ol>
        <MicroCta text={t.mProcess} link={t.cta} href="#kontakt" />
      </div>
    </section>
  );
}

function Stats({ t, sections }) {
  const cfg = sections && sections.stats;
  if (!cfg || !cfg.visible) return null;
  const defaults = [['1240', '+'], ['12', null], ['980', '+'], ['4,9', null]];
  const items = (cfg.items && cfg.items.length)
    ? cfg.items
    : t.stats.map((label, i) => ({ value: defaults[i][0], suffix: defaults[i][1], label }));
  return (
    <section className="stats-section" id="statystyki">
      <div className="container">
        <div className="stats">
          {items.map((it, i) => <StatBlock key={i} value={it.value} suffix={it.suffix} label={it.label} />)}
        </div>
      </div>
    </section>
  );
}

function Why({ t }) {
  const { ov } = React.useContext(AdminEditContext);
  const icons = ['shield', 'sparkle', 'users', 'compass', 'hand', 'repeat'];
  return (
    <section className="section" id="dlaczego">
      <div className="container">
        <SectionHead
          tag={<EditableText fieldKey="whyTag">{t.whyTag}</EditableText>}
          title={<EditableText fieldKey="whyH2">{t.whyH2}</EditableText>}
          body={<EditableText fieldKey="whyP" multiline>{t.whyP}</EditableText>}
        />
        <div className="feat-grid">
          {t.feats.map((x, i) => (
            <FeatureCard
              key={i}
              icon={icons[i]}
              title={<EditableText fieldKey={'feat_' + i + '_title'}>{ov('feat_' + i + '_title', x[0])}</EditableText>}
              description={<EditableText fieldKey={'feat_' + i + '_desc'} multiline>{ov('feat_' + i + '_desc', x[1])}</EditableText>}
            />
          ))}
        </div>
        <MicroCta text={t.mWhy} link={t.lReviews} href="#opinie" />
      </div>
    </section>
  );
}
Object.assign(window, { Process, Stats, Why });