/* global React */

function ProcessStep({ n, title, body, duration, bonus = false, oldPrice, newPrice, badge }) {
  if (bonus) {
    return (
      <div className="cs-process-step cs-process-bonus">
        {badge && <div className="cs-process-bonus-badge">{badge}</div>}
        <div className="cs-process-num">{n}</div>
        <h4>{title}</h4>
        <p>{body}</p>
        <div className="cs-process-bonus-price">
          {oldPrice && <span className="strike">{oldPrice}</span>}
          {newPrice}
          <span className="free">gratis</span>
        </div>
        {duration && <div className="cs-process-duration">{duration}</div>}
      </div>
    );
  }
  return (
    <div className="cs-process-step">
      <div className="cs-process-num">{n}</div>
      <h4>{title}</h4>
      <p>{body}</p>
      <div className="cs-process-duration">{duration}</div>
    </div>
  );
}

function ProcessGrid({ heading, italic, desc, steps = [] }) {
  return (
    <section className="cs-process">
      <div className="cs-process-inner">
        <div className="cs-process-head">
          <h2>{heading}<br/><em>{italic}</em></h2>
          <p className="cs-process-desc">{desc}</p>
        </div>
        <div className="cs-process-grid">
          {steps.map((s, i) => <ProcessStep key={i} {...s}/>)}
        </div>
      </div>
    </section>
  );
}

window.ProcessStep = ProcessStep;
window.ProcessGrid = ProcessGrid;