// Formal market briefing — refined editorial design
const { useState, useEffect, useMemo } = React;

const BRIEF = {
  bg:       '#F2EEE4',
  paper:    '#FAF7EF',
  ink:      '#1A1612',
  ink2:     '#3E362F',
  ink3:     '#6B615A',
  muted:    '#9A8F85',
  hair:     'rgba(26,22,18,0.07)',
  hairMed:  'rgba(26,22,18,0.13)',
  hairStr:  'rgba(26,22,18,0.22)',
  rule:     '#1A1612',
  up:       '#B32D1F',
  upDeep:   '#7C1E14',
  upSoft:   '#F5DDD7',
  down:     '#1C6B40',
  downSoft: '#DEE9E0',
  gold:     '#9A7326',
  goldSoft: '#EEE1C2',
  cream:    '#F7EFD9',
  serif:    '"Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif',
  sans:     '"Inter", "Noto Sans SC", "PingFang SC", system-ui, sans-serif',
  mono:     '"JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace',
};

const Mono = ({ children, size = 12, color, style = {} }) => (
  <span style={{
    fontFamily: BRIEF.mono, fontSize: size, letterSpacing: 1.4,
    textTransform: 'uppercase', color: color || BRIEF.muted,
    ...style,
  }}>{children}</span>
);

const SectionHead = ({ num, zh, en, kicker }) => (
  <div style={{ padding: '34px 20px 14px' }}>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 8 }}>
      <span style={{
        fontFamily: BRIEF.mono, fontSize: 11.5, fontWeight: 600,
        color: BRIEF.up, letterSpacing: 2,
      }}>§ {num}</span>
      <span style={{ flex: 1, height: 1, background: BRIEF.hairMed }} />
      <Mono size={10.5}>{en}</Mono>
    </div>
    <div style={{
      fontFamily: BRIEF.serif, fontSize: 26, fontWeight: 700, color: BRIEF.ink,
      letterSpacing: 0.5, lineHeight: 1.1,
    }}>{zh}</div>
    {kicker && (
      <div style={{
        fontFamily: BRIEF.serif, fontSize: 14,
        color: BRIEF.ink3, marginTop: 5, letterSpacing: 0.3,
      }}>{kicker}</div>
    )}
  </div>
);

const Tag = ({ children, tone = 'neutral' }) => {
  const map = {
    'up-strong': { bg: BRIEF.up, fg: '#fff' },
    'up':        { bg: BRIEF.upSoft, fg: BRIEF.upDeep },
    'down':      { bg: BRIEF.downSoft, fg: BRIEF.down },
    'flat':      { bg: 'transparent', fg: BRIEF.ink2, border: BRIEF.hairMed },
    'neutral':   { bg: 'transparent', fg: BRIEF.muted, border: BRIEF.hair },
    'confirm':   { bg: BRIEF.ink, fg: BRIEF.cream },
    'warn':      { bg: BRIEF.goldSoft, fg: BRIEF.gold },
    'positive':  { bg: BRIEF.upSoft, fg: BRIEF.upDeep },
    'caution':   { bg: BRIEF.downSoft, fg: BRIEF.down },
  };
  const s = map[tone] || map.neutral;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
      fontFamily: BRIEF.sans, fontSize: 12, fontWeight: 600,
      padding: '4px 9px', borderRadius: 3,
      background: s.bg, color: s.fg,
      border: s.border ? `1px solid ${s.border}` : 'none',
      letterSpacing: 0.3, whiteSpace: 'nowrap',
    }}>{children}</span>
  );
};

