// kc-sections.jsx — Commercial Energy Knowledge Centre (the Q&A parent page).
// Rendered at the question-answer CPT archive: /question-answer/.
//
// Data flow (v1.41.0):
//   KnowledgeCentreApp fetches, in parallel:
//     GET /qa/topics   → topic grid (slug, name, desc, icon, count, url)
//     GET /qa          → full question index (slug, question, preview, topic) for search
//     GET /qa/popular  → 8 popular questions
//   Topic cards LINK to /question-answer/topic/{slug}/ (real archive pages — see
//   the qa-topic taxonomy). Search filters the index in place and links each
//   result to its individual /question-answer/{slug}/ page.
//
// Reuses shared primitives: Eyebrow, SectionHeader, Button, LockedNavBar, Footer.

const KC_SHELL = { maxWidth: 1440, margin: '0 auto', padding: '0 48px' };
const KC_REST_BASE = (typeof window !== 'undefined' && window.GI_REST_BASE) || '/wp-json/claude-pages/v1/';

// ---------------------------------------------------------------
// Breadcrumb — Home / Resources / Knowledge Centre (real URLs).
// ---------------------------------------------------------------
const KCBreadcrumb = ({ trail }) => (
  <nav aria-label="Breadcrumb" style={{
    background: 'var(--gi-paper-cream)', borderBottom: '1px solid rgba(15,33,51,0.08)'
  }}>
    <div className="kc-shell" style={{ ...KC_SHELL, padding: '16px 48px' }}>
      <ol style={{
        listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexWrap: 'wrap',
        alignItems: 'center', gap: 10, fontFamily: 'var(--ff-mono)', fontSize: 11,
        letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--gi-graphite)',
        fontWeight: 500
      }}>
        {trail.map((c, i) => (
          <React.Fragment key={c.label}>
            {i > 0 && <li aria-hidden="true" style={{ opacity: 0.5 }}>/</li>}
            <li>
              {c.href ? (
                <a href={c.href} style={{ color: i === trail.length - 1 ? 'var(--gi-deep-ink)' : 'var(--gi-graphite)', textDecoration: 'none', border: 'none' }}>{c.label}</a>
              ) : (
                <span aria-current="page" style={{ color: 'var(--gi-deep-ink)' }}>{c.label}</span>
              )}
            </li>
          </React.Fragment>
        ))}
      </ol>
    </div>
  </nav>
);

// ---------------------------------------------------------------
// Search field (hero global search + topic-page scoped filter).
// ---------------------------------------------------------------
const KCSearch = ({ value, onChange, placeholder, autoFocus }) => (
  <div style={{ position: 'relative', width: '100%' }}>
    <i data-lucide="search" style={{
      position: 'absolute', left: 20, top: '50%', transform: 'translateY(-50%)',
      width: 20, height: 20, strokeWidth: 1.5, color: 'var(--gi-graphite)', pointerEvents: 'none'
    }} />
    <input
      type="search" value={value} autoFocus={autoFocus}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder} aria-label={placeholder}
      style={{
        width: '100%', boxSizing: 'border-box', font: '400 16px/24px var(--ff-sans)',
        color: 'var(--gi-deep-ink)', background: '#fff', border: '1px solid rgba(15,33,51,0.16)',
        borderRadius: 4, padding: '18px 20px 18px 54px', outline: 'none',
        transition: 'border-color 180ms ease, box-shadow 180ms ease'
      }}
      onFocus={(e) => { e.target.style.borderColor = 'var(--gi-sage-accent)'; e.target.style.boxShadow = '0 0 0 3px rgba(94,143,109,0.14)'; }}
      onBlur={(e) => { e.target.style.borderColor = 'rgba(15,33,51,0.16)'; e.target.style.boxShadow = 'none'; }}
    />
    {value && (
      <button onClick={() => onChange('')} aria-label="Clear search" style={{
        position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)',
        width: 30, height: 30, borderRadius: 4, border: 'none', cursor: 'pointer',
        background: 'transparent', color: 'var(--gi-graphite)', display: 'inline-flex',
        alignItems: 'center', justifyContent: 'center'
      }}>
        <i data-lucide="x" style={{ width: 16, height: 16, strokeWidth: 1.5 }} />
      </button>
    )}
  </div>
);

