// ============================================================
// INSIGHTS PAGE — 10 thought-leadership cards
// ============================================================

const INSIGHTS = [
  {
    id: 1, chip: 'turq', topic: 'AI & Proof',
    title: 'Human proof in an AI-noise world',
    excerpt: 'Generative content has made attention cheap and credibility scarce. The brands that win will be the ones whose customers say the most useful things.',
    author: 'Mariko Tanaka', role: 'Editorial Lead', region: 'Tokyo',
    read: '7 min read · May 2026', type: 'Essay',
    feature: true,
  },
  {
    id: 2, chip: 'purple', topic: 'Advocacy',
    title: 'Why customer advocacy belongs in the growth strategy',
    excerpt: 'Advocacy gets treated as a marketing tactic. It is, in fact, the single most efficient channel for compounding revenue.',
    author: 'James Okoye', role: 'Strategy Director', region: 'London',
    read: '6 min read · April 2026', type: 'Essay',
  },
  {
    id: 3, chip: 'blue', topic: 'VOC',
    title: 'Turning VOC into action',
    excerpt: 'Listening is the easy part. We share the operating model that closes the loop and turns customer signal into shipped change.',
    author: 'Priya Raman', role: 'VOC Practice Lead', region: 'Bangalore',
    read: '8 min read · April 2026', type: 'Playbook',
  },
  {
    id: 4, chip: 'teal', topic: 'Community',
    title: 'The commercial value of customer communities',
    excerpt: 'A B2B community is not a Slack channel. Done well, it is the highest-margin retention asset on your balance sheet.',
    author: 'Sofia Lindqvist', role: 'Community Director', region: 'Stockholm',
    read: '5 min read · March 2026', type: 'Essay',
  },
  {
    id: 5, chip: 'pink', topic: 'Storytelling',
    title: 'Customer storytelling for complex B2B products',
    excerpt: 'How to make a 90-second documentary that closes a million-pound deal — without losing the technical truth.',
    author: 'Diego Marín', role: 'Creative Director', region: 'Madrid',
    read: '9 min read · March 2026', type: 'Framework',
  },
  {
    id: 6, chip: 'grape', topic: 'Influence',
    title: 'How strategic customers influence buying decisions',
    excerpt: 'Buyers trust other buyers. We map the four moments where a single reference shifts a deal — and what advocacy needs to deliver in each.',
    author: 'Helena Brandt', role: 'Senior Advisor', region: 'Berlin',
    read: '6 min read · February 2026', type: 'Research',
  },
  {
    id: 7, chip: 'purple', topic: 'Advocacy',
    title: 'Building advocacy programmes that scale',
    excerpt: 'Most advocacy programmes plateau at 12 customers. The fix is operational, not creative. Here\'s the architecture that gets you to 100+.',
    author: 'Aaron Bennett', role: 'Programme Lead', region: 'Boston',
    read: '10 min read · February 2026', type: 'Playbook',
  },
  {
    id: 8, chip: 'blue', topic: 'VOC',
    title: 'Using customer insight to improve retention',
    excerpt: 'Three retention diagnostics every CMO and CCO should run quarterly. The data is already in your tenant — you just have to ask it the right question.',
    author: 'Naledi Khumalo', role: 'Insight Strategist', region: 'Johannesburg',
    read: '7 min read · January 2026', type: 'Framework',
  },
  {
    id: 9, chip: 'teal', topic: 'Loyalty',
    title: 'Why loyalty is more than a rewards program',
    excerpt: 'Points programmes were a 2010 idea. B2B loyalty in 2026 is recognition, access, peer connection, and meaningful contribution.',
    author: 'Camille Roux', role: 'Loyalty Lead', region: 'Paris',
    read: '5 min read · January 2026', type: 'Essay',
  },
  {
    id: 10, chip: 'pink', topic: 'Future',
    title: 'The future of customer-powered growth',
    excerpt: 'Five shifts we expect to reshape how B2B brands grow over the next decade — and why customers, not channels, will define your market.',
    author: 'Melissa Hart', role: 'Founding Partner', region: 'London',
    read: '12 min read · December 2025', type: 'Essay',
  },
];

function InsightsHero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero__inner">
          <span className="hero__kicker">Insights</span>
          <h1 style={{ font: '700 clamp(44px, 6vw, 88px)/1 var(--font-family-base)', letterSpacing: '-0.045em' }}>
            Opinion, evidence,<br/>and field notes.
          </h1>
          <p className="hero__lead">
            Perspective from our practitioners across four continents on customer-powered growth, advocacy, storytelling, and the operating model behind durable revenue.
          </p>
        </div>
      </div>
    </section>
  );
}

