// ============================================
// Pricing — 3 tiers
// ============================================

function Pricing() {
  const PC = window.PC;
  return (
    <section className="section pricing" id="pricing">
      <div className="wrap">
        <header className="section-head section-head--c">
          <span className="eyebrow eyebrow--c reveal">06 — Engagements</span>
          <h2 className="h-1 reveal" data-d="1">
            Three ways to <span className="serif it gold-text">work with us</span>.
          </h2>
          <p className="lead reveal" data-d="2" style={{margin: '0 auto'}}>
            Project-based, plan-based, or program-based. All built around the same uncompromising standard of output.
          </p>
        </header>

        <div className="pricing__grid">
          {PC.pricing.map((p, i) => (
            <article key={p.id} className={`tier ${p.featured ? 'is-featured' : ''} reveal`} data-d={i + 1}>
              {p.badge && <span className="tier__badge">{p.badge}</span>}
              <header className="tier__head">
                <h3 className="h-3 serif tier__name">{p.name}</h3>
                <p className="body tier__desc">{p.desc}</p>
              </header>
              <div className="tier__price">
                <span className="serif tier__price-v">{p.price}</span>
                <span className="label tier__price-u">{p.unit}</span>
              </div>
              <ul className="tier__list">
                {p.features.map((f, j) => (
                  <li key={j}>
                    <span className="tier__check"><ICheck size={12}/></span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <a href="#contact" className={`btn ${p.featured ? 'btn--gold' : 'btn--ghost'} tier__cta`}>
                <span>{p.cta}</span>
                <span className="btn__arrow"></span>
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;
