// sections.jsx — 보고서 각 섹션

// ============ 1. 헤드라인 요약 (오늘의 핵심 + 중요도 별) ============
function Headlines({ onMore }) {
  const { dark, lang, type } = useTheme();
  const p = palette(dark);
  const lines = HEADLINES[lang];
  const serif = type==='serif';
  return (
    <Card padded={false} style={{ padding:'22px 20px 20px' }}>
      <div style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        marginBottom:14,
      }}>
        <div style={{
          fontSize:10, letterSpacing:'0.18em', color:p.faint,
          fontFamily:'"JetBrains Mono", monospace',
        }}>{lang==='ko'?'오늘의 핵심':'TODAY · TLDR'}</div>
        <button onClick={onMore} style={{
          appearance:'none', border:'none', background:'transparent', cursor:'pointer',
          fontSize:10.5, fontFamily:'"JetBrains Mono", monospace',
          letterSpacing:'0.12em', color:p.muted, padding:'4px 0',
          display:'inline-flex', alignItems:'center', gap:3,
        }}>
          {lang==='ko'?'더보기':'MORE'}
          <svg width="9" height="9" viewBox="0 0 9 9">
            <path d="M2 1.5L5.5 4.5L2 7.5" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </div>
      <ol style={{
        margin:0, padding:0, listStyle:'none',
        display:'flex', flexDirection:'column', gap:14,
      }}>
        {lines.map((h,i)=>{
          const clickable = !!h.link;
          const handleClick = () => { if (clickable) window.open(h.link, '_blank', 'noopener'); };
          return (
            <li key={i}
              onClick={handleClick}
              style={{
                display:'flex', gap:12,
                cursor: clickable ? 'pointer' : 'default',
              }}>
              <span style={{
                fontFamily:'"JetBrains Mono", monospace', fontSize:11,
                color:p.faint, marginTop:4, width:14, flexShrink:0,
              }}>0{i+1}</span>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ marginBottom:4, display:'flex', gap:1 }}>
                  {[1,2,3,4,5].map(k=>(
                    <svg key={k} width="10" height="10" viewBox="0 0 10 10" style={{ marginRight:1 }}>
                      <path d="M5 0.5l1.4 3 3.1.3-2.3 2.1.7 3.1L5 7.5 2.1 9l.7-3.1L0.5 3.8l3.1-.3z"
                        fill={k<=h.imp? p.text : 'transparent'}
                        stroke={k<=h.imp? p.text : p.line2} strokeWidth="0.6"/>
                    </svg>
                  ))}
                </div>
                <span style={{
                  fontFamily: serif? '"Fraunces", Georgia, serif' : '"Inter Tight", system-ui',
                  fontSize: serif? 18:16, fontWeight: serif? 400:500,
                  lineHeight:1.4, color:p.text, letterSpacing:-0.2,
                  textWrap:'pretty',
                }}>{h.text}</span>
              </div>
            </li>
          );
        })}
      </ol>
    </Card>
  );
}

