// 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: '機' },
];

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);
  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.'
          : `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={`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>
  </>;
}

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={`Feature artwork for ${article.title}`} /></figure>
      <div className="insight-article__body" dangerouslySetInnerHTML={{ __html: article.html }} />
    </section>
  </article>;
}

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