hoelee-blog/src/components/ExecutiveSummary.astro

---
interface Props {
  summary?: {
    audience: string;
    painPoint: string;
    impact: { metric: string; detail: string }[];
    stack: string[];
    jumpLinks?: { business?: string; architecture?: string; result?: string };
  };
  lang?: 'en' | 'zh';
}

const { summary, lang = 'en' } = Astro.props;
if (!summary) return null;

const labels = lang === 'zh' ? {
  badge: '⚡ 核心速览 · Executive Summary',
  for: '适用读者：',
  problem: '核心痛点',
  impact: '交付成果与指标',
  stack: '涉及技术栈',
  nav: '快速跳读',
  btnBiz: '看商业/交付结果 ↓',
  btnArch: '看系统架构与排障 ↓',
  btnLesson: '看复盘与避坑指南 ↓'
} : {
  badge: '⚡ Executive Summary',
  for: 'Target Audience:',
  problem: 'The Problem',
  impact: 'Key Outcomes & Metrics',
  stack: 'Architecture Stack',
  nav: 'Quick Jump',
  btnBiz: 'Business Outcome ↓',
  btnArch: 'Architecture & Root Cause ↓',
  btnLesson: 'Lessons Learned ↓'
};
---

<aside class="exec-summary" aria-label={labels.badge}>
  <div class="exec-header">
    <span class="exec-badge">{labels.badge}</span>
    <span class="exec-audience">{labels.for} <strong>{summary.audience}</strong></span>
  </div>
  
  <div class="exec-problem">
    <span class="exec-problem-label">{labels.problem}:</span>
    <p class="exec-problem-text">{summary.painPoint}</p>
  </div>

  <div class="exec-grid">
    {summary.impact.map((item) => (
      <div class="exec-metric-card">
        <div class="exec-metric-val">{item.metric}</div>
        <div class="exec-metric-desc">{item.detail}</div>
      </div>
    ))}
  </div>

  <div class="exec-footer">
    <div class="exec-stack">
      <span class="exec-footer-label">{labels.stack}:</span>
      <div class="exec-pills">
        {summary.stack.map((t) => <span class="exec-pill">{t}</span>)}
      </div>
    </div>
    {summary.jumpLinks && (
      <div class="exec-jumps">
        <span class="exec-footer-label">{labels.nav}:</span>
        <div class="exec-jump-btns">
          {summary.jumpLinks.business && <a class="exec-jump-link" href={summary.jumpLinks.business}>{labels.btnBiz}</a>}
          {summary.jumpLinks.architecture && <a class="exec-jump-link" href={summary.jumpLinks.architecture}>{labels.btnArch}</a>}
          {summary.jumpLinks.result && <a class="exec-jump-link" href={summary.jumpLinks.result}>{labels.btnLesson}</a>}
        </div>
      </div>
    )}
  </div>
</aside>

<style>
  .exec-summary {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .exec-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
  }

  .exec-badge {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
  }

  .exec-audience {
    font-size: 0.88rem;
    color: var(--muted);
  }

  .exec-audience strong {
    color: var(--ink);
  }

  .exec-problem {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .exec-problem-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

  .exec-problem-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink);
  }

  .exec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }

  .exec-metric-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .exec-metric-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand);
    font-family: var(--font-mono);
  }

  .exec-metric-desc {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.45;
  }

  .exec-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
  }

  .exec-footer-label {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 0.4rem;
    display: block;
  }

  .exec-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .exec-pill {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    background: var(--surface-2);
    color: var(--ink);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border);
  }

  .exec-jump-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .exec-jump-link {
    font-size: 0.85rem;
    color: var(--brand-soft);
    text-decoration: none;
    background: var(--surface-2);
    padding: 0.3rem 0.65rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    transition: all 0.15s ease;
  }

  .exec-jump-link:hover {
    color: #ffffff;
    background: var(--brand);
    border-color: var(--brand);
  }

  @media (max-width: 640px) {
    .exec-grid {
      grid-template-columns: 1fr;
    }
  }
</style>