// ============ 2. 지수 스냅샷 (4열 그리드 + 스파크라인) ============
function IndexSnapshot({ onSelect }) {
  const { dark, density, lang } = useTheme();
  const p = palette(dark);
  const rowPad = density==='dense'? 9 : 12;
  return (
    <>
      <SectionLabel
        kicker={lang==='ko'?'지수 & 환율':'INDICES & FX'}
        title={lang==='ko'?'증시 동향':'Market Trend'}
        right={lang==='ko'?'탭하여 차트':'tap for chart'}
      />
      <Card padded={false}>
        {INDICES.map((row,i)=>{
          const up = row.pct>=0;
          const isLast = i===INDICES.length-1;
          // 숫자 포맷 — 자리수 맞춤
          const pxStr = row.px >= 10000
            ? row.px.toLocaleString('en-US', {maximumFractionDigits:0})
            : row.px.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2});
          return (
            <button
              key={row.sym}
              onClick={()=> onSelect && onSelect(row.sym)}
              style={{
                display:'grid',
                gridTemplateColumns: '68px minmax(0,1fr) auto auto',
                alignItems:'center', columnGap:10,
                padding:`${rowPad}px 16px`,
                width:'100%', textAlign:'left', appearance:'none',
                background:'transparent', border:'none', cursor:'pointer',
                borderBottom: isLast? 'none' : `0.5px solid ${p.line}`,
                font:'inherit',
              }}
            >
              <div style={{
                fontSize:12, fontWeight:600, letterSpacing:-0.1,
                color:p.text, fontFamily:'"Inter Tight", system-ui',
                overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
              }}>{row.sym}</div>
              <div style={{ minWidth:0, display:'flex', alignItems:'center' }}>
                <Spark data={row.spark} up={up} w={density==='dense'?56:64} h={20}/>
              </div>
              <div style={{
                textAlign:'right',
                fontFamily:'"JetBrains Mono", monospace',
                fontVariantNumeric:'tabular-nums',
                fontSize:12.5, color:p.text, minWidth: 58,
              }}>{pxStr}</div>
              <div style={{ textAlign:'right', minWidth: 68 }}>
                <Delta pct={row.pct} size={11}/>
              </div>
            </button>
          );
        })}
      </Card>
    </>
  );
}

// ============ 3. 섹터 히트맵 ============
function SectorHeatmap({ onSelect }) {
  const { dark, lang } = useTheme();
  const p = palette(dark);
  const sorted = [...SECTORS].sort((a,b)=> b.pct - a.pct);
  const max = Math.max(...sorted.map(s=>Math.abs(s.pct))) || 1;
  return (
    <>
      <SectionLabel
        kicker={lang==='ko'?'섹터':'SECTORS'}
        title={lang==='ko'?'업종별 히트맵':'Sector Heatmap'}
        right={lang==='ko'?'상승률 순':'by gain'}
      />
      <Card padded={false}>
        {sorted.map((s,i)=>{
          const up = s.pct>=0;
          const intensity = Math.min(1, Math.abs(s.pct)/max);
          const upRgb = dark ? '111,215,196' : '31,140,120';
          const dnRgb = dark ? '240,138,122' : '196,90,72';
          const rgb = up ? upRgb : dnRgb;
          const barW = Math.max(6, intensity*100);
          const hasDrill = !!SECTOR_STOCKS[s.name];
          const isLast = i === sorted.length - 1;
          return (
            <button
              key={s.name}
              onClick={()=> hasDrill && onSelect && onSelect(s.name)}
              style={{
                display:'grid',
                gridTemplateColumns:'22px minmax(0,1fr) 72px 70px',
                alignItems:'center', columnGap:10,
                padding:'11px 16px',
                width:'100%', textAlign:'left', appearance:'none',
                background:'transparent', border:'none',
                borderBottom: isLast ? 'none' : `0.5px solid ${p.line}`,
                cursor: hasDrill ? 'pointer' : 'default',
                font:'inherit',
              }}
            >
              <div style={{
                fontFamily:'"JetBrains Mono", monospace', fontSize:10,
                color:p.faint, fontVariantNumeric:'tabular-nums',
              }}>{String(i+1).padStart(2,'0')}</div>
              <div style={{
                fontSize:13, fontWeight:500, color:p.text,
                letterSpacing:-0.1,
                overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
              }}>{s.name}</div>
              <div style={{
                height:6, background:p.surface2, borderRadius:3, overflow:'hidden',
                position:'relative',
              }}>
                <div style={{
                  position:'absolute', top:0, bottom:0, left:0,
                  width:`${barW}%`,
                  background:`rgba(${rgb}, ${0.55 + intensity*0.35})`,
                }}/>
              </div>
              <div style={{
                textAlign:'right',
                fontFamily:'"JetBrains Mono", monospace', fontSize:12.5,
                fontVariantNumeric:'tabular-nums', fontWeight:600,
                color: up ? p.inkUp : p.inkDn,
              }}>{sign(s.pct)}{Math.abs(s.pct).toFixed(2)}%</div>
            </button>
          );
        })}
      </Card>
    </>
  );
}

