// Pricing.jsx — three engagement tiers; clicking a CTA preselects the offer in the form
const TIERS = [
  {
    offer: 'Offer #1', name: 'Operational Diagnostic', amount: '€2,500',
    duration: '2-week engagement · One-time', listLabel: 'Deliverables',
    items: ['Process assessment & current-state map', 'KPI dashboard design', 'Bottleneck analysis & root-cause', '90-day prioritised roadmap'],
    cta: 'Best for gaining clarity', formValue: 'Operational Diagnostic (€2,500)',
  },
  {
    offer: 'Offer #2', name: 'Fractional COO', amount: '€3k – €5k/mo',
    duration: '4–8 hours/week · Ongoing retainer', listLabel: 'Includes', featured: true, tag: '⭐ Most Popular',
    items: ['Weekly leadership meeting', 'KPI review & decision support', 'Team coaching & accountability', 'SOP design & implementation', 'Inventory planning support', 'Supplier management routines', 'Process optimisation sessions'],
    cta: 'Best for ongoing execution', formValue: 'Fractional COO (€3k–€5k/mo)',
  },
  {
    offer: 'Offer #3', name: 'Scale™ Accelerator', amount: '€10k – €20k',
    duration: '90-day programme · Fixed scope', listLabel: 'Focus areas',
    items: ['Full SCALE model implementation', 'Reduce operational chaos', 'Improve margins & fulfilment', 'Build accountability systems', '90-day execution roadmap', 'Team capability building'],
    cta: 'Best for serious scaling', formValue: 'Scale Accelerator (€10k–€20k)',
  },
];

function Pricing({ onSelectOffer, enhanced }) {
  return (
    <section className="section">
      <SectionHeader label="Offers & Pricing" title="Choose your engagement"
        sub="Three clear options — from a focused diagnostic to a full 90-day transformation." />
      <div className="grid-3" style={{ alignItems: 'stretch' }}>
        {TIERS.map((t) => (
          <div className={'price-card' + (t.featured ? ' featured' : '')} key={t.name}>
            {t.tag && <div className="price-tag">{t.tag}</div>}
            <p className="price-offer">{t.offer}</p>
            <p className="price-name">{t.name}</p>
            <p className="price-amount">{t.amount}</p>
            <p className="price-duration">{t.duration}</p>
            <p className="price-list-label">{t.listLabel}</p>
            {t.items.map((i) => (
              <div className="price-item" key={i}><span className="price-check">✓</span>{i}</div>
            ))}
            {enhanced
              ? (
                <React.Fragment>
                  <a href="#contact" className={'price-cta' + (t.featured ? ' featured' : '')}
                    style={t.featured ? null : { background: 'transparent', color: 'var(--green-light)', borderColor: 'rgba(34,197,94,0.5)' }}
                    onClick={() => onSelectOffer && onSelectOffer(t.formValue)}>
                    Choose {t.name.replace('™', '')} →
                  </a>
                  <p style={{ textAlign: 'center', fontSize: 12, color: 'var(--fg4)', marginTop: 10 }}>{t.cta}</p>
                </React.Fragment>
              )
              : (
                <a href="#contact" className={'price-cta' + (t.featured ? ' featured' : '')}
                  onClick={() => onSelectOffer && onSelectOffer(t.formValue)}>
                  {t.cta}
                </a>
              )}
          </div>
        ))}
      </div>
      {enhanced && (
        <React.Fragment>
          <PricingCompare />
          <div className="credited">✓ &nbsp;Your Diagnostic fee is credited toward any ongoing engagement.</div>
        </React.Fragment>
      )}
    </section>
  );
}

window.Pricing = Pricing;
window.PRICING_TIERS = TIERS;