/* global React, Label, SectionHead */

function loadMemoCount() {
  try {
    const d = JSON.parse(localStorage.getItem('memoBoard3') || '{}');
    let total = 0, done = 0;
    ['today','short','mid','long'].forEach(k => {
      (d[k]||[]).forEach(i => { total++; if(i.done) done++; });
    });
    return { total, active: total - done, done };
  } catch { return { total:0, active:0, done:0 }; }
}

function MemoEntry() {
  const counts = loadMemoCount();
  return (
    <section style={{ padding: '32px 72px 0' }}>
      <a href="memo-board.html" style={{ textDecoration: 'none', display: 'block' }}>
        <div style={{
          border: '1px solid var(--rule)',
          padding: '28px 32px',
          cursor: 'pointer',
          transition: 'all 0.3s',
          position: 'relative',
          overflow: 'hidden',
        }}
        onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.boxShadow = '0 4px 20px rgba(0,0,0,0.06)'; }}
        onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--rule)'; e.currentTarget.style.boxShadow = 'none'; }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <Label color="var(--accent)" spacing="0.25em">ATELIER · 备忘录</Label>
              <div style={{
                fontFamily: 'var(--serif-zh)', fontSize: 20, color: 'var(--ink)',
                marginTop: 8, letterSpacing: '0.1em',
              }}>
                灵感备忘板
              </div>
              <div className="en" style={{
                fontSize: 13, fontStyle: 'italic', color: 'var(--ink-mute)', marginTop: 4,
              }}>
                {counts.active > 0
                  ? `${counts.active} things waiting · ${counts.done} done`
                  : 'a clean slate — start something new'}
              </div>
            </div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: 'var(--serif-en)', fontSize: 36, color: 'var(--accent)', lineHeight: 1 }}>
                  {counts.active}
                </div>
                <Label color="var(--ink-faint)">待办</Label>
              </div>
              <div style={{
                fontFamily: 'var(--serif-en)', fontSize: 24, color: 'var(--ink-faint)',
                opacity: 0.4,
              }}>→</div>
            </div>
          </div>
        </div>
      </a>
    </section>
  );
}

window.MemoEntry = MemoEntry;