// ============ 3b. 섹터 드릴다운 시트 (bottom sheet) ============
function SectorSheet({ sector, onClose, onPickStock }) {
  const { dark, lang } = useTheme();
  const p = palette(dark);
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(()=>{
    if (sector) { requestAnimationFrame(()=>setMounted(true)); }
    else setMounted(false);
  }, [sector]);

  if (!sector) return null;
  const meta = SECTORS.find(s=>s.name===sector);
  const stocks = SECTOR_STOCKS[sector] || [];
  const up = (meta?.pct||0) >= 0;
  const upRgb = dark ? '111,215,196' : '31,140,120';
  const dnRgb = dark ? '240,138,122' : '196,90,72';
  const chipRgb = up ? upRgb : dnRgb;

  return (
    <div style={{
      position:'absolute', inset:0, zIndex:100,
      pointerEvents: 'auto',
    }}>
      {/* scrim */}
      <div
        onClick={onClose}
        style={{
          position:'absolute', inset:0,
          background:'rgba(0,0,0,0.38)',
          backdropFilter:'blur(2px)',
          WebkitBackdropFilter:'blur(2px)',
          opacity: mounted ? 1 : 0,
          transition:'opacity 220ms ease',
        }}
      />
      {/* sheet */}
      <div style={{
        position:'absolute', left:0, right:0, bottom:0,
        background: p.bg,
        borderTopLeftRadius: 28, borderTopRightRadius: 28,
        maxHeight: '82%',
        display:'flex', flexDirection:'column',
        transform: mounted ? 'translateY(0)' : 'translateY(100%)',
        transition:'transform 320ms cubic-bezier(0.25, 1, 0.32, 1)',
        boxShadow:'0 -20px 48px rgba(0,0,0,0.25)',
        overflow:'hidden',
      }}>
        {/* grabber */}
        <div style={{ display:'flex', justifyContent:'center', padding:'10px 0 2px' }}>
          <div style={{ width:36, height:5, borderRadius:3, background:p.line2 }}/>
        </div>
        {/* header */}
        <div style={{ padding:'14px 22px 18px', display:'flex', alignItems:'flex-start', gap:12 }}>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{
              fontSize:10, letterSpacing:'0.16em', color:p.faint,
              fontFamily:'"JetBrains Mono", monospace', marginBottom:5,
            }}>{lang==='ko'?'섹터':'SECTOR'}</div>
            <div style={{
              fontSize:26, fontWeight:600, color:p.text,
              fontFamily:'"Inter Tight", system-ui', letterSpacing:-0.5,
              lineHeight:1.1,
            }}>{sector}</div>
            <div style={{
              marginTop:8, display:'inline-flex', gap:10, alignItems:'center',
              padding:'5px 10px', borderRadius:999,
              background:`rgba(${chipRgb},0.14)`,
              border:`1px solid rgba(${chipRgb},0.32)`,
            }}>
              <Delta pct={meta.pct} size={12}/>
              <span style={{
                fontSize:10, color:p.muted, letterSpacing:'0.1em',
                fontFamily:'"JetBrains Mono", monospace',
              }}>{stocks.length} {lang==='ko'?'종목':'stocks'}</span>
            </div>
          </div>
          <button onClick={onClose} aria-label="close" style={{
            width:34, height:34, borderRadius:'50%', border:'none', cursor:'pointer',
            background: p.surface2, color:p.muted,
            display:'flex', alignItems:'center', justifyContent:'center',
            flexShrink:0,
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14">
              <path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
            </svg>
          </button>
        </div>

        {/* stock list */}
        <div style={{
          flex:1, overflowY:'auto', padding:'0 14px 28px',
          WebkitOverflowScrolling:'touch',
        }}>
          <div style={{
            padding:'8px 12px 6px', display:'grid',
            gridTemplateColumns:'22px 1fr 78px 84px',
            gap:12, alignItems:'center',
            fontSize:10, letterSpacing:'0.12em', color:p.faint,
            fontFamily:'"JetBrains Mono", monospace',
          }}>
            <div>#</div>
            <div>{lang==='ko'?'종목':'NAME'}</div>
            <div style={{ textAlign:'right' }}>{lang==='ko'?'현재가':'PRICE'}</div>
            <div style={{ textAlign:'right' }}>{lang==='ko'?'등락':'CHG'}</div>
          </div>
          <Card padded={false} style={{ margin:0 }}>
            {stocks.map((r,i)=>(
              <button key={r.sym}
                onClick={()=> onPickStock && onPickStock(r)}
                style={{
                  appearance:'none', border:'none', font:'inherit',
                  background:'transparent', width:'100%', textAlign:'left',
                  display:'grid', gridTemplateColumns:'22px 1fr 78px 84px',
                  alignItems:'center', gap:12, padding:'12px 14px',
                  borderBottom: i===stocks.length-1? 'none' : `0.5px solid ${p.line}`,
                  cursor:'pointer',
                }}>
                <div style={{
                  fontFamily:'"JetBrains Mono", monospace', fontSize:11,
                  color:p.faint, fontVariantNumeric:'tabular-nums',
                }}>{String(i+1).padStart(2,'0')}</div>
                <div style={{ minWidth:0 }}>
                  <div style={{
                    fontSize:14, fontWeight:600, color:p.text,
                    letterSpacing:-0.2, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
                  }}>{r.name}</div>
                  <div style={{
                    fontFamily:'"JetBrains Mono", monospace', fontSize:10,
                    color:p.faint, marginTop:2,
                  }}>{r.sym} · {lang==='ko'?'시총':'MC'} {r.mcap} · {r.vol}</div>
                </div>
                <div style={{
                  textAlign:'right', fontFamily:'"JetBrains Mono", monospace',
                  fontSize:13, color:p.text, fontVariantNumeric:'tabular-nums',
                }}>{fmt(r.px,0)}</div>
                <div style={{ textAlign:'right' }}>
                  <Delta pct={r.pct} size={12}/>
                </div>
              </button>
            ))}
          </Card>
          <div style={{
            textAlign:'center', marginTop:14,
            fontFamily:'"JetBrains Mono", monospace', fontSize:10,
            color:p.faint, letterSpacing:'0.14em',
          }}>— {lang==='ko'?'시총 순':'BY MARKET CAP'} —</div>
        </div>
      </div>
    </div>
  );
}

// ============ 4. TOP 상승/하락 (탭) ============
function MoversList() {
  const { dark, lang } = useTheme();
  const p = palette(dark);
  const [tab, setTab] = React.useState('gainers');
  const data = tab==='gainers' ? GAINERS : LOSERS;
  return (
    <>
      <SectionLabel
        kicker={lang==='ko'?'등락 상위':'MOVERS'}
        title={lang==='ko'?'TOP 5':'Top 5'}
      />
      <Card padded={false}>
        <div style={{
          display:'flex', gap:0, padding:'12px 14px 0',
          borderBottom:`0.5px solid ${p.line}`,
        }}>
          {[
            ['gainers', lang==='ko'?'상승':'Gainers'],
            ['losers',  lang==='ko'?'하락':'Losers'],
          ].map(([k,label])=>(
            <button key={k} onClick={()=>setTab(k)} style={{
              background:'none', border:'none', cursor:'pointer',
              padding:'8px 14px 12px', marginRight:4,
              fontSize:13, fontWeight: tab===k?600:500,
              color: tab===k? p.text : p.muted,
              borderBottom: tab===k? `2px solid ${p.text}` : '2px solid transparent',
              fontFamily:'"Inter Tight", system-ui',
              marginBottom:-0.5,
            }}>{label}</button>
          ))}
        </div>
        {data.map((r,i)=>(
          <div key={r.sym} style={{
            display:'grid', gridTemplateColumns:'22px 1fr 78px 92px',
            alignItems:'center', gap:12, padding:'12px 18px',
            borderBottom: i===data.length-1? 'none' : `0.5px solid ${p.line}`,
          }}>
            <div style={{
              fontFamily:'"JetBrains Mono", monospace', fontSize:11,
              color:p.faint,
            }}>0{i+1}</div>
            <div style={{ minWidth:0 }}>
              <div style={{
                fontSize:14, fontWeight:600, color:p.text,
                letterSpacing:-0.2, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
              }}>{r.name}</div>
              <div style={{
                fontFamily:'"JetBrains Mono", monospace', fontSize:10,
                color:p.faint, marginTop:2,
              }}>{r.sym} · {r.vol}</div>
            </div>
            <div style={{
              textAlign:'right', fontFamily:'"JetBrains Mono", monospace',
              fontSize:13, color:p.text, fontVariantNumeric:'tabular-nums',
            }}>{fmt(r.px,0)}</div>
            <div style={{ textAlign:'right' }}>
              <Delta pct={r.pct} size={12}/>
            </div>
          </div>
        ))}
      </Card>
    </>
  );
}

// ============ 5. 타임라인 ============
function TimelineSection() {
  const { dark, lang } = useTheme();
  const p = palette(dark);
  return (
    <>
      <SectionLabel
        kicker={lang==='ko'?'이벤트':'EVENTS'}
        title={lang==='ko'?'오늘의 타임라인':"Today's Timeline"}
        right={'07 events'}
      />
      <Card padded={false} style={{ padding:'8px 18px 8px' }}>
        {TIMELINE.map((e,i)=>(
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'48px 22px 1fr',
            gap:10, padding:'10px 0',
            borderBottom: i===TIMELINE.length-1? 'none' : `0.5px solid ${p.line}`,
          }}>
            <div style={{
              fontFamily:'"JetBrains Mono", monospace', fontSize:11,
              color:p.muted, fontVariantNumeric:'tabular-nums', paddingTop:2,
            }}>{e.t}</div>
            {/* 세로 축 마커 */}
            <div style={{ position:'relative' }}>
              <div style={{
                position:'absolute', left:6, top:0, bottom:-10,
                width:1, background:p.line,
              }}/>
              <div style={{
                position:'absolute', left:3, top:5, width:7, height:7,
                borderRadius:'50%',
                background: e.tag==='OPEN'||e.tag==='CLOSE' ? p.text : 'transparent',
                border: `1.5px solid ${p.text}`,
              }}/>
            </div>
            <div>
              <div style={{
                fontFamily:'"JetBrains Mono", monospace', fontSize:9,
                letterSpacing:'0.12em', color:p.faint,
              }}>{e.tag}</div>
              <div style={{
                fontSize:14, color:p.text, lineHeight:1.35,
                letterSpacing:-0.2, marginTop:2, textWrap:'pretty',
              }}>{lang==='ko'? e.titleKo : e.titleEn}</div>
            </div>
          </div>
        ))}
      </Card>
    </>
  );
}

