/* global React */
function Pricing() {
  const tiers = [
    {
      name: 'Single role',
      price: '$8,500',
      unit: 'per placed hire',
      blurb: 'For one open role. Pay only when you hire.',
      features: ['5 pre-qualified candidates', 'Match scoring + comp data', '60-day replacement guarantee'],
      cta: 'Open a role',
      featured: false
    },
    {
      name: 'Velocity',
      price: '$24,000',
      unit: 'per quarter',
      blurb: 'For teams hiring 4+ roles a quarter.',
      features: ['Unlimited shortlists', 'Dedicated recruiting partner', 'Slack + ATS integrations', 'Pipeline analytics'],
      cta: 'Talk to us',
      featured: true
    },
    {
      name: 'Embedded',
      price: 'Custom',
      unit: '',
      blurb: 'For Series B+ companies hiring at scale.',
      features: ['Full-time embedded recruiter', 'Custom AI sourcing models', 'SLAs on time-to-hire'],
      cta: 'Contact sales',
      featured: false
    }
  ];
  return (
    <section id="pricing" className="section section--light">
      <div className="container">
        <div className="section__head">
          <div className="eyebrow">Pricing</div>
          <h2 className="h2">Pay for outcomes, not effort.</h2>
        </div>
        <div className="tiers">
          {tiers.map((t) => (
            <div className={"tier" + (t.featured ? " tier--featured" : "")} key={t.name}>
              {t.featured && <div className="tier__flag">Most chosen</div>}
              <div className="tier__name">{t.name}</div>
              <div className="tier__price">
                <span className="tier__price-num">{t.price}</span>
                {t.unit && <span className="tier__price-unit">{t.unit}</span>}
              </div>
              <p className="tier__blurb">{t.blurb}</p>
              <ul className="tier__features">
                {t.features.map((f) => (
                  <li key={f}><i data-lucide="check"></i><span>{f}</span></li>
                ))}
              </ul>
              <a href="#" className={"btn " + (t.featured ? "btn-flame" : "btn-secondary")}>{t.cta}</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;