function InsightsIndex() {
  const [topic, setTopic] = React.useState('All');
  const [type, setType] = React.useState('All');
  const [author, setAuthor] = React.useState('All');
  const [query, setQuery] = React.useState('');

  const topics = ['All', 'AI & Proof', 'Advocacy', 'VOC', 'Community', 'Storytelling', 'Influence', 'Loyalty', 'Future'];
  const types  = ['All', 'Essay', 'Playbook', 'Framework', 'Research'];
  const authors = ['All', ...Array.from(new Set(INSIGHTS.map(i => i.author)))];

  const initials = (name) => name.split(' ').map(p => p[0]).slice(0, 2).join('');

  const avatarColors = ['#261244', '#895EF7', '#4DA1F7', '#21CBDD', '#FF4D8A', '#FF7640', '#40465C', '#5F667D'];

  const visible = INSIGHTS.filter(it => {
    if (topic !== 'All' && it.topic !== topic) return false;
    if (type !== 'All' && it.type !== type) return false;
    if (author !== 'All' && it.author !== author) return false;
    if (query.trim() && !`${it.title} ${it.excerpt} ${it.author}`.toLowerCase().includes(query.toLowerCase())) return false;
    return true;
  });

  const feature = visible.find(i => i.feature);
  const rest = visible.filter(i => !i.feature);

  return (
    <section className="section--canvas" style={{ paddingTop: 32, paddingBottom: 96 }}>
      <div className="container">
        <div className="insights-filters">
          <div className="left">
            <div className="work-filter__group">
              <span className="work-filter__label">Topic</span>
              {topics.map(t => (
                <button key={t}
                  className={"filter-chip" + (topic === t ? ' is-selected' : '')}
                  onClick={() => setTopic(t)}>
                  {t}
                </button>
              ))}
            </div>
          </div>
          <div className="right">
            <select className="search-input" style={{ background: '#fff', paddingLeft: 14, height: 44, color: 'var(--text-primary)', font: 'var(--type-body-sm)', width: 180 }}
              value={type} onChange={(e) => setType(e.target.value)} aria-label="Filter by content type">
              {types.map(t => <option key={t} value={t}>{t === 'All' ? 'All content types' : t}</option>)}
            </select>
            <select className="search-input" style={{ background: '#fff', paddingLeft: 14, height: 44, color: 'var(--text-primary)', font: 'var(--type-body-sm)', width: 180 }}
              value={author} onChange={(e) => setAuthor(e.target.value)} aria-label="Filter by author">
              {authors.map(a => <option key={a} value={a}>{a === 'All' ? 'All authors' : a}</option>)}
            </select>
            <input className="search-input"
              type="search" placeholder="Search insights"
              value={query} onChange={(e) => setQuery(e.target.value)}
              aria-label="Search insights" />
          </div>
        </div>

        {visible.length === 0 && (
          <div style={{ textAlign: 'center', padding: '80px 0', color: 'var(--text-muted)' }}>
            No insights match those filters. Try clearing one.
          </div>
        )}

        <div className="insight-grid">
          {feature && (
            <article className="insight-card insight-card--feature">
              <div className="insight-card__visual">
                <span className="feature-chip">Featured · {feature.topic}</span>
                <div>
                  <div className="feature-headline">{feature.title}</div>
                  <div style={{ marginTop: 20, font: 'var(--type-body-sm)', color: 'var(--neutral-300)', lineHeight: 1.55 }}>
                    {feature.excerpt}
                  </div>
                </div>
              </div>
              <div className="insight-card__rhs">
                <div className="insight-card__topbar">
                  <span className={`chip chip--${feature.chip}`} style={{
                    background: feature.chip === 'grape' ? '#F2EAFE' : `var(--${feature.chip === 'turq' ? 'bright-turquoise' : feature.chip}-surface)`,
                    color: feature.chip === 'turq' ? 'var(--text-deep-grape)' : `var(--color-${feature.chip === 'grape' ? 'purple' : feature.chip === 'turq' ? 'deep-grape' : feature.chip === 'pink' ? 'hot-pink' : feature.chip})`,
                    display: 'inline-flex', alignItems: 'center', height: 24, padding: '0 10px',
                    borderRadius: 9999, font: 'var(--type-label-sm)',
                  }}>{feature.topic}</span>
                  <span className="insight-card__read">{feature.read}</span>
                </div>
                <div className="insight-card__title">Read the full essay</div>
                <p className="insight-card__excerpt">
                  An in-depth take from {feature.author} on what really matters when AI floods every channel and only verified human stories cut through.
                </p>
                <div className="insight-card__author">
                  <div className="avatar" style={{ background: avatarColors[0] }}>{initials(feature.author)}</div>
                  <div>
                    <div className="who">{feature.author}</div>
                    <div className="role">{feature.role} · {feature.region}</div>
                  </div>
                </div>
              </div>
            </article>
          )}

          {rest.map((it, i) => (
            <article key={it.id} className="insight-card">
              <div className="insight-card__topbar">
                <span className={`chip chip--${it.chip}`}>{it.topic}</span>
                <span className="insight-card__read">{it.read}</span>
              </div>
              <h3 className="insight-card__title">{it.title}</h3>
              <p className="insight-card__excerpt">{it.excerpt}</p>
              <div className="insight-card__author">
                <div className="avatar" style={{ background: avatarColors[(i + 1) % avatarColors.length] }}>
                  {initials(it.author)}
                </div>
                <div>
                  <div className="who">{it.author}</div>
                  <div className="role">{it.role} · {it.region}</div>
                </div>
              </div>
            </article>
          ))}
        </div>

        {/* Pagination */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 56 }}>
          {['‹', '1', '2', '3', '›'].map((p, i) => (
            <button key={i} style={{
              width: 44, height: 44,
              border: '1px solid var(--border-default)',
              background: i === 1 ? 'var(--color-deep-grape)' : '#fff',
              color: i === 1 ? '#fff' : 'var(--text-primary)',
              borderRadius: 'var(--radius-md)',
              font: 'var(--type-label-md)',
              cursor: 'pointer',
            }}>{p}</button>
          ))}
        </div>
      </div>
    </section>
  );
}

window.InsightsHero = InsightsHero;
window.InsightsIndex = InsightsIndex;
window.INSIGHTS = INSIGHTS;