// ============ 6. 애널리스트 코멘터리 ============
function Commentary() {
  const { dark, lang, type } = useTheme();
  const p = palette(dark);
  const serif = type==='serif';
  return (
    <>
      <SectionLabel
        kicker={lang==='ko'?'코멘터리':'COMMENTARY'}
        title={lang==='ko'?'전략팀 해설':'Strategy Note'}
      />
      <Card>
        <div style={{ display:'flex', gap:12, alignItems:'center', marginBottom:14 }}>
          <div style={{
            width:34, height:34, borderRadius:'50%',
            background: dark? '#fff':'#0E0E10', color: dark? '#000':'#fff',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontSize:12, fontWeight:600, letterSpacing:0.2,
            fontFamily:'"Inter Tight", system-ui',
          }}>{COMMENTARY.initials}</div>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontSize:13, fontWeight:600, color:p.text, letterSpacing:-0.2 }}>
              {COMMENTARY.author}
            </div>
            <div style={{ fontSize:11, color:p.faint, fontFamily:'"JetBrains Mono", monospace', marginTop:1 }}>
              15:45 · {TODAY.dateEn}
            </div>
          </div>
          <span style={{
            fontSize:10, letterSpacing:'0.14em', padding:'4px 8px',
            border:`1px solid ${p.line2}`, borderRadius:6, color:p.muted,
            fontFamily:'"JetBrains Mono", monospace',
          }}>{COMMENTARY.conviction.toUpperCase()}</span>
        </div>
        <p style={{
          margin:0, fontSize: serif?16:14,
          lineHeight: serif?1.55:1.55, color:p.text,
          letterSpacing:-0.1, textWrap:'pretty',
          fontFamily: serif? '"Fraunces", Georgia, serif' : '"Inter Tight", system-ui',
          fontWeight: serif? 380: 400,
        }}>{COMMENTARY[lang]}</p>
        <div style={{
          marginTop:16, paddingTop:14, borderTop:`0.5px solid ${p.line}`,
          display:'flex', gap:16, alignItems:'center',
        }}>
          <div>
            <div style={{ fontSize:10, color:p.faint, letterSpacing:'0.14em', fontFamily:'"JetBrains Mono", monospace' }}>
              {lang==='ko'?'포지션':'POSTURE'}
            </div>
            <div style={{ fontSize:12, color:p.text, marginTop:3, fontWeight:500 }}>
              {COMMENTARY.posture}
            </div>
          </div>
        </div>
      </Card>
    </>
  );
}

