/* eslint-disable */
// Audience stats — big-number tiles with medallion icons.

// LinkedIn glyph (inline — Lucide no longer ships brand icons).
const LiSvg = () => (
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
    <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.38-1.85 3.61 0 4.28 2.38 4.28 5.47v6.27ZM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM7.12 20.45H3.55V9h3.57v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0Z"/>
  </svg>
);

const STATS = [
  { icon: 'globe',    num: '25,000+', lbl: 'Monthly Website Visitors' },
  { icon: 'li',       num: '15,000+', lbl: 'Social Media Followers' },
  { icon: 'mail',     num: '8,000+',  lbl: 'Newsletter Subscribers' },
  { icon: 'users',    num: '12,000+', lbl: 'Engaged Business Readers' },
];

const AudienceStats = ({ tone = 'light' }) => (
  <section className={'cbm-section ' + (tone === 'dark' ? 'cbm-section--dark' : 'cbm-section--tint')}>
    <div className="cbm-section__inner">
      <div className="cbm-section__head">
        <span className="cbm-eyebrow">Our Audience</span>
        <div className="cbm-section-rule" />
        <h2 className="cbm-section__title">Reach Curaçao's decision-makers.</h2>
        <p className="cbm-section__lede">Business owners, CEOs, managers, entrepreneurs, investors, government and professionals — across every channel.</p>
      </div>
      <div className="cbm-stats">
        {STATS.map(s => (
          <div key={s.lbl} className="cbm-stat">
            <div className="cbm-stat__circle">
              {s.icon === 'li' ? <LiSvg /> : <i data-lucide={s.icon}></i>}
            </div>
            <div>
              <div className="cbm-stat__num">{s.num}</div>
              <div className="cbm-stat__lbl">{s.lbl}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { AudienceStats });