/* pricing.jsx */
const PLANS = [
  {
    name: 'Launch', price: '£1,500', per: '/ month', feat: false,
    desc: 'For businesses establishing their digital foundation and first organic traction.',
    points: ['Technical SEO & on-page', 'Monthly content (4 pieces)', 'Core Web Vitals fixes', 'Monthly ranking report'],
    cta: 'Start with Launch', variant: 'secondary',
  },
  {
    name: 'Growth', price: '£3,500', per: '/ month', feat: true,
    desc: 'Our most popular engagement — the full growth engine across SEO, web and automation.',
    points: ['Everything in Launch', 'Link acquisition campaigns', 'Conversion optimisation (CRO)', 'One AI automation flow', 'Bi-weekly strategy calls'],
    cta: 'Choose Growth', variant: 'primary',
  },
  {
    name: 'Scale', price: 'Custom', per: '', feat: false,
    desc: 'For ambitious teams that need integrated growth at pace, with bespoke build and automation.',
    points: ['Everything in Growth', 'Bespoke web development', 'Custom AI agents & workflows', 'International / multi-site SEO', 'Dedicated growth lead'],
    cta: 'Talk to us', variant: 'secondary',
  },
];

function Pricing() {
  const { Button, Badge } = window.MacnitechDesignSystem_13fddf;
  const go = () => document.querySelector('#contact').scrollIntoView({ behavior: 'smooth' });
  return (
    <section className="section" id="pricing" data-screen-label="Pricing" style={{ background: 'var(--surface)' }}>
      <div className="mt-container">
        <div className="section-head section-head--center reveal">
          <span className="eyebrow eyebrow--tick" style={{ justifyContent: 'center' }}>Pricing</span>
          <h2>Simple plans. Compounding outcomes.</h2>
          <p className="lead">Every engagement opens with a free Digital Growth Audit — no pitch, just clarity. Cancel anytime.</p>
        </div>

        <div className="pricing-grid">
          {PLANS.map((p) => (
            <div className={'card price reveal' + (p.feat ? ' price--feat' : '')} key={p.name}>
              {p.feat && <div className="price__badge"><Badge tone="accent" solid>Most popular</Badge></div>}
              <div className="price__name">{p.name}</div>
              <div className="price__amt">{p.price}{p.per && <small> {p.per}</small>}</div>
              <p className="price__desc">{p.desc}</p>
              <ul className="price__list">
                {p.points.map((pt) => <li key={pt}><Icon name="check" size={17} stroke={2.3} />{pt}</li>)}
              </ul>
              <div className="price__cta">
                <Button variant={p.feat ? 'primary' : 'secondary'} size="lg" fullWidth onClick={go}
                        iconRight={<Icon name="arrowRight" size={17} />}>{p.cta}</Button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing });