// Insights.jsx — evergreen authority content hub
const INSIGHT_CATEGORIES = [
  { label: 'All Insights', page: 'Insights', href: '/insights/', mark: '知' },
  { label: 'Growth & Acquisition', page: 'Growth & Acquisition', href: '/insights/growth-acquisition/', mark: '伸' },
  { label: 'Loyalty & Retention', page: 'Loyalty & Retention', href: '/insights/loyalty-retention/', mark: '結' },
  { label: 'Sport & Community', page: 'Sport & Community', href: '/insights/sport-community/', mark: '集' },
  { label: 'AI & Agentic Commerce', page: 'AI & Agentic Commerce', href: '/insights/ai-agentic-commerce/', mark: '機' },
];

const INSIGHT_CATEGORY_INTROS = {
  'Sport & Community': 'Evidence, case studies and practical operating models for clubs, sponsors and partners turning supporter action into measurable local good.',
};

function InsightsPage({ category = 'All Insights', onNavigate }) {
  const current = INSIGHT_CATEGORIES.find(item => item.label === category) || INSIGHT_CATEGORIES[0];
  const isAll = current.label === 'All Insights';
  const articles = (window.ZENKO_INSIGHTS || []).filter(item => isAll || item.category === current.label);
  const remainingArticles = articles.slice(1);
  return <>
    <header className="insights-hero grain">
      <div className="insights-hero__mark" aria-hidden="true">{current.mark}</div>
      <div className="insights-shell">
        <PreHeadline light>Zenko Insights</PreHeadline>
        <h1>{isAll ? <>Ideas for earning attention <span>without wasting it.</span></> : current.label}</h1>
        <p>{isAll
          ? 'Research, frameworks and practical thinking for teams building better acquisition, deeper loyalty and measurable participation.'
          : INSIGHT_CATEGORY_INTROS[current.label] || `Zenko's latest thinking on ${current.label.toLowerCase()}, written for people responsible for commercial outcomes.`}</p>
      </div>
    </header>
    <nav className="insights-categories" aria-label="Insight categories">
      <div className="insights-shell">
        {INSIGHT_CATEGORIES.map(item => <a key={item.page} href={item.href}
          className={item.label === current.label ? 'is-active' : ''}
          aria-current={item.label === current.label ? 'page' : undefined}
          onClick={event => { event.preventDefault(); onNavigate(item.page); }}>{item.label}</a>)}
      </div>
    </nav>
    <section className="insights-launch">
      <div className="insights-shell insights-launch__grid">
        {articles.length ? <a className="insights-launch__feature insights-feature-card" href={`/insights/${articles[0].slug}/`} onClick={event => { event.preventDefault(); onNavigate({ type: 'InsightArticle', slug: articles[0].slug }); }}>
          <img src={articles[0].hero} alt={articles[0].heroAlt || `Feature artwork for ${articles[0].title}`} />
          <div><span>{articles[0].category} · {articles[0].readTime}</span><h2>{articles[0].title}</h2><p>{articles[0].excerpt}</p><strong>Read the insight →</strong></div>
        </a> : <div className="insights-launch__feature"><span>Next flagship insight</span><h2>{current.label}</h2><p>Original research, practical frameworks, source notes and a clear commercial takeaway will live here.</p></div>}
        <aside className="insights-launch__note">
          <strong>Built for useful depth</strong>
          <p>Insights are evergreen authority pieces. Zenko news, partnerships and delivery updates remain in Latest from Zenko.</p>
          <button onClick={() => onNavigate('Blog')}>Read the latest from Zenko</button>
        </aside>
      </div>
    </section>
    {remainingArticles.length > 0 && <section className="insights-archive" aria-labelledby="insights-archive-title">
      <div className="insights-shell">
        <div className="insights-archive__header">
          <PreHeadline>More from Zenko Insights</PreHeadline>
          <h2 id="insights-archive-title">Keep reading.</h2>
        </div>
        <div className="insights-archive__grid">
          {remainingArticles.map(article => <a key={article.slug} className="insights-archive-card" href={`/insights/${article.slug}/`} onClick={event => { event.preventDefault(); onNavigate({ type: 'InsightArticle', slug: article.slug }); }}>
            <img src={article.hero} alt={article.heroAlt || `Feature artwork for ${article.title}`} />
            <div>
              <span>{article.category} · {article.readTime}</span>
              <h3>{article.title}</h3>
              <p>{article.excerpt}</p>
              <strong>Read the insight →</strong>
            </div>
          </a>)}
        </div>
      </div>
    </section>}
  </>;
}

function InsightArticlePage({ slug, onNavigate }) {
  const article = (window.ZENKO_INSIGHTS || []).find(item => item.slug === slug);
  if (!article) return <section className="insight-article__missing"><h1>Insight not found.</h1><button onClick={() => onNavigate('Insights')}>Back to Insights</button></section>;
  return <article className="insight-article">
    <header className="insight-article__header grain"><div className="insights-shell">
      <button className="blog-back" onClick={() => onNavigate('Insights')}>← Back to Insights</button>
      <PreHeadline light>{article.category}</PreHeadline>
      <h1>{article.title}</h1>
      <p>{article.description}</p>
      <div className="insight-article__meta">{article.displayDate} · {article.author} · {article.readTime}</div>
    </div></header>
    <Band />
    <section className="insight-article__content">
      <figure className="insight-article__hero"><img src={article.hero} alt={article.heroAlt || `Feature artwork for ${article.title}`} /></figure>
      {article.video && <figure className="insight-article__video">
        <wistia-player media-id={article.video.mediaId} seo="false" aspect="1.7777777777777777" aria-label={article.video.title}></wistia-player>
      </figure>}
      <div className="insight-article__body" dangerouslySetInnerHTML={{ __html: article.html }} />
    </section>
  </article>;
}

Object.assign(window, { InsightsPage, InsightArticlePage });