function Masthead({ d }) {
  return (
    <div style={{
      padding: '28px 20px 20px',
      background: `linear-gradient(180deg, ${BRIEF.paper} 0%, ${BRIEF.bg} 100%)`,
      borderBottom: `3px double ${BRIEF.rule}`,
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 18, paddingBottom: 10,
        borderBottom: `1px solid ${BRIEF.hair}`,
      }}>
        <Mono size={10.5}>Vol. 047</Mono>
        <Mono size={10.5}>Est. MMXXV</Mono>
        <Mono size={10.5}>{d.dateEn}</Mono>
      </div>

      <div style={{ textAlign: 'center', marginBottom: 16 }}>
        <div style={{
          fontFamily: BRIEF.serif, fontWeight: 900, fontSize: 42, lineHeight: 1,
          color: BRIEF.ink, letterSpacing: 4, marginBottom: 10,
        }}>中国市场简报</div>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
        }}>
          <span style={{ width: 32, height: 1, background: BRIEF.hairStr }} />
          <span style={{
            fontFamily: BRIEF.serif, fontSize: 15,
            color: BRIEF.ink2, letterSpacing: 0.5,
          }}>The China Market Brief</span>
          <span style={{ width: 32, height: 1, background: BRIEF.hairStr }} />
        </div>
      </div>

      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: BRIEF.sans, fontSize: 12.5, color: BRIEF.ink2,
        paddingTop: 12, borderTop: `1px solid ${BRIEF.hair}`,
      }}>
        <span style={{ fontWeight: 500 }}>{d.date} · {d.weekday}</span>
        <span style={{ fontFamily: BRIEF.mono, fontSize: 11, color: BRIEF.muted }}>
          截至 {d.dataAsOf} · {d.tradingDay}
        </span>
      </div>
    </div>
  );
}

