/* eslint-disable */
// Advertising tiers — Silver / Gold / Platinum.

const TIERS = [
  {
    key: 'silver', name: 'Silver', priceXcg: 1250,
    medalColor: '#C9CCD2',
    features: [
      'Sponsored Article (1× per month)',
      'Standard Editorial Feature',
      'Website Banner Ad (300×250 px)',
      'Social Media Shoutout (1× per week)',
      'Newsletter Placement (1× per month)',
      'Basic Performance Report',
    ],
    cta: 'Get Seen',
  },
  {
    key: 'gold', name: 'Gold', priceXcg: 2500,
    medalColor: '#FFC20E',
    features: [
      'Sponsored Article (2× per month)',
      'Featured Editorial',
      'Premium Website Banner (728×90 px)',
      'Social Media Promotion (2× per week)',
      'Newsletter Placement (2× per month)',
      'Sponsored Content Post',
      'Monthly Performance Report',
    ],
    cta: 'Get Results',
  },
  {
    key: 'platinum', name: 'Platinum', priceXcg: 4500,
    medalColor: '#08345E',
    features: [
      'Sponsored Article (4× per month)',
      'Cover Story Feature',
      'Premium Website Takeover',
      'Social Media Campaign (3× per week)',
      'Newsletter Placement (4× per month)',
      'Video Interview / Brand Story',
      'Priority Positioning on All Platforms',
      'Monthly Performance Report & Strategy Call',
    ],
    cta: 'Get Maximum Impact',
  },
];

// A tiny SVG ribbon medallion — matches the brand-board art.
const Medal = ({ color }) => (
  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <circle cx="32" cy="26" r="18" fill={color} stroke="#08345E" strokeOpacity="0.15" strokeWidth="1.5"/>
    <circle cx="32" cy="26" r="10" fill="none" stroke="#08345E" strokeOpacity="0.35" strokeWidth="1.5"/>
    <path d="M22 38 L18 60 L26 56 L32 60 L38 56 L46 60 L42 38 Z" fill={color} stroke="#08345E" strokeOpacity="0.15" strokeWidth="1.5"/>
  </svg>
);

const AdTiers = ({ heading = true, onSelect }) => (
  <section className="cbm-section">
    <div className="cbm-section__inner">
      {heading && (
        <div className="cbm-section__head" style={{textAlign:'center'}}>
          <span className="cbm-eyebrow">Advertising Packages</span>
          <div className="cbm-section-rule" style={{margin: '12px auto 14px'}} />
          <h2 className="cbm-section__title" style={{textAlign:'center'}}>Choose the right visibility for your brand.</h2>
        </div>
      )}
      <div className="cbm-tiers">
        {TIERS.map(t => (
          <div key={t.key} className={'cbm-tier cbm-tier--' + t.key}>
            <div className="cbm-tier__head">{t.name}</div>
            <div className="cbm-tier__medal"><Medal color={t.medalColor} /></div>
            <div className="cbm-tier__price">XCG {window.fmtNum ? window.fmtNum(t.priceXcg) : t.priceXcg}</div>
            <div className="cbm-tier__per">{window.usdLine ? window.usdLine(t.priceXcg) : ''} · per month</div>
            <ul className="cbm-tier__features">
              {t.features.map(f => <li key={f}>{f}</li>)}
            </ul>
            <div className="cbm-tier__cta">
              <button
                className={'cbm-btn ' + (t.key === 'gold' ? 'cbm-btn--gold' : t.key === 'platinum' ? 'cbm-btn--primary' : 'cbm-btn--disabled')}
                onClick={() => onSelect && onSelect(t.key)}
              >
                {t.cta}
              </button>
            </div>
          </div>
        ))}
      </div>
      <p style={{textAlign:'center', marginTop: 24, fontSize: 12, color: 'var(--cbm-muted)'}}>
        All prices are in XCG with USD equivalent shown (1 USD ≈ 1.79 XCG). Custom packages available upon request.
      </p>
    </div>
  </section>
);

Object.assign(window, { AdTiers });