// Shared UI primitives used across all pages.

function Label({ zh, en, style }) {
  return (
    <div style={{ display:'flex', alignItems:'baseline', gap:8, ...style }}>
      <span style={{ fontSize:13, fontWeight:500, color:'var(--ink)' }}>{zh}</span>
      {en && <span className="en" style={{ fontSize:10.5, letterSpacing:'0.06em' }}>{en}</span>}
    </div>
  );
}

function Divider({ margin }) {
  return <div style={{ height:1, background:'var(--line)', margin: margin || '2px -20px' }} />;
}

function Card({ children, style, pad }) {
  return (
    <div style={{
      background:'var(--card)', border:'1px solid var(--line)',
      borderRadius:'var(--radius)', padding: pad ?? 20,
      ...style,
    }}>{children}</div>
  );
}

function PillButton({ onClick, icon, children, active, color }) {
  const c = color || 'var(--accent)';
  return (
    <button className="btn-reset" onClick={onClick} style={{
      padding: children ? '7px 14px' : '7px 10px',
      fontSize:12, borderRadius:99,
      border:`1px solid ${active ? c : 'var(--line)'}`,
      background: active ? 'var(--accent-soft)' : 'var(--card)',
      color: active ? 'var(--accent-ink)' : 'var(--ink-soft)',
      display:'flex', alignItems:'center', gap:5, transition:'all 0.15s',
      minWidth:36, justifyContent:'center', cursor:'pointer',
    }}>
      {icon && <span className="mono" style={{ fontSize:13 }}>{icon}</span>}
      {children && <span>{children}</span>}
    </button>
  );
}

function BigButton({ onClick, label, sublabel, color, pulse }) {
  const [pressed, setPressed] = React.useState(false);
  return (
    <button
      className="btn-reset"
      onPointerDown={() => setPressed(true)}
      onPointerUp={() => { setPressed(false); onClick && onClick(); }}
      onPointerLeave={() => setPressed(false)}
      style={{
        width:160, height:160, borderRadius:'50%',
        background: color || 'var(--accent)',
        color:'#fff',
        display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
        boxShadow: pressed
          ? `0 2px 8px color-mix(in oklab,${color||'var(--accent)'} 30%,transparent)`
          : `0 8px 32px color-mix(in oklab,${color||'var(--accent)'} 35%,transparent), 0 2px 6px color-mix(in oklab,${color||'var(--accent)'} 20%,transparent)`,
        transform: pressed ? 'scale(0.96)' : 'scale(1)',
        transition:'all 0.12s',
        cursor:'pointer',
        position:'relative',
        outline:'none',
      }}
    >
      {pulse && !pressed && (
        <span style={{
          position:'absolute', inset:-8,
          borderRadius:'50%',
          border:`2px solid ${color||'var(--accent)'}`,
          opacity:0.35,
          animation:'pulse-ring 1.8s ease-out infinite',
        }}/>
      )}
      <div style={{ fontSize:24, fontWeight:700, lineHeight:1 }}>{label}</div>
      {sublabel && <div style={{ fontSize:11, opacity:0.85, marginTop:4, letterSpacing:'0.04em' }}>{sublabel}</div>}
    </button>
  );
}

function StatChip({ label, value, unit, color }) {
  return (
    <div style={{
      background:'var(--bg-soft)', borderRadius:10,
      padding:'10px 14px', textAlign:'center', flex:1,
    }}>
      <div style={{ fontSize:9.5, color:'var(--ink-faint)', letterSpacing:'0.06em', marginBottom:3 }}>{label}</div>
      <div className="mono" style={{ fontSize:20, fontWeight:600, color: color||'var(--ink)', lineHeight:1 }}>{value}</div>
      {unit && <div style={{ fontSize:9, color:'var(--ink-faint)', marginTop:2 }}>{unit}</div>}
    </div>
  );
}

function SectionTitle({ zh, en }) {
  return (
    <div style={{ display:'flex', alignItems:'baseline', gap:10, marginBottom:14 }}>
      <div className="serif" style={{ fontSize:18, fontWeight:600 }}>{zh}</div>
      {en && <div className="en" style={{ fontStyle:'italic' }}>{en}</div>}
    </div>
  );
}

// Pulse animation injected once
if (!document.getElementById('pulse-style')) {
  const s = document.createElement('style');
  s.id = 'pulse-style';
  s.textContent = `
    @keyframes pulse-ring {
      0% { transform:scale(1); opacity:0.35; }
      100% { transform:scale(1.35); opacity:0; }
    }
    @keyframes tick-in {
      0% { transform:scale(1.4); opacity:0.6; }
      100% { transform:scale(1); opacity:1; }
    }
  `;
  document.head.appendChild(s);
}

Object.assign(window, { Label, Divider, Card, PillButton, BigButton, StatChip, SectionTitle });