/* eslint-disable */
// Article card grid for the homepage.

const ArticleCard = ({ article, lead, onClick }) => (
  <article
    className={'cbm-article' + (lead ? ' cbm-article--lead' : '')}
    onClick={onClick}
  >
    <div className="cbm-article__media" style={{backgroundImage: `url(${article.image})`}} />
    <div className="cbm-article__body">
      <span className={'cbm-chip' + (article.featured ? ' cbm-chip--gold' : '')}>{article.category}</span>
      <h3 className="cbm-article__title">{article.title}</h3>
      <p className="cbm-article__excerpt">{article.excerpt}</p>
      <div className="cbm-article__meta">{article.author} · {article.date}</div>
    </div>
  </article>
);

const FEATURED = [
  {
    category: 'Leadership', featured: true,
    title: 'Building a Stronger Curaçao',
    excerpt: 'Three CEOs on what it takes to attract international investment to the island — and the policy shifts they say can\u0027t wait.',
    author: 'M. de Windt', date: 'May 14, 2026',
    image: '../../assets/imagery/willemstad-waterfront.jpg',
  },
  {
    category: 'Innovation',
    title: 'The Future is Local',
    excerpt: 'Insights from Curaçao\u0027s top business leaders, in their own words.',
    author: 'J. Martijn', date: 'May 12, 2026',
    image: '../../assets/imagery/willemstad-waterfront.jpg',
  },
  {
    category: 'Investment',
    title: 'Innovate. Adapt. Succeed.',
    excerpt: 'How businesses thrive in a changing world.',
    author: 'A. Pourier', date: 'May 9, 2026',
    image: '../../assets/imagery/willemstad-waterfront.jpg',
  },
];

const MORE = [
  { category: 'News',       title: 'Chamber announces 2026 trade-mission calendar', excerpt: 'Six destinations confirmed for the year ahead.', author: 'CBM Desk', date: 'May 11, 2026', image: '../../assets/imagery/willemstad-waterfront.jpg' },
  { category: 'Tourism',    title: 'Cruise season closes with record arrivals',     excerpt: 'A breakdown of the numbers behind the busiest season on record.', author: 'CBM Desk', date: 'May 10, 2026', image: '../../assets/imagery/willemstad-waterfront.jpg' },
  { category: 'Energy',     title: 'Wind capacity targets revised upward',           excerpt: 'Aqualectra files an updated 2030 roadmap with regulators.', author: 'CBM Desk', date: 'May 08, 2026', image: '../../assets/imagery/willemstad-waterfront.jpg' },
];

const FeaturedRow = ({ onArticle }) => (
  <section className="cbm-section cbm-section--tint">
    <div className="cbm-section__inner">
      <div className="cbm-section__head" style={{display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between'}}>
        <div>
          <span className="cbm-eyebrow">Featured Editorial</span>
          <div className="cbm-section-rule" />
          <h2 className="cbm-section__title">This week in business.</h2>
        </div>
        <a onClick={onArticle} style={{cursor:'pointer', fontWeight: 600, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--cbm-blue)'}}>
          All stories →
        </a>
      </div>
      <div className="cbm-article-grid">
        <ArticleCard article={FEATURED[0]} lead onClick={onArticle} />
        <ArticleCard article={FEATURED[1]} onClick={onArticle} />
        <ArticleCard article={FEATURED[2]} onClick={onArticle} />
      </div>
      <div className="cbm-article-grid cbm-article-grid--three" style={{marginTop: 24}}>
        {MORE.map(a => <ArticleCard key={a.title} article={a} onClick={onArticle} />)}
      </div>
    </div>
  </section>
);

Object.assign(window, { ArticleCard, FeaturedRow });