// ============ 7. 내일의 일정 ============
function Tomorrow() {
  const { dark, lang } = useTheme();
  const p = palette(dark);
  return (
    <>
      <SectionLabel
        kicker={lang==='ko'?'내일':'AHEAD'}
        title={lang==='ko'?'주요 일정':"What's Next"}
        right={'Apr 21'}
      />
      <Card padded={false}>
        {TOMORROW.map((r,i)=>(
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'92px 1fr 28px',
            gap:10, alignItems:'center', padding:'12px 18px',
            borderBottom: i===TOMORROW.length-1? 'none' : `0.5px solid ${p.line}`,
          }}>
            <div style={{
              fontFamily:'"JetBrains Mono", monospace', fontSize:11,
              color:p.muted, fontVariantNumeric:'tabular-nums',
            }}>{r.t}</div>
            <div style={{ fontSize:14, color:p.text, letterSpacing:-0.2 }}>{r.evt}</div>
            <div style={{ textAlign:'right' }}>
              <ImpBadge level={r.imp}/>
            </div>
          </div>
        ))}
      </Card>
    </>
  );
}

// ============ 헤더 (날짜 + 실시간 시각) ============
function ReportHeader() {
  const { dark, lang, type } = useTheme();
  const p = palette(dark);
  const serif = type==='serif';
  const [now, setNow] = React.useState(()=> new Date());
  React.useEffect(()=>{
    const id = setInterval(()=> setNow(new Date()), 1000);
    return ()=> clearInterval(id);
  }, []);

  const pad = (n)=> String(n).padStart(2,'0');
  const hh = pad(now.getHours());
  const mm = pad(now.getMinutes());
  const ss = pad(now.getSeconds());
  const timeStr = `${hh}:${mm}:${ss}`;

  const y = now.getFullYear();
  const mo = now.getMonth()+1;
  const d = now.getDate();
  const weekdaysKo = ['일','월','화','수','목','금','토'];
  const weekdaysEn = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  const wd = now.getDay();
  const dateKo = `${y}년 ${mo}월 ${d}일 (${weekdaysKo[wd]})`;
  const monthsEn = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  const dateEn = `${monthsEn[mo-1]} ${d}, ${y} · ${weekdaysEn[wd]}`;

  return (
    <div style={{ padding:'8px 26px 8px' }}>
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'center',
        marginBottom:20,
      }}>
        <div style={{
          fontSize:11, letterSpacing:'0.16em', color:p.faint,
          fontFamily:'"JetBrains Mono", monospace',
        }}>{lang==='ko'?'일일 시장 보고서':'DAILY MARKET REPORT'}</div>
        <div style={{
          fontSize:11, color:p.text,
          fontFamily:'"JetBrains Mono", monospace',
          fontVariantNumeric:'tabular-nums',
          display:'inline-flex', alignItems:'center', gap:6,
        }}>
          <span style={{
            width:6, height:6, borderRadius:'50%',
            background: p.inkUp,
            boxShadow:`0 0 0 3px rgba(111,215,196,0.18)`,
          }}/>
          {timeStr}
        </div>
      </div>
      <div style={{
        fontFamily: serif? '"Fraunces", Georgia, serif' : '"Inter Tight", system-ui',
        fontSize: serif? 22:20, fontWeight: serif? 400: 500,
        letterSpacing:-0.4, color:p.text, lineHeight:1.15,
      }}>{lang==='ko'? dateKo : dateEn}</div>
    </div>
  );
}

