/* global React */

window.CTABlock = function CTABlock() {
  const items = [
    { emoji: '☕', label: 'Buy Me a Coffee', meta: '준비 중', url: null },
    { emoji: '🐙', label: 'GitHub @johwanghee', meta: 'github.com', url: 'https://github.com/johwanghee' },
    { emoji: '📦', label: 'npm ttoksem', meta: 'npm', url: 'https://www.npmjs.com/package/ttoksem' },
    { emoji: '📖', label: 'setgeltei-temur 읽기', meta: 'piuro-works', url: 'https://piuro-works.github.io/setgeltei-temur/' },
  ];
  return (
    <section style={{ paddingTop: 32, paddingBottom: 48 }}>
      <h3 style={{ marginBottom: 18 }}>만나는 법</h3>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <li key={i} style={{
            display: 'flex', alignItems: 'baseline', gap: 12,
            padding: '12px 14px',
            background: 'var(--bg-elev)',
            border: '1px solid var(--rule)',
            borderRadius: 6,
          }}>
            <span style={{ fontSize: 18 }}>{it.emoji}</span>
            {it.url ? (
              <a href={it.url} target="_blank" rel="noreferrer" style={{ fontSize: 15, flex: 1 }}>{it.label}</a>
            ) : (
              <span style={{ fontSize: 15, color: 'var(--ink-3)', flex: 1 }}>{it.label} <em>— {it.meta}</em></span>
            )}
            {it.url && <span className="meta" style={{ color: 'var(--ink-3)' }}>↗ {it.meta}</span>}
          </li>
        ))}
      </ul>
    </section>
  );
};

window.SiteFooter = function SiteFooter() {
  return (
    <footer style={{
      marginTop: 48, paddingTop: 32, paddingBottom: 48,
      borderTop: '1px solid var(--rule)',
    }}>
      <div className="meta" style={{ color: 'var(--ink-2)', lineHeight: 1.8 }}>
        이 사이트는 자주 갱신되지 않을 수 있습니다.<br />
        콘텐츠 라이선스: CC BY 4.0 (단, setgeltei-temur는 자체 BY-NC-ND 4.0).<br />
        오늘 호빛이 사육장 온도: <span style={{ color: 'var(--ok)' }}>24.3°C</span> · 정적 데모, HA 연동은 추후.
      </div>
    </footer>
  );
};
