/* global React */

/** Pricing card for service detail pages.
 *  Use within <PricingGrid>. */
function PricingCard({ tier, title, prices = [], bullets = [], footnote, ctaLabel = 'Laten we kennismaken', ctaHref = 'contact.html', highlight = false, extraLink }) {
  return (
    <div className={`cs-pricing-card${highlight ? ' is-highlight' : ''}`}>
      {tier && <div className="cs-pricing-tier">{tier}</div>}
      <h3 className="cs-pricing-title">{title}</h3>
      <ul className="cs-pricing-bullets">
        {bullets.map((b, i) => <li key={i}>{b}</li>)}
      </ul>
      {prices.length > 0 && (
        <div className="cs-pricing-prices">
          {prices.map((p, i) => (
            <div key={i} className="cs-pricing-price">
              {p.label && <span className="l">{p.label}</span>}
              <span className="v">{p.value}</span>
            </div>
          ))}
        </div>
      )}
      {footnote && <p className="cs-pricing-foot">{footnote}</p>}
      {extraLink && (
        <a href={extraLink.href} className="cs-pricing-inspo">{extraLink.label}</a>
      )}
      <a href={ctaHref} className="cs-btn-primary">
        <span>{ctaLabel}</span><span className="arrow">→</span>
      </a>
    </div>
  );
}

function PricingGrid({ heading, italic, sub, cards = [], note }) {
  return (
    <section className="cs-pricing">
      <div className="cs-pricing-inner">
        {(heading || italic) && (
          <div className="cs-pricing-head">
            <h2>{heading} {italic && <em>{italic}</em>}</h2>
            {sub && <p>{sub}</p>}
          </div>
        )}
        <div className="cs-pricing-grid">
          {cards.map((c, i) => <PricingCard key={i} {...c}/>)}
        </div>
        {note && <p className="cs-pricing-note">{note}</p>}
      </div>
    </section>
  );
}

window.PricingCard = PricingCard;
window.PricingGrid = PricingGrid;