/* eslint-disable */
// Media platforms strip — five filled medallion circles.

const PLATFORMS = [
  { icon: 'monitor',    name: 'Website',        desc: 'cbm.cw is your go-to source for business news, insights and opportunities in Curaçao.' },
  { icon: 'smartphone', name: 'Social Media',   desc: 'Engaging daily content across LinkedIn, Facebook and Instagram to grow your brand presence.' },
  { icon: 'mail',       name: 'Newsletter',     desc: 'Delivered weekly to a highly engaged business audience.' },
  { icon: 'play',       name: 'Video Content',  desc: 'Interviews, brand stories and event coverage that bring your message to life.' },
];

const MediaPlatforms = ({ tone = 'light' }) => (
  <section className={'cbm-section ' + (tone === 'dark' ? 'cbm-section--dark' : '')}>
    <div className="cbm-section__inner">
      <div className="cbm-section__head" style={{textAlign:'center'}}>
        <span className="cbm-eyebrow">Our Media Platforms</span>
        <div className="cbm-section-rule" style={{margin: '12px auto 14px'}} />
        <h2 className="cbm-section__title" style={{textAlign:'center'}}>Five channels. One audience.</h2>
      </div>
      <div className="cbm-platforms">
        {PLATFORMS.map(p => (
          <div key={p.name} className="cbm-platform">
            <div className="cbm-platform__circle"><i data-lucide={p.icon}></i></div>
            <h4 className="cbm-platform__name">{p.name}</h4>
            <p className="cbm-platform__desc">{p.desc}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { MediaPlatforms });