/* Pricing — transparent tiers, no hidden fees */

function Pricing({ t }) {
  return (
    <section className="pricing section" id="pricing">
      <div className="container">
        <div className="pricing-head reveal">
          <span className="eyebrow"><span className="dot"></span>{t.pricing.eyebrow}</span>
          <h2 className="section-title" style={{ marginTop: 16 }}>
            {t.pricing.title_1}<em>{t.pricing.title_em}</em>{t.pricing.title_2}
          </h2>
          <p className="section-subtitle" style={{ marginTop: 16 }}>{t.pricing.sub}</p>
        </div>

        <div className="pricing-grid reveal-stagger">
          {t.pricing.plans.map((p, i) => (
            <div key={i} className={'plan' + (p.featured ? ' is-featured' : '')}>
              {p.featured && <span className="plan-badge">{t.pricing.popular}</span>}
              <h3 className="plan-name">{p.name}</h3>
              <p className="plan-for">{p.for}</p>
              <div className="plan-price">
                {p.price_prefix && <span className="plan-price-prefix">{p.price_prefix}</span>}
                <span className="plan-price-val"><CountUp value={p.price} /></span>
                {p.price_unit && <span className="plan-price-unit">{p.price_unit}</span>}
              </div>
              <ul className="plan-features">
                {p.features.map((fe, j) => (
                  <li key={j}><span className="plan-check">{Icons.check}</span>{fe}</li>
                ))}
              </ul>
              <a
                href={p.cta_wa ? window.LAMHA_WHATSAPP : 'https://app2.lamha.sa/register'}
                target={p.cta_wa ? '_blank' : undefined}
                rel={p.cta_wa ? 'noopener' : undefined}
                className={'btn plan-cta ' + (p.featured ? 'btn-primary' : 'btn-ghost')}
              >
                {p.cta}
              </a>
            </div>
          ))}
        </div>

        <p className="pricing-note reveal">{t.pricing.note}</p>
      </div>
    </section>
  );
}

window.Pricing = Pricing;