// Pricing.jsx
function Pricing() {
  const { t } = window.useI18n();
  return (
    <section className="section section--navy" id="pricing">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.pricing.eyebrow}</span>
            <h2 className="section-title">{t.pricing.title}</h2>
          </div>
          <p className="section-sub">{t.pricing.sub}</p>
        </div>
        <div className="pricing-grid">
          {t.pricing.cards.map((c, i) => (
            <div key={i} className={`price-card ${c.featured ? "price-card--featured" : ""}`}>
              <span className="price-card__tag">{c.tag}</span>
              <div className="price-card__price">{c.price}</div>
              <div className="price-card__sub">{c.sub}</div>
              <div className="price-card__divider"></div>
              <ul className="price-card__list">
                {c.included.map((it, j) => <li key={j}>{it}</li>)}
              </ul>
              <div className="price-card__excluded">{c.excluded}</div>
              <a className={`btn ${c.featured ? "btn--gold" : "btn--ghost-light"} price-card__cta`} href="#register">{c.cta}</a>
            </div>
          ))}
        </div>
        <p className="price-disclaimer">{t.pricing.disclaimer}</p>
      </div>
    </section>
  );
}
window.Pricing = Pricing;