// Shared components for blog article pages
// Usage: <script type="text/babel" src="/_article_template.jsx"></script>
// Then: const { ReadingProgress, ArticleHeroImg, ArticleTOC, ArticleCallout, StepBlock, StatGrid, PullQuote, TimelineList, CheckList } = window;

(function() {
  const { C, F } = window;

  function ReadingProgress() {
    const [pct, setPct] = React.useState(0);
    React.useEffect(() => {
      const onScroll = () => {
        const el = document.documentElement;
        const scrolled = el.scrollTop;
        const total = el.scrollHeight - el.clientHeight;
        setPct(total > 0 ? (scrolled / total) * 100 : 0);
      };
      window.addEventListener('scroll', onScroll, { passive: true });
      return () => window.removeEventListener('scroll', onScroll);
    }, []);
    return React.createElement('div', {
      style: {
        position: 'fixed', top: 0, left: 0, zIndex: 9999,
        width: pct + '%', height: 3,
        background: '#FA6015',
        transition: 'width 0.08s linear',
        pointerEvents: 'none',
      }
    });
  }

  function ArticleHeroImg({ src, alt }) {
    if (!src) return null;
    return React.createElement('div', {
      style: {
        borderTop: `2px solid ${C.ink}`,
        borderBottom: `2px solid ${C.ink}`,
        overflow: 'hidden',
        maxHeight: 440,
        lineHeight: 0,
      }
    }, React.createElement('img', {
      src,
      alt: alt || '',
      loading: 'eager',
      style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },
    }));
  }

  function ArticleTOC({ items }) {
    if (!items || !items.length) return null;
    return React.createElement('nav', {
      style: {
        background: C.panel,
        border: `1px solid ${C.rule}`,
        borderLeft: `3px solid ${C.hi}`,
        padding: '20px 24px',
        marginBottom: 40,
      }
    },
      React.createElement('div', {
        style: { fontFamily: F.mono, fontSize: 11, letterSpacing: 1.4, color: C.hi, fontWeight: 700, marginBottom: 12 }
      }, '// IN THIS ARTICLE'),
      React.createElement('ol', { style: { margin: 0, paddingLeft: 20 } },
        items.map(({ id, label }) =>
          React.createElement('li', { key: id, style: { fontFamily: F.sans, fontSize: 14, lineHeight: 1.6, marginBottom: 4 } },
            React.createElement('a', {
              href: '#' + id,
              style: { color: C.text, textDecoration: 'none', borderBottom: `1px solid transparent`, transition: 'border-color 0.12s' },
              onMouseEnter: e => e.target.style.borderColor = C.hi,
              onMouseLeave: e => e.target.style.borderColor = 'transparent',
            }, label)
          )
        )
      )
    );
  }

  function ArticleCallout({ variant, label, children }) {
    const styles = {
      stat: { background: C.ink, color: C.bg, borderLeft: `4px solid ${C.hi}` },
      tip:  { background: C.panel, color: C.ink, borderLeft: `4px solid ${C.hi}` },
      warn: { background: C.panel, color: C.ink, borderLeft: `4px solid ${C.ink}` },
    };
    const s = styles[variant] || styles.stat;
    const labelColor = variant === 'stat' ? C.hi : C.hi;
    return React.createElement('div', {
      style: { ...s, padding: '24px 28px', margin: '32px 0' }
    },
      React.createElement('div', {
        style: { fontFamily: F.mono, fontSize: 11, letterSpacing: 1.4, color: labelColor, fontWeight: 700, marginBottom: 8 }
      }, label || (variant === 'tip' ? 'TIP' : variant === 'warn' ? 'NOTE' : 'KEY STAT')),
      React.createElement('div', {
        style: { fontFamily: F.sans, fontSize: 16, lineHeight: 1.6, margin: 0 }
      }, children)
    );
  }

  function StepBlock({ num, title, children }) {
    return React.createElement('div', {
      style: { borderLeft: `3px solid ${C.hi}`, paddingLeft: 24, marginBottom: 40, paddingTop: 4 }
    },
      React.createElement('div', {
        style: { fontFamily: F.mono, fontSize: 52, lineHeight: 1, color: C.hi, fontWeight: 700, letterSpacing: '-0.03em', marginBottom: 4, userSelect: 'none' }
      }, String(num).padStart(2, '0')),
      React.createElement('div', {
        style: { fontFamily: F.display, fontSize: 13, letterSpacing: 1.8, textTransform: 'uppercase', color: C.ink, marginBottom: 12, lineHeight: 1.2 }
      }, title),
      React.createElement('div', {
        style: { fontFamily: F.sans, fontSize: 16, lineHeight: 1.7, color: '#2a2a30' }
      }, children)
    );
  }

  function StatGrid({ stats }) {
    return React.createElement('div', {
      style: { display: 'grid', gridTemplateColumns: `repeat(${Math.min(stats.length, 4)}, 1fr)`, gap: 2, margin: '36px 0' }
    },
      stats.map(({ num, label, sub }, i) =>
        React.createElement('div', {
          key: i,
          style: { background: C.panel, border: `1px solid ${C.rule}`, padding: '28px 20px', textAlign: 'center' }
        },
          React.createElement('div', {
            style: { fontFamily: F.display, fontSize: 40, color: C.hi, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 10 }
          }, num),
          React.createElement('div', {
            style: { fontFamily: F.mono, fontSize: 11, letterSpacing: 1.4, color: C.muted, fontWeight: 600, textTransform: 'uppercase', lineHeight: 1.4 }
          }, label),
          sub ? React.createElement('div', {
            style: { fontFamily: F.sans, fontSize: 12, color: C.muted, marginTop: 6, lineHeight: 1.3 }
          }, sub) : null
        )
      )
    );
  }

  function PullQuote({ stat, body, source }) {
    return React.createElement('div', {
      style: { background: C.ink, borderLeft: `6px solid ${C.hi}`, padding: '40px 36px', margin: '44px 0' }
    },
      React.createElement('div', {
        style: { fontFamily: F.display, fontSize: 'clamp(56px, 10vw, 88px)', lineHeight: 0.88, letterSpacing: '-0.035em', color: C.hi, textTransform: 'uppercase', marginBottom: 20 }
      }, stat),
      React.createElement('div', {
        style: { fontFamily: F.sans, fontSize: 17, lineHeight: 1.6, color: C.bg, maxWidth: 560 }
      }, body),
      source ? React.createElement('div', {
        style: { fontFamily: F.mono, fontSize: 11, letterSpacing: 1.4, color: C.hi, fontWeight: 700, marginTop: 16, textTransform: 'uppercase' }
      }, '— ' + source) : null
    );
  }

  function TimelineList({ items }) {
    return React.createElement('div', { style: { margin: '36px 0' } },
      items.map(({ time, text }, i) => {
        const isLast = i === items.length - 1;
        return React.createElement('div', {
          key: i,
          style: { display: 'flex', gap: 20, position: 'relative', paddingBottom: isLast ? 0 : 28 }
        },
          React.createElement('div', {
            style: { display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0, width: 16 }
          },
            React.createElement('div', {
              style: { width: 10, height: 10, background: C.hi, flexShrink: 0, marginTop: 4 }
            }),
            !isLast ? React.createElement('div', {
              style: { width: 2, flex: 1, background: C.rule, marginTop: 6 }
            }) : null
          ),
          React.createElement('div', { style: { flex: 1 } },
            React.createElement('div', {
              style: { fontFamily: F.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.2, color: C.hi, textTransform: 'uppercase', marginBottom: 6, lineHeight: 1 }
            }, time),
            React.createElement('div', {
              style: { fontFamily: F.sans, fontSize: 16, lineHeight: 1.65, color: '#2a2a30' }
            }, text)
          )
        );
      })
    );
  }

  function CheckList({ items }) {
    return React.createElement('div', { style: { margin: '24px 0' } },
      items.map((item, i) =>
        React.createElement('div', {
          key: i,
          style: { display: 'flex', alignItems: 'flex-start', gap: 14, marginBottom: 12 }
        },
          React.createElement('div', {
            style: { flexShrink: 0, width: 20, height: 20, background: C.hi, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 2 }
          },
            React.createElement('span', {
              style: { fontFamily: F.mono, fontSize: 12, fontWeight: 700, color: C.ink, lineHeight: 1, userSelect: 'none' }
            }, '✓')
          ),
          React.createElement('div', {
            style: { fontFamily: F.sans, fontSize: 16, lineHeight: 1.65, color: '#2a2a30', flex: 1 }
          }, item)
        )
      )
    );
  }

  Object.assign(window, { ReadingProgress, ArticleHeroImg, ArticleTOC, ArticleCallout, StepBlock, StatGrid, PullQuote, TimelineList, CheckList });
})();