// ---------------------------------------------------------------
// Hero — cream. Tag · headline · description · search · stats.
// ---------------------------------------------------------------
const KCHero = ({ query, onQuery, total, topicCount }) => {
  const rounded = `${Math.floor((total || 0) / 10) * 10}+`;
  const stats = [
    { value: rounded, label: 'Questions answered' },
    { value: String(topicCount || 0), label: 'Energy topics' },
    { value: 'C&I', label: 'Commercial & industrial focus' }
  ];
  return (
    <section data-gi-resp="kc-hero" style={{ background: 'var(--gi-paper-cream)', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(1200px 560px at 12% -10%, rgba(94,143,109,0.10), transparent 60%)',
        pointerEvents: 'none'
      }} />
      <div className="kc-shell" style={{ ...KC_SHELL, position: 'relative', paddingTop: 80, paddingBottom: 72 }}>
        <div style={{ maxWidth: 760 }}>
          <Eyebrow className="gi-eyebrow--green" style={{ color: 'var(--gi-sage-accent)' }}>Knowledge Centre</Eyebrow>
          <h1 className="kc-hero-h1" style={{
            font: '500 56px/60px var(--ff-sans)', letterSpacing: '-0.028em',
            color: 'var(--gi-deep-ink)', margin: '20px 0 0', textWrap: 'balance'
          }}>Answers to commercial energy questions.</h1>
          <p style={{
            font: '400 18px/30px var(--ff-sans)', color: 'var(--gi-slate)', margin: '24px 0 0',
            maxWidth: 660, textWrap: 'pretty'
          }}>Explore expert answers on commercial solar, energy audits, EV charging, battery storage, incentives, financing, and energy-management strategies for Canadian businesses.</p>
        </div>
        <div className="kc-hero-search" style={{ maxWidth: 620, marginTop: 36 }}>
          <KCSearch value={query} onChange={onQuery} placeholder={`Search ${rounded} questions and answers…`} />
        </div>
        <div className="kc-hero-stats" style={{
          marginTop: 48, display: 'flex', flexWrap: 'wrap', gap: 0,
          borderTop: '1px solid rgba(15,33,51,0.12)'
        }}>
          {stats.map((s, i) => (
            <div key={s.label} className="kc-hero-stat" style={{
              padding: '24px 40px 0 0', marginRight: 40,
              borderRight: i < stats.length - 1 ? '1px solid rgba(15,33,51,0.12)' : 'none',
              minWidth: 150
            }}>
              <div style={{ font: '500 40px/44px var(--ff-sans)', letterSpacing: '-0.02em', color: 'var(--gi-deep-ink)' }}>{s.value}</div>
              <div style={{
                fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.12em',
                textTransform: 'uppercase', color: 'var(--gi-graphite)', fontWeight: 500, marginTop: 10
              }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------
// Topic card — links to its topic archive page.
// ---------------------------------------------------------------
const KCTopicCard = ({ topic, gtmLocation = 'qa-topic-link' }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a className="kc-topic-card" href={topic.url}
      data-gtm-event="cta_click" data-gtm-label={topic.name}
      data-gtm-location={gtmLocation} data-gtm-stage="consideration"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        textAlign: 'left', cursor: 'pointer', textDecoration: 'none', border: '1px solid rgba(15,33,51,0.12)',
        opacity: 1, /* override global a:hover { opacity: 0.6 } — card has its own hover affordance */
        background: '#fff', borderRadius: 8, padding: '28px 26px 24px', display: 'flex',
        flexDirection: 'column', gap: 0, minHeight: 248, width: 'auto',
        boxShadow: hover ? '0 18px 40px -20px rgba(15,33,51,0.24)' : 'var(--shadow-1)',
        borderColor: hover ? 'rgba(94,143,109,0.55)' : 'rgba(15,33,51,0.12)',
        transform: hover ? 'translateY(-3px)' : 'none',
        transition: 'transform 240ms var(--ease-standard), box-shadow 240ms var(--ease-standard), border-color 240ms var(--ease-standard)'
      }}>
      <span style={{
        width: 48, height: 48, borderRadius: 6, display: 'inline-flex', alignItems: 'center',
        justifyContent: 'center', background: 'var(--gi-accent-soft)', marginBottom: 22
      }}>
        <i data-lucide={topic.icon} style={{ width: 24, height: 24, strokeWidth: 1.5, color: 'var(--gi-soft-green)' }} />
      </span>
      <h3 style={{
        font: '500 19px/26px var(--ff-sans)', letterSpacing: '-0.01em',
        color: hover ? 'var(--gi-soft-green)' : 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance',
        transition: 'color 200ms ease'
      }}>{topic.name}</h3>
      <p style={{ font: '400 14px/22px var(--ff-sans)', color: 'var(--gi-slate)', margin: '12px 0 0', textWrap: 'pretty' }}>{topic.desc}</p>
      <div style={{
        marginTop: 'auto', paddingTop: 22, display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', gap: 12, borderTop: '1px solid rgba(15,33,51,0.08)'
      }}>
        <span style={{
          fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
          color: 'var(--gi-graphite)', fontWeight: 500
        }}>{topic.count} Questions</span>
        <span style={{ font: '500 13px/1 var(--ff-sans)', color: 'var(--gi-soft-green)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          Browse
          <i data-lucide="arrow-right" style={{ width: 15, height: 15, strokeWidth: 1.75, transform: hover ? 'translateX(4px)' : 'none', transition: 'transform 200ms ease' }} />
        </span>
      </div>
    </a>
  );
};

// ---------------------------------------------------------------
// Sectors grid — sits ABOVE the topics grid; mirrors its design.
// Cards link to the sector archive (/sector/{slug}/).
// ---------------------------------------------------------------
const KCSectorGrid = ({ sectors }) => (
  <section data-gi-resp="kc-sector-grid" id="sectors" style={{ background: 'var(--gi-paper-cream)', padding: '88px 0 0' }}>
    <div className="kc-shell" style={KC_SHELL}>
      <SectionHeader eyebrowClassName="gi-eyebrow--green" eyebrow="Browse by sector"
        title="Start with your sector."
        sub="Commercial, industrial, and public-sector facilities — see every question for yours." />
      <div className="kc-sector-grid" data-gi-resp="kc-sector-grid"
        style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {sectors.map((s) => <KCTopicCard key={s.slug} topic={s} gtmLocation="qa-sector-link" />)}
      </div>
    </div>
  </section>
);

const KCTopicGrid = ({ topics }) => (
  <section data-gi-resp="kc-topic-grid" id="topics" style={{ background: 'var(--gi-paper-cream)', padding: '88px 0 96px' }}>
    <div className="kc-shell" style={KC_SHELL}>
      <SectionHeader eyebrowClassName="gi-eyebrow--green" eyebrow="Browse by topic"
        title="Choose a topic to get started."
        sub="Areas of commercial and industrial energy — pick one to see every question we answer." />
      <div className="kc-topic-grid" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {topics.map((t) => <KCTopicCard key={t.slug} topic={t} gtmLocation="qa-topic-link" />)}
      </div>
    </div>
  </section>
);

// ---------------------------------------------------------------
// Question row — list item (search results). Links to the Q&A page.
// ---------------------------------------------------------------
const KCQuestionRow = ({ q, showTopic }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a className="kc-question-row" href={q.href} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      data-gtm-event="cta_click" data-gtm-label={q.question}
      data-gtm-location="qa-search-result" data-gtm-stage="consideration"
      style={{
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'center',
        padding: '26px 0', borderBottom: '1px solid rgba(15,33,51,0.12)', textDecoration: 'none', border: 'none',
        borderBottomStyle: 'solid', borderBottomWidth: 1, borderBottomColor: 'rgba(15,33,51,0.12)',
        opacity: 1 /* override global a:hover fade */
      }}>
      <div>
        {showTopic && q.topicName && (
          <div style={{
            fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'var(--gi-sage-accent)', fontWeight: 500, marginBottom: 8
          }}>{q.topicName}</div>
        )}
        <h3 className="kc-q-title" style={{
          font: '500 19px/26px var(--ff-sans)', letterSpacing: '-0.01em',
          color: hover ? 'var(--gi-soft-green)' : 'var(--gi-deep-ink)', margin: 0, transition: 'color 180ms ease', textWrap: 'balance'
        }}>{q.question}</h3>
        {q.preview && <p style={{ font: '400 14.5px/22px var(--ff-sans)', color: 'var(--gi-slate)', margin: '8px 0 0', maxWidth: 720, textWrap: 'pretty' }}>{q.preview}</p>}
      </div>
      <span style={{ font: '500 13px/1 var(--ff-sans)', color: 'var(--gi-soft-green)', whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        View answer
        <i data-lucide="arrow-right" style={{ width: 15, height: 15, strokeWidth: 1.75, transform: hover ? 'translateX(4px)' : 'none', transition: 'transform 200ms ease' }} />
      </span>
    </a>
  );
};

// ---------------------------------------------------------------
// Global search results — replaces grid/popular while typing.
// ---------------------------------------------------------------
const KCSearchResults = ({ query, index }) => {
  const q = query.trim().toLowerCase();
  const tokens = q.split(/\s+/).filter(Boolean);
  const results = index.filter((item) => {
    const hay = (item.question + ' ' + (item.preview || '') + ' ' + (item.topicName || '')).toLowerCase();
    return tokens.every((t) => hay.includes(t));
  });
  return (
    <section data-gi-resp="kc-search-results" style={{ background: 'var(--gi-paper-cream)', padding: '64px 0 96px' }}>
      <div className="kc-shell" style={KC_SHELL}>
        <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--gi-sage-accent)', fontWeight: 500 }}>Search results</div>
        <h2 style={{ font: '500 34px/40px var(--ff-sans)', letterSpacing: '-0.02em', color: 'var(--gi-deep-ink)', margin: '16px 0 0', textWrap: 'balance' }}>
          {results.length} {results.length === 1 ? 'answer' : 'answers'} for “{query.trim()}”
        </h2>
        <div style={{ marginTop: 40, borderTop: results.length ? '1px solid rgba(15,33,51,0.12)' : 'none' }}>
          {results.length > 0
            ? results.map((item) => <KCQuestionRow key={item.slug} q={item} showTopic={true} />)
            : (
              <div style={{ paddingTop: 8 }}>
                <p style={{ font: '400 17px/28px var(--ff-sans)', color: 'var(--gi-slate)', margin: 0, maxWidth: 560 }}>
                  We couldn’t find a match. Try a broader term — or speak with our team and we’ll answer your question directly.
                </p>
                <div style={{ marginTop: 24 }}>
                  <Button variant="primary" size="md" href="/about/contact/">Contact our team</Button>
                </div>
              </div>
            )}
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------
// Popular questions — compact card grid.
// ---------------------------------------------------------------
const KCPopularCard = ({ q }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={q.href} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', flexDirection: 'column', textDecoration: 'none', border: 'none',
        background: '#fff', borderRadius: 8, padding: '24px 24px 22px', opacity: 1,
        boxShadow: hover ? '0 16px 36px -20px rgba(15,33,51,0.22)' : 'var(--shadow-1)',
        outline: hover ? '1px solid rgba(94,143,109,0.55)' : '1px solid rgba(15,33,51,0.10)',
        transform: hover ? 'translateY(-3px)' : 'none',
        transition: 'transform 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard), outline-color 220ms var(--ease-standard)'
      }}>
      <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--gi-sage-accent)', fontWeight: 500, marginBottom: 12 }}>{q.topicName}</div>
      <h3 style={{ font: '500 17px/24px var(--ff-sans)', letterSpacing: '-0.01em', color: hover ? 'var(--gi-soft-green)' : 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', transition: 'color 180ms ease' }}>{q.question}</h3>
      <span style={{ marginTop: 16, font: '500 12.5px/1 var(--ff-sans)', color: 'var(--gi-soft-green)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        View answer
        <i data-lucide="arrow-right" style={{ width: 14, height: 14, strokeWidth: 1.75, transform: hover ? 'translateX(4px)' : 'none', transition: 'transform 200ms ease' }} />
      </span>
    </a>
  );
};

const KCPopular = ({ popular }) => (
  <section data-gi-resp="kc-popular" id="popular" style={{ background: '#fff', borderTop: '1px solid rgba(15,33,51,0.08)', padding: '90px 0' }}>
    <div className="kc-shell" style={KC_SHELL}>
      <SectionHeader eyebrowClassName="gi-eyebrow--green" eyebrow="Most asked" title="Popular questions."
        sub="The questions commercial and industrial decision-makers ask us most often." />
      <div className="kc-popular-grid" style={{ marginTop: 52, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {popular.map((q) => <KCPopularCard key={q.slug} q={q} />)}
      </div>
    </div>
  </section>
);

// ---------------------------------------------------------------
// CTA — "Still have questions?" (soft-green brand surface).
// ---------------------------------------------------------------
const KCQuestionsCTA = () => (
  <section data-gi-resp="kc-cta" style={{ background: 'var(--gi-soft-green)', color: '#fff', padding: '96px 0', position: 'relative', overflow: 'hidden' }}>
    <div aria-hidden="true" style={{ position: 'absolute', right: -120, top: -120, opacity: 0.08, pointerEvents: 'none' }}>
      <img src={`${window.GI_BASE || ''}assets/logos/monogram-white.svg`} alt="" style={{ width: 560, height: 560 }} />
    </div>
    <div className="kc-shell" style={{ ...KC_SHELL, position: 'relative' }}>
      <div style={{ maxWidth: 860 }}>
        <Eyebrow onDark={true} className="gi-eyebrow--gold" style={{ color: 'rgba(255,255,255,0.8)' }}>Talk to a specialist</Eyebrow>
        <h2 className="kc-cta-h2" style={{ font: '500 56px/60px var(--ff-sans)', letterSpacing: '-0.03em', color: '#fff', margin: '24px 0 0', textWrap: 'balance' }}>Still have questions?</h2>
        <p style={{ font: '400 19px/30px var(--ff-sans)', color: 'rgba(255,255,255,0.86)', margin: '24px 0 40px', maxWidth: 640, textWrap: 'pretty' }}>
          Speak with our team about your facility, energy goals, and the opportunities available to you.
        </p>
        <div className="kc-cta-buttons" style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button variant="onDark" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute call</Button>
          <Button variant="outlineOnDark" size="lg" href="/about/contact/">Contact our team</Button>
        </div>
      </div>
    </div>
  </section>
);

// ---------------------------------------------------------------
// App — fetches the three datasets and orchestrates hub vs search.
// ---------------------------------------------------------------
const KnowledgeCentreApp = () => {
  // Prerender/hydration seed: the build injects __GI_INITIAL_STATE__.kc so the
  // server markup (topic grid + popular) matches the client's first render.
  const SEED = (typeof window !== 'undefined' && window.__GI_INITIAL_STATE__ && window.__GI_INITIAL_STATE__.kc) || null;
  const [state, setState] = React.useState(SEED
    ? { loading: false, sectors: SEED.sectors || [], topics: SEED.topics || [], index: SEED.index || [], popular: SEED.popular || [], total: SEED.total || 0 }
    : { loading: true, sectors: [], topics: [], index: [], popular: [], total: 0 });
  const [query, setQuery] = React.useState('');

  React.useEffect(() => {
    if (SEED) return; // already populated from the prerender seed
    const base = KC_REST_BASE.replace(/\/?$/, '/');
    const get = (path) => fetch(base + path, { headers: { Accept: 'application/json' } }).then((r) => r.ok ? r.json() : Promise.reject(r.status));
    Promise.all([get('qa/sectors'), get('qa/topics'), get('qa'), get('qa/popular')])
      .then(([sectors, topics, index, popular]) => setState({
        loading: false,
        sectors: (sectors && sectors.sectors) || [],
        topics: (topics && topics.topics) || [],
        index: (index && index.items) || [],
        popular: (popular && popular.items) || [],
        total: (topics && topics.total) || ((index && index.total) || 0)
      }))
      .catch(() => setState((s) => ({ ...s, loading: false })));
  }, []);

  // Keep lucide icons painted as content swaps in.
  React.useEffect(() => {
    const t = setInterval(() => window.lucide && window.lucide.createIcons({ attrs: { 'stroke-width': 1.5 } }), 200);
    return () => clearInterval(t);
  }, []);

  const searching = query.trim().length > 0;

  return (
    <div data-screen-label="Knowledge Centre">
      <LockedNavBar onHero={false} activeLink="Resources" />
      <KCBreadcrumb trail={[
        { label: 'Home', href: '/' },
        { label: 'Resources', href: '/resources/' },
        { label: 'Knowledge Centre', href: null }
      ]} />
      <KCHero query={query} onQuery={setQuery} total={state.total} topicCount={state.topics.length} />
      {searching
        ? <KCSearchResults query={query} index={state.index} />
        : (
          <React.Fragment>
            {state.sectors.length > 0 && <KCSectorGrid sectors={state.sectors} />}
            <KCTopicGrid topics={state.topics} />
            {state.popular.length > 0 && <KCPopular popular={state.popular} />}
          </React.Fragment>
        )}
      <KCQuestionsCTA />
      <Footer />
    </div>
  );
};

Object.assign(window, { KnowledgeCentreApp });