// stack.jsx — daily stack
function Stack({ t }) {
  return (
    <section id="stack" style={{
      paddingTop: 120, paddingBottom: 120,
      borderTop: '1.5px solid var(--ink)',
      background: 'var(--paper)'
    }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'end', marginBottom: 80 }}>
          <div>
            <div className="kicker reveal" style={{ marginBottom: 28 }}>
              <span className="dot"></span>{t.stack_eye}
            </div>
            <h2 className="display reveal" style={{ fontSize: 'clamp(56px, 8vw, 128px)' }}>
              <div>{t.stack_title_1}</div>
              <div className="chrome-text" style={{ fontStyle: 'italic' }}>
                {t.stack_title_2}
              </div>
            </h2>
          </div>
          <p className="reveal" style={{ fontSize: 20, color: 'var(--ink)', maxWidth: 380, alignSelf: 'end' }}>
            {t.stack_sub}
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {t.stack_groups.map((g, gi) => {
            const colors = ['magenta', 'azure', 'lime', 'tangerine'];
            return (
              <div key={g.label} className="reveal" style={{
                paddingTop: 24, borderTop: '3px solid var(--ink)',
              }}>
                <div style={{
                  display: 'inline-block',
                  padding: '6px 10px', background: `var(--${colors[gi]})`,
                  fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
                  letterSpacing: '0.16em', textTransform: 'uppercase',
                  borderRadius: 4, color: gi === 2 ? 'var(--ink)' : 'white',
                  marginBottom: 28
                }}>
                  0{gi + 1} · {g.label}
                </div>
                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 0 }}>
                  {g.items.map(it => (
                    <li key={it} style={{
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      fontSize: 16, fontWeight: 500,
                      padding: '14px 0', borderBottom: '1.5px solid var(--line)'
                    }}>
                      <span>{it}</span>
                      <Star size={12} color={`var(--${colors[gi]})`} />
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Stack });