function Lede({ s }) {
  return (
    <div style={{ padding: '26px 20px 6px', background: BRIEF.paper }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <Mono size={11} color={BRIEF.up}>Today&apos;s Read</Mono>
        <span style={{ flex: 1, height: 1, background: BRIEF.hair }} />
      </div>
      <div style={{
        fontFamily: BRIEF.serif, fontSize: 28, fontWeight: 700,
        lineHeight: 1.25, color: BRIEF.ink, letterSpacing: 0.3,
        marginBottom: 14,
      }}>
        A股<span style={{ color: BRIEF.up }}>四指齐涨</span>,商业航天领衔,<span style={{ fontWeight: 500, color: BRIEF.ink2, marginLeft: '0.2em' }}>外围风险未消 ——</span>
      </div>
      <div style={{
        fontFamily: BRIEF.serif, fontSize: 15, lineHeight: 1.75, color: BRIEF.ink2,
        letterSpacing: 0.2,
      }}>
        <span style={{
          fontFamily: BRIEF.serif, fontSize: 52, fontWeight: 700, color: BRIEF.up,
          float: 'left', lineHeight: 0.85, marginRight: 10, marginTop: 4,
        }}>市</span>
        场情绪转入 <strong style={{ fontWeight: 700, color: BRIEF.ink }}>{s.label}</strong>。
        LPR 连续十一月持稳,流动性预期校友评估值;
        美伊紧张升级,美股纳指十三连涨告终,全球避险升温。
      </div>
    </div>
  );
}

function Sparkline({ up, w = 52, h = 18 }) {
  const pts = up
    ? [10, 8, 9, 7, 8, 5, 6, 4, 5, 2, 3, 1]
    : [2, 4, 3, 5, 4, 7, 6, 8, 7, 10, 9, 11];
  const max = Math.max(...pts), min = Math.min(...pts);
  const path = pts.map((p, i) => {
    const x = (i / (pts.length - 1)) * w;
    const y = ((p - min) / (max - min)) * (h - 2) + 1;
    return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');
  const color = up ? BRIEF.up : BRIEF.down;
  return (
    <svg width={w} height={h} style={{ display: 'block' }}>
      <path d={path} stroke={color} strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      <circle cx={w} cy={((pts[pts.length-1] - min)/(max-min))*(h-2)+1} r="2" fill={color}/>
    </svg>
  );
}

function Indices({ data, summary, summaryLabel }) {
  return (
    <div>
      <SectionHead num="01" zh="主要指数" en="Key Indices" kicker="Four boards, one session" />
      <div style={{
        margin: '0 20px',
        borderTop: `1px solid ${BRIEF.hairStr}`,
        borderBottom: `1px solid ${BRIEF.hairStr}`,
      }}>
        {data.map((idx, i) => {
          const isLast = i === data.length - 1;
          return (
            <div key={idx.code} style={{
              display: 'grid', gridTemplateColumns: '1fr auto',
              padding: '16px 0', gap: 12, alignItems: 'center',
              borderBottom: !isLast ? `1px solid ${BRIEF.hair}` : 'none',
            }}>
              <div>
                <div style={{
                  display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4,
                }}>
                  <span style={{
                    fontFamily: BRIEF.serif, fontSize: 16, fontWeight: 600, color: BRIEF.ink,
                  }}>{idx.name}</span>
                  <Mono size={10}>{idx.code}</Mono>
                </div>
                <div style={{
                  fontFamily: BRIEF.serif, fontSize: 28, fontWeight: 500, color: BRIEF.ink,
                  fontVariantNumeric: 'tabular-nums', letterSpacing: -0.3,
                  lineHeight: 1.05,
                }}>{idx.value}</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 }}>
                <Sparkline up={idx.up} />
                <span style={{
                  fontFamily: BRIEF.mono, fontSize: 13, fontWeight: 600,
                  color: idx.up ? BRIEF.up : BRIEF.down,
                  fontVariantNumeric: 'tabular-nums',
                }}>
                  {idx.up ? '▲' : '▼'} {idx.change}
                </span>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{
        margin: '18px 20px 0',
        paddingLeft: 14, borderLeft: `2px solid ${BRIEF.gold}`,
      }}>
        <div style={{
          fontFamily: BRIEF.serif, fontSize: 14, fontWeight: 700, color: BRIEF.ink2,
          letterSpacing: 0.3, marginBottom: 8,
        }}>{summaryLabel}</div>
        {summary.map((it, i) => (
          <div key={i} style={{
            display: 'flex', gap: 10, padding: '8px 0',
            borderBottom: i < summary.length - 1 ? `1px solid ${BRIEF.hair}` : 'none',
            fontFamily: BRIEF.serif, fontSize: 14, color: BRIEF.ink3,
            lineHeight: 1.6, letterSpacing: 0.2,
          }}>
            <span style={{ color: BRIEF.gold, fontWeight: 700 }}>·</span>
            <span style={{ flex: 1 }}>{it.name}</span>
            <span style={{
              fontFamily: BRIEF.mono, fontWeight: 600, fontSize: 13,
              color: it.change.startsWith('+') ? BRIEF.up : BRIEF.down,
              fontVariantNumeric: 'tabular-nums',
            }}>{it.change}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Capital({ data }) {
  return (
    <div>
      <SectionHead num="02" zh="资金面" en="Capital · Volume · Leverage" />
      <div style={{ padding: '4px 20px 0' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          borderTop: `1px solid ${BRIEF.hairStr}`,
          borderBottom: `1px solid ${BRIEF.hairStr}`,
        }}>
          {data.map((c, i) => (
            <div key={i} style={{
              padding: '18px 10px 16px',
              borderRight: i < data.length - 1 ? `1px solid ${BRIEF.hair}` : 'none',
              textAlign: 'center',
            }}>
              <Mono size={10} style={{ marginBottom: 10, display: 'block' }}>
                {['Turnover','Main Flow','Margin'][i]}
              </Mono>
              <div style={{
                fontFamily: BRIEF.serif, fontWeight: 600,
                color: c.tone === 'up' ? BRIEF.up : BRIEF.ink,
                fontVariantNumeric: 'tabular-nums', letterSpacing: -0.3,
                lineHeight: 1, marginBottom: 3,
              }}>
                <span style={{ fontSize: 24 }}>{c.value}</span>
                <span style={{ fontSize: 13, marginLeft: 3, color: BRIEF.ink2 }}>{c.unit}</span>
              </div>
              <div style={{
                fontFamily: BRIEF.serif, fontSize: 13, fontWeight: 600, color: BRIEF.ink2,
                marginTop: 8, letterSpacing: 0.3,
              }}>{c.label}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14 }}>
          {data.map((c, i) => (
            <div key={i} style={{
              display: 'flex', gap: 10, padding: '6px 0',
              fontFamily: BRIEF.sans, fontSize: 13, color: BRIEF.ink3,
              lineHeight: 1.55, letterSpacing: 0.1,
            }}>
              <span style={{ color: BRIEF.muted, fontFamily: BRIEF.mono, fontSize: 11 }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              <span><strong style={{ color: BRIEF.ink2, fontWeight: 600 }}>{c.label}</strong> · {c.note}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Sentiment({ s }) {
  return (
    <div>
      <SectionHead num="03" zh="盘前情绪" en="Pre-Market Sentiment" />
      <div style={{ padding: '4px 20px 0' }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 16, marginBottom: 20, padding: '18px 0',
          background: BRIEF.paper,
          borderTop: `1px solid ${BRIEF.hairStr}`,
          borderBottom: `1px solid ${BRIEF.hairStr}`,
        }}>
          <Mono size={11}>Signal</Mono>
          <span style={{
            fontFamily: BRIEF.serif, fontSize: 24, fontWeight: 700, color: BRIEF.up,
            letterSpacing: 1.2,
          }}>{s.label}</span>
          <div style={{ display: 'flex', gap: 4 }}>
            {[1,1,1,0,0].map((v, i) => (
              <span key={i} style={{
                width: 8, height: 8, borderRadius: '50%',
                background: v ? BRIEF.up : BRIEF.hairMed,
              }} />
            ))}
          </div>
        </div>
        {s.notes.map((n, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '82px 1fr',
            padding: '13px 0', gap: 14,
            borderBottom: i < s.notes.length - 1 ? `1px solid ${BRIEF.hair}` : 'none',
          }}>
            <div style={{
              fontFamily: BRIEF.serif, fontSize: 13, fontWeight: 700, color: BRIEF.gold,
              letterSpacing: 0.8, paddingTop: 2,
              borderRight: `1px solid ${BRIEF.hairMed}`, paddingRight: 10,
              textAlign: 'right',
            }}>{n.cat}</div>
            <div style={{
              fontFamily: BRIEF.sans, fontSize: 13.5, color: BRIEF.ink2,
              lineHeight: 1.6, letterSpacing: 0.1,
            }}>{n.text}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Events({ data }) {
  const tagTone = {
    '已发布': { fg: BRIEF.muted, bar: BRIEF.muted },
    '今日':   { fg: BRIEF.up, bar: BRIEF.up },
    '本周':   { fg: BRIEF.gold, bar: BRIEF.gold },
  };
  return (
    <div>
      <SectionHead num="04" zh="重要数据与事件" en="Data & Events" />
      <div style={{ padding: '4px 20px 0' }}>
        {data.map((e, i) => {
          const t = tagTone[e.tag];
          return (
            <div key={i} style={{
              position: 'relative',
              padding: '16px 0 16px 16px',
              borderLeft: `3px solid ${t.bar}`,
              borderBottom: i < data.length - 1 ? `1px solid ${BRIEF.hair}` : 'none',
            }}>
              <div style={{
                display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 6,
              }}>
                <span style={{
                  fontFamily: BRIEF.serif, fontSize: 13, fontWeight: 700,
                  color: t.fg, letterSpacing: 1,
                }}>{e.tag}</span>
                <Mono size={10}>Item {String(i + 1).padStart(2, '0')}</Mono>
              </div>
              <div style={{
                fontFamily: BRIEF.serif, fontSize: 14.5, color: BRIEF.ink,
                lineHeight: 1.6, letterSpacing: 0.2,
              }}>{e.text}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function SectorRow({ s, i, open, onToggle }) {
  return (
    <div style={{
      borderBottom: `1px solid ${BRIEF.hair}`,
      background: open ? BRIEF.paper : 'transparent',
      transition: 'background 180ms ease',
    }}>
      <div onClick={onToggle} style={{
        display: 'grid', gridTemplateColumns: '32px 1fr auto',
        padding: '16px 20px', gap: 12, cursor: 'pointer', alignItems: 'center',
      }}>
        <div style={{
          fontFamily: BRIEF.serif, fontSize: 20, fontWeight: 700, color: BRIEF.up,
          fontVariantNumeric: 'tabular-nums',
        }}>{String(i + 1).padStart(2, '0')}</div>
        <div>
          <div style={{
            fontFamily: BRIEF.serif, fontSize: 18, fontWeight: 700, color: BRIEF.ink,
            letterSpacing: 0.4, marginBottom: 3,
          }}>{s.name}</div>
          <div style={{
            fontFamily: BRIEF.mono, fontSize: 10.5, color: BRIEF.muted,
            letterSpacing: 0.4,
          }}>{s.tickers}</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Tag tone={s.signal.tone}>{s.signal.label}</Tag>
          <span style={{
            fontFamily: BRIEF.mono, fontSize: 13, color: BRIEF.muted,
            transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
            transition: 'transform 180ms ease', display: 'inline-block', width: 10,
          }}>›</span>
        </div>
      </div>
      <div style={{
        maxHeight: open ? 300 : 0, overflow: 'hidden',
        transition: 'max-height 260ms ease',
      }}>
        <div style={{ padding: '0 20px 20px 64px' }}>
          <div style={{
            fontFamily: BRIEF.serif, fontSize: 14, color: BRIEF.ink2, lineHeight: 1.65, marginBottom: 14,
            letterSpacing: 0.2,
          }}>
            <span style={{ color: BRIEF.gold, marginRight: 4 }}>“</span>
            {s.thesis}
            <span style={{ color: BRIEF.gold, marginLeft: 2 }}>”</span>
          </div>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            gap: 12, padding: '12px 14px',
            background: '#fff', border: `1px solid ${BRIEF.hair}`,
          }}>
            <div>
              <Mono size={10} style={{ display: 'block', marginBottom: 6 }}>Price Action</Mono>
              <Tag tone={s.price.tone}>{s.price.label}</Tag>
            </div>
            <div>
              <Mono size={10} style={{ display: 'block', marginBottom: 6 }}>Main Flow</Mono>
              <Tag tone={s.flow.tone}>{s.flow.label}</Tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Sectors({ data }) {
  const [open, setOpen] = useState(0);
  return (
    <div>
      <SectionHead num="05" zh="板块动向" en="Sector Watch" kicker="Price × Flow × Signal" />
      <div style={{
        display: 'grid', gridTemplateColumns: '32px 1fr auto',
        padding: '12px 20px', gap: 12,
        borderTop: `1px solid ${BRIEF.hairStr}`,
        borderBottom: `1px solid ${BRIEF.hair}`,
        margin: '8px 0 0',
      }}>
        <Mono size={10}>№</Mono>
        <Mono size={10}>Sector / Tickers</Mono>
        <Mono size={10}>Signal</Mono>
      </div>
      {data.map((s, i) => (
        <SectorRow
          key={s.name} s={s} i={i}
          open={open === i}
          onToggle={() => setOpen(open === i ? -1 : i)}
        />
      ))}
    </div>
  );
}

function Overseas({ o }) {
  const rowStyle = {
    display: 'grid', gridTemplateColumns: '100px 1fr auto',
    padding: '10px 0', gap: 12, alignItems: 'baseline',
    fontFamily: BRIEF.mono, fontSize: 13,
    fontVariantNumeric: 'tabular-nums',
  };
  const IndexList = ({ items, showValue = false }) => (
    <div style={{ marginTop: 6 }}>
      {items.map((it, i) => (
        <div key={i} style={{
          ...rowStyle,
          borderTop: i > 0 ? `1px solid ${BRIEF.hair}` : 'none',
        }}>
          <span style={{
            fontFamily: BRIEF.serif, fontSize: 14, fontWeight: 600, color: BRIEF.ink,
            letterSpacing: 0.3,
          }}>{it.name}</span>
          <span style={{ color: BRIEF.ink2 }}>
            {showValue ? it.value : ''}
            {it.note && (
              <span style={{
                fontFamily: BRIEF.sans, fontSize: 12,
                color: BRIEF.muted, marginLeft: showValue ? 8 : 0,
              }}>{it.note}</span>
            )}
          </span>
          <span style={{
            color: it.up ? BRIEF.up : BRIEF.down, fontWeight: 600,
          }}>
            {it.up ? '▲' : '▼'} {it.change}
          </span>
        </div>
      ))}
    </div>
  );
  return (
    <div>
      <SectionHead num="06" zh="外围市场" en="Overseas Markets" />
      <div style={{ padding: '4px 20px 0' }}>
        <div style={{
          padding: '16px 0',
          borderBottom: `1px solid ${BRIEF.hair}`,
        }}>
          <div style={{
            display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4,
          }}>
            <span style={{
              fontFamily: BRIEF.serif, fontSize: 14, fontWeight: 700, color: BRIEF.ink,
              letterSpacing: 0.4,
            }}>美股(4/20收盘)</span>
            <Mono size={10}>US Close</Mono>
          </div>
          <IndexList items={o.usPrev} showValue />
        </div>

        <div style={{
          padding: '16px 0',
          borderBottom: `1px solid ${BRIEF.hair}`,
        }}>
          <div style={{
            display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4,
          }}>
            <span style={{
              fontFamily: BRIEF.serif, fontSize: 14, fontWeight: 700, color: BRIEF.down,
              letterSpacing: 0.4,
            }}>美股期指(盘前)</span>
            <Mono size={10}>US Futures</Mono>
          </div>
          <IndexList items={o.usFutures} />
          <div style={{
            marginTop: 10, paddingTop: 10,
            borderTop: `1px solid ${BRIEF.hair}`,
            fontFamily: BRIEF.sans, fontSize: 13, color: BRIEF.ink3,
            lineHeight: 1.6, letterSpacing: 0.1,
          }}>
            {o.usFuturesNote.map((line, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, padding: '3px 0' }}>
                <span style={{ color: BRIEF.gold, fontWeight: 700 }}>·</span>
                <span>{line}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ padding: '16px 0' }}>
          <div style={{
            display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4,
          }}>
            <span style={{
              fontFamily: BRIEF.serif, fontSize: 14, fontWeight: 700, color: BRIEF.ink,
              letterSpacing: 0.4,
            }}>欧股</span>
            <Mono size={10}>Europe</Mono>
          </div>
          <IndexList items={o.europe} />
        </div>
      </div>
    </div>
  );
}

function Colophon() {
  return (
    <div style={{
      margin: '36px 20px 0', padding: '24px 0 30px',
      borderTop: `3px double ${BRIEF.rule}`,
      textAlign: 'center',
    }}>
      <div style={{
        fontFamily: BRIEF.serif, fontSize: 13, fontWeight: 700, color: BRIEF.ink,
        letterSpacing: 3, marginBottom: 12, textTransform: 'uppercase',
      }}>— Sources · 资料来源 —</div>
      <div style={{
        fontFamily: BRIEF.mono, fontSize: 11, color: BRIEF.muted,
        lineHeight: 1.8, letterSpacing: 0.8, marginBottom: 20,
      }}>
        Yahoo Finance · Trading Economics<br/>
        CNBC · 新华社 · 东方财富
      </div>
      <div style={{
        fontFamily: BRIEF.serif, fontSize: 12, color: BRIEF.muted,
        lineHeight: 1.65, padding: '14px 16px 0',
        borderTop: `1px solid ${BRIEF.hair}`,
      }}>
        由 Claude 自动生成。<br/>
        仅供参考,不构成任何投资建议。
      </div>
      <div style={{
        fontFamily: BRIEF.mono, fontSize: 10, color: BRIEF.muted,
        letterSpacing: 2, marginTop: 18, textTransform: 'uppercase',
      }}>— End of Brief —</div>
    </div>
  );
}

function Brief() {
  const d = window.marketData;
  return (
    <div style={{
      background: BRIEF.bg, color: BRIEF.ink,
      fontFamily: BRIEF.sans, minHeight: '100%',
      paddingBottom: 40,
      backgroundImage:
        `radial-gradient(ellipse at top, ${BRIEF.paper} 0%, transparent 40%),
         repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(26,22,18,0.008) 3px, rgba(26,22,18,0.008) 4px)`,
    }}>
      <Masthead d={d} />
      <Lede s={d.sentiment} />
      <Indices data={d.indices} summary={d.weekSummary} summaryLabel={d.weekSummaryLabel} />
      <Capital data={d.capital} />
      <Sentiment s={d.sentiment} />
      <Events data={d.events} />
      <Sectors data={d.sectors} />
      <Overseas o={d.overseas} />
      <Colophon />
    </div>
  );
}

window.Brief = Brief;
window.BRIEF = BRIEF;