// ============ 거래량 급등 TOP5 (1주 기준) ============
function VolumeSurge({ onPickStock }) {
  const { dark, lang } = useTheme();
  const p = palette(dark);
  const maxMult = Math.max(...VOL_SURGE.map(v=>v.volMult));

  return (
    <>
      <SectionLabel
        kicker={lang==='ko'?'거래량 급등':'VOLUME SURGE'}
        title={lang==='ko'?'1주 거래량 TOP 5':'1W Volume TOP 5'}
        right={lang==='ko'?'60일 평균 대비':'vs 60d avg'}
      />
      <Card padded={false}>
        {/* header row */}
        <div style={{
          padding:'10px 16px 8px',
          display:'grid', gridTemplateColumns:'18px 1fr 74px 52px',
          gap:10, alignItems:'center',
          fontSize:9, letterSpacing:'0.12em', color:p.faint,
          fontFamily:'"JetBrains Mono", monospace',
        }}>
          <div>#</div>
          <div>{lang==='ko'?'종목':'NAME'}</div>
          <div>{lang==='ko'?'배수':'MULTIPLE'}</div>
          <div style={{ textAlign:'right' }}>{lang==='ko'?'등락':'CHG'}</div>
        </div>
        {VOL_SURGE.map((v,i)=>{
          const w = (v.volMult / maxMult) * 100;
          const note = lang==='ko'? v.noteKo : v.noteEn;
          return (
            <button key={v.sym}
              onClick={()=> onPickStock && onPickStock(v)}
              style={{
                display:'grid', gridTemplateColumns:'18px 1fr 74px 52px',
                alignItems:'center', gap:10, padding:'12px 16px',
                width:'100%', textAlign:'left', appearance:'none',
                background:'transparent', border:'none', cursor:'pointer',
                borderTop:`0.5px solid ${p.line}`, font:'inherit',
              }}
            >
              <div style={{
                fontFamily:'"JetBrains Mono", monospace', fontSize:10,
                color:p.faint, fontVariantNumeric:'tabular-nums',
              }}>{String(i+1).padStart(2,'0')}</div>
              <div style={{ minWidth:0 }}>
                <div style={{
                  fontSize:13, fontWeight:600, color:p.text, letterSpacing:-0.2,
                  overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
                }}>{v.name}</div>
                <div style={{
                  fontFamily:'"JetBrains Mono", monospace', fontSize:10,
                  color:p.faint, marginTop:2,
                  overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap',
                }}>{v.sym} · {v.avgVol}</div>
                <div style={{
                  fontSize:11, color:p.muted, lineHeight:1.35,
                  marginTop:4, letterSpacing:-0.1,
                  overflow:'hidden', display:'-webkit-box',
                  WebkitLineClamp:2, WebkitBoxOrient:'vertical',
                }}>{note}</div>
              </div>
              <div>
                <div style={{
                  fontFamily:'"JetBrains Mono", monospace',
                  fontSize:13, fontWeight:600, color:p.text,
                  fontVariantNumeric:'tabular-nums', letterSpacing:-0.1,
                }}>{v.volMult.toFixed(1)}×</div>
                <div style={{
                  marginTop:4, height:3, borderRadius:2,
                  background: p.surface2, overflow:'hidden',
                }}>
                  <div style={{
                    width:`${w}%`, height:'100%', background:p.inkUp,
                  }}/>
                </div>
              </div>
              <div style={{ textAlign:'right' }}>
                <Delta pct={v.pct} size={11}/>
              </div>
            </button>
          );
        })}
      </Card>
    </>
  );
}

Object.assign(window, {
  Headlines, IndexSnapshot, SectorHeatmap, SectorSheet, MoversList,
  TimelineSection, Commentary, Tomorrow, ReportHeader, VolumeSurge,
});