// COVIA Hero v2 — Signature particle crow + kinetic type
// Stats derive from data layer (see data/knowledge-stats.js + data/site-meta.js)
// so Hero and Knowledge always show consistent numbers.
function CoviaHeroV2({ knowledge = window.COVIA_KNOWLEDGE, meta = window.COVIA_META }) {
  const { lang, t } = useLang();
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    if (canvasRef.current) {
      new CoviaFlock(canvasRef.current, '/landing/assets/co.webp');
    }
  }, []);

  const knowledgeTotal = knowledge.reduce((s, c) => s + c.count, 0);
  const stats = [
    { n: String(knowledgeTotal + meta.pilgrimCount + meta.introCount), l: 'Articles' },
    { n: String(knowledge.length), l: 'Topics' },
    { n: String(meta.languages.length), l: 'Languages' },
  ];

  return React.createElement('section', {
    className: 'hero-v2',
    style: {
      minHeight: '100vh', position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      padding: 'clamp(100px, 12vh, 160px) clamp(24px, 5vw, 80px) 80px',
    }
  },
    React.createElement('canvas', {
      ref: canvasRef, className: 'hero-canvas',
      style: { position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 1 }
    }),

    // hero-grid-overlay removed — global body::before grid covers all sections.

    // Top meta bar
    React.createElement('div', { className: 'hero-meta' },
      React.createElement('span', null, t('hero.coordinates')),
      React.createElement('span', null, `${meta.version} / ${meta.established}`),
      React.createElement('span', null, t('hero.tagline')),
    ),

    // Kinetic COVIA wordmark
    React.createElement('div', { className: 'hero-title-wrap' },
      React.createElement('h1', { className: 'hero-title' },
        ['C','O','V','I','A'].map((l, i) =>
          React.createElement('span', {
            key: i,
            className: 'hero-letter',
            style: { '--i': i }
          }, l)
        )
      ),
    ),

    // Bottom editorial row
    React.createElement('div', { className: 'hero-footer-row' },
      React.createElement('div', { className: 'hero-desc' },
        React.createElement('p', null,
          t('hero.desc.pre'),
          React.createElement('em', null, t('hero.desc.em1')),
          t('hero.desc.mid1'),
          React.createElement('em', null, t('hero.desc.em2')),
          t('hero.desc.mid2'),
          React.createElement('em', null, t('hero.desc.em3')),
          t('hero.desc.post'),
        )
      ),
      React.createElement('div', { className: 'hero-stats' },
        stats.map(s =>
          React.createElement('div', { key: s.l, className: 'hero-stat' },
            React.createElement('div', { className: 'hero-stat-n' }, s.n),
            React.createElement('div', { className: 'hero-stat-l' }, s.l),
          )
        )
      ),
    ),

    // Taipei clock with built-in alarm — right-side vertical widget
    (typeof CoviaTaipeiClock !== 'undefined') && React.createElement(CoviaTaipeiClock, null),
  );
}

window.CoviaHeroV2 = CoviaHeroV2;